jQuery入门看这一篇就够了!超详细!(二)
liuian 2025-04-26 19:24 73 浏览
“这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
先变成自己喜欢的模样，
再去遇见无需取悦的人。
- 2023.06.12 -
上期给大家讲解了jQuery的基础概念和核心函数中选择器的使用，并且举了非常多的例子来说明各种选择器的使用，大家有没有跟着一起练习呢?今天小编将继续给大家讲解jQuery的相关内容。
一、jQuery核心函数
1、工具
$.each方法
方法描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1，其他对象通过其属性名进行迭代。
需求描述：给定一个数组，使用$.each方法进行遍历输出
var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
$.each(arr, function (index, element) {
console.log(index, element);
});
需求描述：给定一个对象，使用$.each方法进行遍历输出
var obj = {
name: 'Tom',
age: 28,
speak: function () {}
};
$.each(obj, function (key, value) {
console.log(key, value);
});
$.trim方法
方法描述：去掉字符串起始和结尾的空格。
需求描述：给定一个字符串，去掉该字符串的前后空格
var str = ' hello ';
console.log($.trim(str));
$.type方法
方法描述：确定JavaScript 对象的类型。
需求描述：给定一个对象，输出该对象的类型
var str = ' hello ';
console.log($.type(str));
$.isArray方法
方法描述：用来测试指定对象是否为一个数组。
需求描述：给定一个对象，输出该对象是不是数组类型
var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
console.log($.isArray(arr));
$.isFunction方法
方法描述：用来测试指定对象是否为一个函数。
需求描述：给定一个对象，输出该对象是不是函数类型
var fun = function () {
console.log("hello");
};
console.log($.isFunction(fun));
2、Ajax
$.ajax方法
方法描述：执行一个异步的HTTP的请求。
需求描述：执行一个异步的HTTP GET请求，从服务器加载数据。
$.ajax({
url: '/user/login',
type: 'get',
data: {
username: 'zhangsan',
password: '123456'
},
dataType: 'text',
success: function (response) {
alert(response);
},
error: function (response) {
alert(response);
}
});
需求描述：执行一个异步的HTTP POST请求，从服务器加载数据。
$.ajax({
url: '/user/login',
type: 'post',
data: {
username: 'zhangsan',
password: '123456'
},
dataType: 'text',
success: function (response) {
alert(response);
},
error: function (response) {
alert(response);
}
});
$.get方法
方法描述：使用一个HTTP GET请求从服务器加载数据。
这是一个ajax功能的缩写，这相当于:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.get('/user/login', {username: 'zhangsan', password: '123456'}, function (response) {
alert(response);
});
$.post方法
方法描述：使用一个HTTP POST请求从服务器加载数据。
这是一个ajax功能的缩写，这相当于:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.post('/user/login', {username: 'zhangsan', password: '123456'}, function (response) {
alert(response);
});
二、jQuery核心对象
属性
1、属性
attr()
方法描述：专门操作属性值为非布尔值的属性，该方法读写一体。
需求描述：设置p标签的title属性为”我是attr修改后的段落标题“
<p id="content" title="我是段落标题">我是段落</p>
$('#content').attr('title', '我是attr修改后的段落标题');
需求描述：读取p标签的title属性并输出
<p id="content" title="我是段落标题">我是段落</p>
console.log($('#content').attr('title'));
prop()
方法描述：专门操作属性值为布尔值的属性，该方法读写一体。
需求描述：设置复选框的状态为选中状态
<input type="checkbox">复选框
$(':checkbox').prop('checked', 'true');
需求描述：读取复选框的选中状态并输出
<input type="checkbox" checked>复选框
console.log($(':checkbox').prop('checked'));
val()
方法描述：该方法主要用于获取表单元素的值和设置表单元素的值，该方法读写一体。
需求描述：设置文本框的值为”123456“
<input type="text">
$(':text').val('123456');
需求描述：读取文本框的值并输出
<input type="text" value="123456">
console.log($(':text').val());
2、样式
css()
方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。
需求描述：设置div的背景颜色为红色，字体颜色为白色
<div>我是div</div>
$('div').css({
'background': 'red',
'color': 'white'
});
需求描述：获取div的背景颜色和字体颜色并输出
<div style="background: red;color: white">我是div</div>
console.log($('div').css('background'));
console.log($('div').css('color'));
addClass()
方法描述：为每个匹配的元素添加指定的样式类名。
需求描述：为所有的li添加样式”beauty“
.beauty {
font-weight: bold;
font-size: 18px;
color: coral;
}
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
$('li').addClass('beauty');
removeClass()
方法描述：移除集合中每个匹配元素上一个，多个或全部样式。
需求描述：为所有的li移除样式”beauty“
.beauty {
font-weight: bold;
font-size: 18px;
color: coral;
}
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
$('li').removeClass('beauty');
hasClass()
方法描述：确定任何一个匹配元素是否有被分配给定的样式类。
需求描述：判断p标签是否包含”beauty“的样式
.beauty {
font-weight: bold;
font-size: 18px;
color: coral;
}
<p></p>
console.log($('p').hasClass('beauty'));
toggleClass()
方法描述：为匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在。
注意：如果存在（不存在）就删除（添加）一个样式类
需求描述：当单击按钮的时候，隐藏div，再次单击按钮的时候，显示div
.hide {
width: 100px;
height: 100px;
display: none;
}
<button>按钮</button>
<div>我是div</div>
$('button').click(function () {
$('div').toggleClass('hide');
});
3、尺寸
width()
方法描述：获取内容元素width的值。
height()
方法描述：获取内容元素height的值。
innerWidth()
方法描述：获取内容元素width+padding的值。
innerHeight()
方法描述：获取内容元素height+padding的值。
outerWidth()
方法描述：outerWidth(false/true)，获取内容元素width+padding+border的值，如果是true再加上margin的值。
outerHeight()
方法描述：outerHeight(false/true)，获取内容元素height+padding+border的值，如果是true再加上margin的值。
综合演示
需求描述：创建按一个div，获取以上六种值
.box {
margin: 30px;
padding: 20px;
border: 10px;
width: 100px;
height: 100px;
background: coral;
}
<div class="box"></div>
var $box = $('.box');
console.log($box.width(), $box.height());// 100 100
console.log($box.innerWidth(), $box.innerHeight());// 140 140
console.log($box.outerWidth(), $box.outerHeight());// 160 160
console.log($box.outerWidth(true), $box.outerHeight(true));// 220 220
4、位置
offset()
方法描述：相对页面左上角的坐标。
需求描述：获取div相对页面左上角的坐标。
.box {
width: 100px;
height: 100px;
background: coral;
}
<div class="box"></div>
var offset = $('.box').offset();
console.log(offset.left, offset.top);
position()
方法描述：相对于父元素左上角的坐标。
需求描述：获取div相对于父元素左上角的坐标
.box-container {
width: 300px;
height: 300px;
background: pink;
position: absolute;
left: 20px;
top: 20px;
}
.box {
width: 100px;
height: 100px;
background: coral;
position: absolute;
left: 20px;
top: 20px;
}
<div class="box-container">
<div class="box"></div>
</div>
var offset = $('.box').position();
console.log(offset.left, offset.top);
scrollLeft()
方法描述：读取/设置滚动条的X坐标，该方法读写合一。
读取页面滚动条的Y坐标(兼容chrome和IE)
var scrollLeft = $(document.body).scrollLeft()+$(document.documentElement).scrollLeft();
设置页面滚动条滚动到指定位置(兼容chrome和IE)
$('body,html').scrollLeft(60);
需求描述：设置页面的宽度为2000px，设置滚动条的X轴坐标为300px，要求兼容各种浏览器
$('body').css('width', '2000px');
$('html,body').scrollLeft(300);
scrollTop()
方法描述：读取/设置滚动条的Y坐标，该方法读写合一。
读取页面滚动条的Y坐标(兼容chrome和IE)
var scrollTop = $(document.body).scrollTop()+$(document.documentElement).scrollTop();
设置页面滚动条滚动到指定位置(兼容chrome和IE)
$('body,html').scrollTop(60);
需求描述：设置页面的高度为2000px，设置滚动条的Y轴坐标为300px，要求兼容各种浏览器
$('body').css('height', '2000px');
$('html,body').scrollTop(300);
操作
1、DOM内部插入
text()
方法描述：设置/获取元素的文本内容，该方法读写合一。
需求描述：设置p段落标签的内容为“我是段落”
<p></p>
$('p').text('我是段落');
需求描述：获取p段落标签的内容并输出
<p>我是段落</p>
console.log($('p').text());
html()
方法描述：设置/获取元素的html内容，该方法读写合一。
需求描述：设置ul列表标签的li列表项
<ul></ul>
var li = '<li>我是列表项</li>';
$('ul').html(li);
需求描述：获取ul列表中的列表项并输出
<ul><li>我是列表项</li></ul>
console.log($('ul').html());
append()
方法描述：向当前匹配的所有元素内部的最后面插入指定内容。
需求描述：为当前的ul向后添加一个列表项
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
</ul>
var last = '<li>我是最后一个列表项</li>';
$('ul').append(last);
appendTo()
方法描述：将指定的内容追加到当前匹配的所有元素的最后面。
需求描述：为当前的ul向后添加一个列表项
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
</ul>
var last = '<li>我是最后一个列表项</li>';
$(last).appendTo($('ul'));
prepend()
方法描述：向当前匹配的所有元素内部的最前面插入指定内容。
需求描述：为当前的ul向前添加一个列表项
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
</ul>
var first = '<li>我是第一个列表项</li>';
$('ul').prepend(first);
prependTo()
方法描述：将指定的内容追加到当前匹配的所有元素的最前面。
需求描述：为当前的ul向前添加一个列表项
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
</ul>
var first = '<li>我是第一个列表项</li>';
$(first).prependTo($('ul'));
2、DOM外部插入
after()
方法描述：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
需求描述：在div的后边插入一个段落
<div>我是div</div>
var after = '<p>我是段落</p>';
$('div').after(after);
before()
方法描述：在匹配元素集合中的每个元素前边插入参数所指定的内容，作为其兄弟节点。
需求描述：在div的前边插入一个段落
<div>我是div</div>
var before = '<p>我是段落</p>';
$('div').before(before);
insertAfter()
方法描述：.after()和.insertAfter() 实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。 对于 .after()，选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter()，刚好相反，内容在方法前面，它将被放在参数里元素的后面。
需求描述：在div的后边插入一个段落
<div>我是div</div>
var content = '<p>我是段落</p>';
$(content).insertAfter($('div'));
insertBefore()
方法描述：.before()和.insertBefore()实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。 对于 .before()，选择表达式在函数前面，参数是将要插入的内容。对于 .insertBefore()，刚好相反，内容在方法前面，它将被放在参数里元素的前面。
需求描述：在div的前边插入一个段落
<div>我是div</div>
var content = '<p>我是段落</p>';
$(content).insertBefore($('div'));
3、DOM移除
empty()
方法描述：删除所有匹配元素的子元素。
需求描述：将ul列表下所有的子节点全部移除
<ul>
<li>列表项1</li>
<p>我是段落1</p>
<li>列表项2</li>
<p>我是段落2</p>
<li>列表项3</li>
</ul>
$('ul').empty();
remove()
方法描述：删除所有匹配的元素。
注意：同时移除元素上的事件及 jQuery 数据
需求描述：将ul列表下所有的p子节点全部移除
<ul>
<li>列表项1</li>
<p>我是段落1</p>
<li>列表项2</li>
<p>我是段落2</p>
<li>列表项3</li>
</ul>
$('ul>p').remove();
4、DOM替换
replaceWith()
方法介绍：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
需求描述：将ul下的所有li替换为p标签
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
$('ul>li').replaceWith('<p>我是段落</p>');
replaceAll()
方法介绍：.replaceAll()和.replaceWith()功能类似，但是目标和源相反。
需求描述：将ul下的所有li替换为p标签
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
$('<p>我是段落</p>').replaceAll($('ul>li'));
5、DOM拷贝
clone()
方法描述：创建一个匹配的元素集合的深度拷贝副本。如果传入一个true，则表示是否会复制元素上的事件处理函数，从jQuery 1.4开始，元素数据也会被复制。
需求描述：为ul列表创建一个深克隆并追加到body后
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
var ul = $('#ul').clone();
$('body').append(ul);
6、DOM遍历
parent()
方法描述：获取集合中每个匹配元素的父元素，可以提供一个可选的选择器来进行筛选。
需求描述：输出id为two的li的父元素
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id="two">列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
console.log($('#two').parent()[0]);
children()
方法描述：获取集合中每个匹配元素的子元素，可以提供一个可选的选择器来进行筛选。
需求描述：输出ul下的所有子元素
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id="two">列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
var childrens = $('ul').children();
for (var i = 0; i < childrens.length; i++) {
console.log(childrens[i]);
}
prev()
方法描述：获取集合中每个匹配元素紧邻的前一个兄弟元素，可以提供一个可选的选择器来进行筛选。
需求描述：获取id为two元素的前一个兄弟元素并输出
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id="two">列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
console.log($('#two').prev()[0]);
prevAll()
方法描述：获得集合中每个匹配元素的所有前面的兄弟元素，可以提供一个可选的选择器来进行筛选。
需求描述：获取id为two元素的前边所有的兄弟元素并输出
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id="two">列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
var prevs = $('#two').prevAll();
for (var i = 0; i < prevs.length; i++) {
console.log(prevs[i]);
}
next()
方法描述：获取集合中每个匹配元素紧邻的后一个兄弟元素，可以提供一个可选的选择器来进行筛选。
需求描述：获取id为two元素的后一个兄弟元素并输出
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id="two">列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
console.log($('#two').next()[0]);
nextAll()
方法描述：获得集合中每个匹配元素的所有后面的兄弟元素，可以提供一个可选的选择器来进行筛选。
需求描述：获取id为two元素的后边所有的兄弟元素并输出
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id="two">列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
var nexts = $('#two').nextAll();
for (var i = 0; i < nexts.length; i++) {
console.log(nexts[i]);
}
siblings()
方法描述：获得集合中每个匹配元素的兄弟元素，可以提供一个可选的选择器来进行筛选。
需求描述：获取id为two元素的所有兄弟元素并输出
<ul>
<p>我是段落1</p>
<li>列表项1</li>
<li id="two">列表项2</li>
<li>列表项3</li>
<p>我是段落2</p>
</ul>
var siblings = $('#two').siblings();
for (var i = 0; i < siblings.length; i++) {
console.log(siblings[i]);
}
以上jQuery核心函数中工具和Ajax方法以及jQuery核心对象的属性和基本的操作的相关内容，内容比较多，下期接着更新遍历、事件和动画等内容，敬请期待哦！
今天就先讲到这里了，更多Java基础知识持续更新中，欢迎一起学Java！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
相关推荐
-
- 4000台式电脑最好的组装配置
-
四千元价格组装电脑主机与五千元组装电脑主机的价格类似，因为电脑主机就几个大部件，电脑主机主板是多少代的产品？主板内存的插槽数？电脑处理器等如果是自己组装，都可以配置到十二代产品，电脑硬盘可以分为256G固态硬盘做系统盘，1T机械硬盘作为工作...
-
2025-11-06 20:05 liuian
- linux是一种什么系统（linux属于什么系统）
-
Linux，全称GNU/Linux，是一种免费使用和自由传播的类UNIX操作系统，是一个基于POSIX的多用户、多任务、支持多线程和多CPU的操作系统。其内核由林纳斯·本纳第克特·托瓦兹于1991年1...
- 手机管理大师免费版（手机管理大师极速版）
-
使用手机“文件管理”打开文件夹时提示访问受限，需要前往“文件”应用查看1.进入手机设置——安全——应用权限——权限/应用2.在手机桌面找到手机管家——权限隐私——应用权限——权限/应用?当然，相对于被...
- 电脑能开机但是进不去桌面怎么办
-
打开任务管理器按Ctrl+Shift+Esc打开任务管理器。文件中运行新任务点击文件，运行新任务。输入指令重启桌面输入explorer.exe，点击确定，等待桌面重启完成就可以了。电脑已经是我们生活中...
- 怎样解除自动关机模式（怎样解除自动开关机）
-
1、打开手机主界面，找到系统自带的“时钟”应用，点击打开它。2、点击进入时钟后，点击右下角的“计时器”。3、进入到计时器后，点击“在计时结束启用雷达”这个选项。4、然后在这里，下拉到最下面，勾选“停...
- 电脑最高配置是什么配置2025
-
一，2023最新主流电脑装机配置如下。二，处理器可以使用十二代的i512400或者i512490f，内存16gb双通道，显卡rtx3060，主板可以使用b660m或者h610m。三，如果十三代酷睿...
- MySQL慢查询优化:从explain到索引，DBA手把手教你提升10倍性能
-
数据库性能是应用系统的生命线，而慢查询就像隐藏在系统中的定时炸弹。某电商平台曾因一条未优化的SQL导致订单系统响应时间从200ms飙升至8秒，最终引发用户投诉和订单流失。今天我们就来系统学习MySQL...
- 一文读懂SQL五大操作类别(DDL/DML/DQL/DCL/TCL)的基础语法
-
在SQL中，DDL、DML、DQL、DCL、TCL是按操作类型划分的五大核心语言类别，缩写及简介如下：DDL（DataDefinitionLanguage，数据定义语言）：用于定义和管理数据库结构...
- 闲来无事，学学Mysql增、删，改，查
-
Mysql增、删，改，查1“增”——添加数据1.1为表中所有字段添加数据1.1.1INSERT语句中指定所有字段名语法：INSERTINTO表名（字段名1，字段名2，…）VALUES（值1...
- 数据库:MySQL 高性能优化规范建议
-
数据库命令规范所有数据库对象名称必须使用小写字母并用下划线分割所有数据库对象名称禁止使用MySQL保留关键字（如果表名中包含关键字查询时，需要将其用单引号括起来）数据库对象的命名要能做到见名识意，...
- 下载工具合集_下载工具手机版
-
迅雷，在国内的下载地位还是很难撼动的，所需要用到的地方还挺多。缺点就是不开会员，软件会限速。EagleGet，全能下载管理器，支持HTTP(S)FTPMMSRTSP协议，也可以使用浏览器扩展检测...
- mediamtx v1.15.2 更新详解:功能优化与问题修复
-
mediamtxv1.15.2已于2025年10月14日发布，本次更新在功能、性能优化以及问题修复方面带来了多项改进，同时也更新了部分依赖库并提升了安全性。以下为本次更新的详细内容：...
- 声学成像仪:泄露监测 “雷达” 方案开启精准防控
-
声学成像仪背景将声像图与阵列上配装的摄像实所拍的视频图像以透明的方式叠合在一起，就形成了可直观分析被测物产生状态。这种利用声学、电子学和信息处理等技术，变换成人眼可见的图像的技术可以帮助人们直观地认识...
- 最稳存储方案:两种方法将摄像头接入威联通Qu405，录像不再丢失
-
今年我家至少被4位邻居敲门，就是为了查监控！！！原因是小区内部监控很早就停止维护了，半夜老有小黄毛掰车门偷东西，还有闲的没事划车的，车主损失不小，我家很早就配备监控了，人来亮灯有一定威慑力，不过监控设...
- 离岗检测算法_离岗检查内容
-
一、研发背景如今社会许多岗位是严禁随意脱离岗位的，如塔台、保安室、监狱狱警监控室等等，因为此类行为可能会引起重大事故，而此类岗位监督管理又有一定困难，因此促生了智能视频识别系统的出现。二、产品概述及工...
- 一周热门
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)