首页 > 代码库 > Jquery中的选择器

Jquery中的选择器

Jquery随着自身的发展,已经有越来越多的人开始了解Jquery,并且慢慢喜欢上了她,她是那么的简洁,那么的令人着迷,并吸引了一批爱好者为她做嫁衣。好了,让我来介绍一下Jquery的选择器吧。

Jquery中的选择器有很多类,比如Id选择器,class选择器,html标签选择器等。

Id选择器:就是通过一个html元素的id来选择它,因为html中的id是唯一的,所以通过id,我们可以找到唯一的html元素。
比如:<div id="div1" class="balck_tree"><p></p></div>
我们可以通过$("#div1")来选择外面的div,#是用来表示我进行的是通过id的选择。

Class选择器:就是通过css中的class来选择一个元素或者多个元素。
比如上面的例子中,我们也可以通过class来选择外面的div,$(".balck_tree"),括号里的.表示我进行的是通过class的选择。

Html标签选择器:通过html的标签来选择元素,比如还是上面的例子,我们也可以用$("div")来选择,不过要记住,这样会选择页面上所有的div,所以他一般是用来选择那些大类,然后配合其他的选择器来使用。

下面介绍一些常用的选择器的用法:


$("*") 所有元素
$("#lastname") id="lastname" 的元素
$(".intro") 所有 class="intro" 的元素
$("p") 所有 <p> 元素
$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
   
$("p:first") 第一个 <p> 元素
$("p:last") 最后一个 <p> 元素
$("tr:even") 所有偶数 <tr> 元素
$("tr:odd") 所有奇数 <tr> 元素
   
$("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
$("ul li:gt(3)") 列出 index 大于 3 的元素
$("ul li:lt(3)") 列出 index 小于 3 的元素
$("input:not(:empty)") 所有不为空的 input 元素
   
$(":header") 所有标题元素 <h1> - <h6>

   
$(":contains(‘W3School‘)") 包含指定字符串的所有元素
$(":empty") 无子(元素)节点的所有元素
$("p:hidden") 所有隐藏的 <p> 元素
$("table:visible") 所有可见的表格
   
$("[href]") 所有带有 href 属性的元素
$("[href=http://www.mamicode.com/‘#‘]") 所有 href 属性的值等于 "#" 的元素
$("[href!=‘#‘]") 所有 href 属性的值不等于 "#" 的元素
$("[href$=‘.jpg‘]") 所有 href 属性的值包含以 ".jpg" 结尾的元素
   
$(":input") 所有 <input> 元素
$(":text") 所有 type="text" 的 <input> 元素
$(":password") 所有 type="password" 的 <input> 元素
$(":radio") 所有 type="radio" 的 <input> 元素
$(":checkbox") 所有 type="checkbox" 的 <input> 元素
$(":submit") 所有 type="submit" 的 <input> 元素
$(":reset") 所有 type="reset" 的 <input> 元素
$(":button") 所有 type="button" 的 <input> 元素
$(":image") 所有 type="image" 的 <input> 元素
$(":file") 所有 type="file" 的 <input> 元素
   
$(":enabled") 所有激活的 input 元素
$(":disabled")  所有禁用的 input 元素
$(":selected") 所有被选取的 input 元素
$(":checked") 所有被选中的 input 元素