jQuery的属性选择器

学好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等简单的选择器，其实如果能够熟练使用属性选择器，对项目的开发效率也是能够提高的，这也是对自身的一种提升。