Code666 (代码贴、代码片段)

[JavaScript] jquery 选择器基本使用方法大全 →→→→→进入此内容的聊天室

来自 , 2020-08-01, 写在 JavaScript, 查看 144 次.
URL http://www.code666.cn/view/ed3d2c21
  1. //选择 id为 one 的元素
  2. $('#one').css("background", "#bfa");
  3.  
  4. //选择 class 为 mini 的所有元素
  5. $('.mini').css("background", "#bfa");
  6.  
  7. //选择 元素名是 div 的所有元素
  8. $('div').css("background", "#bfa");
  9.  
  10. //选择 所有的元素
  11. $('*').css("background", "#bfa");
  12.  
  13. //选择 所有的span元素和id为two的div元素
  14. $('span,#two').css("background", "#bfa");
  15.  
  16. //选择 body内的所有div元素.
  17. $('body div').css("background", "#bbffaa");
  18.  
  19. //在body内的选择 元素名是div 的子元素.
  20. $('body > div').css("background", "#bbffaa");
  21.  
  22. //选择 所有class为one 的下一个div元素.
  23. $('.one + div').css("background", "#bbffaa");
  24.  
  25. //选择 id为two的元素后面的所有div兄弟元素.
  26. $('#two ~ div').css("background", "#bbffaa");
  27.  
  28. //选择第一个div元素.
  29. $('div:first').css("background", "#bfa");
  30.  
  31. //选择最后一个div元素.
  32. $('div:last').css("background", "#bfa");
  33.  
  34. //选择class不为one的 所有div元素.
  35. $('div:not(.one)').css("background", "#bfa");
  36.  
  37. //选择 索引值为偶数 的div元素。
  38. $('div:even').css("background", "#bfa");
  39.  
  40. //选择 索引值为奇数 的div元素。
  41. $('div:odd').css("background", "#bfa");
  42.  
  43. //选择 索引等于 3 的元素
  44. $('div:eq(3)').css("background", "#bfa");
  45.  
  46. //选择 索引大于 3 的元素、
  47. $('div:gt(3)').css("background", "#bfa");
  48.  
  49. //选择 索引小于 3 的元素
  50. $('div:lt(3)').css("background", "#bfa");
  51.  
  52. //选择 所有的标题元素.比如h1, h2, h3等等...
  53. $(':header').css("background", "#bfa");
  54.  
  55. //选择 当前正在执行动画的所有元素.
  56. $(':animated').css("background", "#bfa");
  57.  
  58. //选取含有文本"di"的div元素.
  59. $('div:contains(di)').css("background", "#bbffaa");
  60.  
  61. //选取不包含子元素(或者文本元素)的div空元素.
  62. $('div:empty').css("background", "#bbffaa");
  63.  
  64. //选取含有class为mini元素 的div元素.
  65. $('div:has(.mini)').css("background", "#bbffaa");
  66.  
  67. //选取含有子元素(或者文本元素)的div元素.
  68. $('div:parent').css("background", "#bbffaa");
  69.  
  70. //选取含有 属性title 的div元素.
  71. $('div[title]').css("background", "#bbffaa");
  72.  
  73. //选取 属性title值等于 test 的div元素.
  74. $('div[title=test]').css("background", "#bbffaa");
  75.  
  76. //选取 属性title值不等于 test 的div元素.
  77. $('div[title!=test]').css("background", "#bbffaa");
  78.  
  79. //选取 属性title值 以 te 开始 的div元素
  80. $('div[title^=te]').css("background", "#bbffaa");
  81.  
  82. //选取 属性title值 以 est 结束 的div元素
  83. $("div[title$=est]").css("background", "#bbffaa");
  84.  
  85. //选取 属性title值 含有 es  的div元素.
  86. $("div[title*=es]").css("background", "#bbffaa");
  87.  
  88. //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素
  89. $("div[id][title*=es]").css("background", "#bbffaa");
  90.  
  91. //选取每个父元素下的第2个子元素
  92. $('div.one :nth-child(2)').css("background", "#bbffaa");
  93.  
  94. //选取每个父元素下的第一个子元素
  95. $('div.one :first-child').css("background", "#bbffaa");
  96.  
  97. //选取每个父元素下的最后一个子元素
  98. $('div.one :last-child').css("background", "#bbffaa");
  99.  
  100. //如果父元素下的仅仅只有一个子元素，那么选中这个子元素
  101. $('div.one :only-child').css("background", "#bbffaa");
  102.  
  103. //给id为mover的元素添加动画.
  104. function animateIt() {
  105.     $("#mover").slideToggle("slow", animateIt);
  106. }
  107. animateIt();
  108.  
  109. //选取所有不可见的元素.包括<input type="hidden"/>.
  110. alert("不可见的元素有：" + $('body :hidden').length + "个!\n" +
  111.     "其中不可见的div元素有:" + $('div:hidden').length + "个!\n" +
  112.     "其中文本隐藏域有:" + $('input:hidden').length + "个!");
  113. $('div:hidden').show(3000).css("background", "#bbffaa");
  114.  
  115. //选取所有可见的元素.
  116. $('div:visible').css("background", "#FF6500");
  117.  
  118. //重置表单元素
  119. setTimeout(function () {
  120.     countChecked();
  121.     $("select").change();
  122. }, 0)
  123.  
  124. //对表单内 可用input 赋值操作.
  125. $("#form1 input:enabled").val("这里变化了！");
  126. return false;
  127.  
  128. //对表单内 不可用input 赋值操作
  129. $("#form1 input:disabled").val("这里变化了！");
  130. return false;
  131.  
  132. //使用:checked选择器，来操作多选框.
  133. $(":checkbox").click(countChecked);
  134. function countChecked() {
  135.     var n = $("input:checked").length;
  136.     $("div").eq(0).html("<strong>有" + n + " 个被选中!</strong>");
  137. }
  138. countChecked(); //进入页面就调用.
  139.  
  140. //使用:selected选择器，来操作下拉列表.
  141. $("select").change(function () {
  142.     var str = "";
  143.     $("select :selected").each(function () {
  144.         str += $(this).text() + ",";
  145.     });
  146.     $("div").eq(1).html("<strong>你选中的是：" + str + "</strong>");
  147. }).trigger('change');
  148. // trigger('change') 在这里的意思是：
  149. // select加载后，马上执行onchange.
  150. // 也可以用.change()代替.
  151.  

回复 "jquery 选择器基本使用方法大全"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666