简单的JQuery使用教程

原创已于 2025-10-02 22:31:47 修改 · 622 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

于 2025-09-30 05:18:27 首次发布

网页专栏收录该内容

2 篇文章

订阅专栏

一、背景

JQuery是一种操作HTML元素的JavaScript框架。

JQuery应用广泛。

二、引入框架

有两种方法：

1、在线引入官方文件

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

2、本地引入

从官网"Download jQuery | jQuery"下载JQuery的js文件。

假设保存在 "src/js/jquery-min-3.7.1.js"中。

用下面标签引入：

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

三、主要使用语法

(一)把普通DOM对象包装成JQuery对象

// 格式：

var 变量 = $(DOM对象);

// 案例：把document变量包装成JQuery对象

var jq = $(document);

// 把获取的id是k1的元素dom对象包装成JQuery对象

var dom = document.getElementById("k1");

// 包装成对JQuery对象

var jq_01 = $(dom);

(二)JQuery监听窗口准备就绪

用ready()方法监听document的准备就绪：

$(document).ready(function(){

// 窗口加载完成时执行的代码

// 后续的代码都描述在此处

});

(三)获得标签元素的方式

参数和CSS的样式类似，根据ID、类、全部、标签、后代选择、属性选择等等方式选择标签。

// 1、用全部选择

var all = $("*");

// 2、用ID选择，格式是"#ID"

// 选择ID是b2的元素：

var b = $("#b2");

// 3、用类选择，格式是".类名"

// 选择类是kk的元素集合

var es = $(".kk");

// 4、后代选择

// 获得类"div1"的所有<p>标签后代

var ps = $(".div1 p");

// 5、标签选择

// 获得所有的div元素，传入标签名的字符串

var ds = $("div");

其他：还支持子类选择、兄弟选择、合并选择、过滤选择等等；

(四)设置标签的CSS样式

1、设置和获取宽高

// 获取元素的宽度

var 变量 = 对象.width();

// 设置宽度为90px

对象.width("90px");

// 获取元素的高度

var 变量 = 对象.height();

// 设置高度为80px

对象.height("80px");

2、移除和添加类

// 添加类

// 格式： addClass("类名");

// 给id是btn的元素添加p1类

$("#btn").addClass("p1");

// 移除类

格式： removeClass("类名");

// 移除id是k2的元素的class2类名

$("#k2").removeClass("class2");

// 返回是否存在类的布尔值

// 格式：布尔值 hasClass("类名");

// 判断id是btn的元素是否有p1类

var has = $("#btn").hasClass("p1");

3、获取和设置CSS样式

// 获取单个样式值

// 格式： css(样式名字符串);

// 获取对象的color样式值

var k = 对象.css("color");

// 获取多个样式值，返回数组

// 格式：Array css(数组)

// 获得color和width的样式值，返回数组形式

var arr = 对象.css(["color", "width"]);

// 设置单个样式值

// 格式: css(名字, 值)

// 把div元素的颜色设为red

$("div").css("color", "red");

// 设置多个样式值

// 格式： css(键值对)

// 设置div元素的宽高

$("div").css({"width":"5px", "height":"50px"});

(五)获取和设置元素属性

// 获取属性

// 格式：对象.attr(属性名);

// 获取id是k的元素的value属性值

var value = $("#k").attr("value");

// 设置属性值

// 格式：对象.attr(名, 值);

// 设置id是k2的元素的value是"hello"

$("#k2").attr("value", "hello")；

// 移除属性

// 格式：对象.removeAttr(属性名);

// 获取表单的value值

var 变量 = 对象.val();

// 设置表单的value值

对象.val(目标值);

// 设置input2的value值为男

$("#input2").val("男");

(六)获取和设置内容

// 获取文本内容

var 变量 = 对象.text();

// 设置文本内容

对象.text(内容字符串);

// 设置id是v1的文本内容是hello

$("#v1").text("hello");

// 获取元素的标签内容

var 变量 = 对象.html();

// 设置元素的标签内容

对象.html(标签字符串);

// 设置id是v1的html内容是段落hello

$("#v1").html("<p>hello</p>");

(七)事件监听

// 监听点击事件

// 格式：对象.click(函数);

// 给id是btn的按钮添加点击事件

$("#btn").click(function(e){

// 处理逻辑

});

// 其他的有dbclick() keyup() mouseout() off() change() submit() select()等监听方法。

// 如果是代码主动触发事件，就不设置函数

通用的监听方法：

// 主要格式：

对象.on(类别, 处理函数);

// 案例：

// 类别可以是click、dbclick、change、mouseout、keyup等等类型

// 监听id是input2的元素键盘松开的事件：

$("#input2").on("keyup", function(e){

// e是事件对象，有keyCode属性

});

(八)动画

// 隐藏元素

对象.hide();

// 隐藏所有的div元素

$("div").hide();

// 显示元素

对象.show();

// 切换隐藏和显示

对象.toggle();

动画：

// 淡入

对象.fadeIn();

// 淡出

对象.fadeOut();

// 向上滑动退出

对象.slideUp();

// 向下滑动进入

对象.slideDown();

(九)遍历元素

// 格式：对象.each(函数);

// 案例：遍历所有的div标签

$("div").each(function(index, e){

// 参数index是元素的索引，从0开始。

// 参数e是当前遍历的单个元素对象。

});

操作元素：

// 添加某个标签到当前标签中

对象.add(标签或者HTML)

// 获取集合的第1个元素

对象.first()

// 获取集合的最后1个元素

对象.last()

// 获得对象的子节点集合

对象.children()

// 获取兄弟元素集合

对象.siblings()

// 获取父元素

对象.parent()

// 获取上一个兄弟元素

对象.prev();

// 获取下一个兄弟元素

对象.next()

四、简单案例

主要功能：点击按钮，就设置<p>标签给<div>元素。

<html>

<head>

<title>测试JQuery</title>

<meta charset="utf-8" />

</head>

<body>

<div id="can"> </div>

<button id="btn"> 点击</button>

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

<script>

// 文档就绪完毕时执行

$(document).ready(function(){

// 设置div的宽度为200像素

$("#can").css("width", "200px");

// 设置按钮的点击事件

$("#btn").click(function(e){

// 设置div的标签内容

$("#can").html("<p>测试字符串</p>");

});

});

</script>

</body>

</html>