+发表新主题
查看: 2286|回复: 0

[代码片段] jquery 遍历元素

[复制链接]

[代码片段] jquery 遍历元素

[复制链接]
殷三姗 发表于 2016-2-4 22:05:03 浏览:  2286 回复:  0 [显示全部楼层] |只看大图 回帖奖励 |倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
1.遍历元素

     * 父元素 - parent([selector])

       * parents([selector]) - 祖先元素

     * 子元素

       * 所有子元素 - children()

       * 指定子元素 - children(selector)

     * 兄弟元素

       * 上一个兄弟元素 -prev([selector])

       * 下一个兄弟元素 - next([selector])

       * 所有兄弟元素 - siblings([selector])

         * 选择器 - 后面所有兄弟(~)

     * 通用查找方法

       * find(selector) - 找指定元素的后代元素

例如：

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>jQuery遍历节点</title>

  7.   <script src="jquery-1.11.3.js"></script>

  8. </head>

  9. <body>

  10.   <ul id="city">

  11. <li id="bj" name="beijing">北京

  12. <ul>

  13. <li>朝阳区</li>

  14. <li>昌平区</li>

  15. <li>西城区</li>

  16. </ul>

  17. </li>

  18. <li id="tj">天津</li>

  19. <li id="nj">南京</li>

  20.   </ul>



  22.   <script>

  23. // 1. 获取北京节点的父元素

  24. console.log($("#bj").parent().attr("id"));

  25. // 2. 获取北京节点的祖先元素

  26. console.log($("#bj").parents("ul"));

  27. // 3. 获取id为city的所有子元素

  28. console.log($("#city").children(":first").attr("name"));

  29. // 4. 兄弟元素

  30. console.log($("#tj").prev().attr("id"));

  31. console.log($("#tj").next().attr("id"));

  32. console.log($("#tj").siblings().length);

  33. // 5. 查找id为city元素内所有li元素的个数

  34. console.log($("#city").find("li").length);

  35.   </script>

  36. </body>

  37. </html>
复制代码
页面效果：

    220025iwa9dsaaiqg8dds9.png

  2.创建元素(节点)

     * 元素节点 - $(HTML代码)

     * 文本节点 - text(文本内容)

     * 属性节点 - attr(name,value)

     * 通用 - $(HTML代码)

例如：  

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>jQuery创建元素</title>

  7.   <script src="jquery-1.11.3.js"></script>

  8. </head>

  9. <body>

  10.   <ul id="game">

  11. <li>反恐精英</li>

  12. <li>梦幻西游</li>

  13. <li>英雄联盟</li>

  14.   </ul>

  15.   <script>

  16. // 需求 - 创建<li id="hj">红色警戒</li>添加到id为game元素

  17.   //1. 创建<li id="hj">红色警戒</li>

  18.    // a. 创建元素节点<li></li>

  19.   /*var $li = $("<li></li>");

  20.   // b. 设置文本内容 - text()

  21. $li.text("红色警戒");

  22. // d. 设置属性 - attr()

  23. $li.attr("id","hj");

  24.   // 2. 获取id为game元素

  25.   var $game = $("#game");

  26. // 3. 添加

  27. $game.append($li);*/



  29. //下面是直接添加

  30.      $("#game").append($("<li id='hj'>红色警戒</li>"));

  31.   </script>

  32. </body>

  33. </html>
复制代码
效果：

    220025iwa9dsaaiqg8dds9.png
回复

使用道具 举报

精彩评论 (0) QQ好友和群QQ好友和群

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

殷三姗
技冠群雄

34

主题

36

帖子

106

积分

技冠群雄

Rank: 6Rank: 6

积分
106
英剧迷| 淘大喵| 客家新闻网| 时空赣州网| 赣州新闻网| 赣州信息港| 人人都是产品经理| 91运营网| 梅花网| 亿欧网| 36氪| 申请友链

手机版| 赣南网

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4

用微信扫一扫

赣南网