什么是 jQuery 前端的一个方法库/函数库

                将很多过功能,封装好,我们可以直接使用


            官网  https://jquery.com/

            中文  https://jquery.cuishifeng.cn/


            jQuery的三大优点

                1,强大的选择器机制 --- 可以支持所有语法方式获取标签对象

                2,优质的隐式迭代   --- 获取对获取的所有标签对象都进行操作

                3,无所不能的链式编程 --- 一行代码搞定所有操作


            如何使用jQuery

                1,通过外部文件加载 jQuery 文件

                2,通过 $ 或者 jQuery 语法形式 来调用 jQuery文件中定义的方法

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1" class="div2" index="1">123</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script src="./jquery.min.js"></script>
    <script>
        // 选择器:获取标签对象的方法

        // 所有选择器的方法,获取的标签对象,都是一个伪数组
        // 伪数组不要使用forEach 和 for...in 循环遍历
        // jQuery 有自己的循环遍历 语法

        // $()   jQuery()   获取标签对象
        // ()中可以定义任意 html和css 支持的语法形式

        // 标签名称
        // $('div')
        // console.log( $('div') );

        // id名称
        // $('#div1')
        // console.log( $('#div1') );

        // class名称
        // $('.div2')
        // console.log( $('.div2') );

        // 属性=属性值
        // $('[index="1"]')
        // console.log( $('[index="1"]') );

        // 通过标签结构获取

        // 兄弟关系
        // $('div~ul')    $('div+ul')
        // console.log( $('div~ul') );

        // 后代关系
        // $('ul>li')    $('ul li')
        // console.log( $('ul>li') );

        // 后代第一个
        // console.log( $('ul>li:first') );

        // 后代最后一个
        // console.log( $('ul>li:last') );

        // 按照标签是第几个找
        // 纯css语法
        console.log( $('ul>li:nth-child(2)') );
        console.log( $('ul>li:nth-child(odd)') );
        console.log( $('ul>li:nth-child(even)') );

        // 纯jQuery语法 都是按照索引下标找
        // 后代 奇数索引标签对象 odd 
        // css是按照个数找  jQuery是按照索引找
        console.log( $('ul>li:odd') );

        // 后代 偶数索引标签对象 even
        // css是按照个数找  jQuery是按照索引找
        console.log( $('ul>li:even') );


        // 按照标签的索引下标找
        console.log( $('ul>li:eq(2)') );


        // 相互转化

        // 要使用 js 语法操作 jQuery标签对象(伪数组)
        // 必须使用[]语法,获取某一个对应的标签
        $('ul>li:eq(2)')[0].style.color = 'red';


        const oDiv = document.querySelector('div');

        // $(oDiv)  jQuery(oDiv)  就是 jQuery标签对象(伪数组)
        console.log($(oDiv))
        console.log(jQuery(oDiv))


        // 总结:
        // 1,获取的标签对象,都是伪数组
        // 2,伪数组不要使用 forEach 和 for...in 循环
        // 3,jQuery 有自己的循环语法
        // 4,jQuery支持所有的html,css语法形式获取标签对象

        // 5,定义的方法是纯css语法,按照css语法原则执行 :nth-child(2)  第二个
        
        // 6,定义的方法是纯jQuery语法,按照索引下标原则执行 :eq(2)  索引下标是2

        // 7,jQuery 语法获取的标签对象,不支持所有的 js 语法操作
        //   因为你获取到的是一个伪数组
        //   可以通过[]语法,从伪数组中,获取一个标签对象,使用js语法进行操作

        // 8,js语法获取的标签对象,如果想要使用jQuery的方法操作
        //   必须要先转化为 jQuery标签对象(伪数组)
        //   $(js标签对象)   jQuery(js标签对象)




    </script>
</body>
</html>