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

Jquery中的选择器

2024-07-18 21:02:25   221人阅读

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 元素


联系
我们