當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery 的常用选择器，筛选器

發布時間：2023/12/31 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery 的常用选择器，筛选器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery

jQuery 的簡介

插件：一個功能高度分裝
類庫：工具庫，提供操作工具，不提供具體功能 jQuery 是一個工具集合
框架：項目每一個組件都會提供出來。我們只需要引入框架語法，即可實現功能
DOM 操作多 jQuery
數據渲染不多 jQuery
數據渲染不多 View React
優點：
- 無所不能的選擇器
- 無所不在的鏈式編程
- 無人能及的隱式資迭代
引入jquery以后
=> 會向全局暴露兩個變量名
-> 1. jQuery
-> 2. $

jQuery 的構成

jquery 的選擇器

選擇器
=> 對元素的獲取
=> 基本選擇器
=> 特殊選擇器
篩選器
=> 對已經獲取到的元素集合進行二次篩選
選擇器(基本選擇器)
- 語法： $(選擇器)
- 返回值：滿足條件的所有元素(id)選擇器除外
  => 放在一個數組里返回
  => 都是一個集合的形式
  => 我們管這個集合叫做jquery元素集合
- 你的css如何捕獲標簽，這里就可以怎么填參數
選擇器(特殊選擇器)
- 語法 : $(選擇器)
  => 對你已經存在的選擇器進行修飾
- :first 拿到所有div的第一個
- :last 最后一個
- :eq(數字) 按照索引排列的第幾個從 0 開始
- :odd 按照索引排列的奇數個
- :even 按照索引排列的偶數個

jquery 的選擇器詳解
- #id

$('#id 名');

- element

$("元素名稱");

- .class

$('.類名');

- selector1, selector2, …

// 有一個特點，就是按照頁面結構從上到下的選擇元素，跟$里面的元素順序無關$('元素1, 元素2, ...');

- ancestor descendant 后代選擇器

<div class="div"><div class='div1'></div><div class='div1'></div></div>$('后代選擇器');$('div div1');// 選中div下的所有類名為div1的元素

- parent>child

$('div>div1');

- prev + next
  一個有效選擇器并且緊接著第一個選擇器

<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset></form><input name="none" />$("label + input")// [ <input name="name" />, <input name="newsletter" /> ]

- prev~siblings
  匹配 prev 元素之后的所有 siblings 元素

$("form ~ input")// [ <input name="none" /> ]

- :first 獲取第一個元素
- :not 去除所有與給定選擇器匹配的元素
- :even 獲取偶數項從0開始計數
- :odd 獲取奇數項從0開始計數
- :eq(index) 獲取下標為index的元素
- :gt(index) 獲取所有大于給定索引值的元素
- :lang(language) 獲取指定語言的所有元素

