jQuery
jQuery
基础概念
概念
JavaScript 原生DOM有些许不便:API不好记、设置事件不方便、调用繁琐。
jQuery是第三方的javaScript框架。jQuery本质是一个js文件,内部已经写好了大量的函数用于进行快捷的DOM操作。jQuery旨在“Write Less,Do More”,它具有独特的链式语法和短小清晰的多功能接口,具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展,拥有便捷的插件扩展机制和丰富的插件。
目前国内用的比较多的是3.5.1版本,以及能够支持IE8的1.11.1版本(从jQuery2.x开始,就不再支持IE8)。
引入
通过<script src="jQuery文件地址"> </script>
引入。jQuery文件地址可以是网络地址也可以是本地地址,建议使用本地地址。
<script src="jQuery文件地址"> </script>
<script>
//jQuery代码
</script>
使用流程
- 引入jQuery
- 利用jQuery选择器找到需要操作的HTML标签
- 通过jQuery提供的函数完成DOM操作
注意点
如果页面使用了jQuery,那么用jQuery操作的HTML标签就不能再使用原生的DOM API。比如innerHTML、appendChild、parentElement等。如果要用,那么必须先完成jQuery标签和原生DOM标签的转换。
获取jQuery标签及原生DOM标签的切换
通过jQuery获取页面上的标签
$("css选择器");
//例子:
var $box = $('#box');//获取id为box的HTML标签
通过CSS选择器去寻找匹配到的HTML标签,会根据返回的个数自动判断是返回一个元素或一个数组。
更多选择器可查阅jQuery参考手册 - 选择器。
jQuery标签和DOM标签切换
-
jQuery转原生DOM
var 原生dom标签变量名 = jQuery标签变量名.get(0); //例子: var $box = $('#box'); //把jquery 转为原生 DOM 标签 var box = $box.get(0); console.log($box) console.log(box);
-
原生DOM转jQuery
var jQuery标签变量名 = $(原生DOM标签变量名); //例子: var box = document.querySelector('#box'); var $box = $(box); console.log($box);
基本操作
内容获取/修改
-
html()
:用于获取或设置某个标签的内部HTML代码,类似于原生中的innerHTML。 -
text()
:获取或设置标签的内部文本,类似于原生的innerText。 -
val()
:获取或设置表单元素的内容,类似于原生的value。//获取 jQuery标签变量名.html(); jQuery标签变量名.text(); jQuery标签变量名.val(); //设置 jQuery标签变量名.html("新内容"); jQuery标签变量名.text("新内容"); jQuery标签变量名.val("新内容");
-
例子:
<div> <p>这是div中的 p标签</p> </div> <input value="123">
//获取 var divText = $('div').text(); var divHTML = $('div').html(); var inputValue= $('input').val(); //设置 $('div').text('新内容'); $('div').html("<a href='#'>百度一下</a>"); $('input').val("456");
属性获取/修改
-
attr()
:获取或设置HTML标签的某个属性。 -
prop()
:获取或设置HTML标签的某个属性,跟attr()
相比,prop()
适用于标签的内置属性,而attr()
更适用于用户自定义属性。 -
removeProp()
:删除某个指定的属性。 -
removeAttr()
:删除某个指定的属性(推荐使用)。 -
addClass()
:给某个标签追加一个class。 -
removeClass()
:删除某个标签的指定class。jQuery标签变量名.attr("属性名"); jQuery标签变量名.attr("属性名", "属性值"); jQuery标签变量名.prop("属性名"); jQuery标签变量名.prop("属性名", "属性值"); jQuery标签变量名.removeProp("属性名"); jQuery标签变量名.removeAttr("属性名"); jQuery标签变量名.addclass("class名"); jQuery标签变量名.removeclass("class名");
-
例子:
<div class="item"> <p>这是div中的 p标签</p> </div> <input value="123">
//获取 var value1 = $('input').attr('value') var value2 = $('input').prop('value') //设置 $('div').addClass('box'); $('div').removeClass('item');
添加/删除
添加
-
append()
:在某个标签之后插入一个新标签,新标签会作为最后一个子标签,类似于原生DOM的appendChild
。 -
before()
:在某个标签之前插入一个新标签,新标签会作为上一个兄弟标签。 -
after()
:在某个标签之后插入一个新标签,新标签会作为下一个兄弟标签。jQuery标签变量名.append("新标签的HTML代码"); jQuery标签变量名.before("新标签的HTML代码"); jQuery标签变量名.after("新标签的HTML代码");
删除
-
remove()
:删除找到的所有标签。jQuery标签变量名.remove();
- 如果找到多个标签,则它们都会被删除。
获取子/兄弟/父标签
获取子标签
children()
:获取某个标签的所有直接子标签。find('css选择器')
:根据CSS选择器获取获取某个标签满足条件的所有后代标签。
获取兄弟标签
prev()
:获取某个标签的上一兄弟标签。next()
:获取某个标签的下一兄弟标签。
获取父标签
parent()
:获取某个标签的直接父标签。parents('css选择器')
:获取某个标签的某个祖先标签,具体是通过CSS选择器来指代。
jQuery标签变量名.parent();
jQuery标签变量名.parents(CSS选择器);
jQuery标签变量名.prev();
jQuery标签变量名.next();
jQuery标签变量名.children();
jQuery标签变量名.find(CSS选择器);
遍历
-
first()
:获取遍历标签中的第一个。 -
last()
:获取遍历标签中的最后一个。 -
each()
:对jQuery标签的快捷遍历。 -
eq(i)
:获取找到标签中指定下标的标签,即第i个jQuery标签。$jQuery待遍历标签变量名.first(); $jQuery待遍历标签变量名.last(); $jQuery待遍历标签变量名.each(function(index){}); $jQuery待遍历标签变量名.eq(i);
修改CSS
css()
//语法:
//设置
jQuery标签变量名.css('CSS属性名', 'CSS属性值');
//批量设置css
jQuery标签变量名.css({
'CSS属性名1': 'CSS属性值1',
'CSS属性名2': 'CSS属性值2',
'CSS属性名3': 'CSS属性值3',
});
//获取
jQuery标签变量名.css('CSS属性名');
动画
内置动画
淡入/淡出
fadeIn()
:淡入fadeOut()
:淡出
下拉/上滑
slideDown()
:下拉slideUp()
:上滑
jQuery标签变量名.slideDown(动画毫秒时间);
jQuery标签变量名.slideUp(动画毫秒时间);
jQuery标签变量名.fadeIn(动画毫秒时间);
jQuery标签变量名.fadeOut(动画毫秒时间);
- 如果对同一个标签设置了多个动画,按照动画代码的书写顺序依次执行
自定义动画
animate()
:用户自定义动画
jQuery标签变量名.animate({
"css属性名1": "css属性值1",
"css属性名2": "css属性值2",
"css属性名n": "css属性值n"
}, 动画持续毫秒时间);
- animate基本上只支持跟位置和尺寸相关的动画,其他的基本都不支持。
- 如果要颜色的动画,可以使用css3,用JavaScript来切换class达到控制动画的目的。
动画结束后执行js代码
jQuery的每个动画函数都可以支持额外的参数,该参数必须是一个函数,用于表示在动画结束后要执行的代码。
jQuery标签变量名.动画函数名(其他参数, function(){
//动画结束后要执行的代码
});
事件
on()
on()
默认使用事件委托。
$父标签标签变量名.on('事件名', '要执行事件的标签CSS选择器', function(e){
//触发事件时要执行的代码
});
例子:
<div id='box'><div>
$('body').on('click', '#box', function(e){
//当id为box的标签发生点击事件要执行的代码
});
- this仍为DOM原生元素,如果转为jQuery元素需使用$(this)。
其它快捷事件方法
不推荐使用,这些快捷事件方法不适用于用js代码新增的标签,而on()
则适用当前及未来的元素,故建议使用on()
。
click
hover
dblclick
更多快捷事件方法参见jQuery 参考手册 - 事件。
其他API
-
show()
:等同于css('display','block')
,显示某个标签。 -
hide()
:等同于css('display','none')
,隐藏某个标签。jQuery标签变量名.show(); jQuery标签变量名.hide();
链式调用
概念
如果需要对同一个标签执行多句的jQuery代码,则需要不断的获取jQuery标签,造成代码量过多的问题。采用链式调用可将对同一个标签的多句代码整合成一句,达到代码整齐并减少一定的代码量的效果。
语法
jQuery标签变量名.函数名1().函数名2().函数名3()....函数名n();
例子:
$('div').css('width','300px').animate({"margin-left":"300px"},1000).text('123');
$('div').css('width','300px');
- 以上的每个函数都是接着前一个函数的执行结果继续执行。
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签