参考博客:博客园-JsonJi,https://www.cnblogs.com/Dominic-Ji/p/10490669.html
一、JQuery简介
JQuery是一个轻量化的、兼容多种浏览器(IE已经被淘汰)的JavaScript类库。它内部封装了原生的JavaScript代码,还额外添加了很多功能,使用户能够更加方便地处理HTML document、events、动画效果、Ajax交互。它的宗旨是“Write less, do more.”,即写更少的代码,但能做更多的事。
1.1、JQuery优点
- JQuery框架非常轻量,核心文件才几十KB,占用资源较小。
- 简化了原生JS、CSS代码,基于链式表达式可将多个操作集中于一行完成,因此更为简介,代码可读性更高。
- 兼容多种浏览器
- 支持插件扩展,并拥有丰富的第三方插件如:树形菜单、日期控件、图片切换插件、弹出窗口等。
1.2、导入JQuery
- 可以借助于各代码编辑器的初始化模板或者自己手动在script导入JS文件。
- 基于JQuery提供的CDN服务直接加载文件,如前端免费的CDN:bootCDN
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
1.3、JQuery对象
JQuery对象即通过jQuery封装DOM对象后的新对象,为jQuery所独有,因此jQuery对象只能使用jQuery对象的方法而不能使用原生DOM的方法。
二、JQuery基本语法
在声明一个jQuery对象的变量时,约定俗成在变量名前加$符号。
2.1、查找标签
与HTML、CSS查找非常相似,只是简化了许多。
2.1.1、基本选择器
id选择器
$('#ID') // 注意,一定要在id前加#
标签选择器
$('标签名')
class选择器
$('.类名') // 注意,一定要在类名前加.点号
2.1.2、分组选择器
$('#ID, .类型, 标签名')
2.1.3、组合/层级选择器
$("x y"); // x的所有后代y(子子孙孙)
$("x > y"); // x的所有儿子y(儿子)
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
2.1.4、基本筛选器
$('ul>li:first') // 找到ul的所有后代li中的第一个
$('ul>li:last') // 找到ul的所有后代li中的最后一个
$('ul>li:eq(3)') // 找到ul的所有后代li中索引值为3的标签,索引值从0开始
$('ul>li:even') // 找到ul的所有后代li中索引值为偶数的标签
$('ul>li:odd') // 找到ul的所有后代li中索引值为奇数的标签
$('ul>li:gt(2)') // 找到ul的所有后代li中索引值大于2的标签
$('ul>li:lt(2)')// 找到ul的所有后代li中索引值小于2的标签
$('ul>li:not(元素选择器)' // 移除所有满足not条件的标签
$('ul:has(元素选择器)' // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
2.1.5、属性选择器
<input type="text">
<input type="checkbox" name="" id="">
<input type="password" name="" id="">
$('input[type=text]'); // 获取input框中属性为text的标签
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]0: inputlength: 1prevObject: jQuery.fn.init [document]__proto__: Object(0)
$('input[type!=text]'); // 获取input框中属性不是text的所有标签
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
2.1.6、表单筛选器
语法:标签:属性
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
:enabled
:disabled
:checked
:selected
示例
$('input:text')
jQuery.fn.init(2) [input, input#i2, prevObject: jQuery.fn.init(1)]0: input1: input#i2length: 2prevObject: jQuery.fn.init [document]__proto__: Object(0)
$(':text')
jQuery.fn.init(2) [input, input#i2, prevObject: jQuery.fn.init(1)]
// 特殊情况:checked会将checked和selected都拿到,所以最好人为在它前面添加个input
:checked,它会将checked和selected都拿到,所以最好人为在它前面添加个input
2.1.7、筛选器方法
// 下一个元素
$('#i1').next() // 指定标签的下一个标签
jQuery.fn.init [input#i2, prevObject: jQuery.fn.init(1)]
$('#i1').nextAll() // 指定标签下面的所有标签
jQuery.fn.init(6) [input#i2, input#c1, input#p1, input#b1, button#bu1, script, prevObject: jQuery.fn.init(1)]
$('#i1').nextUntil('#p1') // 指定标签到下面指定条件之间的所有标签,但不包括该条件
jQuery.fn.init(2) [input#i2, input#c1, prevObject: jQuery.fn.init(1)]
// 上一个元素
$('#i2').prev() // 指定标签的上一个标签
jQuery.fn.init [input#i1, prevObject: jQuery.fn.init(1)]
$('#d1').prevAll() // 指定标签上面所有的标签
jQuery.fn.init(6) [button#bu1, input#b1, input#p1, input#c1, input#i2, input#i1, prevObject: jQuery.fn.init(1)]
$('#d1').prevUntil('#p1'); // 指定标签到上面指定条件之间的所有标签,但不包括该条件
jQuery.fn.init(2) [button#bu1, input#b1, prevObject: jQuery.fn.init(1)]
// 父元素
$('#p6').parent() // 指定标签的上一级标签
jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]
$('#p6').parents() // 指定标签的祖宗十八代
jQuery.fn.init(4) [div, div, body, html, prevObject: jQuery.fn.init(1)]
$('#p6').parentsUntil('#d1') // 同next和prev
jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]
// 儿子兄弟元素
$('#d1').children() // 指定标签的儿子
jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]
$('#d1').siblings() // 指定标签的兄弟姐妹,包括上下
jQuery.fn.init(7) [input#i1, input#i2, input#c1, input#p1, input#b1, button#bu1, script, prevObject: jQuery.fn.init(1)]
查找
// 等同于$('div p')
$("div").find("p")
// 等同于$('div .c1')
$("div").filter(".c1")
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
2.2、操作标签
$('
2.2.1、样式操作
class操作
$('#d1').addClass('name') // 为标签添加指定class
jQuery.fn.init [div#d1.name]
$('d1').removeClass('name') // 为标签移除指定class
jQuery.fn.init [prevObject: jQuery.fn.init(1)]
$('d1').hasClass('name') // 判断是否存在指定的class
false
$('d1').toggleClass('name') // 存在则删除,无则添加
$('#d1').css('color','red') // 为标签添加属性
2.2.2、位置操作
$('#d1').offset() // 获取当前浏览器窗口的相对位置
{top: 35.400001525878906, left: 8}
$('#d1').offset({top:100,left:100}) // 设置标签位置,必须要用K/V格式
jQuery.fn.init [div#d1.name]
$('#d1').position() // 获取当前标签相对于父标签的相对位置
{top: 100, left: 100}
$('#d1').scrollTop() // 获取当前标签相对于滚动条顶部的偏移量,括号里加参数即跳转至指定位置
0
$('#d1').scrollLeft() // 获取当前标签相对于滚动条左侧的偏移量,括号里加参数即跳转至指定位置
0
回到顶部案例
// CSS样式
<style>
/*这三个标签都是占位方便演示*/
#d1 {
height: 400px;
width: 100%;
background-color: green;
}
#d2 {
height: 400px;
width: 100%;
background-color: hotpink;
}
#d3 {
height: 400px;
width: 100%;
background-color: black;
}
/* 回到顶部按钮 */
#s1 {
height: 50px;
width: 80px;
bottom: 10px;
right: 10px;
border: 3px solid burlywood;
background-color: orange;
position: fixed;
}
/*默认隐藏回到顶部按钮*/
.hide {
display: none;
}
</style>
// JS控制
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<button id="s1" class="hide">回到顶部</button>
<script>
/*当屏幕滚动的偏移量大于100时,移除隐藏属性显示回到顶部按钮*/
$(window).scroll(function () {
if ($(window).scrollTop()>100) {
$('#s1').removeClass('hide')
} else {
/*当屏幕在最顶部时隐藏按钮*/
$('#s1').addClass('hide')
}
})
/*点击按钮返回顶部*/
$('#s1').on('click',function () {
$(window).scrollTop(0)
})
</script>
</body>
2.2.3、尺寸
$('#d1').height(100) // 调整高
jQuery.fn.init [div#d1]
$('#d1').width(100) // 调整宽
jQuery.fn.init [div#d1]
$('#d1').innerHeight(200) // 文本+内边距的高
jQuery.fn.init [div#d1]
$('#d1').innerWidth(150) // 文本+内边距的左右
jQuery.fn.init [div#d1]
$('#d1').outerHeight(200) // 文本+内边距+外边距
jQuery.fn.init [div#d1]
2.2.4、文本操作
HTML代码
$('div').html() // 获取第一个匹配到的元素的HTML内容
"nihao"
$('div').html('大家好') // 为所有匹配到的元素设置HTML内容
jQuery.fn.init(3) [div#d1, div#d2, div#d3, prevObject: jQuery.fn.init(1)]
文本值
$('div').text() // 取得所有匹配到的元素的文本
"大家好大家好大家好"
$('div').text('你们好') // 为所有匹配到的元素设置文本
jQuery.fn.init(3) [div#d1, div#d2, div#d3, prevObject: jQuery.fn.init(1)]
获取值操作
// val等同于value
$('#s1').val()
"reading"
$('#s1').val('learing')
jQuery.fn.init [select#s1]
val([val1, val2])// 设置多选的checkbox、多选select的值
获取文件数据
// 直接获取的是文件名
$('#i1').val()
"C:\fakepath\player.gdc"
// 第一个[0]是将JQuery对象转换为原生的JS对象,files是获取文件对象,第二个[0]是文件数据
$('#i1')[0].files[0]
File {name: "player.gdc", lastModified: 1612710879228, lastModifiedDate: Sun Feb 07 2021 23:14:39 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 49985, …}
示例
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<select multiple id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
// 自定义登录校验示例,模拟用户名密码不能为空
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文本操作之登录验证</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="input-name">用户名</label>
<input type="text" id="input-name" name="name">
<span class="error"></span>
</div>
<div>
<label for="input-password">密码</label>
<input type="password" id="input-password" name="password">
<span class="error"></span>
</div>
<div>
<input type="button" id="btn" value="提交">
</div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#btn").click(function () {
var username = $("#input-name").val();
var password = $("#input-password").val();
if (username.length === 0) {
$("#input-name").siblings(".error").text("用户名不能为空");
}
if (password.length === 0) {
$("#input-password").siblings(".error").text("密码不能为空");
}
})
</script>
</body>
</html>
2.2.5、属性操作
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。对于标签上有的能够看到的书信和自定义属性用attribute;对于返回布尔值比如CheckBox radio option是否被选中用prop,返回true和false
用于ID或自定义属性
let selectEle = $('select')
undefined
selectEle.attr('name') // 获取第一个被匹配到的元素的属性值
"top"
selectEle.attr('name','juli') // 为所有匹配到的元素设置属性值
jQuery.fn.init [select#s1, prevObject: jQuery.fn.init(1)]
selectEle.attr({'user':'sanxi','passwd':123}) // 为所有匹配到的元素设置多个属性值
jQuery.fn.init [select#s1, prevObject: jQuery.fn.init(1)]
selectEle.removeAttr('user','passwd') // 移除属性值
jQuery.fn.init [select#s1, prevObject: jQuery.fn.init(1)]
用于checkbox和radio
let inputEle = $('input')
undefined
inputEle.prop('id') // 获取第一个被匹配到的元素的属性值
"i1"
inputEle.removeProp('id') // 移除匹配到所有元素的指定属性值
jQuery.fn.init(2) [input#i1, input#i2, prevObject: jQuery.fn.init(1)]
2.2.6、文档处理
添加到内部的后面
将指定元素添加到该标签的内部的最后面
// 为标签添加文本内容
$('#d1').append('#i1')
jQuery.fn.init [div#d1]
// 将指定标签添加至尾部,注意区分引号,有引号代表添加字符串。
let iniputEle = $('#i1')
undefined
$('#d1').append(iniputEle)
jQuery.fn.init [div#d1]
// 将标签i1添加至指定标签的内部的最后面
$('#i1').appendTo(divEle)
jQuery.fn.init [input#i1, prevObject: jQuery.fn.init(1)]
添加到内部的前面
添加至内部的前面,语法同上。
// 将指定标签添加到标签d1内部的最前面
$('#d1').prepend(iniputEle)
jQuery.fn.init [div#d1]
// 将标签i1添加到指定标签divEle内部的最前面
$('#i1').appendTo(divEle)
jQuery.fn.init [input#i1, prevObject: jQuery.fn.init(1)]
添加到外部的前面
// 把divEle添加到标签i1的前头
let divEle = $('#d1')
undefined
$('#i1').before(divEle)
jQuery.fn.init [input#i1]
// 将标签i1插入到divEle的前面
$('#i1').insertBefore(divEle)
jQuery.fn.init [input#i1, prevObject: jQuery.fn.init(1)]
添加到外部的后面
// 将divEle添加到标签i1的后面
$('#i1').after(divEle)
jQuery.fn.init [input#i1]
// 将i1插入到divEle的后面
$('#i1').insertAfter(divEle)
jQuery.fn.init [input#i1, prevObject: jQuery.fn.init(1)]
移除与清空标签
// 移除所有div标签
$('div').remove()
jQuery.fn.init(3) [div#d1, div#d2, div#d3, prevObject: jQuery.fn.init(1)]
// 清空指定标签内的所有子标签
$('#d1').empty()
jQuery.fn.init [div#d1]
三、JQuery事件(重点)
3.1、常用事件
$('#d1').click(function name(params) {}) // 点击触发事件
$('#d1').hover(function name(params) {}) // 鼠标悬浮事件
$('#d1').blur(function name(params) {}) //
$('#d1').focus(function name(params) {}) // input焦点事件
$('#d1').change(function name(params) {}) // 文本更改事件
$('#d1').keyup(function name(params) {})
3.2、事件的两种绑定方式
直接绑定
$('d1').click(function () {
aler('sanxi666')
})
on绑定
相比直接绑定on更强大,还支持事件委托。
$('d1').on('click',function () {
alert('123')
})
3.3、事件示例
克隆事件
<style>
#d1 {
height: 100px;
width: 100px;
background-color: gold;
}
</style>
<body>
<div id="d1">绝版神器,点击就送</div>
<div id="d2"></div>
<div id="d3"></div>
<script>
$('#d1').on('click',function () {
$(this).clone().insertAfter($('body')) /*this指代被操作的元素本身*/
/*克隆默认只克隆HTML和CSS,不克事件;clone内加true可以连事件都克隆*/
})
</script>
</body>
input实时监控事件
模拟注册登录时,输入字符少于规定字数则出现警示信息。
<style>
.c1{
font-size: 9px;
color: red;
}
.c2 {
display: none;
}
</style>
<body>
username:<input type="text" id="i1">
<span class="c1 c2" id="s1">用户名不能少于8位</span>
<br>
<script>
$('#i1').on('input',function () {
if($(this).val().length<8){
$('#s1').removeClass('c2')
} else {
$('#s1').addClass('c2')
}
})
</script>
</body>
hover事件
写一个函数时,悬浮和移走都是同一动作,写两个函数则可以悬浮一个,移开一个。
注意:其它事件都可以用on,唯独hover不行。
<body>
<p>点击就送648大礼包</p>
<script>
$('p').hover(
function () {
alert('你还真信了?')
},
function () {
alert('别走,这次是真的!')
})
</script>
</body>
键盘按键事件
按键触发应用于如输入法、小游戏!keydown为按下,keyup为松开,funaction里面会有个形参event拿到按键内部对应的编码(keycode)
<script>
$(window).keydown(function (event) {
alert(event.keyCode)
})
$(window).keyup(function (event) {
alert(event.keyCode)
})
</script>
3.4、阻止后续事件执行
我们知道,form表单的submit按钮本身自带有事件,即点击后提交数据至后端;那么当我们再给submit绑定一个自定义事件时,比如form表单中的submit按钮,加一个触发显示文本的事件,本身submit自己也有提交的事件,这就是两个事件了。当我们点击按钮时,显示的文本会立即被提交,因此页面也被刷新,直观的效果就是疯狂点,文字疯狂闪烁。
<body>
<form action="">
<span id="s1"></span>
<input type="submit" value="提交" id="i1">
</form>
<script>
$('#i1').on('click',function () {
$('#s1').text('别瞎搞')
})
</script>
</body>
那么想阻止其中一个事件不再执行,该怎么搞?
1、在自定义事件的最后加return false,这种属于万金油方法。
<script>
$('#i1').on('click',function () {
$('#s1').text('别瞎搞')
/*只需要加这一个return false就够了*/
return false
})
</script>
2、函数加形参,它有个方法preventDefalut(),但是这个只能阻止默认的事件
<script>
$('#i1').on('click',function (e) {
$('#s1').text('别瞎搞')
e.preventDefault()
})
</script>
很明显,第一种return更为方便。
3.5、阻止事件冒泡
如果一个标签及其子标签都绑定了事件,当子标签触发事件时,它的父辈们也会触发,这会烦人。如下所示:当触发d3的事件后,它的父辈如d2、d1也会随后触发!
<body>
<div id="d1">d1
<div id="d2">d2
<div id="d3">d3</div>
</div>
</div>
<script>
$('#d1').on('click',function () {
alert('我是d1,我不想搞事')
})
$('#d2').on('click',function () {
alert('我是d2,我不想搞事')
})
$('#d3').on('click',function () {
alert('我是d3,气氛搞起来')
})
</script>
</body>
如何阻止?不用说啦,选return false!
1、return false,万能的return false;就不再演示了。
2、也是e形参,这次是stopPropagation。
<script>
$('#d1').on('click',function () {
alert('我是d1,我不想搞事')
})
$('#d2').on('click',function () {
alert('我是d2,我不想搞事')
})
$('#d3').on('click',function (e) {
alert('我是d3,后面的都给我消停会')
e.stopPropagation()
})
</script>
3.6、事件委托
动态创建出来的标签,无法触发事件;我们可以用on来将这件事情委托给on,在指定标签范围内,无论该标签是事先创建的还是后续动态创建都会触发事件。
3.7、页面加载
等待页面加载完毕再执行代码,JQuery中等待页面加载完毕的方法
1、$(document).ready(function(){})
2、$(function(){代码})
3、直接写在body内部最下方
与window.onload的区别
- window.onload()函数有覆盖现象,必须等待着图片资源加载完成之后才能调用
- jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数)
四、简单动画效果
显示/隐藏
// 显示元素,数组内可以放时间,单位是毫秒
$('#d1').show([10000])
// 隐藏元素,数组内可放时间
$('#d1').hide([20000])
// toggle你懂的,已显示则隐藏,已隐藏则显示
$('#d1').toggle()
滑动
// 从上而下滑动显示元素,括号内可以放时间,单位是毫秒
$('#d1').slideUp(10000)
// 由下而上滑动显示元素
$('#d1').slideDown(10000)
// 已收则从上而下显示,已显示则自下而上收回元素。
渐变色
这个fadein和fadeout括号内可以填'slow', 'fast'或者直接填时间
// 淡出,即从无到有
$('#d1').fadeIn('slow')
$('#d1').fadeIn(3000)
// 淡入,从有到无
$('#d1').fadeOut(3000)
// toggle,你懂的
$('#d1').fadeToggle(3000)
// 淡变到某个透明度后停止,第二个参数是透明度
$('#d1').fadeTo(3000,0.5)
五、补充知识点
each方法
each里面第一个参数写个容器数据类型,第二个参数写一个函数;函数的两个形参分别是索引、索引对应的值;有了each后,就不用for循环了!
ll = [11,22,66,88]
(4) [11, 22, 66, 88]
$.each(ll,function(index,attr){console.log(index,attr)})
VM1538:1 0 11
VM1538:1 1 22
VM1538:1 2 66
VM1538:1 3 88
(4) [11, 22, 66, 88]
data方法
能够让指定的标签帮我们存储数据并用户肉眼看不见,属于隐形存储。
$('#d1').data('属性','属性值')
$('#d1').removeData('属性','属性值')