JQuery基础_code.jquery-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_59938047/article/details/120292318

本文介绍了jQuery的基础概念，包括下载使用、选择器、HTML操作（文本和元素添加/删除）、CSS样式操作、事件处理、动画效果，以及DOM遍历和修改。通过实例演示了如何利用jQuery简化开发过程。

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

1.jQuery简介

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习

jQuery库包含以下功能：

1.HTML元素选取

2.HTML元素操作

3.CSS 操作

4.HTML 事件函数

5.JavaScript 特效和动画[元素的隐藏和显示]

6.HTML DOM 遍历和修改

7.AJAX请求【获取后台处理程序返回的数据值】高级操作

2.jQuery下载及使用

jQuery 官网

Download the compressed, production jQuery 3.6.0---jquery-3.6.0.min.js

Download the uncompressed, development jQuery 3.6.0---jquery-3.6.0.js

Jquery是以“.js”结尾的，说明他是一个javascript文件。可以按照javascript的用法使用。

jquery-3.6.0.min.js--jquery的发布版，它的特点小，节省内存。因为它里面的内容被压缩了。

jquery-3.6.0.js---jquery的开发版，它的特点有注释可以查看具体的内容。它是没有压缩的。

使用本地路径导入jquery库

    <!-- 使用本地路径导入jquery库 -->
    <script src="Jquery/jquery-3.5.1.js">
    </script>
    <script>
        // javascript页面初始化函数
        window.onload = function() {
            alert("javascript页面初始化");
        }
        $(function() {
            alert("jquery库页面初始化");
        })
    </script>

网络路径导入jQuery库

    <!-- 网络路径导入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            alert("测试");
        })
    </script>

jQuery 选择器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素
:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素
:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格
s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素
:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

3.jQuery语法

基础语法:$(selector).action()

美元符号定义 $ -表示jQuery，jQuery表示$。我们可以使用$代替jQuer

$(selector)----jquery的元素选择器【选中需要被控制的html元素，并转换成jquery对象】

action()----具体的函数名称，需要什么功能，就写那个功能的函数名称

javascript对象----》Jquery对象-------【$(javascript对象)】
Jquery对象------》javascript对象-----【Jquery对象.get()】

<!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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            var pdao = document.getElementById("p1");
            alert(pdao); //[object HTMLParagraphElement]
            alert(document.getElementsByTagName("p")); //[object HTMLCollection]
            alert(document.getElementsByClassName(".p3")); //[object HTMLCollection]
            // Jquery对象与javascript对象的转换
            //转换为jquery对象
            var jq = $("#p1");
            var jq2 = $("p");
            var jq3 = $(".p3");
            alert(jq); //[object Object]
            alert(jq2); //[object Object]
            alert(jq3); //[object Object]
            //为jquery对象转换为javascr对象
            var dom1 = jq.get();
            alert(dom1); //[object HTMLParagraphElement]
            alert(jq2.get()); //[object HTMLParagraphElement],[object HTMLParagraphElement],[object HTMLParagraphElement]
            alert(jq3.get()); //[object HTMLParagraphElement]
        })
    </script>
</head>

<body>
    <p id="p1">测试1</p>
    <p>测试</p>
    <p class="p3">测试</p>
</body>

</html>

4.jQuery HTML

4.1jQuery获取文本元素的值

jQuery获取元素的值 text()、html() 以及 val()

jQuery对象.text()[不会得到包含其中的html标记]

jQuery对象.html()[会得到包含其中的html标记]

jQuery对象.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>javascript获取/修改html元素的值</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            // javascript获取html元素的值
            alert(document.getElementById("h").innerText); //测试 获取/修改html元素的值
            alert(document.getElementById("h").innerHTML); //测试 <span>获取/修改</span>html元素的值
            alert(document.getElementById("inp").value); //表单元素
            // jQuery获取html元素的值
            alert($("#h").text()); //测试 获取/修改html元素的值
            alert($("#h").html()); //测试 <span>获取/修改</span>html元素的值
            alert($("#inp").val()); //表单元素
        })
    </script>
