爱站程序员基地jQuery特有选择器
1、基本选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“#id”); | 获取指定ID的元素 |
| 类选择器 | $(“.class”); | 获取同一类class的元素 |
| 标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
2、层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”); | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
| 兄弟元素选择器 | $(‘prevSibling + nextSibling’) | 相邻下一个兄弟元素选择器,匹配所有紧接在prevSibling元素后的nextSibling元素。 |
| 后排兄弟元素选择器 | $(‘prev ~ sibling’) | 匹配所有紧接在prev元素后所有的siblings元素。 |
3、基本过滤选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| :first | #(“div:first”) | 选取所有div中的第一个div元素 |
| :last | $(“div:last”) | 选取所有div中的最后一个div元素 |
| :not(selector) | $(“input:not(.myClass)”) | 选取class不是myClass的input元素（返回集合元素） |
| :even | $(“input:even”) | 选取索引是偶数的所有元素，索引从0开始，选取索引是偶数的input元素 |
| :odd | $(“input:odd”) | 选取索引是奇数的input元素 |
| :eq(index) | $(“input:eq(1)”) | 选取索引等于1的input元素 |
| :gt(index) | $(“input:gt(1)”) | 选取索引大于1的input元素（注：大于1 而不包括1） |
| :lt(index) | $(“input:lt(1)”) | 选取索引小于1的input元素（注：小于1 而不包括1） |
| :header | $(\”:header\”) | 选取网页中所有的所有的标题元素如
,,…… |
| :animated | $(“div:animated”) | 选取当前正在执行动画的所有元素 |
| :focus | $(\”:focus\”) | 选取当前获取焦点的元素 |
选取的例子：
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><script src=\"js/jquery-3.4.1.js\" type=\"text/javascript\" charset=\"utf-8\"></script><style type=\"text/css\">.table div{height: 40px;border-bottom: 1px solid #ccc;line-height: 40px;}</style></head><body><h1>内容1</h1><h1>内容2</h1><h1>内容3</h1><h1>内容4</h1><h1>内容5</h1><h1>内容6</h1><h1>内容7</h1><h1>内容8</h1><h1>内容9</h1><h1>内容10</h1><br><br><div class=\"table\"><h2>一个表格</h2><div>行1</div><div>行2</div><div>行3</div><div>行4</div><div>行5</div><div>行6</div><div>行7</div><div>行8</div><div>行9</div><div>行10</div></div><script type=\"text/javascript\">//索引值大于5，不包括5$(\"h1:gt(5)\").css({background:\"skyblue\",})//索引值小于5，不包括5$(\"h1:lt(5)\").css({background:\"green\",})//等于5，两种方式$(\"h1:eq(5)\").css({background:\"pink\",})$(\"h1\").eq(5).css({color:\"white\",})//选择奇数行元素$(\".table div:odd\").css({background:\"#efefef\",})//选择偶数行元素$(\".table div:even\").css({background:\"antiquewhite\",})</script></body></html>
结果：
4属性选择器
| 名称 | 描述 | 格式 |
|---|---|---|
| 属性过滤器 | 用于筛选给定属性等于某特定值的所有元素 | 格式:$(“selector[attribute=value]”); |
| 开始过滤器 | 用于选择给定属性是以某特定值开始的所有元素 | 格式:$(“selector[attribute^=value]”) |
| 结尾过滤器 | 用于选择给定属性是以某特定值结尾的所有元素 | 格式:(\”selector[attribute(\”selector[attribute(\”selector[attribute=value]\”) |
| 任意匹配过滤器 | 用于选择指定属性值包含给定字符串的所有元素 | 格式:$(“selector[attribute*=value]”) |
| 包含过滤器 | 用于选择包含给定属性的所有元素 | 格式:$(“selector[attribute]”) |
| 复合过滤器 | 用于选择同时满足多个条件的所有元素 | 格式:$(“selector[selector1][selector2]…[selector ”) |
筛选选择器
| 名称 | 描述 |
|---|---|
| $(“.dd”).children(“ul”) | 找到.dd下的带Ul的所有子元素 |
| .eq(index) | 匹配index下标的元素 |
| .first() | 获取第一元素 |
| .last() | 获取最后一个元素 |
| .find() | 后代查找 |
| .parent() | 查找父标签 |
| .siblings() | 兄弟元素 |
| .next() | 下一个兄弟元素 |
| .prev() | 前一个兄弟元素 |
例子：
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><script src=\"js/jquery-3.4.1.js\" type=\"text/javascript\" charset=\"utf-8\"></script></head><body><div class=\"d1\"><ol><li>内容1</li><li>内容2</li><li>内容3</li><li>内容4</li><li>内容5</li><li>内容6</li><li>内容7</li><li>内容8</li><li>内容9</li><ol><li>子列表</li><li>子列表</li><li>子列表</li><li>子列表</li><li>子列表</li></ol></ol></div><script type=\"text/javascript\">var d1=$(\'.d1\');//查找d1下的子孙元素var li=d1.find(\"li\")console.log(li)//获取直接子元素var childol=d1.children(\"ol\")console.log(childol)//获取兄弟元素var brother=d1.find(\"li:eq(3)\").siblings()console.log(brother)</script></body></html>
结果：
一个切换内容的例子
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><script src=\"js/jquery-3.4.1.js\" type=\"text/javascript\" charset=\"utf-8\"></script><style type=\"text/css\">.btnList{width: 900px;margin: 0 auto;height: 100px;display: flex;}.btn{width: 300px;height: 100px;text-align: center;line-height: 100px;border: 1px solid #CCCCCC;}.btn.active{background-color: #CCCCCC;}.contentList{width: 900px;height: 600px;position: relative;margin: 0 auto;}.content{width: 900px;width: 900px;height: 600px;position: absolute;left: 0;top:0;background: #efefef;padding: 50px;box-sizing: border-box;opacity: 0;/* transition: all 0.2s; */}.content.active{opacity: 1;}</style></head><body><div class=\"btnList\"><div class=\"btn active\">内容1</div><div class=\"btn\">内容2</div><div class=\"btn\">内容3</div></div><div class=\"contentList\"><div class=\"content active\">这是内容1,这是内容1,这是内容1,这是内容1,这是内容1</div><div class=\"content\">这是内容2,这是内容2，这是内容2，这是内容2，这是内容2</div><div class=\"content\">这是内容3，这是内容3，这是内容3，这是内容3，这是内容3</div></div><script type=\"text/javascript\">$(\".btn\").click(function(){//获取当前索引值var index=$(this).index()$(\".btn\").eq(index).addClass(\"active\").siblings().removeClass(\"active\")$(\".content\").eq(index).addClass(\"active\").siblings().removeClass(\"active\")})</script></body></html>
结果：可以实现点击切换
