学习jQuery，首先要学习他的元素选择器，jQuery的强大之处就在于他本身支持多种选择器样式，他的选择符可以让我们获得页面中任何元素进行操作，并且使用简单方便，可读性强。在编写jQuery应用的时候可以根据要求使用不同的选择器来选择元素。要学习jQuery首先要掌握选择器，由于jQuery改变了以往传统的javascript编程风格，我们需要找到一个快速的入门方法，而学习选择器的编写就是入门的第一步，下面就由保定倬威达软件有限公司的技术老师为大家分享一下如何快速掌握这jQuery的敲门砖——jQuery选择器。如果你还在为jQuery的风格而烦恼，相信看了之后会有收获的。

1、基本元素选择器

在使用这种选择器时，可以使用元素标记名、元素类名、元素ID来填写选择器。例如：

$(“p”)                                  //选取<p>元素

$(“p.info”)                              //选取所有class=”info”的<p>元素

$(“p#demo”)                              //选取id=”demo”的第一个<p>元素

分层选择器：使用这种选择器时，需要传入多个值，并用空格或大于号分隔。例如：

$(“div input”)                              //选择div下所有的input

$(“div > input”)                           //选择父元素（div）下的子元素（input）

 

2、基本条件选择器

使用这种选择器时，需要在元素的选择符后加上基本条件运算符，这些条件运算符都是jQuery内置的运算符。例如：

$(“p:first”)                                          //选择第一个段落

$(“p:last”)                                           //选择最后一个段落

$(“tr:even”)                                         //选择偶数表格行

$(“tr:odd”)                                          //选择奇数表格行

$(“input:not(:checked)”)                    //选择所有未被选中的元素

$(“tr:eq(1)”)                                        //选择索引值为1的表格行

$(“tr:gt(0)”)                                        //选择索引值大于0的表格行

$(“tr:lt(2)”)                                         //选择索引值小于2的表格行

$(“:header”)                                        //选择所有标题元素

$(“:animated”)                                    //选择所有正在执行动画的元素

 

3、内容条件选择器

使用这种选择器时，需要在元素的后面加上内容筛选运算符。例如：

$(“div:contains(‘John’)”)                    //选择包含‘John’文本的层元素

$(“td:empty”)                                     //选择不包含文本或者子元素的表格单元

$(“div:has(p)”)                             //选择包含段落元素的层元素

$(“td:parent”)                                     //选择包含文本或者子元素的表格单元

 

4、可见性条件选择器

使用这种选择器时，需要在元素后面加上可见性条件。例如：

$(“tr:hidden”)                                     //选择所有隐藏的表格行

$(“tr:visible”)                                      //选择所有可见的表格行

 

5、属性选择器

使用这种选择器时，需要利用元素属性并使用一定条件来进行选择。例如：

$(“div[id]”)                                         //选择具有id属性的层

$(“input[name=’newletter’]”)            //选择具有属性name并且属性值为‘newletter’的表单输入元素

$(“input[name!=’newsletter’]”)   //选择具有属性name并且属性值不为‘newletter’的表单输入元素

$(“input[name^=’news’]”)          //选择具有属性name并且属性值以‘news’为起始内容的表单输入内容

$(“input[name$=’letter’]”)          //选择具有属性name并且属性值以‘letter’为结束内容的表单输入元素

$(“input[name*=’man’]”)                   //选择具有属性name并且属性值包含‘man’内容的表单输入元素

$(“input[id][name$=’man’]”)             //选择具有属性id和name并且name的值以‘man’为结束内容的表单输入内容

 

6、子元素选择器

使用这种选择器时，需要加入子元素的选择条件。例如：

$(“ul li:nth-child(2)”)                          //选择第2个列表项

$(“ul li:nth-child(even)”)                    //选择偶数索引列表项

$(“ul li:nth-child(odd)”)                     //选择奇数索引列表项

$(“ul li:nth-child(3n)”)                 //选择索引值为3的倍数的列表项

$(“ul li:first-child”)                      //选择第一个列表项

$(“ul li:last-child”)                       //选择最后一个列表项

$(“ul li:only-child”)                            //选择列表出现且仅出现一个的列表项

 

7、表单元素选择器

使用这种选择器时，需要加入代表不同表单元素类型的标示符。例如：

$(“:input”)                                                 //选择所有input，textarea，select和button元素

$(“:text”)                                            //选择单行文本框

$(“:password”)                                   //选择密码框

$(“:radio”)                                                 //选择单选按钮

$(“:checkbox”)                                   //选择复选框

$(“:submit”)                                        //选择提交按钮

$(“:image”)                                         //选择所有图像域

$(“:reset”)                                           //选择重置按钮

$(“:button”)                                        //选择普通按钮

$(“:file”)                                             //选择文件域

$(“:hidden”)                                       //选择隐藏域

 

8、表单属性选择器

使用这种选择器时，需要利用对表单属性的筛选操作符。例如：

$(“input:enabled”)                              //选择所有可用元素

$(“input:disabled”)                      //选择所有不可用元素

$(“input:checked”)                      //选择所有被选中的复选框和单选按钮

$(“select option:selected”)          //选择所有被选中的option

关键字：保定PHP软件开发  保定网站制作  
上一篇：ThinkPHP验证码简介
下一篇：<script>标签的for属性和event属性有什么用