jQuery学习第二阶段-jQuery选择器

jQuery选择器

类似于css中的选择器和js中的DOM获取方法，是获取页面上的元素对象的方法。

修改元素样式几种方法：

1 直接在元素标签上添加样式

2 通过css添加样式 

3 通过JavaScript获取DOM元素对象添加样式  

4 通过jQuery获取$元素对象添加样式

1 ID选择器

$(‘#id’);//返回id的元素对象，然后使用对象的方法。

（在使用css操作元素样式的时候，也使用了id选择器，#id{样式}的格式；

在DOM中，获取页面元素对象，使用document.getElementById(‘id’);的格式；）

2 标签选择器

$(‘标签名’);//返回标签名的元素对象，然后使用对象的方法。

（在使用css操作元素样式的时候，标签名{样式}的格式；

在DOM中，获取页面元素对象，使用document.getElementByTagName(‘标签名’);）

在jQuery的标签选择器里，封装了遍历的函数，隐式迭代思想。

3 类选择器

$(‘.classname’);//返回类名的元素对象，然后使用对象的方法。

（在使用css操作元素样式的时候，.类名{样式}的格式；

4 标签+类选择器

$(标签.classname);//返回标签拥有classname的元素对象，然后使用对象的方法。

5 组合选择器（复合选择器）

$(选择器1，选择器2，选择器3);//返回所有选择器选择的元素对象，然后使用对象的方法。

6 层次选择器

1后代选择器

$(‘选择器1 选择器2’);//页面元素具有层次结构，只想选择该层次内部的元素，从外到里使用选择器，并用逗号隔开，返回的是层次下的所有符合的后代元素对象，然后使用对象的方法。注意：所谓所有符合的元素，指的是不仅局限于子元素，是该标签下的所有符合的后代元素。

2子代选择器

$(‘选择器1 > 选择器2’);//页面元素具有层次结构，只想选择选择器1下的直接子代元素2，选择器1后面加>，并且>前后都要有空格，返回直接子代的子元素对象，然后使用对象的方法。

3 相邻元素选择器

$(‘选择器1 + 选择器2’);//返回选择器1选择的元素对象后面紧邻的同级选择器2元素对象。等价于：$(‘选择器1’).next(‘选择器2’);

$(‘选择器1 ~ 选择器2’);//返回选择器1选择的元素对象后面所有同级的选择器2选择的元素对象。等价于：$(‘选择器1’).nextAll(‘选择器2’);

拓展：$(‘选择器1’).prev(‘选择器2’);//返回选择器1选择的元素对象前面紧邻的同级选择器2元素对象。

           $(‘选择器1’).prevAll(‘选择器2’);//返回选择器1选择的元素对象前面所有的选择器2选择的元素对象。

            $(‘选择器1’).siblings(‘选择器2’);//返回选择器1选择的元素对象所有的同级选择器2元素对象。