jQuery选择器 | Serena = 阳光果苏 = 自律给我自由

# JQ 对象和 JS 对象对比

JQ 和 JS 的方法可以混用吗？不可以混用

# JQ 对象：

用 JQ 选择器选择的元素形成的对象


var $div=$("div");//jQ对象
$div.style.color="red";//不可以的
$div.setAttribute();//不可以

# JS 对象：

用 JS 选择器选择的元素（节点）


var box=document.getElementById("box");//JS对象
box.css("color","red");//不OK

# 如何混用

1. 如果 JS 对象要使用 JQ 的方法，则需要将 JS 对象转为 JQ 对象才可以：（需求较多，可能会较常使用，即 JS 转 JQ）。操作：


//将JS对象丢到$()超级函数中即可转为JQ对象，就可以使用JQ的方法了
$(box);//JQ对象
$(box).css("color","red")//ok

2.JQ 转为 JS 对象（需求特少，面试）。步骤：


var $div=$("div");
$div.style.color="red"//不可以的
//方法1：给JQ对象添加下标
$div[0];//JS对象了，可以使用JS的方法和属性了
//方法2：给JQ对象添加一个方法
$div.get(0)//===JS对象
$div[0]style.color="red"//ok了

# JQ 的选择器

约等于 CSS 的选择器。分两部分：1、CSS3、CSS2 选择器；2、JQ 特有选择器

# jquery 基本选择器

id 选择器 $("#id") 选择了 id 名为 id 的元素（单个）
类选择器 $(".class") 选择了所有 class 名为 class 的所有元素（集合）
标签选择器 $(“p”) 选择了所有标签名为 p 的所有元素（集合）
通配选择器 $("*") 选择了所有的元素（集合）
并列选择器 $("#id1,#id2") 选择了 id 名为 id1 和 id2 的 2 个元素（集合）
类选择器 $(“p.class”) 选择了类名为 class 的所有 p 元素（集合）

# 关系选择器

空格 $(“div p”) 后代选择器选择所有的后代元素（集合）
> $(“div>p”) 子代选择器选择所有的子代元素（集合）
+ $(“div+p”) 相邻选择器选择紧挨着的下一个元素
~ $(“div~p”) 兄弟选择器，选择后面的所有的 p 元素

# 过滤选择器

:eq(index) $("div").eq(0) 选择第一个匹配的div元素，也可这样写：$ (“div:eq(0)”)。
:gt(index) $("div").gt(2) 选择序号大于2的元素，也可这样写：$ (“div:gt(2)”)
:lt(index) $("div").lt(2) 选择序号小于2的元素，也可这样写：$ (“div:lt(2)”)
:not (selector) $(“div:not (class)”) 选择不为 class 的 div 元素
:odd $(“tr:odd”) 所有奇数元素
:even $(“tr:even”) 所有偶数元素
:first $(“p:first”) 第一个
元素
:last $(“p:last”) 最后一个
元素
:nth-child (index) index 从 1 开始，nth 表示第几个

# 属性选择器

[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href=’#’]") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!=’#’]") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$ =’.jpg’]") 所有 href 属性的值包含以".jpg" 结尾的元素
[attribute^=value] $("[class^=‘li’]") 所有 class 属性的值包含以 "li" 开头的
[attribute*=value] $("[class*=‘li’]") 所有 class 属性的值包含 "li" 的元素

# 属性状态选择器

:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素

# 表单选择器 (JQ 特有)

:input $(":input") 选取所有的 input、textarea、button、select 元素
:text $(":text") 选取所有的单行文本框
:password $(":password") 选取所有的密码框
:radio $(":radio") 选取所有的单选框
:checkbox $(":checkbox") 选取所有的多选框
:submit $(":submit") 选取所有的提交按钮
:image $(":image") 选取所有的图像按钮
:reset $(":reset") 选取所有的重置按钮
:button $(":button") 选取所有的按钮
:file $(":file") 选取所有的上传域
:hidden $(":hidden") 选取所有的不可见元素
:focus $(":focus") 选取当前获取焦点的元素

# jQuery 特有选择器

$(“div”).filter (".box") 选取含有指定选择器的 div 元素，也就是选择的是 div，在 div 范围内包含了指定的选择器的该 div 都能被选择 (过滤自己)
$(“div”).find (".box") 选取在 div 元素内，所有包含了指定的选择器（".box"）的元素都能被选择（通过父级找子元素时使用，等价于后代选择器）
$(“div:contains (‘text’)”). 选取包含指定文本的元素
$(“div”).has (选择器) 选取含有指定选择器的 div 元素，选的也是 div, 而不是 “选择器”
$(“div:even”) 偶数行
$(“div:odd”) 奇数行
$("div).first() == $(“div:first”)
$("div).last() == $(“div:last”)
$("div).eq (索引) == $(“div:eq (2)”)
$("div).gt (索引) == $(“div:gt (2)”)
$("div).lt (索引) == $(“div:lt (2)”)

# JQ 选择器实例


<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        *{ margin:0; padding:0;}
        body {font-size:12px;text-align:center;}
        a { color:#04D; text-decoration:none;}
        a:hover { color:#F50; text-decoration:underline;}
        .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
        .SubCategoryBox ul { list-style:none;}
        .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
        .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;}
        .showmore a span { padding-left:15px; background:url(../img/down.gif) no-repeat 0 0;}
        .showmore a.on span { padding-left:15px; background:url(../img/up.gif) no-repeat 0 0;}
        .promoted a { color:#F50;}
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入jQuery -->
    <script type="text/javascript">
        $(function () {
            /*
            作业要求：
            1、默认显示前6个产品+最后一个其他品牌相机（图1）
            2、当点击“显示全部品牌”时，展开所有品牌，并对佳能，尼康，奥林巴斯高亮品牌高亮显示，然后按钮文字要变成：精简显示品牌，同时向下箭头变成向上箭头图标（图2）
            3、再一次点击该按钮时，恢复默认显示（图1）
             */
            /*作业提示：
       
               让元素显示   $(元素).show();
       
               让元素隐藏   $(元素).hide();
       
               改变元素的就文本：
               $(元素).text('新的文本')
            */
        });
    </script>
    <style type="text/css">
        .cur a {
            color: orange
        }
    </style>
    <script src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $li=$("ul li:gt(5):not(:last)");
            $li.hide();
            $(".showmore").click(function () {
                if ($li.is(":hidden")) {
                    $li.show();
                    $(".showmore a span").text("精简显示品牌");
                    $(".showmore a").addClass("on");
                    $("ul li").first().addClass("promoted");
                    $("ul li:eq(3)").addClass("promoted");
                    $("ul li:eq(10)").addClass("promoted");
                }
                else {
                    $li.hide();
                    $(".showmore a span").text("显示全部品牌");
                    $(".showmore a").removeClass("on");
                    $("ul li:first").removeClass("promoted");
                    $("ul li:eq(3)").removeClass("promoted");
                    $("ul li:eq(10)").removeClass("promoted");
                }
            })
        })
    </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="#"><span>显示全部品牌</span></a>
        </div>
    </div>
</body>

</html>

jquery