jQuery对象获取

1.jQuery选择器

使用 $(selector) 可以根据选择器规则, 获取到相应的JQ对象。

 <div class="head">
        <a href="" class="logo">
            <img src="" alt="">
        </a>
        <ul class="nav">
            <li class="nav-item">
                <a href="">首页</a>
            </li>
            <li class="nav-item">
                <a href="">新闻</a>
            </li>
            <li class="nav-item">
                <a href="">视频</a>
            </li>
        </ul>
    </div>
    <ul class="list">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
    </ul>
    <p title="hello">不凡学院</p>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // 使用基本选择器(class/id/标签名)
        var $head = $('.head');

        // 使用层级选择器(后代/子代...)
        var $lis = $('.nav .nav-item');

        // 使用筛选选择器
        var $li0 = $('li.item:eq(0)');

        // 使用属性选择器
        var $p = $('p[title]');
    </script>

由上例可知：通过 $(选择器) 可以获取到选择器内容对应的 jQ 对象，jQ 对象是由符合选择器条件的所有 DOM 元素组成的伪数组。

1.1基本选择器

符号	说明
$(‘#demo’)	选择 id 为 demo 的元素
$(‘.demo’)	选择 class为 demo 的元素
$(‘div’)	选择所有 div 标签元素
$(‘*‘)	选择所有标签元素
$(‘.arr.arr-left’)	交集选择器，选择同时具有 arr 和 arr-left 类名的元素
$(‘.arr, .arr-left’)	并集选择器，选择具有 arr 或 arr-left 类名的元素

1.2 层级选择器

符号	说明
空格	后代选择器
>	子代选择器
+	紧邻选择器
~	兄弟选择器

1.3 属性选择器

符号	说明
$(‘a[href]’)	具有 href 属性的 a 标签
$(‘a[href=’baidu’]’)	href 属性为’baidu’的 a 标签
$(‘a[href!=’baidu’]’)	href 属性不为’baidu’的 a 标签,包括不具有 href 属性的 a 标签
$(‘a[href^=’www’]’)	href 属性以’www’开头的 a 标签
$ (‘a[href $=’cn’]’)	href 属性以’cn’结尾的 a 标签
$(‘a[href*=’i’]’)	href 属性包含’i’的 a 标签
$(‘a[href][title=’内容’]’)	具有 href 属性且 title 属性为’内容’的 a 标签

1.4 筛选选择器

符号	说明(index 从 0 开始)
:eq(index)	匹配一个给定索引值的元素
:gt(index)	匹配所有大于给定索引值的元素
:lt(index)	匹配所有小于给定索引值的元素
:odd	匹配所有索引值为奇数的元素
:even	匹配所有索引值为偶数的元素
:first	获取匹配的第一个元素
:last	获取匹配的最后一个元素

1.5 其他选择器

符号	说明(index从0开始)	用法
:empty	匹配所有不包含子元素或者文本的空元素	$(‘li:empty’)
:contains(text)	匹配包含给定文本的元素	$(‘li:contains(‘john’)’)

以上方式除基本筛选选择器外选择元素效果与在CSS使用时效果一致。

2. JQuery对象与DOM对象

通过 $(选择器) 可以获取到选择器内容对应的 jQ 对象，jQ 对象是由符合选择器条件的所有 DOM 元素组成的伪数组。

2.1 jQ对象中取出DOM对象

如果我们想把 jQuery 对象包含的 DOM 对象取出，只需对应数组下标取值即可：

// 获取第三个li DOM元素
console.log("第三个li DOM元素", $lis[2]); // <li>li_3</li>
// 获取button元素
console.log("获取button元素", $btn[0]); // <button>按钮</button>

var btn = document.querySelector("button");
console.log($btn[0] === btn); // true

jQ 还提供了 $ele.get(index) 的方法让我们获取其中的 DOM 元素：

// 获取第三个li DOM元素
console.log("第三个li DOM元素", $lis.get(2)); // <li>li_3</li>

2.2 DOM对象转化为jQ对象

为了区分 jQ 元素与 DOM 元素，防止使用方法不当。业界常用方法是使用 $ 作为变量名的前缀修饰获取的 jQ 元素。如上面例子中的 $btn 指代获取的 jQ 对象，btn 指获取的 DOM 对象。

注：因为获取 jQ 对象的方法本质上是调用函数，因此通常使用变量来获取经常使用 jQ 对象，而不是每次都使用 $(selector)
去选择。

不推荐写法：

// 每次操作时, 都要获取jq对象
$(".box").css("width", 100);
$(".box").addClass("d1");
$(".box").attr("title", "hello");

推荐写法：

// 对于要频繁使用的jq对象, 交给变量存储
var $box = $(".box");
$box.css("width", 100);
$box.addClass("d1");
$box.attr("title", "hello");