【无标题】

最新推荐文章于 2025-05-24 15:24:14 发布

wq 笔记

最新推荐文章于 2025-05-24 15:24:14 发布

阅读量470

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_47240739/article/details/123359277

版权

本文详细介绍了jQuery的基本概念，包括其作为JavaScript语法库的作用，以及如何通过$符号创建jQuery对象。文章重点讲解了jQuery的常用API，如元素的增删改查、属性操作、样式设置、动画效果、尺寸位置获取以及事件处理。此外，还提到了jQuery的链式调用特性，帮助读者快速掌握jQuery的核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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"
        });