Js和Jquery获取节点、属性等

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");  //同上，注意写法

https://www.cnblogs.com/cglNet/p/6272373.html

Js和Jquery获取节点、属性等

猜你喜欢