jQuery

jQuery@TOC

jQuery选择器

通过jQuery方法获取的元素对象。返回的是jQuery的包装集

<!-- 基础选择器 
        id选择器         #id属性值     $("id属性值")            同名以第一个为准
        类选择器         #class属性值     $("class属性值")
        元素选择器       标签名/元素名     $("标签名/元素名")
        通用选择器         *            $("*")
        组合选择器         选择器1，选择器2     $("选择器1，选择器2")   指定选择器选中的对象
     层级选择器          
     	后代选择器：$("选择器1   选择器2")  选择选择器1内部的所有选择器2
     	子选择器：$("选择器1 > 选择器2")    选择选择器1内部的所有子选择器2
     属性选择器
     	属性名称选择器：$("选择器[属性名]")  选择包含指定属性的选择器
     	属性值选择器：$("选择器[属性名='值']") 选择包含指定属性等于指定值的选择器
     	  			 $("选择器[属性名!='值']") 包含指定属性不等于指定值的选择器
     	  			 $("选择器[属性名^='值']") 包含指定属性以指定值开头的选择器 
     	  			 $("选择器[属性名$='值']")包含指定属性以指定值结尾的选择器 
     	  			 $("选择器[属性名*='值']")包含指定属性含有指定值的选择器 
     	属性选择器也可以复合使用，$("div[class='myClass'][id]")，选择calss为myClas并且存在属性id的div元素
     过滤选择器
     	首/尾元素选择器：${"选择器：first/last"} 获得指定选择器的元素中的第一个/最后一个元素
     	非元素选择器：${"选择器1：not(选择器2)"} 获得指定选择器1的元素中不包含选择器2的元素
     	奇数/偶数选择器：${选择器：odd/even} 获得指定选择器的元素中索引为奇数/偶数的元素，索引从0开始计数
     	等于/大于/小于索引选择器：${选择器：eq/gt/it(index)} 获得指定选择器的元素中等于/大于/小于指定索引的元素，索引从0开始计数
     	标题选择器：${：header}  获得标题元素，固定写法
     表单过滤选择器
     	可用/不可用元素选择器：${:enabled/disabled} 获得满足选择器中可用/不可用的元素
     	单复选框选择器：${:checked}  获得单选/复选框选中的元素
     	下拉框选择器：${:selected} 获得下拉框选中的元素
     还有选中元素的方法，children('选择器')子代元素，find('选择器')后代元素,siblings('选择器')兄弟元素（不包括自己，可用于排他算法）,parent()父代,eq(index)相当于eq选择器,next()下一个兄弟,prev()上一个兄弟
-->

jQueryDOM操作

JS和jQuery对象的转化

JS对象只能调用JS中提供的方法和属性，不能使用jquery中的方法和属性
jquery对象只能使用jQuery的方法和属性，不能使用JS提供的方法和属性

1.DOM对象转换为jQuery对象
            var box = document.getElementById("box");//DOM对象
            $(box);//jQuery对象
        2.jQuery对象转换为一个DOM对象
            var $divs=$("div");//jQuery对象  divs中包含所有的$divs元素
            var div=$divs[0];//div为DOM对象
            //使用jQuery中的get()方法进行转换，只需要提供一个索引就可以了
            var div=$divs.get(0);//将$divs对象中索引为0的元素转换为DOM对象

DOM操作

入口函数

    // jQuery入口函数有两种写法，
    $(document).ready(function(){

    })
    $(function(){

    })
    jQuery入口函数可以添加多个，js（window.onload）后面的会覆盖前面的
    jQuery入口函数在dom树加载完成后执行，window.onload需要等所有资源加载完成（dom树，外部css/js外部链接，图片等）
    jQuery入口函数优先执行

属性操作

获取属性
attr(属性名),prop(属性名)

attr与prop的区别：
如果是固有属性，attr()和prop()方法均可获取
如果是自定义属性，attr()可获取，prop()不可获取
如果是返回值为Boolean类型的属性，若设置了属性，attr()返回具体的 值，prop()返回true;若未设置属性，attr()返回undefined，prop()返回false

width(),height()获取宽高，$(window).width获取可视区域的宽
innerWidth(),innerHeight()获取宽高（包括内边距）
outerWidth(),outerHeight()获取宽高（包括内边距和边框），加上参数true后可以获取宽高（包括内边距，边框，外边距）

offset()方法获取一个包含left和top的对象，获取元素距离document的距离
position()方法获取一个包含left和top的对象，获取元素距离其定位的父元素的距离

