jQuery选择器（学习笔记）_8.下面使用jquery选择页面中的所有p标签,正确的是( )。 a.$(".p") b.$("#p-CSDN博客

本文链接：https://blog.csdn.net/celery_lush_sakura/article/details/79025318

1.jQuery选择器是什么

CSS选择器是找到元素后添加样式，jQuery选择器是找到元素后添加行为；

2.jQuery选择器

jQuery选择器包含基本选择器、层次选择器、过滤选择器和表单选择器；

2.1基本选择器（最简单，最常用）

通过元素id、class和标签名来选择DOM元素，每个id名称只能选择一次，class允许重复使用；

$("#test")；获取id为test的元素（#id）（单个元素）

$(".test")；获取class为test的所有元素（.class）（集合元素）

$("p")；获取所有的p元素（element）（集合元素）

$("*")；匹配所有元素（*）（集合元素）

$("div,span,p.myClass") ;选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素（selector1，selector2，......selectorN）（集合元素）

2.2层次选择器

通过DOM元素之间的层次关系来获取特定元素，例如后代元素、兄弟元素、子元素、相邻元素；

后代元素：$（"ancestor descendant"）选取ancestor下的所有后代元素

子元素：$("parent>child") 选取parent元素下的child子元素

相邻元素：$('prev+next') 选取紧接在prev后的next元素

兄弟元素：$('prev~siblings) 选取prev之后的所有siblings元素

其中，$('prev+next')等价于next()方法：$("prev").next("next")；

$('prev~siblings)等价于nextAll()方法：$("prev").nextAll("siblings")；

而$('prev~siblings)与siblings()的区别在于，前者只是prev之后的同辈元素，而后者是包括前后所有的同辈元素；

2.3 过滤选择器

基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤器；

2.3.1基本选择器

$("div:first")：选取所有<div>元素中的第一个<div>元素；

$("div:last)：选取所有<div>元素中的最后一个<div>元素；

$("input:not(.myClass)")：选取所有样式不是myClass的<input>元素；

：odd（奇数）；：even（偶数）；

：eq（index）（索引等于）;：gt（index）（索引大于）；：lt（index）（索引小于）；

：header（标题元素）；：animated（当前正在执行动画的元素）；

注意：这里的index从0算起；

2.3.2内容过滤选择器

：contains（text）：选取含有文本内容为“text”的元素；

：empty：选取不包含任何子元素（包括文本元素）的元素；

：has（selector）：选取包含有选择器匹配的元素的元素；

：parent：选取所有有子元素（包括文本元素）的元素；

2.3.3可见性过滤选择器

：hidden（不可见）；：visible（可见）；

需要注意的是：可见性选择器中，需要注意选择器（：hidden），不仅包括样式属性display为“none”的元素，也包括文本隐藏域（<input type = "hidden"/>）和visibility:hidden之类的元素；

2.3.4属性过滤选择器

通过元素的属性来获取相应的元素；

[attribute]：选取拥有属性attribute的元素；

[attribute=value]：选取属性attribute的值等于value的元素；[attribute!=value]；

[attribute^=value]：选取属性attribute的值以value开始的元素；[attribute$=value]（以value结束）；

[attribute*=value]：选取属性attribute的值包含value的元素；

[selector1][selector2]......[selectorN]：交集；1且2且N

2.3.5子元素过滤选择器

:nth-child(index/odd/even/equation/2/3/3n/3n+1)：选取每个父元素下的第index个子元素或者奇偶元素；

:first-child：选取每个父元素的第一个子元素，例：($"ul li:first-child")：选取ul下的第一个li元素；

:last-child;

:only-child：如果某个元素是他父元素的唯一子元素，那么他将被选取；

注意：这里的index从1开始；

2.3.5表单对象属性过滤选择器

主要是对所选择的表单元素进行过滤；

:enabled：选取所有可用元素；:disabled；

:checked：选取所有被选中的元素（单选框，复选框）；

:selected：选取所有被选中的选项元素（下拉列表）；

2.4表单选择器

获取表单的某个或者某类型的元素；

:input：选取所有的<input>,<textarea>,<select>,<button>元素；

:text（单行文本框）；:password（密码框）；:radio（单选框）；:checkbox（多选框）；:submit（提交按钮）；:image（图像按钮）；:reset（重置按钮）；:button（所有按钮）；:file（所有上传域）；:hidden（所有不可见元素）；

3.选择器中的一些注意事项

属性值中出现了“#”、“.”、“（”、“]”等特殊字符时，获取时需要进行转义；

例如$("#id\\#b")；//对“#”进行转义；

$("#id\\[b\\]")；//对“[”和“]”进行转义；

注：不能在属性前加“@”符号；

带空格和不带空格的选择器：

$(".test:hidden")；选取隐藏的class为“test”的元素；

$(".test :hidden")；选取class为“test”的里面的隐藏元素；

4.案例研究

4.1页面初始化

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-Strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>1-1</title>
    <style type="text/css">
        li{ width:33.333%;float:left;}
        .showmore { clear:both; text-align:center;padding-top:10px;}
    </style>
    <script src = "../Scripts/jquery-3.2.1.js" type = "text/javascript"></script>
    <script type = "text/javascript">
    </script>
</head>
<body>
<div class="SubCategoryBox">
    <ul>
        <li><a href="#">佳能</a><i>(30440) </i></li>
        <li><a href="#">索尼</a><i>(27220) </i></li>
        <li><a href="#">三星</a><i>(20808) </i></li>
        <li><a href="#">尼康</a><i>(17821)</i></li>
        <li><a href="#">松下</a><i>(12289)</i></li>
        <li><a href="#">卡西欧</a><i>(8242)</i></li>
        <li><a href="#">富士</a><i>(14894)</i></li>
        <li><a href="#">柯达</a><i>(9520)</i></li>
        <li><a href="#">宾得</a><i>(2195)</i></li>
        <li><a href="#">理光</a><i>(4114)</i></li>
        <li><a href="#">奥林巴斯</a><i>(12205)</i></li>
        <li><a href="#">明基</a><i>(1466)</i></li>
        <li><a href="#">爱国者</a><i>(3091)</i></li>
        <li><a href="#">其他品牌相机</a><i>(7275)</i></li>
    </ul>
    <div class="showmore">
        <a href="more.html"><span>显示全部品牌相机</span></a>
    </div>
</div>
</body>
</html>

4.2添加点击按钮的事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-Strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>1-1</title>
    <style type="text/css">
        li{ width:33.333%;float:left;}
        .showmore { clear:both; text-align:center;padding-top:10px;}
        .promoted { color:#F50;}
    </style>
</head>
<body>
<div class="SubCategoryBox">
    <ul>
        <li><a href="#">佳能</a><i>(30440) </i></li>
        <li><a href="#">索尼</a><i>(27220) </i></li>
        <li><a href="#">三星</a><i>(20808) </i></li>
        <li><a href="#">尼康</a><i>(17821)</i></li>
        <li><a href="#">松下</a><i>(12289)</i></li>
        <li><a href="#">卡西欧</a><i>(8242)</i></li>
        <li><a href="#">富士</a><i>(14894)</i></li>
        <li><a href="#">柯达</a><i>(9520)</i></li>
        <li><a href="#">宾得</a><i>(2195)</i></li>
        <li><a href="#">理光</a><i>(4114)</i></li>
        <li><a href="#">奥林巴斯</a><i>(12205)</i></li>
        <li><a href="#">明基</a><i>(1466)</i></li>
        <li><a href="#">爱国者</a><i>(3091)</i></li>
        <li><a href="#">其他品牌相机</a><i>(7275)</i></li>
    </ul>
    <div class="showmore">
        <a href="more.html"><span>显示全部品牌相机</span></a>
    </div>
</div>
<script src = "../Scripts/jquery-3.2.1.js" type = "text/javascript"></script>
<script type = "text/javascript">
    var $category = $("ul li:gt(5):not(:last)");
    $category.hide();
    var $togglebtn = $('div.showmore > a');
    $togglebtn.click(function () {
        if($category.is(":visible")){
            $category.hide();
            $(".showmore a span")
                .css("color","#203cff")
                .text("显示全部品牌相机");
            $("ul li a").removeClass("promoted");
            return false;
        }
        else {
        $category.show();
        $(".showmore a span")
            .css("color","#203cff")
            .text("精简显示品牌");
        $("ul li a").filter(":contains('佳能'),:contains('三星'),:contains('卡西欧')")
            .addClass("promoted");
        return false;   //避免超链接跳转；
        }
    })
</script>
</body>
</html>