Js和Jquery獲取節點、屬性等
阿新 • • 發佈:2018-11-09
1、 獲取和設定屬性
Jquery:
$("#testid").attr("value"); //獲取屬性為value的值
$("#testid").attr("value","1"); //設定屬性為value的值
$("#testid").removeAttr("value"); //刪除value屬性
Js:
document.getElementById("testid").getAttribute("value"); //獲取屬性 document.getElementById("testid").attributes["value"].nodeValue;//獲取屬性 document.getElementById("testid").setAttribute("value","1"); //設定屬性 document.getElementById("testid").removeAttribute ("value"); //刪除屬性
2、獲取節點
Jquery:
$("#testid").parent(); //父節點 $("#testid").parents("div"); //所有祖先節點 $("#testid").prev(); //上一個兄弟節點 $("#testid").prevAll(); //之前所有的兄弟節點 $("#testid").next(); //下一個兄弟節點 $("#testid").nextAll(); //之後所有的兄弟節點 $("#testid").siblings(); //所有的兄弟節點 $("#testid").children("div"); //返回直接的兒子節點,沒有孫子節點 $("#testid").find("p"); //查詢testid下的所有p節點
Js:
var testdom=document.getElementById("testid");
testdom.parentNode; //獲取父節點
testdom.previousSibling; //獲取上一個兄弟階段
testdom.nextSibling; //獲取下一個兄弟節點
testdom.childNodes; //獲取該節點下的所有子節點
testdom.childNodes[1]; //獲取該節點下的第二個子節點
testdom.firstChild; //獲取第一個子節點
testdom.lastChild; //獲取最後一個子節點
3、class的設定
Js
<div id="testid" class="wl-active wl-data wl-day wl-hour wl-min"></div >
var testdom=document.getElementById("testid");
//獲取class的所有值:
var testclasslist=testdom.classList;//wl-active wl-data wl-day wl-hour wl-min
//給現有的class新增class
testdom+=" wl-second"; //注意空格
Jquery
$("#testid").addclass("wl-year"); //新增class
$("#testid").removeClass("wl-year"); //刪除class
$("#testid").toggleClass("wl-year"); //如果有則刪除,如果沒有則新增
$("#testid").toggleClass("wl1 wl2"); //如果是兩個class進行切換,則放兩個名稱就ok了
$("#testid").hasClass("wl-year"); //判斷是否有該class,返回bool型別值
$("#testid").is(".wl-year"); //同上,注意寫法