scrollLeft(),scrollTop()获取元素被卷曲的宽高（滚动条移动的距离），添加参数可以设置元素的卷曲宽高
设置属性
attr(“属性名”,“属性值”)
prop(“属性名”,“属性值”)
可以同时设置多个属性，采用对象方式添加
移除属性
removeAttr(“属性名”)移除多个属性用空格分开

内容操作

类似text()的获取内容、类似text(“text内容”)的设置内容 （如果有多个jQuery对象，则操作多个对象）
html()、html(“html内容”)、text()、text(“text内容”) 均操作非表单元素
val()、val(“值”)操作表单元素

样式操作

css(“属性名”) 获取样式，（如果包含多个dom对象则只获取第一个对象）
css(“属性名”，“属性值”)设置样式

除了单样式设置外，还可以实现多样式设置（如果有多个dom对象则设置所有对象的样式）
$('#box1').css({
            'width':'200px',
            'height':'200px',
            'background-color': "blue",
            'border':'1px solid red'
        })

class类操作
.addClass(“类名”)方法添加类，添加多个类用空格隔开类名
.removeClass(“类名”)方法移除类，如果没有参数则移除所有的类
判断类.hasClass(‘类名’)，有则返回true，否则为false
切换类.toggleClass(‘类名’)如果有该类则移除该类，没有就添加该类

节点操作

创建节点
html()获取和设置元素内容，会获取所有的元素内容，设置内容会把原来的内容覆盖（设置内容包含标签会解析）

$('#div1').html('我是设置的内容  <a href="#">百度以下</a>')

$()创建的节点只会保存在内存中，需要进行添加

var $a=$('我是设置的内容  <a href="#">百度以下</a>')

添加节点

append()  父元素.append(子元素)作为最后一个子元素添加，作用是剪切该元素后添加（若子元素已经存在则会剪切）
prepend() 父元素.append(子元素)作为第一个子元素添加，作用是剪切该元素后添加（若子元素已经存在则会剪切）
before(),after() A元素.append(B元素)在A元素之后/前添加元素B
appendTo(),prependTo()子元素.append(父元素)作为最后一个/第一个子元素添加，作用是剪切该元素后添加（若子元素已经存在则会剪切）

