jQuery

获取的是一个jQuery特有的伪数组，只支持jQuery的函数操作方法，不支持任何js的操作方法。

jQuery伪数组中存储的是js标签对象，通过jQuery伪数组[索引下标]可以获取一个独立的js标签对象，独立的js标签对象支持js的操作语法

js标签对象通过$()或者jQuery()包裹就转化为jQuery伪数组，支持jQuery的操作语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1" class="div2" name="div3" index="div4">我是div标签</div>

    <ul>
        <li>我是第一个li标签</li>
        <li>我是第二个li标签</li>
        <li>我是第三个li标签</li>
        <li>我是第四个li标签</li>
        <li>我是第五个li标签</li>
        <li>我是第六个li标签</li>
        <li>我是第七个li标签</li>
        <li>我是第八个li标签</li>
        <li>我是第九个li标签</li>
        <li>我是第十个li标签</li>
    </ul>
    <!-- 引入jQuery文件 -->
    <script src="../jQuery.js"></script>
   
    <script>
        //通过关键词$和jQuery来调用jQuery外部文件中的函数

        // jQuery伪数组 不支持 js的操作语法
        console.log( $('div') );
        console.log( jQuery('div') );

        //jQuery伪数组[索引下标] 获取的是一个 js标签对象 
        console.log( jQuery('div')[0] ); 
        //和js中DOM操作，获取的标签对象完全一致
        console.log(document.querySelector('div'));

        //通过 jQuery伪数组[索引下标] 可以获取一个 独立的 js标签对象 
        // 支持 js的DOM操作语法
        jQuery('div')[0].style.color = 'red';
        $('div')[0].addEventListener('click' , function(){
             console.log(111);
        })

        // js标签对象 使用 $() 或者 jQuery() 包裹 
        // 转化为 jQuery 伪数组 
        console.log( $(document.querySelector('div')) );

    </script>

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

        // id属性
        console.log( $('#div1') );

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

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

        // 自定义属性属性值
        console.log( $('[index="div4"]') );

        // css选择器
        console.log( $('ul>li') );
        console.log( $('ul>li:nth-child(3)') );

        // jQuery特有的选择器

        // 按照索引下标3 获取 第四个li标签
        console.log( $('ul>li:eq(4)') );

        // 按照 奇数索引下标 获取 偶数个li标签
        console.log( $('ul>li:odd()') );

        // 按照 偶数索引下标 获取 奇数个li标签
        console.log( $('ul>li:even()') );

        // 获取 第一个 最后一个 li
        console.log( $('ul>li:first()') );
        console.log( $('ul>li:last()') );
    </script>

</body>
</html>

三、jQuery_筛选器

在jQuery选择器，获取的结果基础上，对jQuery选择器的获取结果，再次进行筛选

3.1、jQuery筛选器的原理

在jQuery编程中，有一种编程方式称为链式编程，选择器和筛选器配合可以完成的链式编程

3.2、jQuery的筛选器语法

$().first() 获取第一个标签对象

$().last() 获取最后一个标签对象

$().eq(索引下标) 按照索引下标查询

$().prev() 获取上一个标签对象

$().next() 获取下一个标签对象

$().prevAll() 获取上所有标签对象

$().nextAll() 获取下所有标签对象

$().siblings() 获取所有兄弟标签对象

$().parent() 获取直接父级标签对象

$().parents() 获取所有父级标签对象

$().find(条件) 按照条件查询

$().indenx() 获取标签对象的索引下标

$().end() 返回上一个操作对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
        <li>我是第五个li</li>
        <li>我是第六个li</li>
        <li>我是第七个li</li>
    </ul>

    <!-- 引入jQuery文件 -->
    <script src="../jQuery.js"></script>

    <script>
        // 获取第一个
        console.log( $('ul>li').first() );

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

        // 按照索引下标获取
        console.log( $('ul>li').eq(4) );

        // 上一个
        console.log( $('ul>li').eq(4).prev() );

        // 上所有
        console.log( $('ul>li').eq(4).prevAll() );

        // 下一个
        console.log( $('ul>li').eq(4).next() );

        // 下所有
        console.log( $('ul>li').eq(4).nextAll() );

        // 所有兄弟标签
        console.log( $('ul>li').eq(4).siblings() );

        // 直接父级
        console.log( $('ul>li').eq(4).parent() );

        // 所有父级
        console.log( $('ul>li').eq(4).parents() );

        // 索引下标
        console.log( $('ul>li').eq(4).index() );

        // 按照条件查询
        console.log( $('ul').find('li') );


        // 返回上一个操作的标签对象
        console.log( $('ul>li').eq(0).css('color' , 'red').parent().find('li').eq(1).css('color' , 'green').parent().find('li').eq(2).css('color' , 'blue').end().end().end() );                                       

    </script>