</head>

<body>
    <h3 id="h">测试 <span>获取/修改</span>html元素的值</h3>
    <input type="text" id="inp" value="表单元素">
</body>

</html>

4.2jQuery修改文本元素的值

jQuery对象.text("数据值")[不会显示包含其中的html标记]

jQuery对象.html("数据值")[会显示包含其中的html标记]

jQuery对象.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>javascript修改html元素的值</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            // javascript修改html元素的值
            alert(document.getElementById("h").innerText = "测试<a href='#'>javascript</a>修改html元素的值"); //测试<a href='#'>javascript</a>修改html元素的值
            alert(document.getElementById("h").innerHTML = "测试<a href='#'>javascript</a>修改html元素的值"); //测试&lt;a href='#'&gt;javascript&lt;/a&gt;修改html元素的值
            alert(document.getElementById("inp").value = "修改后"); //修改后
            // jQuery修改html元素的值
            // $("#h").text("测试&lt;a href='#'&gt;javascript&lt;/a&gt;修改html元素的值"); //测试&lt;a href='#'&gt;javascript&lt;/a&gt;修改html元素的值
            $("#h").html("测试<a href='#'>javascript</a>修改html元素的值"); //测试javascript修改html元素的值
            $("#inp").val("修改后"); //修改后
        })
    </script>
</head>

<body>
    <h3 id="h">测试 <span>修改</span>html元素的值</h3>
    <input type="text" id="inp" value="表单元素">
</body>

</html>

5.jQuery - 添加元素

append() - 在被选中元素中插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

元素添加前

<!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>添加元素</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: cyan;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            // 得到
            $("div").append('<img src="imgs/avatar3.png" >');
            $("div").after('在被选元素之后插入内容');
            $("div").before('在被选元素之前插入内容');
        })
    </script>
</head>

<body>
    <h4>append() - 在被选中元素中插入内容</h4>
    <h4>after() - 在被选元素之后插入内容</h4>
    <h4>before() - 在被选元素之前插入内容</h4>
    <div></div>

</body>

</html>

元素添加后

6.jQuery - 删除元素

remove() - 删除被选元素（及其子元素）

元素添加前

<!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>
        #d1 {
            width: 400px;
            height: 400px;
            background-color: cyan;
        }
        
        #d2 {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        
        #d3 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        #d4 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            $("#d2").remove();
        })
    </script>
</head>

<body>
    <h4>remove() - 删除被选元素（及其子元素）</h4>
    <div id="d1">父元素
        <div id="d2">子元素
            <div id="d3">孙子元素
                <div id="d4">重孙子元素</div>
            </div>
        </div>
    </div>
</body>

</html>

元素添加后

empty() - 删除从被选元素中的子元素

元素添加前

<!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>
        #d1 {
            width: 400px;
            height: 400px;
            background-color: cyan;
        }
        
        #d2 {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        
        #d3 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        #d4 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            $("#d2").empty();
        })
    </script>
</head>

<body>
    <h4>empty() - 删除从被选元素中的子元素</h4>
    <div id="d1">父元素
        <div id="d2">子元素
            <div id="d3">孙子元素
                <div id="d4">重孙子元素</div>
            </div>
        </div>
    </div>
</body>

</html>

元素添加后

7.jquery的CSS 操作

7.1为元素添加不存在的样式

jquery得到css样式值----jquery对象.css(属性名称)

jquery对象.css(属性名称,属性值)----修改一个css属性值

jquery对象.css({属性名称:属性值,属性名称:属性值})

    <style>
        #d {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            // jquery得到css样式值
            // jquery对象.css(属性名称)
            alert($("#d").css("width")); //300px
            // jquery修改css样式值
            //jquery对象.css({属性名称:属性值,属性名称:属性值})
            $("#d").css({
                "width": "400px",
                "border": "10px solid black"
            });

        })
    </script>

修改前

修改后

7.2为元素添加已经存在的样式

addClass() - 向被选元素添加一个或多个样式类

