经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jquery寻找节点
来源:cnblogs  作者:特平庸青年  时间:2020/12/8 9:05:17  对本文有异议

1,最基础的选择节点:

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

//标签不唯一,如果找到符合标签的有多个,则会返回所有符合条件的节点。

//id是唯一的,如果找到符合id的有多个,则只会返回一个。

//class不唯一,如果找到符合id的有多个,则会返回所有符合条件的节点。

2,寻找附近相关节点

  1. $("#test1").parent(); // 父节点
  2. $("#test1").parents(); // 全部父节点
  3. $("#test1").parents(".mui-content");//返回class为mui-content的父节点
  4. $("#test1").children(); // 全部子节点
  5. $("#test1").children("#test1"); //返回id为test1的子节点
  6. $("#test1").contents(); // 返回id为test1里面的所有内容,包括节点和文本
  7. $("#test1").contents("#test1"); //返回id为test里面的id为#test1的节点和文本
  8. $("#test1").prev(); // 上一个兄弟节点
  9. $("#test1").prevAll(); // 之前所有兄弟节点
  10. $("#test1").next(); // 下一个兄弟节点
  11. $("#test1").nextAll(); // 之后所有兄弟节点
  12. $("#test1").siblings(); // 所有兄弟节点
  13. $("#test1").siblings("#test2"); //返回id为test2的兄弟节点
  14. $("#test").find("#test1"); //选中id为test后代中 id为test1的节点

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

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

4,选择器选取节点:

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

选择器有很多,常用的就几个。

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

  1. $("*")//选取所有元素
  2. $(this)//选取当前 HTML 元素
  3. $("p.intro")//选取 class 为 intro 的 <p> 元素(p和.intro紧邻,是同一级关系)
  4. $(".index.intro")//选取 class 同时为 index 和 intro 的元素(.index和.intro紧邻,也是同一级关系)

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

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

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

如果想要转为dom 直接操作的只需要 取它的下标即可。

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

 

参考文章:

https://www.cnblogs.com/millethandsome/p/11887833.html

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

 

原文链接:http://www.cnblogs.com/captain1024/p/14010262.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号