探索 jQuery：简化前端开发的利器

最新推荐文章于 2024-04-27 02:33:10 发布

一城烟雨452

最新推荐文章于 2024-04-27 02:33:10 发布

阅读量711

点赞数 10

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_65436886/article/details/137277582

版权

1.jquery简介

在现代的网页开发中，JavaScript 扮演着至关重要的角色，它不仅能够实现与用户的交互，还可以使页面更加动态和吸引人。然而，纯粹的 JavaScript 编码往往繁琐复杂，为了简化前端开发的过程，诞生了许多优秀的 JavaScript 库和框架，其中最著名的之一便是 jQuery。

jQuery 是一个快速、简洁的 JavaScript 库，它简化了许多常见的任务，如 HTML 文档遍历和操作、事件处理、动画效果和 Ajax 操作等。由 John Resig 在 2006 年创建，jQuery 的设计目标是使 JavaScript 更加简单和易于使用。如今，jQuery 已成为前端开发的事实标准之一，被广泛应用于各种网站和 Web 应用程序中。简而言之，jquery就是一个工具库。

2.jquery下载

下载网址：Download jQuery | jQuery或者jQuery API 中文文档 | jQuery中文网

下载版本分为生产版本和开发版本，二者的区别在于，生产版本是压缩过的体积小，以min.js为后缀，而开发版本没有压缩，体积大，但是其中的源码可以看懂。

下载到本地后，将该文件放在VS code的工作目录下，方便引入。

3.引入jquery

在head中使用script结合src来引入

测试：在script中执行console.log($)，打印函数则引入成功。

文档加载完毕事件：$(function(){ "加载完毕"})，即在使用jquery时，将script写在$()中，保证文档加载完毕，可以获取到元素。

4.jquery使用三部曲

4.1 获取元素

$("选择器") 返回的是jquery对象

jquery转js get(0)

js转jquery $(js对象)

$(this) 将js转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>
    <!-- 
        引入jquery
        在head中使用script结合src
     -->
    <script src="jquery-3.7.1.js"></script>
    <script>
        // 文档加载完毕事件  $(function(){ "加载完毕"})
        // 即在使用jquery时，将script写在$()中
        // 保证文档加载完毕,可以获取到元素

        // 理论上script可以写在任何位置，但是从上往下加载时还没有标签就开始获取元素，是找不到的
        // 所以当script写在头部时，使用$(function(){ "加载完毕"})，最好的方法就是每次使用jquery时
        // 都将其写在$(function(){})中

        $(function(){
        let con = $(".container");
        con.each(function(index,item){
            console.log(index, item);
        })
    })
    </script>
</head>
<body>
    
    <div class="container">
        <p><span>span1</span><span>span2</span><span>span3</span></p>
        <p><span>span1</span><span>span2</span><span>span3</span></p>
        <p><span>span1</span><span>span2</span><span>span3</span></p>
    </div>
    <script>
        // js工具库下载:https://www.jquery123.com/，有生产版本和开发版本
        // 生产版本是压缩过的，体积小， .min.js
        // 开发版本未压缩，体积大，但是可以看源码
        // console.log($);
    </script>
    <script>
        // jquery获取元素 $("选择器")，返回的是jquery对象
        // jquery转js get(0)
        // js转jquery $(js对象)
        let con = $(".container");
        // console.log(con);
        // let con_js = con.get(0);
        // console.log(con_js);
        // let con_jq = $(con_js);
        // console.log(con_jq);

        // 遍历 each  function(index,item){ $(item)}
        con.each(function(index,item){
           console.log(index, item);
        })
        // 文档加载完毕事件  $(function(){ "加载完毕"})
        // 即在使用jquery时，将script写在$()中
        // 保证文档加载完毕,可以获取到元素
    </script>
</body>
</html>

4.2 绑定事件

js所有事件--事件名不带on

$(this).click(function(e){ })

$(this).on("事件名", 函数名)

$(this).off("事件名", 函数名) 不带函数名，则关闭所有事件

$(this).one("事件名", 函数名) 只执行一次

4.3 修改、获取元素

内容：text() html()可以识别标签这两个如果没有实参就是获取，有实参就是设置

属性：普通属性：attr("属性名")获取 attr("属性名","属性值")设置

类名属性：hasClass()是否有类名 addClass()添加类名

removeClass()删除类名 toggleClass()有就删除没有就添加

样式css：css("属性名")--获取 css("属性名","属性值")--获取设置