<!DOCTYPE html> <html> <head><style>body { background-color: #ccc; }h3 { margin: .25em 0; }div { line-height: 1.5em}.usa { background-color: #f00; color: #fff; }.usa .usa { background-color: #fff; color: #000; }.usa .usa .usa { background-color: #00f; color: #fff; }.spain { background-color: #f00; color: #ff0; }.spain .spain { background-color: #ff0; color: #f00; line-height: 3em; }.spain .spain .spain { background-color: #f00; color: #ff0; line-height: 1.5em; } </style><script src="https://code.jquery.com/jquery-latest.js"></script> </head> <body><h3>USA</h3><div lang="en-us">red<div>white<div>and blue</div></div></div><h3>Espa?a</h3><div lang="es-es">rojo<div>amarillo<div>y rojo</div></div></div><script>$( "div:lang(en-us)" ).addClass( "usa" );$( "div:lang(es-es)" ).addClass( "spain" );</script></body> </html>

- :last 獲取匹配的最后個元素

<ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul>$('li:last')//[ <li>list item 5</li> ]

- :lt(index) 匹配所有小于給定索引值的元素

<table><tr><td>Header 1</td></tr><tr><td>Value 1</td></tr><tr><td>Value 2</td></tr></table>$('tr:lt(2)');// [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

- :header 匹配h1, h2, h3 之類的標題元素
- :animated 匹配所有正在執行動畫效果的元素
- :focus 匹配當前獲得焦點的元素
- :root 匹配該文檔的根元素永遠是 html 元素
- :target 選擇由文檔URI的格式化識別碼表示的目標元素,
  如果文檔的URI包含一個格式化的標識符，或hash（哈希），然后:target選擇器將匹配ID和標識符相匹配的元素。例如，給定的URI http://example.com/#foo， $( “p:target” )，將選擇
  元素。
- :contains(text) 匹配包含給定文本的元素
- :empty 匹配所有不包含子元素或者文本的空元素
- :has(selector) 匹配含有選擇器所匹配的元素的元素

<div><p>Hello</p></div><div>Hello again!</div>$("div:has(p)").addClass("test");// [ <div class="test"><p>Hello</p></div> ]

- :parent 匹配含有子元素或者文本的元素
- :hidden 匹配所有不可見元素，或者type為hidden的元素
- :visible 匹配所有可見元素
- [attribute] 匹配包含給定的元素

<div><p>Hello！</p></div><div id="test2"></div>$('div[i]')// [ <div id="test2"></div> ]

- [attribute=value] 匹配給定的屬性是某個特定值的元素
- [attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等于特定值的元素。此選擇器等價于
  :not([attr=value]) 要匹配含有特定屬性但不等于特定值的元素，請使用[attr]:not([attr=value])
- [^attribute=value] 匹配給定的屬性是以某些值開始的元素比如name=‘news…’ $(‘dom^=news’)
- [attribute$=value] 匹配給定的屬性是以某些值結尾的元素
- [attribute*=value] 匹配給定的屬性是包含某些值的元素
- [selector1][selector1][selector1]
  復合屬性選擇器，同時滿足

// 找到所有含有 id 屬性，并且它的 name 屬性是以 man 結尾的<input id="man-news" name="man-news" /><input name="milkman" /><input id="letterman" name="new-letterman" /><input name="newmilk" />$("input[id][name$='man']")// [ <input id="letterman" name="new-letterman" /> ]

jquery 的篩選器
- 對jquery的元素集合進行二次篩選
- 只有jQuery的元素才可以使用，原生DOM對象不能使用
  - first()
    => 拿到元素集合里的第一個
  - last()
    => 拿到元素集合里的最后一個
  - eq(索引)
    => 拿到元素集合里面指定索引那一個
  - next()
    => 當前元素的下一個
  - nextAll()
    => 語法：1. 元素集合.nextAll()
    獲取到當前元素的所有兄弟
    => 語法：2. 元素集合.nextAll(選擇器)
    獲取到當前元素后面所有元素中指定選擇器的那一個
  - nextUntil()
    => 語法：元素集合.nextUntil()
    獲取到當前元素后面所有的兄弟元素
    => 語法：元素集合.nextUntil(選擇器)
    獲取到當前元素后面所有的兄弟元素，直到選擇器為止前后都不包含
  - prev()
    => 語法：當前元素的上一個元素
  - prevAll, preprevAll(選擇器)
    => 語法 1：元素集合.prevAll()
    獲取到當前元素上面的所有兄弟元素
    => 語法 2：元素集合.prevAll(選擇器)
    獲取到當前元素上面的所有兄弟元素的那一個
  - prevUntil()
    => 語法：
  - 元素集合.pervuntil()
    獲取到當前元素元素上面的所有兄的元素
  - 元素集合.prevUntile 獲取到當前元素上面所有的兄弟元素直到選擇器元素為止(不包含選擇器)
  - parent()
    => 語法：
    獲取當前元素的父元素
  - parents()
    => 語法：
  - 元素集合.parents()
    獲取當前元素的所有父元素
  - 元素集合.parents(選擇器)
    拿到結構父級里面所有父元素中符合選擇器的那一個元素
  - children() 有多少獲取多少
    => 語法：
  - 元素集合.children()
    拿到該元素的所有子元素
  - 元素集合.children(選擇器)
    拿到該元素的所有子元素中符合選擇器的那一個元素
  - sinblings()
    => 拿到該元素的所有兄弟元素，自己除外
  - find(選擇器)
    找到該元素中所有后代元素里面符合選擇器條件的元素
  - index()
    獲取到的就是該元素在父元素里面的索引位置

總結

以上是生活随笔為你收集整理的jQuery 的常用选择器，筛选器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： windows 10 家庭版无法打开
下一篇：今天刚学了jQuery ，今天利用jQu