首页 > 安全资讯 >

JQuery常用选择器总结

17-12-27

JQuery常用选择器总结。

1.基本选择器

 #id       $("#test").css("background","#bbffaa")//选取id为test的元素
 element   $("p") ;//选取所有的<p>元素
  *        $("*");//选取所有元素
 .class  $(".test");//选取类名为test的元素
  selector1,selector2   $("p,p.myClass,span");//组合选择

2.层次选择器

$("p span")//选取<p>里所有<span>元素(所有后代元素)
$("p>span")//选取<p>元素下元素名为<span>的子元素(只限于子元素)
$(".one+p")//选取class 为one的下一个<p>同辈元素
等价于$(".one").next("p")
$("#two~p")//选取id为two的元素后面的所有<p>同辈元素
等价于$("#two").nextAll("p")

3.过滤选择器(以“:”开头)
1.基本过滤

:first  选取第一个元素:  $("p:first")  选区所有<p>元素中第一个<p>元素
:last   选取最后一个元素  $("p:last")
:not(selector) 去除所有给定选择器匹配的元素           $("input:not(.myClass)") 选取class不是myClass的<input>元素
:even 选取索引数是偶数的元素 索引从0开始 $("p:even")
:odd 选取索引数是偶数的元素 索引从0开始 $("p:odd")
:eq(index)选取索引数等于index的元素  $("p:eq(2)")
:gt(index)选取索引数大于index的元素  $("p:gt(2)")
:lt(index)选取索引数小于index的元素   $("p:lt(2)")
:header   选取所有标题元素<h1>..<h6> $(":header")
:animated  选取所有当前正在执行动画的的所有元素 $("p:animated")选取正在执行动画的<p>元素
:focus 选取当前获得焦点的元素 $(":focus")

2.内容过滤

:contains(text)选取含有文本内容为text的元素 $("p:contains('我')")选取含有文本"我"的<p>元素
:empty 选取不包含子元素或者文本的空元素 $("p:empty")选取不包含子元素(包括文本元素)的<p>空元素
:has(selector)选取含有选择器所匹配的元素的元素 $("p:has(p)")选取含有<p>元素的<p>元素
:parent 选取还有子元素或文本的元素 $("p:parent")选取拥有子元素(包括文本元素)的<p>元素 

3.可见性过滤

:hidden 选取所有不可见元素 $(:hidden)选取所有不可见元素 包括<input type="hidden"> <p> 和<p>等 如果只想选取<input>元素,可以使用 $("input:hidden")
:visible 选取所有可见元素  $(p:visible) 选取所有可见的<p>元素
  例如 显示隐藏的<p>元素 $(p:hidden).show(3000)

4.属性过滤(Jquery中的单引号和双引号没有区别,如果一个字符串,外面用单引号里面的双引号就字符串了,反之,如果外面是双引号里面的单引号就是字体串,双引号不能组合双引号使用 ,单引号亦然,但是平时要尽量使用单引号)

[attribute] 选取拥有此属性的元素 $("p[id]")选取拥有属性id的元素
[attribute=value] 选取属性值为value的元素 $("p[title=test]") 选取属性title为“test”的<p>元素
[attribute!=value] 选取属性的值不等于value的元素 $("p[title!=test]")
[attribute^=value] 选取属性的值以value开始的元素 $("p[title^=te]")选取属性title的值以te开始的p元素
[attribute$=value] 选取属性的值以value结束的元素 $("p[title$=est]")选取属性title的值以est结束的p元素
[attribute*=value] 选取属性的值含有value的元素 $("p[title*=es]")选取属性title的值含有es的p元素
[attribute|=value] 选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符"-")的元素 $('p[title|="en"]')
[attribute~=value] 选取属性用空格分隔的值中包含一个给定值的元素 $('p[title~="uk"]')
[attribute1][attribute2][attributeN] 用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围 
$("p[id][title$='test']")

5.子元素过滤

