JavaScript基础学习--02属性操作

一、思路

1、模拟手机聊天思路:

     a.静态页面html+css,包括双发短信发送成功后的基本样式。

     b.获取头像、输入框、发送按钮和聊天内容显示界面等需要操作的对象。

     c.点击发送按钮,获取输入框内容和头像信息,将输入框内容和现有内容以字符串拼接,并根据头像信息(belongs)判断发送内容显示位置。

     d.当输入内容为空时,弹出“请输入内容”警示框;否则将聊天内容显示界面信息替换成c拼接出的信息。

     e.点击头像图片,获取现有头像信息(data-belongs),判断是哪一方头像。用if条件判断,如果是甲方(one),则将头像替换成乙方(starts2.jpg),并头像信息切换成乙方信息(two);否则换成甲方(starts1.jpg[one])。

二、属性操作要点:

1、属性获取直接以(obj.属性名)的方式,注意点是属性名不可出现(-),以驼峰法变幻,如(Odiv.font-size 错误! --》Odiv.fontSize)

2、class 不是属性(width、src、style),也不是关键字(var),而是保留字,所以Object.class=XX错误,--》Object.className

3、所有的相对路径都别拿来做判断,例如img/1.jpg , 绝对路径可以,例如http://www.baidu.com

4、颜色值、innerHTML值也别做判断,因为每个浏览器解析不同

5、对button按钮操作js:    

     oInput.type = 'checkbox'     IE8及以下不支持此js!!属性动态修改。     解决办法:点击后将input type=‘button’隐藏,显示checkbox即可。

6、object.style.float = 'left' 此js写法不兼容所有浏览器,所以

     法1:object.style.styleFloat = 'left' + object.style.cssFloat = 'left' 

     法2:用className方法进行属性添加即可。

7、js中允许所有(.)替换成(【】),且(.)后面的值无法修改(必须是非变量),

     如:var thisVal = oAttr.value;  ob.style.thisVal = XX 错误(这种做法相当于给元素增加了新属性thisVal),--》ob.style[oAttr.value] = XX 即可。

8、css样式多人协作时     .helenContant #id{……}     但是单独确定不会id冲突的情况下直接写成     #id{……}     即可。

9、透明度

     filter: alpha(opacity:80);

     (兼容IE) opacity:0.8;

10、word-wrap和word-break区别:<注:中文一般主动换行,西文单词需要设置>

     (1)word-wrap: break-word;      当西文单词太长,首先考虑换行,如果换行还太长,强制在该行断句。

     (2)word-break: break-all;          当西文单词太长,强制断句。

     (3)综上,考虑外文可读性,用word-wrap: break-word;     为了省空间,无需考虑任何问题,强制断句,用word-break: break-all;

11、white-space: nowrap; 处理元素内的空白,只在一行内显示(不换行)。    

      overflow: hidden;超出部分隐藏。    

     text-overflow: ellipsis;超出部分省略号显示。

 1 //必须全部书写
 2         p{
 3             overflow: hidden;
 4             text-overflow:ellipsis;
 5             white-space: nowrap;
 6         }
 7  
 8            .unilineText {  /*设置文本为单行,如果超出长度用省略号代替*/
 9                 width: 300px;
10                 overflow: hidden;
11                 text-overflow: ellipsis;
12                 -o-text-overflow: ellipsis;
13                 -webkit-text-overflow: ellipsis;
14                 -moz-text-overflow: ellipsis;
15                 white-space: nowrap;  /*规定段落中的文本不进行换行*/
16             }
17  
18            .multiLineText {  /*设置文本为多行,如果超出长度用省略号代替*/
19                 width: 200px;
20                 word-break: break-all;
21                 display: -webkit-box;
22                 -webkit-line-clamp: 3;  /*限制在一个块元素显示的文本的行数*/
23                 -webkit-box-orient: vertical;
24                 overflow: hidden;
25             }
26          

12、滚动条随着内容的增多,一直显示在最底部:

     document.getElementById("滚动条所在层的id").scrollTop=document.getElementById("滚动条所在层的id").scrollHeight;

二、条件判断要点:

1、要用条件判断但是没有合适的判断语句的时候,创建条件。         

     法1:flag(1/0或true/false)判断。     例如,点击图片切换图片,此时用if条件判断,但是并没有合适的判断句,此时flag = true/false;

     法2:通过H5中的data-*判断。

     法3:通过class类的添加与减少判断。推荐!

