4-1. jQuery选择器（核心选择器、属性选择器）

使用jQuery步骤

1）选取元素

2）对选中的元素执行需要的操作

我们先研究如何使用jQuery选取元素以及对选取的结果进行“各种筛选”

 

jQuery选择器

 jQuery中选择元素只要把选择器以 字符串 的形式传递给$函数即可，返回的结果是一个jQuery对象

CSS中的选择器在jQuery中都可以使用，但jQuery又扩充了自己的选择器，如下：

 

1）核心选择器（用的最多）

id 名：        选择具有特定id属性值的元素

.类名：        选择具有特定class的元素

元素.类名：选择具有特定class的某类元素

*    ：           选择所有元素

元素：         选择特定类型的元素

<script type="text/javascript">
	$(function(){
		/* 调用$函数，传入一个选择器，它返回的是一个对象(对象里面jQuery提供了很多的方法和属性，也称为jQuery对象)*/
		/* 比如length属性：jQuery对象里面有多少元素*/
		alert($('*').length);
		alert($('div').length);
		alert($('.ps').length);
		alert($('a.ps').length);
		alert($('#div1').length);
		
	});
</script>

//注：这里的length属性代表个数而不是长度

 

2）属性选择器（根据元素的属性来选择元素）

[attr]        选取定义了attr属性的元素，即使这个属性没有值

alert($('[href]').length);

 

[attr="val"]      选取attr属性值等于字符串val的元素

alert($('[href="Robin.Ltesoft.com"]').length);

 

[attr^="val"]    选取attr属性值以字符串val开头的元素

alert($('[class^="p"]').length);

 

[attr$="val"]    选取attr属性值以字符串val结尾的元素

alert($('[class$="s"]').length);

 

[attr*="val"]    选取attr属性值包含字符串val的元素

alert($('[class*="1"]').length);

 

[attr~="val"]    选取attr属性其中一个值是字符串val的元素

alert($('[class~="down"]').length);

 

[attr|="val"]    选取attr属性值等于字符串val，或属性值为连字符分隔的值列表且第一个值是字符串val的元素

alert($('[class|="ps"]').length);

 

[selector1][selector2][selectorN]    复合属性选择器，需要同时满足多个条件时使用 

alert($('[href="http://ltesoft.com"][target="_blank"]').length);

 

属性选择器可以配合其他选择器使用！

alert($('p[class="divs"]').length);

alert($('div[class="divs"]').length);