removeClass() - 从被选元素删除一个或多个类

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>
    <style>
        .divclass {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            $("#d1").click(function() {
                $("#div").addClass("divclass")
            });
            $("#d2").click(function() {
                $("#div").removeClass("divclass")
            });
            $("#d3").click(function() {
                $("#div").toggleClass("divclass")
            });
        })
    </script>
</head>

<body>
    <h5>jquery对象.addClass("class属性值")----为有class属性值的html元素设置style中的样式</h5>
    <h5>jquery对象.removeClass() - 从被选元素删除一个或多个类</h5>
    <h5>jquery对象.toggleClass() - 对被选元素进行添加/删除类的切换操作</h5>
    <div id="div">本身未设置css属性</div>
    <input type="button" id="d1" value="测试addClass">
    <input type="button" id="d2" value="测试removeClass">
    <input type="button" id="d3" value="测试toggleClass">

</body>

</html>

8.jQuery 事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

常用的 jQuery 事件方法

8.1.$(document).ready(function) 文档完全加载完后执行函数

8.2.click(function) 方法是当按钮点击事件被触发时会调用一个函数

8.3.dblclick(function)双击元素时，会发生 dblclick 事件。

<!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>jQuery事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        //页面初始化事件
        $(function() {
            //点击事件
            $("#d1").click(function() {
                alert("点击事件");
            });
            $("#d2").dblclick(function() {
                alert("双击事件");
            });
        })
    </script>
</head>

<body>
    <h3>1.页面初始化事件$(document).ready(function)</h3>
    <h3>2.点击事件click(function) </h3>
    <input type="button" value="测试按钮" id="d1">
    <h4>3.dblclick(function)双击元素时，会发生 dblclick 事件。</h4>
    <input type="button" value="测试按钮" id="d2">
</body>

</html>

8.4.mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。

8.5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。

8.6.hover(function)方法用于模拟光标悬停事件。

8.7.focus(function)当元素获得焦点时，发生 focus 事件。

8.8.blur(function)当元素失去焦点时，发生 blur 事件。

<!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>jQuery事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            $("#h1").mouseenter(function() {
                $("#h1").css("background-color", "blue")
            });
            $(".h2").mouseleave(function() {
                $(".h2").css("background-color", "red")
            });
            $("#t1").hover(function() {
                $("#t1").val("鼠标悬停");
                $("#t1").css("color", "red");
            });
            $("#t2").focus(function() {
                $("#t2").css("background-color", "yellow")
            });
            $("#t2").blur(function() {
                $("#t2").css("background-color", "blue")
            });
        })
    </script>
</head>

<body>
    <h4 id="h1">4.mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。</h4>
    <h4 class="h2">5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。</h4>
    <h4>6.hover(function)方法用于模拟光标悬停事件。</h4>
    <h4>7.focus(function)当元素获得焦点时，发生 focus 事件。</h4>
    <h4>8.blur(function)当元素失去焦点时，发生 blur 事件。</h4>
    <input type="text" name="" value="测试" id="t1">
    <input type="text" name="" value="测试" id="t2">

9.元素的隐藏和显示动画

hide([毫秒数],[success-function]) 隐藏元素

show([毫秒数],[success-function]) 显示元素

fadeIn([毫秒数],[success-function]) 显示元素。

fadeOut([毫秒数],[success-function]) 隐藏元素。

slideDown([毫秒数],[success-function]) 显示元素

slideUp([毫秒数],[success-function]) 隐藏元素