三、其他要点:

1、表单提交按钮input和button、a的差异和选择。

     首先input(submit)和button,考虑到浏览器的通用性首选input,但是考虑到表现力(button中value和显示文字可以不同)首选button。

     其次,如果不用表单直接提交的方式(action),而是选择异步或者其他方式提交,则选择a标签。避免了

          (1)ff和opera下line-height对input['button'],button不起作用。

          (2)submit按钮在IE6下会有一些兼容的问题,不好统一。 

          (3)在按钮有一些交互效果的时候,a标签更容易实现,hover效果便可(有些浏览器只支持a标签的hover的css效果(IE6不支持button等其他hover))

     注意:a标签表单不会自动提交,需要写函数:

1 function tosubmit(){ 2 var myform=document.getElementByIdx_x("myform"); 3 myform.submit(); 4 }

     最后,在非表单提交的场合:button是按钮,a是跳转,但是某些方面a兼容性好,支持hover样式,支持line-height。

2、js执行和顺序

     2.1  函数的定义方式大体两种:定义式和赋值式

          a定义式     function fn() {……}

          b赋值式     var fn = function() {……};

          区别:

               a定义式函数即函数声明的方式,当js代码加载时,会首先对其进行预处理(首先对该函数进行从头至尾读一遍,包括函数内部的各种操作,如此一来,调用此函数时,不必先声明后使用,但是,可能会影响性能!!!)

               b赋值式函数类似于变量的定义,只是赋值,不会先执行函数内部的各种操作。所以相对于定义式函数来说性能好,但需要严格按照先定义后使用的原则。

          Fn1();                                            var Fn2 = function(){
          function Fn1(){                                        alert("Hello wild!");
              alert("Hello World!");                        }xiangyuanlu
          }                                                 Fn2();

     2.2  JavaScript是多线程or单线程?

          严格讲,js是没有多线程概念的,所有的程序都是单线程依次执行。但是例如延时执行、ajax异步加载看起来像是“多线程”,其实是“回调”,类似于操作系统中的“中断和响应”,比如ajax异步加载,代码执行到ajax部分时,代码中断并开始往下执行,当ajax请求数据返回时,再“回调”执行ajax(此时中断其他正在执行的代码《如果有正在执行的代码的话》),最后再执行剩余代码。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件开发

一个小时学会jQuery

前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法。 一、jQuery简介...

31370
来自专栏Google Dart

AngularDart4.0 高级-属性(Attribute)指令 顶

结构指令改变了视图的结构。 两个例子是NgFor和NgIf。 在“结构指令”页面中了解它们。

12510
来自专栏从零开始学自动化测试

appium+python自动化48-长按(long_press)

长按操作是经常会遇到的场景,通过driver可以直接调出long_press_keycode方法,但是这个方法是长按手机上某个按钮,比如长按电源键,长按home...

29710
来自专栏前端布道

JavaScript实现简单的双向数据绑定

双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变。反之,当UI视图改变之后相应的数据也同步...

14430
来自专栏Web 开发

来聊聊 DOM 中的Node、Element、Text

1所表示的ELEMENT_NODE 很常见,我们平时用的 div 等标签,其类型都是 ELEMENT_NODE。

10300
来自专栏雪胖纸的玩蛇日常

vue学习(3)

webpack:打包机,它能将我们的html、css、js,font,png进行打包,交给服务器。

23420
来自专栏Google Dart

AngularDart4.0 指南- 用户输入 顶

用户的操作,如点击链接,按下按钮,输入文字引发DOM事件。 本页说明如何使用Angular事件绑定语法将这些事件绑定到组件事件处理程序。

24800
来自专栏我的博客

XML和PHP

1、XML知识 Xml就是可扩展标记语言与html一样,都是通用标记语言。 用于标记电子文件使其具有结构性的标记语言,可以用来标记数据、定义数据类型,是一种允...

37470
来自专栏Alan's Lab

如何编写一个 jQuery 插件

https://github.com/zcfan/sket... 重写了本文的初步功能实现,支持一个页面多个画图板。但为简单起见,本文保持不变。

15540
来自专栏木制robot技术杂谈

常用命令行快捷键

18650

扫码关注云+社区

领取腾讯云代金券