jQuery学习--jQuery选择器

最新推荐文章于 2020-12-20 08:01:33 发布

木偶跳舞

最新推荐文章于 2020-12-20 08:01:33 发布

阅读量593

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jQuery 选择器

jQuery 选择器介绍：

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:（元素选择器选取多个元素）

     $("p") 
   

实例

用户点击按钮后，所有 <p> 元素都隐藏：

实例

     $(document).ready(function(){ 
    
   $("button").click(function(){ 
    
     $("p").hide(); 
    
   }); 
    
 });

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。id选择器选取唯一的元素，若有多个相同的id，只选取第一个。

通过 id 选取元素语法如下：

     $("#test") 
   

实例

当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

实例

     $(document).ready(function(){ 
    
   $("button").click(function(){ 
    
     $("#test").hide(); 
    
   }); 
    
 });

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

     $(".test") 
   

实例

用户点击按钮后所有带有 class="test" 属性的元素都隐藏：类选择器选择多个

实例

     $(document).ready(function(){ 
    
   $("button").click(function(){ 
    
     $(".test").hide(); 
    
   }); 
    
 });

群组选择器

群组选择器

集合元素

$(“div,span,p.myclass”)选取所有<div>，<span>，和拥有class为myclass的<p>标签的一组元素。（多个元素、类等之间用逗号隔开）

层次选择器：

适合于通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和兄弟元素。

选择器	返回	示例
后代元素选择器	集合元素	$(“div span”)选取<div>里的所有的<span>元素。
子元素选择器	集合元素	$(“div>span”)选取<div>元素下元素名是<span>的子元素。（只包括子元素，孙元素就不算了）
相邻元素选择器	集合元素	$(“.one+div”)选取class为one的下一个<div>兄弟元素。
兄弟元素选择器	集合元素	$(“#two~div”)选取Id为two的元素后面的所有<div>兄弟元素。

注意：$(“prev~siblings”)选择器与siblings()方法的区别。

$(“#prev~div”)选择的是”#prev”元素后面的所有的同辈的div元素。而siblings()方法与前后位置无关，只要是同辈节点就都能匹配。

属性过滤选择器：

超链接中用的比较多

  
     $( 
     "div[id]" 
     )              选择所有含有id属性的div元素  
    
     $( 
     "input[name='newsletter']" 
     )    选择所有的name属性等于 
     'newsletter' 
     的input元素 
    
     $( 
     "input[name!='newsletter']" 
     ) 选择所有的name属性不等于 
     'newsletter' 
     的input元素 
    
     $( 
     "input[name^='news']" 
     )         选择所有的name属性以 
     'news' 
     开头的input元素 
    
     $( 
     "input[name$='news']" 
     )         选择所有的name属性以 
     'news' 
     结尾的input元素 
    
     $( 
     "input[name*='man']" 
     )          选择所有的name属性包含 
     'news' 
     的input元素 
    
     $( 
     "input[id][name$='man']" 
     )    可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

`基本过滤选择器：`

 
    $( 
    "tr:first" 
    )               选择所有tr元素的第一个  
   

 
    $( 
    "tr:last" 
    )               选择所有tr元素的最后一个  
   

 
    $(“input:not(.myClass)”)选取class不是myClass的<input>元素。 
   

 
    $( 
    "tr:even" 
    )              选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始） 
   

 
    $( 
    "tr:odd" 
    )               选择所有的tr元素的第1，3，5... ...个元素  
   

 
    $( 
    "td:eq(2)" 
    )            选择所有的td元素中序号为2的那个td元素 ，从上往下是0,1,2，。。；从下往上是-1，-2，。。。 
   

 
    $( 
    "td:gt(4)" 
    )             选择td元素中序号大于4的所有td元素 ，若为负值，指从下面算起，如-3 则为最下面两个 
   

 
    $( 
    "td:ll(4)" 
    )             选择td元素中序号小于4的所有的td元素  
   

 
    $( 
    ":header" 
    )选取网页中所有的<h1>,<h2>,<h3>... 
   

 
    $( 
    "div:animated" 
    )选取正在执行动画的<div>元素。 
   

 
    $( 
    "div:contains('John')" 
    )选择所有div中含有John文本的元素  
   

 
    $( 
    "td:empty" 
    )          选择所有的为空（也不包括文本节点）的td元素的数组  
   

 
    $( 
    "div:has(p)" 
    )       选择所有子元素含有p标签的div元素  
   

 
    $( 
    "td:parent" 
    )          选择所有的以td为父节点的元素数组  
   

 
    $( 
    "div:hidden" 
    )        选择所有的被hidden的div元素  
   

 
    $( 
    "div:visible" 
    )       选择所有的可视化的div元素  
   

$("input:focus") 匹配当前获得焦点的input元素，主要用于表单中

子元素过滤选择器：

 
    $( 
    "ul li:nth-child(2)" 
    ) 表示第二个li ,$( 
    "ul li:nth-child(odd)" 
    ),$( 
    "ul li:nth-child(3n + 1)" 
    ) （获取每个自定义子元素的元素，索引值从1开始计算） 
    $( 
    "ul li:nth-child(odd)" 
    )表示所有的奇数li 
   

 
    $( 
    "div span:first-child" 
    )          返回所有的div元素的第一个子元素（获取每个父元素的第一个子元素） 
   

 
    $( 
    "div span:last-child" 
    )           返回所有的div元素的最后一个子元素（获取每个父元素的最后一个子元素） 
   

 
    $( 
    "div button:only-child" 
    )        返回所有的div中只有唯一一个子节点的所有子元素（获取只有一个子元素的元素） 
   

语法	描述
$("*")	选取所有元素通配符选择器：例：$("ul li *").css("color","red")
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

独立文件中使用 jQuery 函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

实例

     <head> 
    
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
    
 </script> 
    
    <script src="my_jquery_functions.js"></script> 
    
 </head>