删除，清空节点
指定元素.remove(）删除所选元素或者子元素，内容和元素都删除

指定元素.empty() 清空所选元素的内容

克隆节点
clone(),克隆触发元素，存在于内存中（克隆内容和所有元素），可以带有参数，不论是true还是false，都可以克隆子代节点，但是如果是false，那么不会克隆事件，默认false

事件

简单事件注册
形如click(),不支持同时注册也不支持动态注册（新创建的事件不会继承事件）

bind事件注册
$(“元素”).bind(“事件类型”,function(){})
支持同时注册，但也不支持动态注册
1.同时为多个事件绑定同一个函数

        指定元素.bind("事件类型1 事件类型2 ...",function(){})

2.为元素绑定多个事件，并设置对应的函数

        指定元素.bind("事件类型",function(){

        }).bind("事件类型",function(){

        })

3.为元素绑定多个事件，并设置对应的函数

        指定元素.bind({

            "事件类型":function(){},

            "事件类型":function(){}

        })

unbind()解绑事件，无参数解绑所有
delegate注册方式
支持同时注册也支持动态注册（原理事件冒泡）
$('父元素‘).delegate(‘子元素’，‘事件名’，回调函数)
undelegate()解绑事件，无参数解绑所有
on注册方式（推荐方式，已经统一）

注册简单事件（不支持动态注册）
$(selector).on( "click", function() {});
注册绑定事件（支持动态注册）
$(selector).on( "click",“span”, function() {})
selector为父元素
// 第一个参数：绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数： 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：事件处理函数

off()解绑事件，无参数解绑所有
off('click')解绑所有click事件

事件触发
trigger()

$(“select”).trigger(“change”);
这里的trigger触发了select的change事件。
还可以用来触发自定义事件
$('select').on('biling',fuction(){})
$(“select”).trigger(“biling”);

jQuery动画

三种基础动画

显示,隐藏,切换
show()和hidden(),如果没有参数，就不会有动画效果
有参数的话第一个参数代表时长（单位毫秒或者代表时长的fast，slow,normal），第二个参数代表回调函数
toggle()如果元素是显示的就隐藏，隐藏就显示
划入，划出
通过高度变化（向下增大/向上减小）来动态显示匹配的所有元素
slideDown()，slideUp()，参数同上，但无参数时有动画效果（有默认参数）
slideToggle()通过高度变化来切换所有匹配元素的可见性
淡入，淡出
改变元素透明度的动画
fadeIn()，fadeOut()参数同上，但无参数时有动画效果（有默认参数）
fadeToggle() 通过透明度的变化来开关所有匹配元素的淡入和淡出效果
fadeTo()，fadeTo(speed,opacity,easing,fn)， 将所有匹配元素的透明度以渐进方式调整到指定的透明度

自定义动画animate

animate(params,speed,easing,fn)

自定义动画
            参数1：必选的**对象**代表需要做动画的属性
            参数2：可选的 代表执行动画的时长
            参数3：可选的 代表的是缓动还是匀速 linear匀速 swing缓动（默认）
            参数4：可选的 回调函数（可以在其中再写动画）
            //将div1和div2移动到left:800处
            $('#mr800').click(function(){

                $('#div1').animate({
                    left:800
                },2000,'linear',function(){
                    alert('动画执行完毕')
                })//匀速

                $('#div2').animate({
                    left:800
                },2000,'swing')//缓动
            })

停止动画
1、stop()

stop() 停止所有在指定元素上正在运行的动画，默认运动到哪个位置就停止在哪个位置
有两个参数（默认两个false），第一个代表是否清除队列（true就会停止所有动画，flase只停止当前动画，后续继续执行），第二个代表是否到最终效果（对当前动画）

2、finish()

finish() 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

当 .finish()触发时，立即停止正在进行的动画，不管此时运动的位置，瞬间到达运动完成的位置

jQuery ajax

请求方式

1.$.ajax
jQuery 调用 ajax 方法

格式：$.ajax({});

参数：

type：请求方式GET/POST

url: 请求地址 url

async：是否一步，默认是 true 表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调用此函数

error：请求失败时调用此函数

beforeSend: 在所有发送请求的操作（open, send）之前调用该函数

complete: 不管是成功还是失败都是完成，都会执行这个 complete 函数(一般成功与失败都需要执行的操作写在这里)

    <script src="js/jquery-3.6.0.js"></script>
    <script>

        $('#bt').click(function () {
            $.ajax({
                type: "get",        // 请求方式
                url: "js/data.txt", // 请求路径
                dataType: "json",   // 预期返回一个 json 类型数据
                success: function (data) {   // data是形参名，代表返回的数据
                    // Dom 操作
                    // 创建 ul
                    var ul = $('<ul></ul>');
                    // 遍历 data
                    for (let i = 0; i < data.length; i++) {
                        // 创建 li
                        var li = '<li>' + data[i].userName + '</li>';
                        // 将 li 追加到 ul 中
                        ul.append(li);
                    }
                    // 将 ul 追加到 body 中
                    $("body").append(ul);
                }
            });
        });
    </script>

2.$.get
这是一个简单的 GET 请求功能以取代复杂 $.ajax。

请求成功时可调用回调函数，如果需要在出错时执行函数，请使用 $.ajax

$.get("请求地址","请求参数",function(形参){
    
});

$.get('js/data.json',{name:'tom',age:19},function(data){
    console.log(data);
});

3.$.post
$.post 与 $.get用法一模一样，唯一的区别在于这是发送了一个 post 请求，由于现在咱们没有后端，所以暂时无法展示，post 必须是去访问一个后端服务器路径

$.post("请求地址","请求参数",function(形参){
    
});

4.$.getJSON
$ .getJSON和$ .get、$ .post的用法是一致的，但是区别在于，$.getJSON 只能获取 json 格式的数据，其他的无法获取，而 $.get 和 $.post都可以获取。

$.getJSON("请求地址","请求参数",function(形参){
    
});

$.getScript( )方法

jQuery提供了 $.getScript( )方法来直接加载js文件，与加载一个HTML片段一样简单方便，并且不需要对JavaScript文件进行处理，JavaScript文件会自动执行。
全局事件
jquery中ajax的全局事件ajaxStart() 和ajaxStop()是给文档对象注册了之后，每当有ajax请求就会触发的事件。

			.ajaxStart(function () {
                // 只要有 ajax 请求发生 就会执行
                $('.loading').fadeIn();
                // 显示加载提示
                console.log('注意即将要开始请求了');
            })
            .ajaxStop(function () {
                // 只要有 ajax 请求结束 就会执行
                $('.loading').fadeOut()
                // 结束提示
                console.log('请求结束了');
            });