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

Demos：   https://github.com/jiangheyan/JavaScriptBase 

 

一、思路

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;超出部分省略号显示。

//必须全部书写
   　　　　 p{
        　　　　overflow: hidden;
 4　　      　　   text-overflow:ellipsis;
  　　  　　    white-space: nowrap;
    　　　　}
 
           .unilineText {  /*设置文本为单行，如果超出长度用省略号代替*/
                width: 300px;
                overflow: hidden;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                -webkit-text-overflow: ellipsis;
                -moz-text-overflow: ellipsis;
                white-space: nowrap;  /*规定段落中的文本不进行换行*/
            }
 
           .multiLineText {  /*设置文本为多行，如果超出长度用省略号代替*/
                width: 200px;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 3;  /*限制在一个块元素显示的文本的行数*/
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
         

 

 

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标签表单不会自动提交，需要写函数：

 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（此时中断其他正在执行的代码《如果有正在执行的代码的话》），最后再执行剩余代码。