JavaScript语法-JQuery框架

最新推荐文章于 2025-04-13 00:07:59 发布

原创

最新推荐文章于 2025-04-13 00:07:59 发布 · 468 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

本文详细介绍了JQuery这一流行的JavaScript库，包括它的基本概念、版本、引入方式和核心语法。讨论了选择器、DOM操作、事件处理、Ajax请求等内容，并给出了多个实际案例，帮助读者掌握JQuery的使用技巧。

一、什么是JQuery
JQuery是最受欢迎的JavaScript库之一，它提供了DOM操作，以及Ajax和多种动画功能，是一种轻量级且运行速度快的JavaScript库。
JQuery库位于一个JavaScript文件中，其中包含了所有的JQuery函数。

二、JQuery版本
JQuery的库文件，以jquery-x.x.x.js、jquery-x.x.x.min.js或jquery-x.x.x.pack.js形式发布。文件名x.x.x的部分是JQuery的版本号（如3.5.1等），min和pack为压缩方式。
min使用的是YUI Compressor压缩的版本（常用）。
pack使用的是Packed压缩版本。

三、JQuery库的引入
方法1：jquery库下载到本地，通过下面的标记引入网页中

<head>
	<script src="js/jquery-3.5.1.min.js"></script>
</head>

方法2：从官网、Google等CDN引入jquery核心文件

<head>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

四、JQuery的语法
JQuery核心：通过JQuery，选取HTML元素，并对它进行操作，其基础语法为：$(“selector”).action()
完整格式为：jQuery(“selector”).action()
其中：
美元符号代表jQuery
selector为HTML元素选择器，用法几乎和CSS选择器一样
action()为对元素执行的操作

1）文档就绪函数
在这里插入图片描述

2）JQuery选择器
1.标签选择器
在这里插入图片描述

2.id选择器
在这里插入图片描述

3.class选择器
在这里插入图片描述

4.其他选择器
在这里插入图片描述

3）JQuery设置/获取HTML内容（三个方法）
在这里插入图片描述

4）JQuery添加HTML内容（四个方法）
在这里插入图片描述

5）JQuery删除HTML元素
在这里插入图片描述

6）CSS操作
在这里插入图片描述

6）获取元素及窗口的尺寸
在这里插入图片描述

7）属性操作
在这里插入图片描述

8）事件方法
JQuery的时间方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。
在这里插入图片描述

9）bind()事件
bind()事件为被选元素添加一个或多个事件处理程序，语法如下：
$(selector).bind(event,function)

$("#btn1").bind("click", function() {
   
   
	alert('点击事件');
});

10）focus()事件
当元素获得焦点时，发生focus()事件（一般用于表单元素）语法如下：
$(selector).focus(function)

$("input").focus(function() {
   
   
	$("input").css("background-color","#FFFFCC");
});

11）blur()事件
当元素失去焦点时，发生blur()事件（一般用于表单元素），语法如下：
$(selector).blur(function)

$("input").blur(function() {
   
   
	$("input").css("background-color","#D6D6FF");

12）toggle()事件
toggle()为切换元素的可见状态事件，语法格式为：
$(selector).toggle(speed,callback)
在这里插入图片描述

13）JQuery的Ajax请求
通过JQuery Ajax方法，我们能够方便使用GET或POST请求从远程服务器上获取资源，其语法格式为：
$.ajax([settings])，其中[settings]为键值对。
在这里插入图片描述

14）JQuery的Ajax参数
在这里插入图片描述

五、JQuery案例
JQuery基础：

<!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.5.1.min.js"></script> -->
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h1>西湖简介</h1>
    <div>国家AAAAA级旅游景区</div>
    <p><span id="part1">西湖</span>，位于浙江省杭州市<span class="box1">西湖区</span>龙井路1号，杭州市区西部，景区总面积49平方公里，汇水面积为21.22平方公里，湖面面积为6.38平方公里</p>
    <script>
        //1.文档就绪函数
        $(function(){
   
   
            alert('文档就绪函数，所有HTML内容加载就绪后，js代码才被执行！');
        })

        //2.标签选择器
        $("div").css({
   
   "font-size":"100px","color":"red"});

        //3.ID选择器
        $("#part1").css("color","blue");

        //4.类选择器
        $(".box1").css("backgroundColor","yellow");
    </script>
</body>
</html>

JQuery设置与内容获取：

<!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>设置与获取HTML内容</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <p id="part1">
        填写表单
    </p>
    <p>
      <span>姓名</span>
      <input type="text" value="张三">
    </p>
    
    <div></div>
    <button id="btn1">获取元素内容</button>
    <button id="btn2">设置元素内容</button>

<script>

     $(function(){
   
   
        // 1.获取元素的内容
        $("#btn1").click(function(){
   
   
            var html='';
            //1.获取元素的内容
            html=html+'元素的内容：'+$("#part1").html();
            //2.获取元素的文本内容
            html=html+'。span元素的文本内容：'+$("span").text();
            //3.获取input表单的值
            html=html+'。input表单的值：'+$("input").val();
            $("div").text(html);
        });
        // 2.设置元素的内容
        $("#btn2").click(function(){
   
   
            //4.设置元素的内容
            $("#part1").html("<b>填写内容</b>");
            //5.设置元素的文本内容
            $(