css({"属性名":"属性值", "属性名":"属性值"})--设置多个

动画：显示与隐藏：显示show 隐藏hide 切换toggle

自定义动画：animate({ }. time, function(){ })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.7.1.js"></script>
</head>
<body>
    <div class="container">
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
    </div>
    <a class="a0" id="aa" title="aa" href=""></a>
    <script>
        // let con = $(".container").text();
        // console.log(con);
        // let con_ht = $(".container").html();
        // console.log(con_ht);

        // let con = $(".container").text("span");
        // let con_ht = $(".container").html('<a href="">百度</a>');

        // 普通属性 attr("属性名")获取  attr("属性名","属性值")设置
        // let id = $("a").attr("id");
        // console.log(id);
        // $("a").attr("id","a0");
        // let i_d = $("a").attr("id");
        // console.log(i_d);

        // 类名属性  hasClass()是否有类名  addClass()添加类名 
        // removeClass()删除类名  toggleClass()有就删除没有就添加
        console.log($("a").hasClass("a0"));
        $("a").addClass("aa");
        console.log($("a").hasClass("aa"));
        $("a").removeClass("a0");
        console.log($("a").hasClass("a0"));
        $("a").toggleClass("a0");
        console.log($("a").hasClass("a0"));
    </script>
</body>
</html>

4.4 元素相关

相关元素：子children() 父parent()

上一个prev() 下一个next() 同级别其他的siblings()

创建与删除：A.appendTo(B)返回A，A是创建内容

A.append(B)返回A，B是创建内容

目标元素.remove()移除

目标元素.empty()删除目标元素所有子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.7.1.js"></script>
</head>
<body>
    <div class="container">
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
    </div>
    <script>
        // 子children() 父parent()  上一个prev() 下一个next() 同级别其他的siblings()
        let parent = $(".container").parent();
        console.log(parent);
        let children = $(".container").children();
        console.log(children);
        let second = $("p:nth-of-type(2)");
        console.log(second.prev());
        console.log(second.next());
        console.log(second.siblings());

        // 创建与删除
        // A.appendTo(B)返回A，A是创建内容
        // A.append(B)返回A，B是创建内容
        // 目标元素.remove()移除
        // 目标元素.empty()删除目标元素所有子元素
        let create = $(`
        <a href="">百度</a>
        <span>span1</span>
        `).appendTo(".container");
        create.remove();
        $(".container").empty();


        // https://httpbin.org/get
    </script>
</body>
</html>

5.jquery使用ajax与服务器交互

使用ajax与服务器进行交互，ajax({url,method,data,success})

url服务器地址，method有get和post，data为数据，success成功

get请求数据在args中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.7.1.js"></script>
</head>
<body>
    <div class="items">
        <div class="con">

        </div>
        <button>get请求</button><button>post请求</button>
    </div>

    <script>
        // 使用ajax与服务器进行交互，ajax({url,method,data,success})
        $("button:nth-of-type(1)").click(function(){
            $.ajax({
                // 测试服务器地址
                url:"https://httpbin.org/get",
                method:"get",
                data:{
                    "name": "zyj",
                    "age": 20
                },
                success:function(res){
                    console.log("请求成功",res.args);
                    $(".con").append(`
                        <div class=".container">
                            <p>
                                <span>姓名</span><span>${res.args.name}</span>
                            </p>
                            <p>
                                <span>年纪</span><span>${res.args.age}</span>
                            </p>
                        </div>
                    `)
                }
            })
        })
        // post请求数据在form中
        $("button:nth-of-type(2)").click(function(){
            $.ajax({
                url:"https://httpbin.org/post",
                method:"post",
                data:{
                    "n": "zyj",
                    "a": 20
                },
                success:function(res){
                    console.log("请求成功",res.form);
                    $(".con").append(`
                        <div class=".container">
                            <p>
                                <span>n</span><span>${res.form.n}</span>
                            </p>
                            <p>
                                <span>a</span><span>${res.form.a}</span>
                            </p>
                        </div>
                    `)
                }
            })
        })
    </script>
</body>
</html>

小结

jQuery 的出现极大地简化了前端开发的工作，使得开发者可以更加专注于实现功能和用户体验，而不必过多关注浏览器兼容性和复杂的 JavaScript 编码。虽然现在有许多新兴的 JavaScript 框架和库，但 jQuery 仍然是许多开发者的首选，它的简单易用性和强大的功能依然不可替代。因此，掌握 jQuery 将会为你的前端开发之路带来极大的便利和效率提升。