jquery寻找节点

1，最基础的选择节点：

$("p")//引号第一个无特殊字符，在页面中选取全部 <p> 元素:
$(".test")//在引号中第一个字符为“.”，即选择的是class="xx"的节点
$("#test")//在引号中第一个字符为“#”，即选择的是id="test"的节点

//标签不惟一，若是找到符合标签的有多个，则会返回全部符合条件的节点。

//id是惟一的，若是找到符合id的有多个，则只会返回一个。

//class不惟一，若是找到符合id的有多个，则会返回全部符合条件的节点。

2，寻找附近相关节点

$("#test1").parent(); // 父节点
$("#test1").parents(); // 所有父节点
$("#test1").parents(".mui-content");//返回class为mui-content的父节点
$("#test1").children(); // 所有子节点
$("#test1").children("#test1"); //返回id为test1的子节点
$("#test1").contents(); // 返回id为test1里面的全部内容，包括节点和文本
$("#test1").contents("#test1"); //返回id为test里面的id为#test1的节点和文本
$("#test1").prev();  // 上一个兄弟节点
$("#test1").prevAll(); // 以前全部兄弟节点
$("#test1").next(); // 下一个兄弟节点
$("#test1").nextAll(); // 以后全部兄弟节点
$("#test1").siblings(); // 全部兄弟节点
$("#test1").siblings("#test2"); //返回id为test2的兄弟节点
$("#test").find("#test1"); //选中id为test后代中 id为test1的节点

3，class="test"的多个兄弟节点，从中选取：

$(".test").eq(1); // 选取class为test1中匹配的索引顺序为1的元素(也就是第2个li元素)
$(".test").first(); // 选取class为test1中匹配的第一个元素
$(".test").last(); // 选取class为test1中匹配的最后一个元素
$(".test").slice(1, 4); // 选取第2 ~ 4个元素
$(".test").filter(":even"); // 选取class为test中全部奇数顺序的元素
$(".test").filter(":odd"); // 选取class为test中全部偶数顺序的元素

4，选择器选取节点：

$("p:first")//选取第一个 <p> 元素
$("p>.test")//选取父元素为p的class为test的子节点
$("div+p")//选择全部紧接着<div>元素以后的<p>元素
$("ul li:first")//选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")//选取每一个 <ul> 元素的第一个 <li> 元素
$("[href]")//选取带有 href 属性的元素
$("a[href='www.baidu.com']")//选取全部 href 属性值等于 "www.baidu.com" 的 <a> 元素
$("a[href!=www.baidu.com']")//选取全部 target 属性值不等于 "www.baidu.com" 的 <a> 元素
$(":button")//选取全部 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")//选取偶数位置的 <tr> 元素
$("tr:odd")//选取奇数位置的 <tr> 元素

选择器有不少，经常使用的就几个。

5,比较特殊的选取节点：

$("*")//选取全部元素
$(this)//选取当前 HTML 元素
$("p.intro")//选取 class 为 intro 的 <p> 元素（p和.intro紧邻，是同一级关系）
$(".index.intro")//选取 class 同时为 index 和 intro 的元素（.index和.intro紧邻，也是同一级关系）

注意的是JavaScript得到的节点并不等于jquery节点。

经过javascript的getElementsByTagName获取到的节点的元素是一个dom合集对象 ， 经过jQuery生成的对象是一个作了包装处理的对象 。

注意上面的方法 返回的是jquery 集合 须要继续用jq的方法操做或取值。

若是想要转为dom 直接操做的只须要 取它的下标便可。

$("#test1").parent()[0] //返回的就是dom节点

 

参考文章：

http://www.javashuo.com/article/p-dmtdowxi-gv.html

https://www.runoob.com/jquery/jquery-selectors.html