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(此时中断其他正在执行的代码《如果有正在执行的代码的话》),最后再执行剩余代码。
 
 
 
 
 
 
 
 
posted @ 2017-08-11 10:25 HelenJ 阅读(...) 评论(...) 编辑 收藏