:nth-child(index/evenn/odd/equation) 选取每个父元素下得第index个子元素或者奇偶元素(index从1算起) 
解析::eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0开始的
:first-child 选取每个父元素的第一个子元素  集合元素 
解析::first只返回单个元素,而:first-child选择符将为每个父元素匹配第一个子元素。例如$("ul li:first-child");选取每个<ul>中第一个<li>元素
:last-child 选取每个父元素的最后一个子元素 
解析::last只返回单个元素,:last-child选择符将为每个父元素匹配最后一个子元素 例如$("ul li:last-child");选择<ul>中最后一个<li>元素
:only-child 如果某个元素是他父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配 $("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素 

6.表单对象属性过滤

:enabled 选取所有可用元素 $("#form1:enabled") 选取id为form1的表单内所有可用元素
:disabled 选取所有不可用元素 $("#form1:disabled")
:checked 选取所有被选中的元素(单选框,复选框)$("input:checked")选取所有被选中的<input>元素
:selected 选取所有被选中的选项元素(下拉列表)
$("select option:selected") 选取所有被选中的选项元素 

4.表单选择器
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
选择器的注意事项
\\为转义字符

$(".test :hidden") 带空格表示选取class为test里的隐藏元素
$(".test:hidden")不带空格表示选取隐藏的class为test的元素

JQuery 提供的选择器的扩展
MoreSelectors for jQuery
这是一个jQuery的插件 用于增加更多的选择器,例如.color可以匹配颜色, :colIndex可以匹配表格中的列
插件地址:https://plugins.jquery.com/project/moreSelectors

其他使用CSS选择器的方法
1.document.getElementsBySelector() 通过选择器来获取文档元素
document.getElementBySelector(‘p#main p a.external’)
2.cssQuery() 利用css选择器查找元素的脚本 支持css1 css2 以及部分css3选择器,它支持一些jQuery尚不能支持的选择器
elements=cssQuery(selector[.form]);
官方网站 https://dean.edwards.name/my/cssQuery/

选择器实例举例
初步隐藏部分品牌,按钮为 显示全部品牌
点击前样式
点击按钮 按钮内容变为精简显示品牌,并且显示全部隐藏元素,高亮显示推荐品牌
点击后样式

大体代码框架:

if(元素显示){元素隐藏}
else{元素显示}

源代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.12.4.js"></script>

<script type="text/javascript">
$(document).ready(function(e) {

    var $category=$(".SubCategoryBox ul li:gt(5):not(:last)");/*从第七个开始隐藏 除“其他品牌”以外*/
    $category.hide();
    var $toggleBtn=$("p.showmore>a");/*类名为showmore的p元素的子元素a*/
    $toggleBtn.click(function(){

        if($category.is(":visible")){
            $category.hide();
            $(this).text("显示全部品牌");
            $("ul li").removeClass("promoted");/*移除class类*/
            }
        else{
        $category.show();

        $(this).text("精简显示品牌");
    $("ul li").filter(":contains('e'),:contains('f'),:contains(c)").addClass("promoted");/*filter(expr)为筛选出符合要求的元素 addClass是添加class类*/
    return false;
        }
        });
});

</script>
<style type="text/css">
a{color:#000000;
text-decoration:none; }
a:hover{ color:#E10E12;}
ul{
    list-style-type:none;   }
.SubCategoryBox ul li {  display:block;float:left; width:200px; line-height:20px;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.promoted a{
    color:#F1F007;}
</style>
</head>

<body>
<p class="SubCategoryBox">
   <ul>
       <li><a href="">a</a></li>
       <li><a href="">b</a></li>
       <li><a href="">c</a></li>
       <li><a href="">d</a></li>
       <li><a href="">e</a></li>
       <li><a href="">f</a></li>
       <li><a href="">g</a></li>
       <li><a href="">h</a></li>
       <li><a href="">i</a></li>
       <li><a href="">j</a></li>
       <li><a href="">k</a></li>
       <li><a href="">l</a></li>
       <li><a href="">m</a></li>
       <li><a href="">其他品牌相机</a></li>

   </ul>
   <p class="showmore">
      <a href="more.html"><span>显示全部品牌</span></a>
   </p>
</p>

</body>
</html>
相关文章
最新文章
热点推荐