</body>
</html>

四、jQuery_标签属性的操作

4.1、专门操作布尔属性

$().prop( 属性 , 属性值 ); 设定属性值

$().prop( 属性 ); 获取属性值

$().removeProp( 属性 ); 删除属性

4.2、操作其他属性

$().attr( 属性 , 属性值 ); 设定属性值

$().attr( 属性 ); 获取属性值

$().removeAttr(属性); 删除属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div name="我是div标签的name属性值" index="5">我是div标签</div>
    <input type="checkbox">

    <script src="../jQuery.js"></script>
    <script>
        // 设定 属性和属性值
        $('div').attr( 'id' , 'div1' );
        $('div').attr( 'class' , 'div2');

        // 获取 属性的属性值
        console.log( $('div').attr( 'name' ) );
        console.log( $('div').attr( 'index' ) );

        // 删除 属性
        $('div').removeAttr( 'name' );


        // 布尔属性的操作
        $('input').prop('checked' , true);

    </script>

</body>
</html>

五、jQuery_标签class选择器操作

jQuery操作语法

$().addClass() 新增

$().removeClass() 删除

$().hasClass() 判断有没有

有 true

没有 false

$().toggleClass() 切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="div1 div2 div3 div4 div5">我是div</div>

    <script src="../jQuery.js"></script>
    <script>
        // js操作语法
        const oDiv = document.querySelector('div');
        console.log( oDiv.classList );

        // jQuery的操作语法
        
        // 新增
        $('div').addClass('div6 div7');

        // 删除
        $('div').removeClass('div1 div7 div100');

        // 判断有没有
        console.log( $('div').hasClass('div2') );
        console.log( $('div').hasClass('div99') );

        // 切换
        $('div').toggleClass('div5');   

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

六、jQuery_标签内容和数据的操作

js操作标签内容和数据

标签对象.innerHTML

标签对象.innerText

标签对象.value

jQuery

$().html();

$().text();

$().val();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        我是div标签
        <p>我是p标签</p>
        <span>我是span标签</span>
        <h1>我是h1标签</h1>
    </div>

    <input type="text"><br>
    <button>获取数据</button>

    <script src="../jQuery.js"></script>
    <script>
        // 获取标签内容
        console.log( $('div').html() );
        console.log( $('div').text() );

        // 点击获取数据
        $('button').click(()=>{
            console.log( $('input').val() );
        })

    </script>

</body>
</html>

七、jQuery_标签css样式的操作

语法形式1

一次只设定一个css属性和属性值

$().css('属性' , 属性值);

语法形式2

一次设定多个属性属性值

$().css({属性1:属性值1 , 属性2:属性值2 , 属性3:属

性值3... })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>我是div标签</div>

    <script src="../jQuery.js"></script>
    <script>

        // 只设定一个属性属性值
        //$('div').css('color' , 'red');
        //$('div').css('width' , '200px');
        //$('div').css('height' , 200);
        // 一次设定多个属性属性值
        $('div').css( { color : 'red' , width:200 , height:200 , background: 'pink' , fontSize : 50 } );

    </script>

</body>
</html>

八、jQuery_标签的占位

$().height() $().width

内容宽高

$().innerHeight() $().innerWidth()

内容+padding

$().outerHeight() $().outerWidth()

内容+padding+border

$().outerHeight(true) $().outerWidth(true)

内容+padding+border+margin

display:none的标签仍然可以获取占位数据

$().offset()

获取标签和html页面的间距

执行结果是一个对象

left 属性存储左间距

top属性存储上间距

display:none的标签不能获取间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0 ;

        }

        div{
            width: 200px;
            height: 100px;
            padding:50px;
            border:5px solid #000;
            margin: 150px;
            background: pink;

            /* display: none ; */
        }

        h1{
            width: 600px;
            height: 600px;
            position: relative;
            margin: 200px;
            background: green;
        }

        p{
            width: 200px;
            height: 200px;
            background: blue;

            margin: 300px;

            display: none;
        }
        
    </style>
</head>
<body>
    <div></div>

    <h1>
        <p></p>        
    </h1>

    <script src="../jQuery.js"></script>
    <script>
        // 标签占位 内容
        console.log( $('div').width() );
        console.log( $('div').height() );

        // 标签占位 内容 + padding
        console.log( $('div').innerWidth() );
        console.log( $('div').innerHeight() );

        // 标签占位 内容 + padding + border
        console.log( $('div').outerWidth() );
        console.log( $('div').outerHeight() );

        // 标签占位 内容 + padding + border + margin
        console.log( $('div').outerWidth(true) );
        console.log( $('div').outerHeight(true) );

        // 和 定位父级的间距
        const oP = document.querySelector('p');
        console.log( oP.offsetTop );
        console.log( oP.offsetLeft );

        // 和 html页面的间距
        console.log( $('p').offset() );

    </script>

