jQuery 操作DOM節點
阿新 • • 發佈：2018-11-03
children end inner put htm 詹姆斯 rip clas function
html 內容！
<body > <p>你最喜歡的名人是？</p> <ul> <li title="這是喬布斯"><font color="green">喬布斯</font></li> <li title="這是比爾蓋茨" class="lc">比爾蓋茨</li> <li title="這是詹姆斯高斯林">詹姆斯高斯林</li> </ul> <input type="text"id="userName"/> <input type="button" value="獲取數據" onclick="getUserName()"/> <input type="button" value="設置數據" onclick="setUserName()"/> <p id="jq" style="color: red">Jquery掉渣天</p> </body>
1. Jquery 操作 DOM 節點
- 查找節點
- 創建節點 append()
- 刪除節點 remove()
<script type
="text/javascript"> $(document).ready(function(){ // 1，查找節點 var li2=$("ul li:eq(1)"); // 獲取節點 "1"代表第二個元素 var li2_txt=li2.text(); // 獲取文本 比爾蓋茨 alert(li2_txt); // 2，創建節點 append() var li1=$("<li title=‘這是馬化騰‘>馬化騰</li>"); var li2=$("<li title=‘這是李彥宏‘>李彥宏</li>"); var li22=$("ul li:eq(1)"); $("ul").append(li1); //自動添加到最末尾 li2.insertAfter(li22); //在指定的節點後面添加，添加在"比爾蓋茨"之後 // 3，刪除節點 remove() $("ul li:eq(1)").remove(); }); </script>
2. Jquery 操作 DOM 節點屬性
- 查找屬性
- 設置屬性
- 刪除屬性
<script type="text/javascript"> $(document).ready(function(){ // 獲取屬性 var li2=$("ul li:eq(1)"); var li2_attr=li2.attr("title"); //attr 查找 title 屬性的值 alert(li2_attr); // 設置屬性 $("ul li:eq(1)").attr("title","哈哈哈"); //attr 修改 title 屬性的值 // 刪除屬性 $("ul li:eq(1)").removeAttr("title"); //removeAttr 刪除 title 屬性 </script>
3. Jquery 操作 DOM 節點樣式
- 獲取樣式
- 設置樣式
- 追加樣式
- 移除樣式
<script type="text/javascript"> $(document).ready(function(){ // 獲取樣式 var li2=$("ul li:eq(1)"); var li2_class=li2.attr("class"); //class樣式為 lc alert(li2_class); // 設置樣式 $("ul li:eq(1)").attr("class","lc2"); // 追加樣式 $("ul li:eq(1)").addClass("lc3"); // 移除樣式 $("ul li:eq(1)").removeClass("lc"); </script>
4. 設置和獲取 HTML，文本和值
- 獲取 html，設置 html
- 獲取文本，設置文本
- 獲取值，設置值
<script type="text/javascript"> $(document).ready(function(){ // 獲取html var l1_html=$("ul li:eq(0)").html(); alert(l1_html); // 設置html $("ul li:eq(0)").html("<font color=red>哈哈</font>"); // 獲取文本 var l1_text=$("ul li:eq(0)").text(); alert(l1_text); // 設置文本 $("ul li:eq(0)").text("呵呵"); }); //獲取值 function getUserName(){ var userName=$("#userName").val(); alert(userName); } //設置值 function setUserName(){ $("#userName").val("Cocoomg"); } </script>
5. 遍歷節點操作
- 獲取所有子節點 children()
- 獲取鄰近的下一個兄弟節點 next()
- 獲取鄰近的上一個兄弟節點 prev()
<script type="text/javascript"> $(document).ready(function(){ //獲取所有子節點children() var b=$("body").children(); alert(b.length); var u=$("ul").children(); alert(u.length); for(var i=0;i<u.length;i++){ // alert((u[i]).html()); //不可以，(u[i])取出的是原生（未由jQuery包裝過）的DOM節點，沒有這些功能 // alert($(u[i]).html()); //可以，用$ 包裝 alert(u[i].innerHTML); //可以 } //獲取鄰近的下一個兄弟節點next() var l=$("ul li:eq(1)").next(); alert(l.html()); //獲取鄰近的上一個兄弟節點prev() var l=$("ul li:eq(1)").prev(); alert(l.html()); }); </script>
6. Jquery 操作 DOM 節點 CSS
- 獲取 DOM 節點 CSS 樣式
- 設置 DOM 節點 CSS 樣式
<script type="text/javascript"> $(document).ready(function(){ // 獲取css樣式 var c=$("#jq").css("color"); alert(c); // 設置css樣式 $("#jq").css("color","blue"); }); </script>
jQuery 操作DOM節點