<!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>jquery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        //初始化
        $(function() {
            //点击事件
            $("#t1").click(function() {
                //得到表单值
                var val = $("#t1").val();
                // if/else函数
                if (val == "隐藏") {
                    //表单值为隐藏6秒内隐藏img1
                    $("#img1").hide(6000, function() {
                        //改变表单值
                        $("#t1").val("显示");
                    });
                } else {
                    //表单不是隐藏3秒内显示img1
                    $("#img1").show(3000, function() {
                        //加上边框
                        $("#img1").css("border", "5px solid black");
                        //改变表单值
                        $("#t1").val("隐藏");
                    });
                }
            });
            $("#t2").click(function() {
                var val = $("#t2").val();
                if (val == "隐藏") {
                    $("#img2").fadeOut(5000, function() {
                        $("#t2").val("显示");
                    });
                } else {
                    $("#img2").fadeIn(5000, function() {
                        $("#img2").css("border", "5px solid red");
                        $("#t1").val("隐藏");
                    });
                }
            });
            $("#t3").click(function() {
                var val = $("#t3").val();
                if (val == "隐藏") {
                    $("#img3").slideUp(5000, function() {
                        $("#t3").val("显示");
                    });
                } else {
                    $("#img3").slideDown(5000, function() {
                        $("#img3").css("border", "5px solid red");
                        $("#t3").val("隐藏");
                    });
                }
            });
        })
    </script>

</head>

<body>
    <h3>元素的隐藏和显示</h3>
    <p>hide([毫秒数],[success-function]) 隐藏元素</p>
    <p>show([毫秒数],[success-function]) 显示元素</p>
    <img id="img1" src="imgs/avatar2.png" alt="">
    <input type="button" value="隐藏" id="t1">
    <p>fadeIn([毫秒数],[success-function]) 显示元素</p>
    <p>fadeOut([毫秒数],[success-function]) 隐藏元素</p>
    <img id="img2" src="imgs/avatar2.png" alt="">
    <input type="button" value="隐藏" id="t2">
    <p>slideDown([毫秒数],[success-function]) 显示元素</p>
    <p>slideUp([毫秒数],[success-function]) 隐藏元素</p>
    <img id="img3" src="imgs/avatar2.png" alt="">
    <input type="button" value="隐藏" id="t3">
</body>

</html>

10jQuery 效果- 动画

jQuery animate() 方法允许您创建自定义的动画。

语法：$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

jQuery stop() 方法用于停止动画或效果，在它们完成之前

<!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>jQuery动画</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // jQuery animate() 方法允许您创建自定义的动画。
        //语法：$(selector).animate({params},speed,callback);
        //必需的 params 参数定义形成动画的 CSS 属性.
        //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
        //可选的 callback 参数是动画完成后所执行的函数名称
        //初始化
        $(function() {
            //点击事件
            $("#t1").click(function() {
                    //创建自定义动画
                    $("img").animate({
                        "padding-top": "300px",
                        "padding-left": "100px"
                    }, 2000, function() {
                        alert("运行完毕");
                    });
                })
                //停止自定义的动画
            $("#t2").click(function() {
                $("img").stop();
            });
        })
    </script>
</head>

<body>
    <input type="button" value="开始动画" id="t1">
    <input type="button" value="停止动画" id="t2"><br>
    <img src="imgs/avatar5.png" alt="">
</body>

</html>

11.HTML DOM 遍历和修改，jQuery each() 方法

语法$(selector).each(function(index,element){ })

each函数中的function的

参数1-index--被遍历出的每一个元素在数组中的位置[下标]

参数2-element--被遍历出的每一个元素具体元素【DOM对象】

each函数中的function中没有element时，可以被this代替

<!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>jQuery遍历</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            // 语法$(selector).each(function(index,element){   })
            // each函数中的function的
            // 参数1-index--被遍历出的每一个元素在数组中的位置[下标]
            // 参数2-element--被遍历出的每一个元素具体元素【DOM对象】
            // each函数中的function中没有element时,可以被this代替 
            //转换
            var pp = $("p");
            //遍历
            /*
             pp.each(function(ind) {
                 var size = ind * 10;
                 $(this).css("font-size", size + "px");
             });
             */
            pp.each(function(ind, ele) {
                var size = ind * 10;
                $(ele).css("font-size", size + "px");
            });
    </script>
</head>

<body>
    <p>测试1</p>
    <p>测试2</p>
    <p>测试3</p>
    <p>测试4</p>
    <p>测试5</p>
</body>

</html>