旺仔 - 故梦（Cover：橙翼） 来自多选参数 00:00 04:48
可读代码编写
Redis
jQuery
Git
可读代码
不甘于「本该如此」，「多选参数 」值得关注
1. 基础选择器
| 选择器 | 名称 | 描述 | 返回 | 实例 |
|---|---|---|---|---|
| #id | id选择器 | 根据给定的ID匹配一个元素。 | 单个元素 | $("#box");选取id为box元素 |
| element | 元素选择器 | 根据给定的元素名匹配所有元素 | 集合元素 | $("span");选取所有元素 |
| .class | 类选择器 | 根据给定的类匹配元素。 | 集合元素 | $(".box");选取所有类名为box元素 |
| * | 通配符选择器 | 匹配所有元素 | 集合元素 | $("*");选取所有元素 |
| selector1, selector2, selectorN | 并集选择器 | 将每一个选择器匹配到的元素合并后一起返回。 | 集合元素 | $("div,p,.box");选取所有 元素,所有 元素和所有类名为box元素 |
2. 层级选择器
| 选择器 | 名称 | 描述 | 返回 | 实例 |
|---|---|---|---|---|
| ancestor descendant | 后代选择器 | 在给定的祖先元素下匹配所有的后代元素 | 集合元素 | $("form input")；返回表单中所有的 input 元素 |
| parent > child | 子元素选择器 | 在给定的父元素下匹配所有的子元素 | 集合元素 | $("form > input")；返回表单中所有的子级input元素。 |
| prev + next | 相邻兄弟选择器 | 匹配所有紧接在 prev 元素后的 next 元素 | 集合元素 | $("label + input")；返回所有跟在 label 后面的 input 元素 |
| prev ~ siblings | 通用兄弟选择器 | 匹配 prev 元素之后的所有同辈 siblings 元素 | 集合元素 | $("form ~ input")；返回form 元素的所有同辈 input 元素 |
3. 内容过滤选择器
| 选择器 | 描述 | 返回 |
|---|---|---|
| :contains(text) | 匹配包含给定文本的元素 | 集合元素 |
| :empty | 匹配所有不包含子元素或者文本的空元素 | 集合元素 |
| :has(selector) | 匹配含有选择器所匹配的元素的元素 | 集合元素 |
| :parent | 匹配含有子元素或者文本的元素 | 集合元素 |
实例：
: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中包含文本内容为多选参数的元素var $res = $("div:contains('多选参数')");console.log($res.length);// 找到2个元素$res.each(function (idx, ele) {console.log(idx, ele);// one,three,four})});</script></head><body><div class="one">多选参数</div><div class="two">two</div><div class="three">多选参数</div><div class="four"><!--子元素中包含该文本也会被找到--><span>多选参数</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中不包含文本内容或子元素的元素var $res = $("div:empty");console.log($res.length); // 找到1个元素$res.each(function (idx,ele) {console.log(idx, ele); // one});});</script></head><body><div class="one"></div><div class="two">syy</div><!--包含内容不会被找到--><div class="three"><!--包含子元素不会被找到--><span>多选参数</span></div><span class="five"></span><!--不是指定元素不会被找到--></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元素会被找到--><span>cxt</span></div><div class="two"><!--后代中不包含span元素不会被找到--><p>syy</p></div><div class="three"><!--后代中包含span元素会被找到--><p><span>多选参数</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中包含文本内容或子元素的元素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><!--有文本内容会被找到--><div class="three"><!--有子元素会被找到--><span>syy</span></div><span class="five"></span></body></html>
本文是学习极客江南视频后自己看了下jQuery文档后自己写了一遍的。只是自己的总结。推荐大家可以去看B站的jQuery的教学视频(https://www.bilibili.com/video/BV17W41137jn?from=search&seid=4511926204549581847)。
