您的位置: 首页  >  IT文章  >  jquery惯用过滤选择器

jquery惯用过滤选择器

分类: IT文章 • 2022-10-13 00:10:45
jquery常用过滤选择器
  1.     过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同，即选择器都可以一个冒号（：）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤选择器，内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器   
  2. 1. 基本过滤选择器    
  3.   
  4. 选择器    
  5.  描述    
  6.  返回    
  7.  示例    
  8.     
  9. :first    
  10.  选取第一个元素    
  11.  单个元素    
  12.  $(“div:first”) 选取所有 <div> 元素中第一个 <div> 元素    
  13.     
  14. :last    
  15.  选取最后一个元素    
  16.  单个元素    
  17.  $(“div:last”) 选取所有 <div> 元素中最后一个 <div> 元素    
  18.     
  19. :not(selector)    
  20.  去除所有与给定选择器匹配的元素    
  21.  集合元素    
  22.  $(“input:not(.myClass)”) 选取 class 不是 myClass 的 <input> 元素    
  23.     
  24. :even    
  25.  选取索引是偶数的所有元素，索引从 0 开始    
  26.  集合元素    
  27.  $(“input:even”) 选取索引是偶数的 <input> 元素    
  28.     
  29. :odd    
  30.  选取索引是奇数的所有元素，索引从 0 开始    
  31.  集合元素    
  32.  $(“input:odd”) 选取索引是奇数的 <input> 元素    
  33.     
  34. :eq(index)    
  35.  选取索引等于 index 的元素（ index 从 0 开始）    
  36.  集合元素    
  37.  $(“input:eq(1)”) 选取索引等于 1 的 <input> 元素    
  38.     
  39. :gt(index)    
  40.  选取索引大于 index 的元素（ index 从 0 开始）    
  41.  集合元素    
  42.  $(“input:gt(1)”) 选取索引大于 1 的 <input> 元素（注：大于 1 ，而不包括 1 ）    
  43.     
  44. :lt(index)    
  45.  选取索引小于 index 的元素（ index 从 0 开始）    
  46.  集合元素    
  47.  $(“input:lt(1)”) 选取索引小于 1 的 <input> 元素（注：小于 1 ，而不包括 1 ）    
  48.     
  49. :header    
  50.  选取所有的标题元素，例如 h1,h2,h3 等等    
  51.  集合元素    
  52.  $(“:header”) 选取网页中所有的 <h1> ， <h2> ， <h3> ……    
  53.     
  54. :animated    
  55.  选取当前正在执行动画的所有元素    
  56.  集合元素    
  57.  $(“div:animated”) 选取当前正在执行动画的 <div> 元素    
  58.     
  59.   
  60.      
  61.   
  62. 2 ．内容过滤选择器    
  63.   
  64. 选择器    
  65.  描述    
  66.  返回    
  67.  示例    
  68.     
  69. :contains(text)    
  70.  选取含有文本内容为“ text ”的元素    
  71.  集合元素    
  72.  $(“div:contains(‘ 我 ”)”) 选取含有文本“我”的 <div> 元素    
  73.     
  74. :empty    
  75.  选取不包含子元素或者文本的空元素    
  76.  元素集合    
  77.  $(“div:empty”) 选取不包含子元素（包括文本元素）的 <div> 元素    
  78.     
  79. :has(selector)    
  80.  选取含有选择器所匹配的元素的元素    
  81.  元素集合    
  82.  $(“div:has(p)”) 选取含有 <p> 元素的 <div>    
  83.     
  84. :parent    
  85.  选取含有子元素或者文本的元素    
  86.  元素集合    
  87.  $(“div:parent”) 选取拥有子元素（包括文本元素）的 <div>    
  88.     
  89.   
  90.      
  91.   
  92. 3 ．可见性过滤选择器    
  93.   
  94. 选择器    
  95.  描述    
  96.  返回    
  97.  示例    
  98.     
  99.      
  100.   
  101.      
  102.   
  103.      
  104.   
  105. :hidden    
  106.       
  107.   
  108.      
  109.   
  110.      
  111.   
  112. 选取所有不可见的元素    
  113.       
  114.   
  115.      
  116.   
  117.      
  118.   
  119. 集合元素    
  120.  $(“:hidden”) 选取所有不可见的元素，包括 <input type=”hidden”/> ， <div style=”display:none;”> 和 <div     style=”visibility:hidden;”> 等元素，如果只想选取 <input> 元素，可以使用 $(“input:hidden”)    
  121.     
  122. :visible    
  123.  选取所有可见元素    
  124.  集合元素    
  125.  $(“div:visible”) 选取所有可见的 <div>    
  126.     
  127.   
  128.      
  129.   
  130. 4 ．属性过滤选择器    
  131.   
  132. 选择器    
  133.  描述    
  134.  返回    
  135.  示例    
  136.     
  137. [attribute]    
  138.  选取拥有此属性的元素    
  139.  集合元素    
  140.  $(“div[id]”) 选取拥有属性 id 的元素    
  141.     
  142. [attribute=value]    
  143.  选取属性的值为 value 的元素    
  144.  集合元素    
  145.  $(“div[title=test]”) 选取属性 title 为“ test ”的 <div> 元素    
  146.     
  147. [attribute!=value]    
  148.  选取属性的值不等于 value 的元素    
  149.  集合元素    
  150.  $(“div[title!=test]”) 选取属性 title 不等于“ test ”的 <div> 元素（注：没有属性 title 的 <div> 元素也会被选取）    
  151.     
  152. [attribute^=value]    
  153.  选取属性的值以 value 开始的元素    
  154.  集合元素    
  155.  $(“div[title^=test]”) 选取属性 title 以“ test ”开头的 <div> 元素    
  156.     
  157. [attribute$=value]    
  158.  选取属性的值以 value 结尾的元素    
  159.  集合元素    
  160.  $(“div[title$=test]”) 选取属性 title 以“ test ”结束的 <div> 元素    
  161.     
  162. [attribute*=value]    
  163.  选取属性的值含有 value 的元素    
  164.  集合元素    
  165.  $(“div[title$=test]”) 选取属性 title 含有“ test ”的 <div> 元素    
  166.     
  167. [selector1][selector2][selector]    
  168.  用属性选择器合并成一个复合的属性选择器，满足多个条件。没选取一次，缩小一次范围    
  169.  集合元素    
  170.  $(“div[id][title$=’test’]”) 选取拥有属性 id ，并且属性 title 以“ test ”结束的 <div> 元素    
  171.     
  172.   
  173.      
  174.   
  175. 5 ．子元素过滤选择器    
  176.   
  177. 选择器    
  178.  描述    
  179.  返回    
  180.  示例    
  181.     
  182. :nth-child    
  183.   
  184. (index/even/odd/equation)    
  185.  选取每个父元素下的第 index 个子元素或者奇（ odd ）偶（ even ）元素，（ index 从 1 开始）    
  186.  集合元素    
  187.  :eq(index) 只匹配一个元素，而 :nth-child 将为每一个父元素匹配子元素，并且 :nth-child(index) 的 index 是从 1 开始的，而 :eq(index) 是从 0 开始的    
  188.     
  189. :first-child    
  190.  选取每个父元素的第一个子元素    
  191.  集合元素    
  192.  :first 只返回单个元素，而 :first-child 将为每个父元素匹配第一个子元素。    
  193.   
  194. 例如： $(“ul li:first-child”) 选取每个 <ul> 中第一个 <li> 元素    
  195.     
  196. :last-child    
  197.  选取父元素的最后一个子元素    
  198.  集合元素    
  199.  :last 只返回单个元素，而 :last-child 将为每个父元素匹配最后一个子元素。    
  200.   
  201. 例如： $(“ul li:last-child”) 选取每个 <ul> 中最后一个 <li> 元素    
  202.     
  203. :only-child    
  204.  如果某个元素的它父亲中唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，则不会被匹配    
  205.  集合元素    
  206.  $(“ul li:only-child”) 在 <ul> 中选取是唯一子元素的 <li> 元素    
  207.     
  208.   
  209.      
  210.   
  211.      
  212.   
  213.      
  214.   
  215. 6 ．表单对象属性过滤选择器    
  216.   
  217. 选择器    
  218.  描述    
  219.  返回    
  220.  示例    
  221.     
  222. :enabled    
  223.  选取所有可用元素    
  224.  集合元素    
  225.  $(“#form1 :enabled”) 选取 id 为“ form1” 的表单中所有可用元素    
  226.     
  227. :disabled    
  228.  选取所有不可用元素    
  229.  集合元素    
  230.  $(“#form1 :disabled”) 选取 id 为“ form1” 的表单中所有不可用元素    
  231.     
  232. :checked    
  233.  选取所有被选中的元素（单选框，复选框）    
  234.  集合元素    
  235.  $(“input :checked”) 选取所有被选中的 <input> 元素    
  236.     
  237. :selected    
  238.  选取所有被选中的选项元素（下拉列表）    
  239.  集合元素    
  240.  $(“select :selected”) 选取所有被选中的选项元素    
  241.     
  242.   
  243.      
  244.   
  245. 改变表单内可用 <input> 元素的值，代码如下：    
  246.   
  247. $(“form1 input:enabled”).val(“ 这里的值改变了 ”);    
  248.   
  249. 获取多选框选中的个数，代码如下：    
  250.   
  251. $(“input : checked ”).length;    
  252.   
  253. 获取下拉框选中的内容，代码如下：    
  254.   
  255. $(“select:selected”).text();    
  256.   
  257. 同理，其他对象属性选择器的操作与此类似    
  258.   
  259.      
  260.   
  261.      
  262.   
  263. 7 ．表单对象属性过滤选择器    
  264.   
  265. 选择器    
  266.  描述    
  267.  返回    
  268.  示例    
  269.     
  270. :input    
  271.  选取所有的 <input>,<textarea>,    
  272.   
  273. <select>,<button> 元素    
  274.  集合元素    
  275.  $(“:input) 选取所有的 <input>,<textarea>,<select>,    
  276.   
  277. <button> 元素    
  278.     
  279. :text    
  280.  选取所有的单行文本框    
  281.  集合元素    
  282.  $(“:text”) 选取所有的单行文本框    
  283.     
  284. :password    
  285.  选取所有的密码框    
  286.  集合元素    
  287.  $(“:password”) 选取所有的密码框    
  288.     
  289. :radio    
  290.  选取所有的单选框    
  291.  集合元素    
  292.  $(“:radio”) 选取所有的单选框    
  293.     
  294. :checkbox    
  295.  选取所有的多选框    
  296.  集合元素    
  297.  $(“:checkbox”) 选取所有的多选框    
  298.     
  299. :submit    
  300.  选取所有的提交按钮    
  301.  集合元素    
  302.  $(“:submit”) 选取所有的提交按钮    
  303.     
  304. :image    
  305.  选取所有的图形按钮    
  306.  集合元素    
  307.  $(“:image”) 选取所有的图形按钮    
  308.     
  309. :reset    
  310.  选取所有的重置按钮    
  311.  集合元素    
  312.  $(“:reset”) 选取所有的重置按钮    
  313.     
  314. :button    
  315.  选取所有的按钮    
  316.  集合元素    
  317.  $(“:button”) 选取所有的按钮    
  318.     
  319. :file    
  320.  选取所有的上传域    
  321.  集合元素    
  322.  $(“:file”) 选取所有的上传域    
  323.     
  324. :hidden    
  325.  选取所有的不可见元素    
  326.  集合元素    
  327.  $(“:hidden”) 选取所有的不可见元素    
  328.     
  329.   
  330.      
  331.   
  332. 得到表单内表单元素的个数，代码如下：    
  333.   
  334. $(“form1 :input”).length;    
  335.   
  336. 得到表单内单行文本的个数，代码如下：    
  337.   
  338. $(“form1 :text”).length;    
  339.   
  340. 得到表单内密码框的个数，代码如下：    
  341.   
  342. $(“form1 :password”).length;    
  343.   
  344. 同理，其他表单选择器的操作与此类似   

相关推荐