Jquery——Day1(Jquery基本选择器+过滤选择器+表单选择器+表单过滤器)

妖狐艹你老母 2022-07-12 11:41 208阅读 0赞

## A、jQuery常规选择器，大体上来讲，简单选择器、进阶选择器、高级选择器 ##

1、简单选择器，分为id选择器、元素（标签）选择器、类（class）选择器

与css进行对比，css是为了添加样式，而jQuery是完全继承了css的风格，但它是为了添加行为

（1）元素名    如“div”      div\{\}         $('div').css('color','red')

（2）    id        如“\#box”   \#box\{\}      $('\#box').css('color','red')

（3）  class     如“.box”    .box\{\}       $e('.box').css('color','red')

在上述代码段中，

共同点：都返回了DOM对象，

不同点：即1为标签名=div的所有DOM对象，3为class=box的所有DOM对象

2为id=box的唯一的DOM对象

结论：id具有唯一性。

2、进阶选择器，分为群组选择器、后代选择器、通配选择器

（1）群组选择器   span,\#box,div\{\}    $('span,\#box,div').css()

（2）后代选择器   ul—li—a （表示层层迭代）

**css添加样式——ul li a\{color:red;\}  
        jquery添加行为——$('ul li a').css('color','red');**

（3）通配选择器  \*

由于通配符为所有的元素添加样式或行为，但却不建议其在全局状态下使用，一般用在局部的环境中。

若要将li下的元素添加样式或行为，即使用$('ul li \*').css('color','red');

3、高级选择器

在层次选择器中，除了后代选择器($('ul li a').css('color','red');)之外，其他三种高级选择器是不支持IE6的，而jquery是支持IE6的。

（1）为后代选择器提供等价的find()方法

$('\#box').find('p').css('color','red');

（2）子选择器

在css样式中，\#box>p\{color:red;\}

在jQuery中，为子选择器提供children()方法

$('\#box>p').css('color','red');

$('\#box').children('p').css('color','red');

（3）next选择器

a、同级选择器    $('\#box + p').css('color','red');

b、next()方法达到同样的效果

$('\#box').next('p').css('color','red');

注意：若在next()方法中不传参数，即表示在某元素中所有的通配符\*使用

（4）nextAll选择器（后面所有的后缀节点）

a、$('\#box ~ p').css('color','red');

b、nextAll()方法：

$('\#box').nextAll('p').css('color','red');

（5）高级方法

a、prev()和prevAll()

prev()：表示同级的上一个元素

prevAll()：表示同级的所有元素

b、prevUntil()和nextUntil()选定统计的上面或下面所有的节点，一旦遇到指定的元素就停止选定

$('\#box').prevUntil('p').css('color','red');

c、siblings()：表示选取某元素所有的同辈div节点，无论前后位置

$('\#box').siblings('div').css('color','red');

总结：在jQuery中，采用的方法find()、next()、nextAll()、chirdren()这四个方法运行速度快于使用高级选择器，因为他们实现的算法不同，高级选择器是通过选择字符串来获取节点对象，而jQuery提供的多为单一选择器，可以直接获取。速度快慢的差异取决于浏览器和选择的元素内容。

## B、过滤选择器，又分为基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器 ##

（1）基本过滤选择器：:first、:last、:even/old、:lt/gt/eq、:header、:focus、:animated

（2）内容过滤选择器：

a、含有文本内容为text的元素      :contains(text)

b、不含有子元素或文本的元素     :empty

c、含有选择器所匹配的元素的元素   :has(selector)

d、含有子元素或文本的元素    :parent  （表示返回的父元素）

（3）可见性过滤选择器

a、:hidden  表示隐藏性，选取所有不可见的元素

b、:visible   表示选取素有可见的元素

$('div:hidden').css('color','red').show(1000);

（4）属性过滤选择器（一般对于超链接a）