js,mui,jq 操作基本的DOM
一。HTML
<ul> <li>1111111</li> <li>22222222</li> </ul>
二。CSS
li{ height: 60px; line-height: 60px; text-align: center; font-size: 14px; color: red; padding: 4px; border: 1px solid black; }
1.获取宽高：
jq：$("div").height()；
js:document.getElementsByTagName("ul")[0].getElementsByTagName("li")[0].offsetHeight；
mui:获取第一个li高度就是mui("ul li")[0].offsetHeight；第二个li就是mui("ul li")[1].offsetHeight；
备注：来看看height，scrollHeight，offsetHeight，clientHeight这几个的区别与联系：
clientHeight：理解为内容可视区域的高度，不包含border，不包含border，不包含border；padding是算在里面的。就是clientHeight=height(设置的高度) + padding - 横向滚动条的高度；
offsetHeight：offsetHeight = clientHeight + border + 横向滚动条（横向，横向，就是overflow-x:scroll出现的那个滚动条的高度，默认应该都是17px）；
scrollHeight: 经过测试，我得出：scrollHeight=clientHeight+滚动条滚动的距离(高度就是竖直滚动条滚动的距离，宽度就是横向滚动条滚动的距离)；
注意了，注意了：在mui里面，在mui里面，在mui里面，clientHeight，offsetHeight的滚动条是不算高度的，也就是offsetHeight = clientHeight + border。clientHeight=height-border；辣么在mui里面上面的li：offsetHeight=height，clientHeight就是58px；
总结：1.pc端：clientHeight=height(设置的高度) + padding - 横向滚动条的高度，如果没有滚动条就不减；offsetHeight = clientHeight + border + 横向滚动条，如果没有滚动条就不加；
2.移动端：2.1 有mui.css：offsetHeight = clientHeight + border。clientHeight=height-border；滚动条不算宽高。 （火狐浏览器里调试一定要设置成响应式设计模式哦，不然得出的高度会让你怀疑人生的）
2.2 无mui.css，只有<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />；
有无滚动条都是：clientHeight=height(设置的高度) + padding；offsetHeight=clientHeight+border；
其它浏览器版本没测试过，不知道是否是一样的。
高度明白了，宽度就是一样的道理。。。
还有：js操作dom元素什么时候加[0]。document.getElementById("")这种，因为id在页面中是唯一的一个所以，通过id来寻找的是不用加[0]的，但是document.getElementsByTagName或者document.getElementsByClassName("")这种，页面上可能含有多个，是个数组，所以需要用[ 0 ]，相当于索引一样来获取。mui类似。
jQuery有时候也会有加[0]的时候，比如$("div")[0].innerHtml = "111"，是因为innerHtml是一个DOM对象的属性，需要把jQuery对象转换成DOM对象才能使用innerHtml属性，不然会报错。其实jQuery也有自己的innerHtml方法，就是$("div").html(“111”);
2.添加和删除Class属性(mui的添加和删除感觉和原生的一样)
jq: 添加：$("ul li:nth-child(1) p").addClass("active");
删除：$("ul li").eq(0).find("p").removeClass("active");
js: 添加：document.getElementsByTagName("ul")[0].getElementsByTagName("li")[0].classList.add("active")
删除：document.getElementsByTagName("ul")[0].getElementsByTagName("li")[0].classList.remove("active")
mui: 添加：mui("ul li")[1].classList.add("active")
删除：mui("ul li")[1].classList.remove("active")
3.CSS属性的设置和获取：
jq：设置：$("ul li").css("background","red");
获取：$("ul li").css("background");
js: 设置：js设置css样式有以下几种方式：element是获取到的DOM对象
1.element.style.width="100px" //style对象下面的属性介绍http://www.w3school.com.cn/jsref/dom_obj_style.asp
2.element.style.cssText="width:100px;height:100px";//一次可以设置多个属性
3.element.setAttribute('style', 'height: 100px');
4.element.style.setProperty("background","red");
获取：1.element.style.backgroundColor //只能获取内联样式 ，但是backgroundColor非内联也可获取。注：如果是background-color这种，需要写成驼峰样式即backgroundColor。
2.element.currentStyle.height //IE浏览器获取非内嵌样式
3.在非IE浏览器：window.getComputedStyle(element，null/伪类).height；如果是element本身，那么第二个参数就是null，如果需要伪类的样式，则第二个参数为伪类。document.defaultView.getComputedStyle（element,null/伪类）一样的。
备注：做兼容：var a=element.currentStyle ? element.currentStyle : window.getComputedStyle(element, null)。看是否支持currentStyle,也就是看是否处在ie浏览器下。
mui：
其它的请看我的这篇详细文章
