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：

其它的請看我的這篇詳細文章