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