jQuery介绍
1、jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2、jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
jQuery内容
1、选择器
2、筛选器
3、样式操作
4、文本操作
5、属性操作
6、文档处理
7、事件
8、动画效果
9、插件
10、each、data、Ajax
jQuery基础语法
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(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
例子
// 示例 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例子
$(":checkbox") // 找到所有的checkbox
表单对象属性
:enabled
:disabled
:checked
:selected
例子
找到可用的input标签
<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签
找到被选中的option
<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option
筛选方法
下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父辈元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
操作标签
样式类
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
$(window).scrollTop()
$(window).scrollTop()
$(window).scrollTop()
$(window).scrollTop()
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>位置相关方法</title> <style> * { margin:0; padding: 0; } .c1, .c2, .c3 { height: 100px; width: 100px; background-color: red; } .c2 { position: relative; left: 100px; top: 100px; background-color: green; } .c3 { position: absolute; left: 100px; top: 100px; background-color: blue; } </style> </head> <body> <div class="c1">我是c1</div> <div class="c2">我是c3的爸爸c2 <div class="c3">我是c3</div> </div> <script src="jquery-3.2.1.min.js"></script> </body> </html>
$(".c1").offset()
{top: 0, left: 0}
$(".c2").offset()
{top: 200, left: 100}
$(".c3").offset()
{top: 300, left: 200}
$(".c3").position()
{top: 100, left: 100}
返回顶部示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>返回顶部示例</title> <style> .c3 { position: fixed; height: 50px; width: 50px; bottom: 15px; right: 15px; } .hide { display: none; } .c2 { font-size: 20px; height: 50px; } </style> </head> <body> <div class="c2">0</div> <div class="c2">1</div> <div class="c2">2</div> <div class="c2">3</div> <div class="c2">4</div> <div class="c2">5</div> <div class="c2">6</div> <div class="c2">7</div> <div class="c2">8</div> <div class="c2">9</div> <div class="c2">10</div> <div class="c2">11</div> <div class="c2">12</div> <div class="c2">13</div> <div class="c2">14</div> <div class="c2">15</div> <div class="c2">16</div> <div class="c2">17</div> <div class="c2">18</div> <div class="c2">19</div> <div class="c2">20</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <div class="c2">111</div> <button id="b1" class="btn btn-default c3 hide">返回顶部</button> <script src="jquery-3.2.1.min.js"></script> <script> $(window).scroll(function () { if($(window).scrollTop()>100){ $("#b1").removeClass("hide"); }else{ $("#b1").click(function () { $("#b1").addClass("hide"); }) } }) $("#b1").click(function () { $(window).scrollTop(0); }) </script> </body> </html>
尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文本操作
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文档操作</title> <style> .error { color: red; } </style> </head> <body> <div id="d1"> <p><span>span</span></p> <div>div</div> </div> <form id="f1"> <p> <label>用户名: <input class="need" name="username" type="text"> <span class="error"></span> </label> </p> <p> <label>密码: <input class="need" name="password" type="password"> <span class="error"></span> </label> </p> <p>爱好: <label>篮球 <input name="hobby" value="basketball" type="checkbox"> </label> <label>足球 <input name="hobby" value="football" type="checkbox"> </label> <label>双色球 <input name="hobby" value="doublecolorball" type="checkbox"> </label> </p> <p>性别: <label>男 <input name="gender" value="1" type="radio"> </label> <label>女 <input name="gender" value="0" type="radio"> </label> <label>保密 <input name="gender" value="2" type="radio"> </label> </p> <p> <label for="s1">从哪儿来:</label> <select name="from" id="s1"> <option value="010">北京</option> <option value="021">上海</option> <option value="020">广州</option> </select> </p> <p> <label for="s2">从哪儿来:</label> <select name="from" id="s2" multiple> <option value="010">北京</option> <option value="021">上海</option> <option value="020">广州</option> <option value="0755">深圳</option> </select> </p> <p> <label for="t1">个人简介:</label> <textarea name="memo" id="t1" cols="30" rows="10"> </textarea> </p> <p> <input id="b1" type="submit" value="登录"> <input id="cancel" type="button" value="取消"> </p> </form> <script src="jquery-3.2.1.min.js"></script> <script> // 点击登录按钮验证用户名和密码为不为空 // 为空就在对应的input标签下面显示一个错误提示信息 // 1. 给登录按钮绑定点击事件 // 2. 点击事件要做的事儿 // 2.1 找到input标签--> 取值 --> 判断为不为空 --> .length为不为0 // 2.2 如果不为空,则什么都不做 // 2.2 如果为空,要做几件事儿 // 2.2.1 在当前这个input标签的下面 添加一个新的标签,内容为xx不能为空 $("#b1").click(function () { var $needEles = $(".need"); for (var i=0;i<$needEles.length;i++){ if ($($needEles[i]).val().trim().length === 0) { var labelName = $($needEles[i]).parent().text().trim().slice(0,-1); $($needEles[i]).next().text( labelName +"不能为空!"); } } return false; }) </script> </body> </html>
文本值
$("[name='username']"); // 获取文本
$("[name='username']").val(); //获取文本值
获取多选值
var $checkEles = $(":checkbox:checked"); //定义变量 for (var i=0;i<$checkEles.length;i++){console.log($checkEles[i]);console.log($($checkEles[i]).val());}; // 通过循环取值
获取单选值
$(":radio:checked");
$(":radio:checked").val();
获取select值
$("#s2:checked").val();
$("#s2").val();
// 支持这种取法
属性操作
用于ID或自定义属性
attr(attrName)// 返回第一个匹配元素的属性值
$("img").attr("src");
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
$("img").attr("src","https://i01piccdn.sogoucdn.com/9cebb1cfb8d43420");
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
<input type="checkbox" value="1"> <input type="radio" value="2"> <script> $(":checkbox[value='1']").prop("checked", true); $(":radio[value='2']").prop("checked", true); </script>
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
举个例子：
<input type="checkbox" id="i1" value="1">
针对上面的代码，
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。
如果换成下面的代码：
<input type="checkbox" checked id="i1" value="1">
再执行：
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
接下来再看一下针对自定义属性，attr和prop又有什么区别：
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
执行以下代码：
$("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。
总结一下：
1、对于标签上有的能看到的属性和自定义属性都用attr
2、对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
练习题：全选、反选、取消
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>作业需求分析</title> </head> <body> <table border="1"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>职位</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>小东北</td> <td>二人转演员</td> </tr> <tr> <td><input type="checkbox"></td> <td>乔治</td> <td>演员</td> </tr> <tr> <td><input type="checkbox"></td> <td>小钱</td> <td>导游</td> </tr> </tbody> </table> <input type="button" id="b1" value="全选"> <input type="button" id="b2" value="反选"> <input type="button" id="b3" value="取消"> <script src="jquery-3.2.1.min.js"></script> <script> // 点击全选，表格中所有的checkbox的选中 // 1、找checkbox // 2、全部选中 --> prop("checkec",true)； $("#b1").click(function () { $(":checkbox").prop("checked", true); }) // 反选 // 1、找到所有的checkbox，判断 // 2、没有被选中的，要选中 // 3、被选中的，要取消选中 $("#b2").click(function () { // 找到所有的checkbox,把它们保存在一个名叫 $checkEle 的变量中,方便后面使用 var $checkEle = $(":checkbox"); // 遍历所有的checkbox,根据每一个checkbox的状态做不同的操作 for (var i = 0; i < $checkEle.length; i++) { // 把每一个checkbox包成jQuery对象 var $checkEles = $($checkEle[i]); // 如果 checkbox是选中的 if ($checkEles.prop("checked")){ // 取消选中 $checkEles.prop("checked", false); } else { // 否则就选中 $checkEles.prop("checked", true); } } }) // 点击取消 // 找到所有的checkbox // 全部取消选中 -->prop("checked",false) $("#b3").click(function () { $(":checkbox").prop("checked", false); }) </script> </body> </html>
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B <!--创建新标签--> <!--var liEle = document.createElement("li");--> <!--给新标签赋值--> <!--liEle.innerText=0;--> <!--把新标签添加到ul标签内部的最后--> <!--$("ul").append(liEle);--> <!--把新标签追加到ul标签内部后面--> <!--$(liEle).appendTo("ul");-->
添加到指定元素内部的后面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B <!--把新标签添加到ul标签内部的前面--> <!--$("ul").prepend(liEle);--> <!--把新标签追加到ul标签内部的前面--> <!--$(liEle).prependTo("ul");-->
添加到指定元素外部的后面和前面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面 <!--添加到指定元素外部的后面--> <!--var liEle = document.createElement("li");--> <!--liEle.innerText=4;--> <!--$("#l1").after(liEle);--> <!--添加到指定元素外部的前面--> <!--var liEle = document.createElement("li");--> <!--liEle.innerText=0.5;--> <!--$("#l1").before(liEle);-->
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。 <!--直接把ul标签及内部子标签全部删除--> <!--$("ul").remove();--> <!--清空内部的子标签及内容--> <!--$("ul").empty();-->
练习题：
点击按钮在表格后面添加一行数据，点击每一行的删除按钮删除当前行元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>on绑定事件 表格最后添加一条记录</title> </head> <body> <table border="1" id="t1"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>小强</td> <td>吃饭</td> <td> <button class="delete">删除</button> </td> </tr> <tr> <td>2</td> <td>二哥</td> <td>Girl</td> <td> <button class="delete">删除</button> </td> </tr> <tr> <td>3</td> <td>小东北</td> <td>扭秧歌</td> <td> <button class="delete">删除</button> </td> </tr> <tr> <td>4</td> <td>肥肥</td> <td>冰激凌</td> <td> <button class="delete">删除</button> </td> </tr> <tr> <td>5</td> <td>兽兽</td> <td>蹦迪</td> <td> <button class="delete">删除</button> </td> </tr> </tbody> </table> <button id="b1">添加一行数据</button> <script src="jquery-3.2.1.min.js"></script> <script> // 绑定事件 $("#b1").on("click",function () { // 生成要添加的tr标签及数据 var trEle = document.createElement("tr"); $(trEle).html("<td>6</td>"+ "<td>哇塞</td>"+ "<td>社会摇</td>"+ "<td><button class='delete'>删除</button></td>>"); // 把生成的tr插入到表格中 $("#t1").find("tbody").append(trEle); }) $("tbody").on("click",".delete",function () { console.log(this); $(this).parent().parent().remove(); }) </script> </body> </html>
替换
replaceWith()
replaceAll()
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>替换操作示例</title> </head> <body> <p><a href="http://www.sogo.com">sogo</a></p> <p><a href="">bbb</a></p> <p><a href="">ccc</a></p> <button id="b1">点我!</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").click(function () { var imgEle = document.createElement("img"); $(imgEle).attr("src","https://i04piccdn.sogoucdn.com/9a533489eace11e3") $("a").replaceWith(imgEle); // $(imgEle).replaceAll("a"); }) </script> </body> </html>
克隆
clone()// 参数
克隆示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>克隆示例</title> </head> <body> <button id="b1">点击就送！屠龙宝刀！</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").click(function () { $(this).clone().insertAfter(this); }) </script> </body> </html>
事件
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>on绑定事件 表格最后添加一条记录</title> </head> <body> <table border="1" id="t1"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>小强</td> <td>吃饭</td> <td> <button class="delete">删除</button> </td> </tr> <tr> <td>2</td> <td>二哥</td> <td>Girl</td> <td> <button class="delete">删除</button> </td> </tr> <tr> <td>3</td> <td>小东北</td> <td>扭秧歌</td> <td> <button class="delete">删除</button> </td> </tr> <tr> <td>4</td> <td>肥肥</td> <td>冰激凌</td> <td> <button class="delete">删除</button> </td> </tr> <tr> <td>5</td> <td>兽兽</td> <td>蹦迪</td> <td> <button class="delete">删除</button> </td> </tr> </tbody> </table> <button id="b1">添加一行数据</button> <script src="jquery-3.2.1.min.js"></script> <script> // 绑定事件 $("#b1").on("click",function () { // 生成要添加的tr标签及数据 var trEle = document.createElement("tr"); $(trEle).html("<td>6</td>"+ "<td>哇塞</td>"+ "<td>社会摇</td>"+ "<td><button class='delete'>删除</button></td>>"); // 把生成的tr插入到表格中 $("#t1").find("tbody").append(trEle); }) $("tbody").on("click",".delete",function () { console.log(this); $(this).parent().parent().remove(); }) </script> </body> </html>
keydown和keyup事件组合示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>键盘相关事件</title> </head> <body> <table border="1" id="t1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>小强</td> <td>吃冰激凌</td> <td> <select> <option value="0">下线</option> <option value="1">上线</option> <option value="2">离线</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>二哥</td> <td>Girl</td> <td> <select> <option value="0">下线</option> <option value="1">上线</option> <option value="2">离线</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>二哥</td> <td>Girl</td> <td> <select> <option value="0">下线</option> <option value="1">上线</option> <option value="2">离线</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>二哥</td> <td>Girl</td> <td> <select> <option value="0">下线</option> <option value="1">上线</option> <option value="2">离线</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>二哥</td> <td>Girl</td> <td> <select> <option value="0">下线</option> <option value="1">上线</option> <option value="2">离线</option> </select> </td> </tr> </tbody> </table> <script src="jquery-3.2.1.min.js"></script> <script> // 确保绑定事件的时候DOM树是生成好的 $(document).ready(function () { var mode=false; var $bodyEle=$("body"); // 给文档绑定监听键盘按键被按下去的事情 $bodyEle.on("keydown",function (event) { console.log(event.keyCode); if (event.keyCode === 17){ // 进入批量操作模式 mode=true; } }) // 按键抬起来的时候，退出批量操作模式 $bodyEle.on("keyup",function (event) { console.log(event.keyCode); if (event.keyCode ===17){ // 退出批量操作模式 mode=false; } }) $("select").on("change",function () { // 取到当前select的值 var value=$(this).val(); var $thisCheckbox = $(this).parent().siblings().first().find(":checkbox"); if ($thisCheckbox.prop("checked") && mode){ // 真正进入批量操作模式 var $checkedEle = $("input[type='checkbox']:checkbox"); for (var i=0;i<$checkedEle.length;i++){ // 找到同一行的select $($checkedEle[i]).parent().siblings().last().find("select").val(value); } } }) }) </script> </body> </html>
登录校验完整版
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>登录校验完整版</title> <style> .error { color: red; } </style> </head> <body> <form id="f1"> <p> <label>用户名: <input class="need" name="username" type="text"> <span class="error"></span> </label> </p> <p> <label>密码: <input class="need" name="password" type="password"> <span class="error"></span> </label> </p> <p>爱好: <label>篮球 <input name="hobby" value="basketball" type="checkbox"> </label> <label>足球 <input name="hobby" value="football" type="checkbox"> </label> <label>双色球 <input name="hobby" value="doublecolorball" type="checkbox"> </label> </p> <p>性别: <label>男 <input name="gender" value="1" type="radio"> </label> <label>女 <input name="gender" value="0" type="radio"> </label> <label>保密 <input name="gender" value="2" type="radio"> </label> </p> <p> <label for="s1">从哪儿来:</label> <select name="from" id="s1"> <option value="010">北京</option> <option value="021">上海</option> <option value="020">广州</option> </select> </p> <p> <label for="s2">从哪儿来:</label> <select name="from" id="s2" multiple> <option value="010">北京</option> <option value="021">上海</option> <option value="020">广州</option> <option value="0755">深圳</option> </select> </p> <p> <label for="t1">个人简介:</label> <textarea name="memo" id="t1" cols="30" rows="10"> </textarea> </p> <p> <input id="b1" type="submit" value="登录"> <input id="cancel" type="button" value="取消"> </p> </form> <script src="jquery-3.2.1.min.js"></script> <script> // 点击登录按钮验证用户名和密码为不为空 // 为空就在对应的input标签下面显示一个错误提示信息 // 1. 给登录按钮绑定点击事件 // 2. 点击事件要做的事儿 // 2.1 找到input标签--> 取值 --> 判断为不为空 --> .length为不为0 // 2.2 如果不为空,则什么都不做 // 2.2 如果为空,要做几件事儿 // 2.2.1 在当前这个input标签的下面 添加一个新的标签,内容为xx不能为空 $("#b1").click(function () { var $needEles = $(".need"); // 定义一个标志位 var flag = true; for (var i=0;i<$needEles.length;i++){ // 如果有错误 if ($($needEles[i]).val().trim().length === 0) { var labelName = $($needEles[i]).parent().text().trim().slice(0,-1); $($needEles[i]).next().text( labelName +"不能为空!"); // 将标志位置为false flag = false; break; } } return flag; }) </script> </body> </html>
事件绑定
.on( events [, selector ],function(){})
event：事件
select：选择器（可选的）
function：事件处理函数
阻止后续事件执行
return false; // 常见阻止表单提交等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止默认事件</title> </head> <body> <form action=""> <button id="b1">点我</button> </form> <script src="jquery-3.3.1.min.js"></script> <script> $("#b1").click(function (e) { alert(123); //return false; e.preventDefault(); }); </script> </body> </html>
注意：
像click、keydowm等DOM中定义的事件，我们都可以使用“.on()”来绑定事件，但是“hover”这种jQuery中定义的事件就不能用“.on()”方法来绑定了.
想使用事件委托的方式绑定hover事件是处理函数，可以参照如下代码分两步绑定事件：
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
阻止事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> </head> <body> <div> <p> <span>点我</span> </p> </div> <script src="jquery-3.3.1.min.js"></script> <script> $("span").click(function (e) { alert("span"); e.stopPropagation(); }); $("p").click(function () { alert("p"); }); $("div").click(function () { alert("div"); }) </script> </body> </html>
页面载入
当DOM载入就绪可以查询及操作时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度
两种写法：
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面载入之后执行</title> <script src="jquery-3.2.1.min.js"></script> <script> // 等DOM树生成之后，我再执行 $(document).ready(function () { console.log($("#d1").text()); //执行绑定事件的操作 }) </script> </head> <body> <div id="d1">div标签</div> </body> </html>
文档加载完绑定事件，并且阻止默认事件发生
<!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 id="myForm"> <label for="name">姓名</label> <input type="text" id="name"> <span class="error"></span> <label for="passwd">密码</label> <input type="password" id="passwd"> <span class="error"></span> <input type="submit" id="modal-submit" value="登录"> </form> <script src="jquery-3.2.1.min.js"></script> <script src="s7validate.js"></script> <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> </html> 登录校验示例
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
示例：
表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
动画效果
// 基本
show([s,[e],[fn]])
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]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
自定义动画示例
<!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> 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 src="jquery-3.2.1.min.js"></script> <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> </html>
补充
each
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
})
输出
010
120
230
340
each循环示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>each 循环示例</title> </head> <body> <div>111</div> <div>222</div> <div>333</div> <div>444</div> <div>555</div> <script src="jquery-3.2.1.min.js"></script> </body> </html>
var a1 = [11,22,33,44];
$.each(a1,function(k,v){
console.log(k+":"+v);
})
$.each(a1,function(k,v){
if (v===22){
return}
console.log(k+":"+v)
})
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
注意：
在遍历过程中可以使用 return false提前结束each循环。
.data
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
示例：
模态框编辑的数据回填表格
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表格数据新增和删除</title> <style> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #616161; opacity: 0.4; z-index: 998; } .modal { height: 200px; width: 300px; background-color: white; position: absolute; margin-top: -100px; margin-left: -150px; top: 50%; left: 50%; z-index: 1000; } .hide { display: none; } </style> </head> <body> <button id="add">新增</button> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Egon</td> <td>街舞</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> <tr> <td>2</td> <td>Alex</td> <td>烫头</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> <tr> <td>3</td> <td>苑局</td> <td>日天</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> </tbody> </table> <div id="myCover" class="cover hide"></div> <div id="myModal" class="modal hide"> <div> <p> <label for="modal-name">姓名</label> <input type="text" id="modal-name"> </p> <p> <label for="modal-hobby">爱好</label> <input type="text" id="modal-hobby"> </p> <p> <button id="modal-submit">提交</button> <button id="modal-cancel">取消</button> </p> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script> // 定义一个弹出模态框的函数 function showModal() { $("#myCover,#myModal").removeClass("hide"); } // 关闭模态框 function closeModal() { // 1. 清空模态框中的input $("#myModal").find("input").val(""); $("#myCover,#myModal").addClass("hide"); } // 给新增按钮绑定事件 $("#add").on("click", function () { // 把模态框弹出! // $("#myCover").removeClass("hide"); // $("#myModal").removeClass("hide"); showModal() }); // 模态框中的取消按钮绑定事件 $("#modal-cancel").on("click", function () { // 2. 隐藏模态框 closeModal(); }); // 模态框中的提交按钮绑定事件 $("#modal-submit").on("click", function () { // 1. 取到 用户 填写的 input框的值 var name = $("#modal-name").val(); // 把用户在模态框里输入的姓名获取到,保存在name变量中 var hobby = $("#modal-hobby").val(); // 把用户在模态框里输入的爱好获取到,保存在hobby变量中 var $myModalEle = $("#myModal"); // 判断,按需操作 var $currentTrEle = $myModalEle.data("currentTr"); if ($currentTrEle !== undefined) { // 说明是编辑状态 $currentTrEle.children().eq(1).text(name); $currentTrEle.children().eq(2).text(hobby); // 清空之前保存的当前行 $myModalEle.removeData(); } else { // 创建tr标签把数据填进去 var trEle = document.createElement("tr"); var number = $("tr").length; $(trEle).html("<td>" + number + "</td>" + "<td>" + name + "</td>" + "<td>" + hobby + "</td>" + '<td><button class="edit-btn">编辑</button> <button class="delete-btn">删除</button></td>' ); // 把创建好的tr添加到tbody中 $("tbody").append(trEle); } // 隐藏模态框 closeModal(); }); // 2. 根据是编辑 还是新增 做不同的操作 // 2.1 如果是新增操作,就生成一条新的tr,加到table的最后 // 2.2 如果是编辑操作, 根据先前 编辑 按钮那一行 // 难点在于 如何确定 编辑的是哪一行? --> 利用data()可以存具体的jQuery对象 // 给每一行的编辑按钮绑定事件 // 要使用事件委托,基于已经存在的元素(页面加载完之后存在的标签)绑定事件 $("tbody").on("click", ".edit-btn", function () { // 把模态框弹出来 showModal(); // 把原来的数据填写到模态框中的input var $currentTrEle = $(this).parent().parent(); // 把当前行的jQuery对象保存起来 $("#myModal").data("currentTr", $currentTrEle); var name = $currentTrEle.children().eq(1).text(); var hobby = $currentTrEle.children().eq(2).text(); // 填 $("#modal-name").val(name); $("#modal-hobby").val(hobby); }); // 给每一行的删除按钮绑定事件 $("tbody").on("click", ".delete-btn", function () { // 删除被点击的删除按钮的那一行 var $currentTrEle = $(this).parent().parent(); // 更新序号 // 找到当前行后面所有的tr,依次更新序号 $currentTrEle.nextAll().each(function () { // 取到原来的序号 var oldNumber = $(this).children().first().text(); // 将原来的序号-1,再赋值回去 $(this).children().first().text(oldNumber - 1); }); $currentTrEle.remove(); }); </script> </body> </html>
插件
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>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>插件示例</title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script src="jquery-3.2.1.min.js"></script> </body> </html>
$.extend({
"xiaoqaing":function(){
console.log("睡着了，舒服！")
}
})
// (a,b){return new r.fn.init(a,b)}
$.xiaoqaing();
// 睡着了，舒服！
$.fn.extend({
"s9":function(){
console.log("是我带过最差的一届");
}
})
$("u1").s9();
// 是我带过最差的一届
$("li").s9();
// 是我带过最差的一届
例子
自定义的jQuery登录验证插件
<!DOCTYPE html> <html lang="en"> <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> .login-form { margin: 100px auto 0; max-width: 330px; } .login-form > div { margin: 15px 0; } .error { color: red; } </style> </head> <body> <div> <form action="" class="login-form" novalidate> <div> <label for="username">姓名</label> <input id="username" type="text" name="name" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="passwd">密码</label> <input id="passwd" type="password" name="password" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="mobile">手机</label> <input id="mobile" type="text" name="mobile" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="where">来自</label> <input id="where" type="text" name="where" autocomplete="off"> <span class="error"></span> </div> <div> <input type="submit" value="登录"> </div> </form> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="validate.js"></script> <script> $.validate(); </script> </body> </html>