【无标题】

1.jQuery

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

概念：jQuery 是一个常用的JavaScript 语法库，用于简化js编程

语法：jQuery中提供了两个全局变量$和jQuery，它们的值是同一个函数，按插件的命名规则，应该用jQuery命名，但为了简化，使用$代替也可以，一般用$

$这个函数返回值是一个对象，称之为jquery对象，jquery语法库中定义的几乎所有属性和方法都需要使用jquery对象引用

console.log($());//jQuery.fn.init

$()

1.参数

1.1 $()参数可以是样式选择器，用于查找所有符合条件的标签，放入一个jquery对象结构中返回，jquery对象其实是一个类数组结构

1.1.1.jquery对象（类数组结构）转换成数组

• Array.from($("ul li"))

• $("ul li").toArray()

1.1.2 jquery对象转换成数组，遍历

• $("ul li").toArray().forEach(function(item, index) {} );

• $("ul li").each(function(index, item) {});

• 特别注意：js原生的forEach循环回调第一个参数是item，jquery的each循环回调第一个参数是index

1.2 $()参数还可以是标签本身，会用jquery对象包裹这个js元素，然后就可以调用jquery的API

• $(document.body)

• $(document.body)[0]：可以通过索引取出jquery对象中的标签元素

2.jQuery常用API

2.1关于元素的增删改查

2.1.1 增

• $("body").append("<h1>大标题</h1>");：在body结束位置插入标签

• $("body").prepend("<h1>大标题</h1>");：在body开始位置插入标签

• $("<h3>3标题</h3>").appendTo("body");：把h3标签插入到body结束位置

• $("<h4>4标题</h4>").prependTo("body"); ：把h4标签插入到body开始位置

2.1.2 删

• $("h2").remove(); //删除所有h2标签

• $("h1").detach(); //删除所有h1标签

• $("h3").empty(); //清空h3标签

2.1.3 改

• $("h4").text("h4"); //设置标签文本

• $("h3").html("h3"); //设置标签内容，会识别html标签字符串

2.1.4 查

• $("li")[2]; //找到第三个li标签，得到的是一个li标签

• var lis3 = $("li").eq(2); //找到第三个li标签，得到的是一个新的jQuery对象

• lis3.parent()：找到父元素

• lis3.children()：找到子元素

• lis3.siblings()：找到所有兄弟元素

• lis3.prev()：找到相邻的上一个兄弟元素

• lis3.prevAll()：找到前边的所有兄弟元素

• lis3.next()：找相邻的下一个兄弟元素

• lis3.nextAll()：找后边的所有兄弟元素

2.2 关于标签属性的操作

2.2.1 普通属性，attr()可以设置所有属性

• attr一个参数表示读取属性，两个参数表示设置属性

        $("h4").attr("age", "10"); //设置属性
        $("h4").attr("age"); //读取属性
        $("h4").attr("id", "abc");

2.2.2 class属性

• attr（参数1，参数2）两个参数表示设置class属性

• $("h4").addClass("c")：添加class属性

• $("h4").removeClass("a")：删除class属性

• $("h4").toggleClass("c")：如果class属性值存在c则删除c，没有c就添加c

• var bool = $("h4").hasClass("b")：判断class是否有class属性

2.3 style样式属性

• $("h4").css("font-size", "40px")：css参数可以时属性名和属性值，也可以是央视对象；如果是央视对象是，属性名加引号属性值用小写，属性名不加引号属性值用小驼峰

        $("h4").css("font-size", "40px"); //参数可以是属性名和属性值
        $("h4").css({ //参数页可以是样式对象
            color: "red",
            backgroundColor: "gray", //属性如不加引号用小驼峰
            "border-radius": "20px" //属性加引号用小写
​
        });

3.关于jquery动画

• $("h4").animate({},ms,匿名函数)：animate执行一个js动画，三个参数。

• 参数1，必选，动画结束时的样式对象

• 参数2，可选，动画的执行时间，默认400ms

• 参数3，可选，动画执行结束时调用的回调函数

• jQuery动画不支持颜色和旋转缩放的动画

        $("h4").animate({
            fontSize: "100px",
​
        }, 2000, function() {
            console.log("动画执行结束");
        });

4.关于jQuery尺寸和位置

• $("h4").width(); //获取标签的宽度

• $(window).innerWidth(); //窗口内宽

• $("h4").offset().left; //获取横纵坐标

5.关于事件

jQuery把js大部分事件单独做了封装，事件的绑定都封装成了对应的函数，函数名和事件名重名。参数时事件函数，多个标签可以一次同时绑定不需要循环。drag拖拽相关事件没有封装。

• $("li").click(function() {})

5.1 三种绑定页面加载事件的方式

• widow.οnlοad=function(){}

• $(window).ready(function() {})

• $(function() {})

6.jQuery链式调用

链式调用：一个对象可以连续打点调用多个函数，这种结构叫链式调用结构

原理：jQuery中每一个函数的返回值都是调用它的jQuery对象本身，所以一个函数调用后返回这个jQuery对象可以继续调用其他函数形成一个链式结构

        $("h3").css("color", "blue").attr("id", "h3").animate({
            fontSize: "50px"
        });