学好css 的选择器差不多等同于学了jQuery的选择器,jQuery的选择能够让我们很容易的定位到需要选择的标签元素,我们大都习惯于使用一些基本的选择器,项目开发中也基本够用了,但是技多不压身嘛,废话不多说,开始吹…
-
[attribute]
选中包含attribute的元素。
<div class="test1">
<input type="text">
</div>
<div id="test1">
</div>
<div id="test2">
</div>
<script>
let chose = $('div[id]');
console.log(chose);// [<div id="test1"></div> , <div id="test2"></div>]
</script>
- [attribute=value]
选中具有attribute属性 且 attribute的值是 value的元素
<div class="test1">
<input type="text">
</div>
<div id="test1">
</div>
<div id="test2">
</div>
<script>
let chose = $('div[id=test1]');
console.log(chose);//[<div id="test1"></div>]
</script>
- [attribute!=value]
选中所有不含有指定的属性,或者属性不等于特定值的元素。
<div name='test1'>
<input type="text">
</div>
<div name='test2'>
</div>
<div>
</div>
<script>
let chose = $('div[name!=test1]');
console.log(chose);// 这里选中的是第二个和第三个div元素
</script>
- [attribute^=value]
选中给定的属性中是以某些值开头的元素
<div name='test1'>
<input type="text">
</div>
<div name='test2'>
</div>
<div>
</div>
<script>
let chose = $('div[name^=test]');
console.log(chose);//这里选中的是第一和第二个div元素
</script>
- [attribute$=value]
选中给定的属性中是以某些值结尾的元素
<div name='test1'>
<input type="text">
</div>
<div name='test2'>
</div>
<div name='test1'>
</div>
<script>
let chose = $('div[name$=t1]');
console.log(chose);//这里选中的是第一和第三个div元素
</script>
-
[attribute *= value]
选中给定的属性中的属性值是包含某些值的元素
<div name='test1'>
<input type="text">
</div>
<div name='test2'>
</div>
<div name='test1'>
</div>
<script>
let chose = $('div[name*=test]');
console.log(chose);//直接选中三个div元素
</script>
- [selector1][selector2][selectorN]
复合属性选择器,需要同时满足多个条件时使用。
<div name='test1'>
<input type="text">
</div>
<div name='test2'>
</div>
<div name='test1' id="test">
</div>
<script>
let chose = $('div[name*=test][id=test]');
console.log(chose);//选中第三个div元素
</script>
在项目开发中,我们许多人都偏向于怎么简单怎么来,dom元素的选择通常都是使用简单的class,id,name等简单的选择器,其实如果能够熟练使用属性选择器,对项目的开发效率也是能够提高的,这也是对自身的一种提升。