旺仔?-?故夢(mèng)（Cover：橙翼） 來(lái)自多選參數(shù) 00:00 04:48
可讀代碼編寫(xiě)
Redis
jQuery
Git
可讀代碼
不甘于「本該如此」，「多選參數(shù)?」值得關(guān)注
1. 基礎(chǔ)選擇器
| 選擇器 | 名稱(chēng) | 描述 | 返回 | 實(shí)例 |
|---|---|---|---|---|
| #id | id選擇器 | 根據(jù)給定的ID匹配一個(gè)元素。 | 單個(gè)元素 | $("#box");選取id為box元素 |
| element | 元素選擇器 | 根據(jù)給定的元素名匹配所有元素 | 集合元素 | $("span");選取所有元素 |
| .class | 類(lèi)選擇器 | 根據(jù)給定的類(lèi)匹配元素。 | 集合元素 | $(".box");選取所有類(lèi)名為box元素 |
| * | 通配符選擇器 | 匹配所有元素 | 集合元素 | $("*");選取所有元素 |
| selector1, selector2, selectorN | 并集選擇器 | 將每一個(gè)選擇器匹配到的元素合并后一起返回。 | 集合元素 | $("div,p,.box");選取所有 元素,所有 元素和所有類(lèi)名為box元素 |
2. 層級(jí)選擇器
| 選擇器 | 名稱(chēng) | 描述 | 返回 | 實(shí)例 |
|---|---|---|---|---|
| ancestor descendant | 后代選擇器 | 在給定的祖先元素下匹配所有的后代元素 | 集合元素 | $("form input")；返回表單中所有的 input 元素 |
| parent > child | 子元素選擇器 | 在給定的父元素下匹配所有的子元素 | 集合元素 | $("form > input")；返回表單中所有的子級(jí)input元素。 |
| prev + next | 相鄰兄弟選擇器 | 匹配所有緊接在 prev 元素后的 next 元素 | 集合元素 | $("label + input")；返回所有跟在 label 后面的 input 元素 |
| prev ~ siblings | 通用兄弟選擇器 | 匹配 prev 元素之后的所有同輩 siblings 元素 | 集合元素 | $("form ~ input")；返回form 元素的所有同輩 input 元素 |
3. 內(nèi)容過(guò)濾選擇器
| 選擇器 | 描述 | 返回 |
|---|---|---|
| :contains(text) | 匹配包含給定文本的元素 | 集合元素 |
| :empty | 匹配所有不包含子元素或者文本的空元素 | 集合元素 |
| :has(selector) | 匹配含有選擇器所匹配的元素的元素 | 集合元素 |
| :parent | 匹配含有子元素或者文本的元素 | 集合元素 |
實(shí)例：
:contains(text)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery選擇器</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(function () {// 找到所有div中包含文本內(nèi)容為多選參數(shù)的元素var $res = $("div:contains('多選參數(shù)')");console.log($res.length);// 找到2個(gè)元素$res.each(function (idx, ele) {console.log(idx, ele);// one,three,four})});</script></head><body><div class="one">多選參數(shù)</div><div class="two">two</div><div class="three">多選參數(shù)</div><div class="four"><!--子元素中包含該文本也會(huì)被找到--><span>多選參數(shù)</span></div><span class="five"></span></body></html>
:empty
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery選擇器</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(function () {// 找到所有div中不包含文本內(nèi)容或子元素的元素var $res = $("div:empty");console.log($res.length); // 找到1個(gè)元素$res.each(function (idx,ele) {console.log(idx, ele); // one});});</script></head><body><div class="one"></div><div class="two">syy</div><!--包含內(nèi)容不會(huì)被找到--><div class="three"><!--包含子元素不會(huì)被找到--><span>多選參數(shù)</span></div><span class="five"></span><!--不是指定元素不會(huì)被找到--></body></html>
:has(selector)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery選擇器</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(function () {// 找到所有div中包含后代元素為span的元素var $res = $("div:has('span')");console.log($res.length);$res.each(function (idx, ele) {console.log(idx, ele);});});</script></head><body><div class="one"> <!--后代中包含span元素會(huì)被找到--><span>cxt</span></div><div class="two"><!--后代中不包含span元素不會(huì)被找到--><p>syy</p></div><div class="three"><!--后代中包含span元素會(huì)被找到--><p><span>多選參數(shù)</span></p></div></body></html>
:parent
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery選擇器</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(function () {// 找到所有div中包含文本內(nèi)容或子元素的元素var $res = $("div:parent");console.log($res.length);$res.each(function (idx, ele) {console.log(idx, ele);});});</script></head><body><div class="one"></div><div class="two">cxt</div><!--有文本內(nèi)容會(huì)被找到--><div class="three"><!--有子元素會(huì)被找到--><span>syy</span></div><span class="five"></span></body></html>
本文是學(xué)習(xí)極客江南視頻后自己看了下jQuery文檔后自己寫(xiě)了一遍的。只是自己的總結(jié)。推薦大家可以去看B站的jQuery的教學(xué)視頻(https://www.bilibili.com/video/BV17W41137jn?from=search&seid=4511926204549581847)。
