选择器
选择器是什么
jQuery的选择器是用于定位HTML页面中的元素,其用法最初设计是源于CSS的选择其用法,但是jQuery的选择器进行了扩展,远比CSS的选择器更加强大。
基本选择器
基本选择去具有以下几种:
1.ID选择器
2.元素选择器
3.类选择器
4.通配符选择器
5.组合选择器
示例代码如下:
<body>
<div id="d1">卧龙学苑</div>
<div id="d2" class="cls">前端开发</div>
<script>
console.log($('#d1'));
console.log($('div'));
console.log($('.cls'));
// 通配符选择器 - 匹配所有
console.log($('*'));
// 组合选择器 - 多个选择器之间使用逗号分隔(并集)
console.log($('#d1, .cls'));
// 组合选择器 - 多个选择器之间没有任何分隔(交集)
console.log($('#d2.cls'));
</script>
</body>
层级选择器
jQuery的层级选择器具有以下几种:
1.后代选择器 根据给定元素的祖先元素下匹配所有的后代元素
2.子选择器 根据给定的父元素下匹配所有的子元素
3.相邻兄弟选择器 根据给定的目标元素匹配下一个相邻兄弟元素
4.普通兄弟选择器 根据给定的目标元素匹配后面所有兄弟元素
由于jQuery对象是类数组对象,及时匹配的元素只有一个,返回的结果依旧是类数组对象。
示例代码如下:
<body>
<div id="parent">
<div id="child">
<div id="d6"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d4"></div>
<div id="d5"></div>
</div>
<div id="child2">
<div id="d3"></div>
</div>
</div>
<script>
console.log($('#parent div'));
//父子选择器
console.log($('#parent>div'));
// 指定元素的下一个相邻兄弟元素
console.log($('#d1+div'));
// 指定元素的后面所有的兄弟元素
console.log($('#d1~div'));
// siblings()方法 - 获取指定元素所有的兄弟元素(前面+后面)
console.log($('#d1').siblings('div'));
</script>
</body>
基本过滤选择器
jQuery的基本过滤选择器具有以下几种:
1.:first过滤选择器 获取第一个元素
2.:last过滤选择器 获取最后一个元素
3.:even过滤选择器 匹配所有索引值为偶数的元素,从0开始
4.:odd过滤选择器 匹配所有索引值为奇数的元素,从0开始
5.:eq()过滤选择器 匹配一个给定索引值的元素
6.:gt()过滤选择器 匹配所有大于给定索引值的元素
7.:lt()过滤选择器 匹配所有小于给定索引值的元素
8.:not()过滤选择器 去除所有与给定选择器匹配的元素
9.:header过滤选择器 匹配如h1 h2 h3 h4 h5 h6之类的标题元素
10.:animated过滤选择器 匹配正在执行动画效果的元素(由jQuery实现的动画)
示例代码如下:
<body>
<h1>这是标题</h1>
<h2>这是标题</h2>
<div>卧龙学苑</div>
<div id="d2">
<div id="child"></div>
</div>
<div></div>
<div></div>
<div>前端开发</div>
<div id="animated"></div>
<script>
// 在指定范围匹配的元素中进行筛选
console.log($('div:first'));
console.log($('div:last'));
// 索引值为偶数时 -> 奇数元素;索引值为奇数时 -> 偶数元素
console.log($('div:even'));
console.log($('div:odd'));
// :eq(index) -> index表示索引值
console.log($('div:eq(0)'));// 等于
console.log($('div:gt(2)'));// 大于
console.log($('div:lt(2)'));// 小于
// :header -> 匹配h1~h6元素
console.log($(':header'));
function animated(){
$('#animated').slideToggle(animated);
}
animated();
// :animated -> 只能匹配由jQuery实现的动画
console.log($(':animated'));
console.log($('div:not("#child")'));
</script>
</body>
内容过滤选择器
jQuery中提供了以下几种内容过滤选择器
1.:contains()过滤选择器 匹配包含给定位版本的元素
2.:empty过滤选择器 匹配不包含子元素或者文本的空元素
3.:parent过滤选择器 匹配有子元素或者文本的元素
4.:has()过滤选择去 匹配含有选择器所匹配的元素的元素
示例代码如下:
<body>
<div>这是div元素</div>
<div></div>
<div>
<div id="child"></div>
</div>
<script>
console.log($('div:contains("di")'));
console.log($('div:empty'));
console.log($('div:parent'));
// :has() - 表示包含匹配指定选择器元素的父级元素
console.log($('div:has("#child")')[0]);
</script>
</body>
可见性过滤选择器
1.:hidden过滤选择器 匹配所有不可见元素,或者type为hidde的元素
2.:visible过滤器选择器 匹配所有可见的元素
<body>
<div id="d1">卧龙学苑</div>
<div id="d2">前端开发</div>
<input type="hidden" value="用户名">
<input type="text" name="username">
<script>
/*
:hidden选择器
* 不能匹配CSS样式属性visibility设置为hidden的隐藏元素
* 还能匹配HTML页面中不做任何显示效果的元素
* 用法 - 尽量确定元素类型或指定范围
*/
console.log($(':hidden'));
/*
:visible选择器
* 匹配CSS样式属性visibility设置为hidden的隐藏元素
* 当visibility设置为hidden时的元素,依旧占有页面空间
* 还能匹配HTML页面中<html>和<body>元素
*/
console.log($(':visible'));
</script>
</body>
属性过滤选择器
1.[attr]过滤选择器 匹配包含给定属性的元素
2.[attr=value]过滤选择器 匹配给定的属性是某个特定值的元素
3.[attr!=value]过滤选择器 匹配不含有特定的属性,或者属性不等于特定值的元素
4.[attr^=value]过滤选择器 匹配给定的属性是以某些值开始的元素
5.[attr$=value]过滤选择器 匹配给定的属性是以某些值结尾的元素
6.[attr*=value]过滤选择器 匹配给定的属性是包含某些值的元素
7.组合过滤选择器 匹配元素需要同时满足多个属性过滤器
<body>
<div id="username" name="d1" class="mydiv"></div>
<div id="password" name="d2" class="mycls"></div>
<div id="d3"></div>
<div class="myd"></div>
<script>
console.log($('div[name]'));
console.log($('div[class=mydiv]'));
// [attr!=value]选择器 - 包含没有attr属性的元素
console.log($('div[class!=mydiv]'));
console.log($('div[class^=my]'));
// 属性过滤选择器组合用法 -> 交集
console.log($('div[name=d1][class^=my]'));
</script>
</body>
子元素过滤选择器
1.:nth-child()过滤选择器 匹配其父元素下的第N个子或奇偶元素
2.:first-child过滤选择器 匹配第一个子元素
3.:last-child过滤选择器 匹配最后一个子元素
4.:only-child过滤选择器 如果某个元素是父元素中唯一的子元素,就会被匹配
<body>
<div id="parent">
<div id="d1">这是id为d1的div元素</div>
<div id="d2">这是id为d2的div元素</div>
<div id="d3">这是id为d3的div元素
<div id="child"></div>
</div>
</div>
<script>
// :first-child - 当前元素是否为第一个子元素
console.log($('div:first-child'));
console.log($('div:last-child'));
/*
:nth-child(index)
* 作用 - 匹配当前元素作为第index个子元素
* 注意 - index是从 1 开始,表示第几个
*/
console.log($('div:nth-child(1)'));
console.log($('div:only-child'));
</script>
</body>
表单对象属性过滤器
1.:enabled过滤选择器 匹配所有可用元素
2.:disabled过滤选择器 匹配所有不可用元素
3.:checked过滤选择器 匹配所有选中的被选中元素
4.:selected过滤选择器 匹配所有选中的<option>元素
<body>
<form action="#">
<input type="text" disabled>
<input type="checkbox">html
<input type="checkbox" checked>css
<select>
<option>北京</option>
<option selected>南京</option>
<option>天津</option>
</select>
</form>
<script>
console.log($('input:disabled'));
console.log($('input:checked'));
console.log($('option:selected'));
</script>
</body>