05 jQuery
jQuery
jQuery介绍
jQuery就类似于python的模块，帮你封装了一堆复杂的操作暴露给你一些简易的接口，前端的模块叫 “类库”
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器，jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
jQuery内容
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档处理
- 事件
- 动画效果
- 插件
- each、data、Ajax
下载链接：jQuery官网
中文文档：jQuery AP中文文档
<!-- 1.下载压缩版jQuery -->
<!-- 2.把下载好的jQuery文件放到项目中 -->
<!-- 3.html导入jQuery -->
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery-3.4.1.js"></script>
</head>
<!-- 4.也可用网上在线jQuery https://www.bootcdn.cn/jquery/ -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
jQuery版本
- 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对IE678的支持。
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为i1的元素的html代码。其中html()是jQuery里的方法。相当于：document.getElementById("i1").innerHTML;
虽然jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象
$variable[0] // jQuery对象转成DOM对象
$(variable) // DOM对象转成jQuery对象
拿上面那个例子举例，jQuery对象和DOM对象的使用：
$("#i1").html(); // jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML; // DOM对象使用DOM的方法
jQuery基础语法
$(selector).action()
查找标签
基本选择器
id选择器：
$("#id")
标签选择器：
$("tagName")
class选择器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class类的div标签
所有元素选择器：
$("*")
组合选择器：
$("#id, .className, tagName")
层级选择器
x和y可以为任意选择器
$("x y"); // x的所有后代y（子子孙孙）
$("x > y") // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器) // 匹配除了指定元素以外的所有元素
:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子：
$("div:has(h1)") // 找到所有后代中有h1标签的div标签
$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)") // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签
$("ul li:eq(2)") // ul的后代索引为2的li
练习：jQuery版自定义模态框，实现弹出和隐藏功能。
<!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>jQuery版自定义模态框</title>
<script src="jQuery-3.4.1.js"></script>
<style>
.cover {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgrey;
z-index: 999;
}
.modal {
width: 600px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<input type="button" value="弹" id="i0">
<div class="cover hide"></div>
<div class="modal hide">
<p><label for="i1">用户名：<input id="i1" type="text"></label></p>
<p><label for="i2">密码：<input id="i2" type="password"></label></p>
<input type="button" id="i3" value="关闭">
</div>
<script>
var tButton = $("#i0")[0];
tButton.onclick = function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0];
$(coverEle).removeClass("hide");
$(modalEle).removeClass("hide");
};
var cButton = $("#i3")[0];
cButton.onclick = function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0];
$(coverEle).addClass("hide");
$(modalEle).addClass("hide");
}
</script>
</body>
</html>
属性选择器
[attribute]
[attribute=value] // 属性等于
[attribute!=value] // 属性不等于
例子：
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("[type]"); // 取到有type属性的所有标签
$("[type='checkbox']"); // 取到type属性为checkbox的所有标签
$("input[type='checkbox']"); // 取到checkbox类型的input标签
$("input[type!='text']"); // 取到类型不是text的input标签
表单筛选器
针对from表单的筛选
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
// 例子
$(":checkbox") // 找到所有的checkbox
表单对象属性:
:enabled
:disabled
:checked
:selected
// 例子
$("input:enabled") // 找到可用的input标签
$(":checked") // 找到checkbox和select标签里被选中的option
$("input:checked") //// 找到input标签被选中的checkbox
$(":selected") // 找到select标签里被选中的option
筛选器方法
下一个元素：
$("#id").next() // 同级别下面第一个
$("#id").nextAll() // 同级别下面所有
$("#id").nextUntil("#i2") // 同级别下面到id为i2为止并且不包含id为i2
上一个元素：
$("#id").prev() // 同级别上面第一个
$("#id").prevAll() // 同级别上面所有
$("#id").prevUntil("#i2") // 同级别上面到id为i2为止并且不包含id为i2
父亲元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有父辈元素，直到html标签
$("#id").parentsUntil(".c1") // 查找当前元素的所有父辈元素，直到遇到匹配的那个元素（不包含这个元素）为止。
儿子和兄弟元素：
$("#id").children(); // 儿子们
$("#id").siblings(); // 兄弟们
查找
$("div").find("p") // 找div里的p标签，等价于$("div p")
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的，等价于 $("div.c1")
补充：
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
//例子：链式操作
$('div').children().first().css('color','red').next().css('color','green')
示例：左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.left {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 20%;
height: 100%;
background-color: green;
}
.title {
font-size: 24px;
color: white;
text-align: center;
}
.items {
background-color:black;
padding: 10px 15px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="title">菜单一
<div class="items hidden">111</div>
<div class="items hidden">222</div>
<div class="items hidden">333</div>
</div>
<div class="title">菜单二
<div class="items hidden">111</div>
<div class="items hidden">222</div>
<div class="items hidden">333</div>
</div>
<div class="title">菜单三
<div class="items hidden">111</div>
<div class="items hidden">222</div>
<div class="items hidden">333</div>
</div>
</div>
</div>
<script>
$('.title').click(function () {
// 先将所有的div全部隐藏
$('.items').addClass('hidden');
// 然后将被点击的div的hidden移除
$(this).children().removeClass('hidden'); // this指代的是当前被操作对象，原生js对象
})
</script>
</body>
</html>
操作标签
样式操作
样式类
addClass(); // 添加指定的CSS类名。
removeClass(); // 移除指定的CSS类名。
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
CSS
css("color","red") // DOM操作：tag.style.color="red"
// 示例
$("p").css("color", "red"); // 将所有p标签的字体设置为红色
位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
// 示例
$(window).scrollTop()
$(window).scrollTop(0) // 回到顶部
.offset()方法允许检索一个元素相对于文档（document）的当前位置。和.position()的差别在于：.position()是相对于父级元素的位移。
示例：返回顶部示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.c1 {
height: 50px;
width: 100px;
background-color: yellow;
color: black;
position: fixed;
bottom: 20px;
right: 10px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<a href="" id="d1"></a>
<div style="background-color: #2a6496; height: 3000px"></div>
<div class="c1 hidden">
<a href="#d1">回到顶部</a>
</div>
<script>
$(window).scroll(function () {
if($(window).scrollTop() > 800){
$('.c1').removeClass('hidden')
}else {
$('.c1').addClass('hidden')
}
})
</script>
</body>
</html>
尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
outerHeight(true)
outerWidth(true)
文本操作
HTML代码：
html() // 取得第一个匹配元素的html内容，$('div').html
html(val) // 设置所有匹配元素的html内容
文本值：
text() // 取得所有匹配元素的内容
text(val) // 设置所有匹配元素的内容
值：
// 争对from表单操作
val() // 取得第一个匹配元素的值，$("input[name='gender']:checked").val()
val(val) // 设置所有匹配元素的值
val([val1, val2]) // 设置多选checkbox、多选select的值
// 示例1
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<script>$("[name='hobby']").val(['basketball', 'football']);</script>
自定义登录校验示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.errors {
color: red;
}
</style>
</head>
<body>
<h3>登陆页面</h3>
<form action="">
<p><label for="d1">username:
<input type="text" id="d1">
<span class="errors"></span>
</label></p>
<p><label for="d2">password:
<input type="text" id="d2">
<span class="errors"></span>
</label></p>
<input type="submit" id="d3">
</form>
<script>
var submitEle = document.getElementById('d3');
submitEle.onclick = function () {
// 先获取input框中的内容
var userNameVal = $('#d1').val();
var passWordVal = $('#d2').val();
// 判断是否为空
if (userNameVal.length === 0){
// 将username对应的span标签渲染内容
$('.errors').first().text('用户名不能为空');
}
if (passWordVal.length === 0){
// 将password对应的span标签渲染内容
$('.errors').last().text('密码不能为空');
}
// 取消标签默认的动作
return false
};
var inputEle = document.getElementsByTagName('input');
for (let i=0;i<inputEle.length;i++){
inputEle[i].onfocus = function () {
$(this).next().text('')
}
}
</script>
</body>
</html>
属性操作
用于ID等或自定义属性：
attr(attrName) // 返回第一个匹配元素的属性值，$('a').attr('href')
attr(attrName, attrValue) // 为所有匹配元素设置一个属性值
attr({k1:v1,k2:v2}) // 为所有匹配元素设置多个属性值
removeAttr() // 从每一个匹配的元素中删除一个属性
用于checkbox和radio
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。
// prop不支持获取标签的自定义属性
prop() // 获取属性，返回true或false，$('#d1').prop('checked')
removeProp() // 移除属性，返回true或false
// prop设置属性
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
总结：
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
文档处理
添加到指定元素内部的后面
$(A).append(B) // 把B追加到A
$(A).appendTo(B) // 把A追加到B
var temp = `
<li class="list-group-item">
<span><span class="
glyphicon glyphicon-comment"></span><a href="/${username}/">${username}</a></span>
<p>${conTent}</p>
</li>`;
$('.list-group').append(temp);
添加到指定元素内部的前面
$(A).prepend(B) // 把B前置到A
$(A).prependTo(B) // 把A前置到B
添加到指定元素外部的后面
$(A).after(B) // 把B放到A的后面
$(A).insertAfter(B) // 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
$(A).remove() // 从DOM中删除所有匹配的元素。
$(A).empty() // 删除匹配的元素集合中所有的子节点。
替换
replaceWith() // 将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll() // 用匹配的元素替换掉所有selector匹配到的元素
// 示例
$("span,b,i").replaceWith("<h3>Word</h3>") // 将span,b,i标签都用h3标签替换
$("<h3>Word</h3>").replaceAll("span,b,i") // 同上
克隆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
button {
height: 50px;
width: 100px;
background-color: orange;
}
</style>
</head>
<body>
<button>多重影分身之术</button>
<script>
// clone()只克隆标签和文本，不克隆事件，加参数true即可克隆事件
$('button').on('click',function () {
$(this).clone(true).insertAfter(this);
})
</script>
</body>
</html>
事件
常用事件
$(A).click(function(){...}) // 点击
$(A).hover(function(){...}) // 光标悬停
$(A).blur(function(){...}) // 失去焦点
$(A).focus(function(){...}) // 获取焦点
$(A).change(function(){...}) // 输入域发生变化
$(A).keyup(function(){...}) // 键盘键被松开时
事件绑定
$(A).on( events [, selector ],function(){})
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
jQuery绑定事件有两种方式
// 方式1：
$(选择器).事件名(function(){
事件代码
})
$('button').click(function(){
alert(123)
})
// 方式2：
$(选择器).on(事件名,function(){
事件代码
})
$('button').on('click',function(){
alert(123)
})
hover事件
注意：像click、keydown等DOM中定义的事件，都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：
$('ul').on('mouseenter', 'li', function() { //绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() { //绑定鼠标划出事件
$(this).removeClass('hover');
});
<span>点我</span>
<script>
$('span').hover(
// 鼠标悬浮，如果只写一个函数那么悬浮和移开都会执行
function () {
$(this).css('color','red')
},
// 鼠标移开
function () {
$(this).css('color','green')
}
)
</script>
input实时监测事件
- oninput是HTML5的标准事件
- 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化
- 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
- oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
- 使用jQuery库的话直接使用on同时绑定这两个事件即可
<input type="text">
<script>
$('input').on('input',function () {
console.log($(this).val())
})
</script>
<input type="text">
<script>
$("input").on("input propertychange", function () {
console.log(($(this).val()));
})
</script>
keydown和keyup事件组合示例：按住shift实现批量操作
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>EvaJ</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Gold</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">
<script>
var flag = false;
// shift按键被按下的时候
$(window).keydown(function (event) {
console.log(event.keyCode);
if (event.keyCode === 16){
flag = true;
}
});
// shift按键被抬起的时候
$(window).keyup(function (event) {
console.log(event.keyCode);
if (event.keyCode === 16){
flag = false;
}
});
// select标签的值发生变化的时候
$("select").change(function (event) {
// 如果shift按键被按下，就进入批量编辑模式
// shift按键对应的code是16
// 判断当前select这一行是否被选中
console.log($(this).parent().siblings().first().find(":checkbox"));
var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
console.log(isChecked);
if (flag && isChecked) {
// 进入批量编辑模式
// 1. 取到当前select选中的值
var value = $(this).val();
// 2. 给其他被选中行的select设置成和我一样的值
// 2.1 找到那些被选中行的select
var $select = $("input:checked").parent().parent().find("select")
// 2.2 给选中的select赋值
$select.val(value);
}
});
</script>
</body>
移除事件
$(A).off( events [, selector ][,function(){}])
off() 移除用 .on()绑定的事件处理程序。
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
阻止默认事件执行
- return false; // 常用阻止表单提交等
- e.preventDefault();
<!-- 方式一：return false -->
<form action="">
<input type="submit">
</form>
<script>
$('input').click(function () {
alert(123);
return false
})
</script>
<!-- 方式二：事件参数.preventDefault() -->
<form action="">
<input type="submit">
</form>
<script>
$('input').click(function (e) {
alert(123);
e.preventDefault()
})
</script>
阻止事件冒泡
事件冒泡：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
<div>div
<p>p
<span>span</span>
</p>
</div>
<script>
$('div').click(function (e) {
alert('div')
});
$('p').click(function (e) {
alert('p');
// 第一种取消事件冒泡的方式
return false
});
$('span').click(function (e) {
alert('span');
// 第二种取消事件冒泡的方式
e.stopPropagation()
})
</script>
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
$(document).ready(function(){
// 在这里写你的代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
文档加载完绑定事件，并且阻止默认事件发生：登录校验示例
<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>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form id="myForm">
<p>
<label for="name">姓名<input type="text" id="name"></label>
<span class="error"></span>
</p>
<p>
<label for="passwd">密码<input type="password" id="passwd"></label>
<span class="error"></span>
</p>
<input type="submit" id="modal-submit" value="登录">
</form>
<script>
function myValidation() {
// 多次用到的jQuery对象存储到一个变量，避免重复查询文档树
var $myForm = $("#myForm");
$myForm.find(":submit").on("click", function () {
// 定义一个标志位，记录表单填写是否正常
var flag = true;
$myForm.find(":text, :password").each(function () {
var val = $(this).val();
if (val.length <= 0) {
var labelName = $(this).prev("label").text();
$(this).next("span").text(labelName + "不能为空");
flag = false;
}
});
// 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件
return flag;
});
// input输入框获取焦点后移除之前的错误提示信息
$myForm.find("input[type!='submit']").on("focus", function () {
$(this).next(".error").text("");
})
}
// 文档树就绪后执行
$(document).ready(function () {
myValidation();
});
</script>
</body>
与window.onload的区别
- window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
- jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
示例：
<button>屠龙宝刀,点击就送!</button>
<script>
// 事件委托，将点击事件委托给body内所有的button按钮
$('body').on('click','button',function () {
alert(123)
})
</script>
动画效果
// 基本
show([s,[e],[fn]]) // $('div').show(5000) 5000代表5s
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]]) // $('div')fadeTo(5000,0.3) 0.3代表透明度
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
自定义动画示例：点赞特效简单示例
<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>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
div {
position: relative;
display: inline-block;
}
div > i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
补充
each方法
$.each(对象或数组,function(索引, 本次循环的元素){})：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length – 1。其他对象通过其属性名进行迭代。
li = [10,20,30,40]
$.each(li,function(i, v){
console.log(i, v); //第一个参数i是索引，第二个参数v是每次循环的具体元素
})
/* 输出
0 10
1 20
2 30
3 40
*/
$.each($('div'),function(index,obj){
console.log(index,obj)
})
jQuery.each(function(索引, 本次循环的元素){})：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each()方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字this总是指向这个元素。
// 为每一个li标签添加c1样式
$("li").each(function(){
$(this).addClass("c1");
});
$("li").each(function(index,obj){ //第一个参数i是索引，第二个参数v是每次循环的具体元素。
$(this).addClass("c1");
});
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 – 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的.each()方法：也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作
终止each循环
在遍历过程中可以使用return false提前结束each循环。
return false；
data方法
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
$(A).data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100); // 给所有div标签都保存一个名为k，值为100
$(A).data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k"); // 返回第一个div标签中保存的"k"的值
$(A).removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); // 移除元素上存放k对应的数据
插件(了解即可)
jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
示例：
<script>
jQuery.extend({
min:function(a, b){return a < b ? a : b;},
max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5
</script>
jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。
<script>
jQuery.fn.extend({
check:function(){
return this.each(function(){this.checked =true;});
},
uncheck:function(){
return this.each(function(){this.checked =false;});
}
});
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>
单独写在文件中的扩展：
(function(jq){
jq.extend({
funcName:function(){
...
},
});
})(jQuery);
版权声明：本文为jlllog原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。