</body>
</html>

九、jQuery_ 隐式迭代

针对jQuery伪数组的设定操作

自动循环遍历伪数组中的每一个标签对象，对一个标签对象，执行需要的设定操作

针对jQuery伪数组的获取操作

只获取第一个标签的数据数值，不会获取每一个标签的数据数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>我第一个li</li>
        <li>我第二个li</li>
        <li>我第三个li</li>
        <li>我第四个li</li>
        <li>我第五个li</li>
    </ul>

    <script src="../jQuery.js"></script>
    <script>
        // 本质是 循环遍历 jQuery伪数组中的 每一个标签对象 
        // 也就是 li标签对象 
        // 设定 每一个li标签对象的css样式的属性和属性值
        // 本质的设定方法 还是js的DOM操作 也就是 标签对象.style.color = 'red';
        $('ul>li').css( {color:'red'} );

        // 循环遍历伪数组 给每一个li标签都设定 点击事件
        $('ul>li').click( () => console.log(1111) );

        // 获取操作
        // 自会获取第一个标签对象的数据数值
        console.log( $('ul>li').html() );

    </script>

</body>
</html>

十、jQuery_循环遍历

$().each(function(参数1，参数2){})

参数1 索引下标

参数2 数组的数据数值

参数2是以js标签对象形式存储的标签对象，不支持jQuery的操作函数，支持js的DOM操作语法，可以$(参数2)转化伪jQuery伪数组，再使用jQuery函数执行操作

写在each中的return只会终止each的程序执行，不会终止函数中所有程序的执行，也就是each()之后，函数中程序的执行不会终止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>    
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
        <li>我是第五个li</li>
    </ul>

    <script src="../jQuery.js"></script>
    <script src="../tools.js"></script>

    <script>
        $('ul>li').css( { color: setColor() } );
        
        // 循环遍历基本语法
        $('ul>li').each( function( key , item ){
            // 参数2 以 js标签对象的形式 存储 标签对象
            // js标签对象 不支持 jQuery的函数操作方式
            console.log( item );

            // 自己手动循环遍历 jQuery伪数组 
            // 每次 给 li标签定义一个随机的字体颜色

            // $() 包裹 js标签对象 转化为 jQuery伪数组 
            // 使用 jQuery 函数方法来操作设定
            // $(item).css( {color: setColor() } );

            // 对 js标签对象 使用 js的DOM操作语法
            item.style.color = setColor() ;
        })

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

十一、jQuery_ajax

在jQuery中，封装好了ajax请求，只需要我们调用函数执行就可以了

jQuery封装的ajax请求函数

$.get( 参数1, 参数2, 参数3 , 参数4)

参数1 请求的url地址

参数2 请求携带的参数，可以是对象形式，也可以是字符串形式

参数3 请求成功执行的函数程序

参数4 设定的响应体格式

只能执行get请求方式

$.post( 参数1,参数2,参数3,参数4 )

参数1 请求的url地址

参数2 请求携带的参数可以是对象形式也可以是字符串形式

参数3 请求成功执行的函数程序

参数4 设定的响应体格式

只能执行post请求方式

$.ajax( {以对象形式定义ajax请求的设置} )

url 请求的地址

type/method 请求的方式

data 携带的参数，可以是对象，可以是字符串

dataType 响应体格式

success 请求成功执行的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button name="get1">get1</button><br>
    <button name="post1">post1</button><br>
    <button name="ajax1">ajax1</button>

    <script src="../jQuery.js"></script>
    <script>
        // 给 button get1 添加点击事件
        $('[name="get1"]').click(function(){
            // 执行 ajax请求
            // $.get( 'http://localhost:8888/test/third' , 'name=张三&age=18' , function( response ){

            //     console.log( response );
            // });


            $.get( 'http://localhost:8888/test/third' , {name:'李四' , age:20} , function( response ){

                    console.log( response );

                });
        })

        // 给 button post1 添加点击事件
        $('[name="post1"]').click(function(){
            // 发送 post 请求方式
            $.post( 'http://localhost:8888/test/fourth' , {name:'王五' , age:50} , function( response ){
                console.log( response )
            })
        })

        // 给 button ajax1 添加点击事件
        $('[name="ajax1"]').click(function(){
            // 发送get请求
            $.ajax({
                url : 'http://localhost:8888/test/third' , 
                type : 'get' ,
                data : {name:'李四' , age:20} ,
                success : function( response ){
                    console.log( response );
                }
            })

            // 发送post请求
            $.ajax({
                url : 'http://localhost:8888/test/fourth' , 
                type : 'post' ,
                data : {name:'王五' , age:50} ,
                success : function( response ){
                    console.log( response );
                }
            })
        })

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