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

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 （表示层层迭代）

<ul>
<li><a href="#">首页</a></li>
</ul>
<a href="#">首页</a>

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

（3）通配选择器  *

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

<ul>
	<li><a>厉害</a></li>
	<li><em>农民</em></li>
</ul>

若要将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）

<a title="num1">迷糊</a>
<a>故友</a>
<a title="num2">保护</a>

$('a[title]').css('color','red');

$('a[title=num1]').css('color','red');

$('a[title!=num1]').css('color','red');

此外，还可以使用attr()方法来获取相应的元素，（attr是attribute的缩写），

用is()方法判断是否存在某元素，案例如下：

<ul>
<li class="red">那就</li>
<li>接口</li>
<li class="red" title="列表1">列表1</li>
<li>接口</li>
</ul>

若要使得li->class="red"的元素是否为列表1，即用下面的表示

	alert($('.red').is(function(){
		return $(this).attr('title')=='列表1';
	}));

注意：在这里，必须使用$(this)来表示要判断的元素，否则，无论function里面是否返回true或false，都     会和调用的元素的方法无关。

（5）子元素过滤选择器

譬如:first-child、:only-child、:nth-child(even)、

<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>

<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>

若要表示li:first-child，即表示ul作为父元素的第一个孩子节点，即子元素节点

$('li:first-child').css('color','red');

                                                                                                                                                                                                              

（6）其他方法

a、slice()方法：选取元素

slice(2)：表示选择从第三个位置往后的所有                                                              slice(3,5)：表示选择的是第四个元素和第五个元素

   slice(0,-2)：表示选择的是从倒数第三个元素，向前选定所有    

b、find()方法：查找某个元素 

$('div').find('p').end().get(0);   //返回div的原生DOM

c、contents()方法：返回子节点数量

$('div').contents().size();    //返回子节点的数量，包括文本  

d、filter()方法：过滤，用于遍历元素

$('li').filter(':even').css('color','red');   

C、表单选择器

<form>
<input type="text" name="user" value="123"/>
<input type="password" name="pass" value="456" />
<input type="radio" name="sex" value="男" />
<input type="radio" name="sex" value="女" />
</form>

（1）:input——获取所有表单字段

（2）:text——获取单行文本框元素

（3）:password——获取密码栏

（4）:radio——获取单选框

（5）:submit——获取提交按钮

（6）:hidden——获取隐藏字段

$(':input').size();  

$(':input[name=city]').size();

$(':radio[name=sex]').eq(1).val();

$(':form:hidden').size(); 

D、表单过滤器

（1）:enabled——选择所有可用元素

（2）:disabled——选择所有不可用元素

（3）:checked——选择所有被选中的元素（单选框、复选框）

（4）:selected——选择所有被选中的选项元素（下拉列表）

$('form:selected').get(0);

                         

close总结：理论上讲，find()、next()、nextAll()、children()这四个方法中，如果不传递参数，即类似于传递了一个通配符*