jQuery快速入门
jQuery介绍
- 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中文文档
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端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
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对象
拿上面那个例子举例,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(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子:
$("div:has(h1)")// 找到所有后代中有h1标签的div标签 $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签 $("li:not(.c1)")// 找到所有不包含c1样式类的li标签 $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
练习:
自定义模态框,使用jQuery实现弹出和隐藏功能。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
属性选择器:
[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 #用户选中的
例子:
<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签
<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();// 兄弟们
查找元素:
$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
补充:
.first()// 获取匹配的第一个元素 .last()// 获取匹配的最后一个元素 .not()// 从匹配元素的集合中删除与指定表达式匹配的元素 .has()// 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
示例:左侧菜单
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
操作标签
样式操作
样式类
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()// 获取匹配元素相对滚动条左侧的偏移
.offset()
方法允许我们检索一个元素相对于文档(document)的当前位置。
和 .position()
的差别在于: .position()
是相对于相对于父级元素的位移。
示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
尺寸:
height() width() innerHeight() innerWidth() outerHeight() outerWidth()
文本操作
HTML代码:
html()// 取得第一个匹配元素的html内容 html(val)// 设置所有匹配元素的html内容
文本值:
text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容
值:
val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置checkbox、select的值
示例:
获取被选中的checkbox或radio的值:
<label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1">
可以使用:
$("input[name='gender']:checked").val()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
属性操作
用于ID等或自定义属性:
attr(attrName)// 返回第一个匹配元素的属性值 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 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>
示例:全选、反选、取消
文档处理
添加到指定元素内部的最后一个标签的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
得到的结果
添加到指定元素内部的最后一个标签的前面
$(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的前面
得到的结果:
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子标签。
remove:可以指定删除父标签中的某个子标签
empty:清空父标签下的所有子标签
例子:
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据。
替换
replaceWith() replaceAll()
replacewith是用replaceWith后面的标签替换前面的标签
replaceAll是用replaceAll前面的标签替换后面的标签
克隆
clone()// 参数
克隆示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...})
keydown和keyup事件组合示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>批量操作</title> </head> <body> <table border="2"> <thead> <tr> <th>#</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="c1"></td> <td>yimi</td> <td> <select name="" id="d1"> <option value="1">上线</option> <option value="2">下线</option> <option value="3">离职</option> </select> </td> </tr> <tr> <td><input type="checkbox" class="c1" ></td> <td>haha</td> <td> <select name="" id="d2"> <option value="1">上线</option> <option value="2">下线</option> <option value="3">离职</option> </select> </td> </tr> <tr> <td><input type="checkbox" class="c1"></td> <td>提提</td> <td> <select name="" id="d3"> <option value="1">上线</option> <option value="2">下线</option> <option value="3">离职</option> </select> </td> </tr> </tbody> </table> <script src="jquery-3.3.1.js"></script> <script> var flag=false; //定义一个全局变量,用来判断shift键是否被按下 $(window).on('keydown',function (e) { //给window绑定一个shift被按下的事件 if(e.keyCode===16){ //e.keyCode===16表示shift键被按下 flag=true //如果shift键被按下则flag为true } }); $(window).on('keyup',function (e) { //给window绑定一个shift被按下的事件 if(e.keyCode===16){ //e.keyCode===16表示shift键被抬起 flag=false //如果shift键被抬起则flag为false } }); $('select').on('change',function () { //给select元素绑定一个改变值的事件 var ischecked=$(this).parent().parent().find(':checkbox').prop('checked'); //创建一个变量表示这个改变了值的select标签的父级标签td的父级标签tr中的多选框是否被选中 if (flag && ischecked){ //如果flag和ischecked都为true var value=$(this).val(); // 设置一个value表示这个改变了值的select标签的值 $('input:checked').parent().parent().find('select').val(value) //找到被选中的input标签,的父级标签 td 的父级标签 tr 中找到select标签,并给它设置一个值为value } }) </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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> </head> <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 src="jquery-3.2.1.min.js"></script> <script> // 全选 $("#b1").on("click", function () { $(":checkbox").prop("checked", true); }); // 取消 $("#b2").on("click", function () { $(":checkbox").prop("checked", false); }); // 反选 $("#b3").on("click", function () { $(":checkbox").each(function () { var flag = $(this).prop("checked"); $(this).prop("checked", !flag); }) }); // 按住shift键,批量操作 // 定义全局变量 var flag = false; // 全局事件,监听键盘shift按键是否被按下 $(window).on("keydown", function (e) { // alert(e.keyCode); if (e.keyCode === 16){ flag = true; } }); // 全局事件,shift按键抬起时将全局变量置为false $(window).on("keyup", function (e) { if (e.keyCode === 16){ flag = false; } }); // select绑定change事件 $("table select").on("change", function () { // 是否为批量操作模式 if (flag) { var selectValue = $(this).val(); // 找到所有被选中的那一行的select,选中指定值 $("input:checked").parent().parent().find("select").val(selectValue); } }) </script> </body> </html>
hover事件示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>hover示例</title> <style> * { margin: 0; padding: 0; } .nav { height: 40px; width: 100%; background-color: #3d3d3d; position: fixed; top: 0; } .nav ul { list-style-type: none; line-height: 40px; } .nav li { float: left; padding: 0 10px; color: #999999; position: relative; } .nav li:hover { background-color: #0f0f0f; color: white; } .clearfix:after { content: ""; display: block; clear: both; } .son { position: absolute; top: 40px; right: 0; height: 50px; width: 100px; background-color: #00a9ff; display: none; } .hover .son { display: block; } </style> </head> <body> <div class="nav"> <ul class="clearfix"> <li>登录</li> <li>注册</li> <li>购物车 <p class="son hide"> 空空如也... </p> </li> </ul> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(".nav li").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); </script> </body> </html>
实时监听input输入值变化示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>实时监听input输入值变化</title> </head> <body> <input type="text" id="i1"> <script src="jquery-3.2.1.min.js"></script> <script> /* * oninput是HTML5的标准事件 * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化, * 在内容修改后立即被触发,不像onchange事件需要失去焦点才触发 * oninput事件在IE9以下版本不支持,需要使用IE特有的onpropertychange事件替代 * 使用jQuery库的话直接使用on同时绑定这两个事件即可。 * */ $("#i1").on("input propertychange", function () { alert($(this).val()); }) </script> </body> </html>
事件绑定
.on( events [, selector ],function(){})
- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数
移除事件
.off( events [, selector ][,function(){}])
off()
方法移除用 .on()
绑定的事件处理程序。
- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数
阻止后续事件执行
return false; // 常见阻止表单提交等
注意:
像click、keydown等DOM中定义的事件,我们都可以使用`.on()`方法来绑定事件,但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件:
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 $(this).addClass('hover'); }); $('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件 $(this).removeClass('hover'); });
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
两种写法:
$(document).ready(function(){ // 在这里写你的JS代码... })
简写:
$(function(){ // 你在这里写你的代码 })
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>页面文档加载完之后才执行</title> </head> <body> <div id="d1">div1</div> <div id="d2">div2</div> <div id="d3">div3</div> <div id="d4">div4</div> <script src="jquery-3.3.1.js"></script> <script> $(document).ready(function () { // 文档加载完之后才执行!!! console.log($("#d1").text()); }); // $(function () { // console.log($("#d1").text()); // }); </script> </body> </html>
文档加载完绑定事件,并且阻止默认事件发生:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
事件委托
事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。
示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>事件委托示例</title> </head> <body> <input type="button" value="添加新数据" id="add"> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>金老板</td> <td><input type="button" value="删除" class="delete"></td> </tr> <tr> <td>2</td> <td>景女神</td> <td><input type="button" value="删除" class="delete"></td> </tr> <tr> <td>3</td> <td>隔壁老王</td> <td><input type="button" value="删除" class="delete"></td> </tr> </tbody> </table> <script src="jquery-3.3.1.js"></script> <script> // 点击添加按钮添加一条新数据 // 1. 找到按钮绑定点击事件 $("#add").on("click", function () { // 当添加按钮被点击之后要做的事儿 // 1. 创建一个新的tr var trEle = document.createElement("tr"); trEle.innerHTML = '<td>4</td> <td>哪吒</td> <td><input type="button" value="删除" class="delete"></td>'; // 2. 把创建好的tr追加到tbody里面 $("tbody").append(trEle); }); // 点击每一行的删除按钮,把当前行删除掉 // 1. 找到每一行的删除按钮,绑定点击事件 $("table").on("click", "input.delete", function () { // 给table标签绑定事件,监听我子子孙孙里面有delete样式类的标签如果被点击了,我就做下面的事儿 // 当每一行的删除按钮被点击后要做的事儿 // 1. 删除当前被点击的按钮的这一行 console.log(this); $(this).parent().parent().remove(); }) </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])
自定义动画示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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
jQuery.each(collection, callback(indexInArray, valueOfElement)):
描述:一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//index是索引,ele是每次循环的具体元素。 })
输出:
010 120 230 340
.each(function(index, Element)):
描述:遍历一个jQuery对象,为每个匹配元素执行一个函数。
.each()
方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的,所以关键字 this
总是指向这个元素。
// 为每一个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); });
注意: jQuery的方法返回一个jQuery对象,遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时,它通常不需要显式地循环的 .each()
方法:
也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了:
$("li").addClass("c1"); // 对所有标签做统一操作
注意:
在遍历过程中可以使用 return false
提前结束each循环。
终止each循环
return false;
伏笔...
.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对应的数据
示例:
模态框编辑的数据回填表格
插件(了解即可)
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);
例子:
自定义的jQuery登录验证插件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
"use strict"; (function ($) { function check() { // 定义一个标志位,表示验证通过还是验证不通过 var flag = true; var errMsg; // 校验规则 $("form input[type!=':submit']").each(function () { var labelName = $(this).prev().text(); var inputName = $(this).attr("name"); var inputValue = $(this).val(); if ($(this).attr("required")) { // 如果是必填项 if (inputValue.length === 0) { // 值为空 errMsg = labelName + "不能为空"; $(this).next().text(errMsg); flag = false; return false; } // 如果是密码类型,我们就要判断密码的长度是否大于6位 if (inputName === "password") { // 除了上面判断为不为空还要判断密码长度是否大于6位 if (inputValue.length < 6) { errMsg = labelName + "必须大于6位"; $(this).next().text(errMsg); flag = false; return false; } } // 如果是手机类型,我们需要判断手机的格式是否正确 if (inputName === "mobile") { // 使用正则表达式校验inputValue是否为正确的手机号码 if (!/^1[345678]\d{9}$/.test(inputValue)) { // 不是有效的手机号码格式 errMsg = labelName + "格式不正确"; $(this).next().text(errMsg); flag = false; return false; } } } }); return flag; } function clearError(arg) { // 清空之前的错误提示 $(arg).next().text(""); } // 上面都是我定义的工具函数 $.extend({ validate: function () { $("form :submit").on("click", function () { return check(); }); $("form :input[type!='submit']").on("focus", function () { clearError(this); }); } }); })(jQuery);
传参版插件:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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="validate3.js"></script> <script> $.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}}); </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
"use strict"; (function ($) { function check(arg) { // 定义一个标志位,表示验证通过还是验证不通过 var flag = true; var errMsg; // 校验规则 $("form input[type!=':submit']").each(function () { var labelName = $(this).prev().text(); var inputName = $(this).attr("name"); var inputValue = $(this).val(); if (arg[inputName].required) { // 如果是必填项 if (inputValue.length === 0) { // 值为空 errMsg = labelName + "不能为空"; $(this).next().text(errMsg); flag = false; return false; } // 如果是密码类型,我们就要判断密码的长度是否大于6位 if (inputName === "password") { // 除了上面判断为不为空还要判断密码长度是否大于6位 if (inputValue.length < arg[inputName].minLength) { errMsg = labelName + "必须大于"+arg[inputName].minLength+"位"; $(this).next().text(errMsg); flag = false; return false; } } // 如果是手机类型,我们需要判断手机的格式是否正确 if (inputName === "mobile") { // 使用正则表达式校验inputValue是否为正确的手机号码 if (!/^1[345678]\d{9}$/.test(inputValue)) { // 不是有效的手机号码格式 errMsg = labelName + "格式不正确"; $(this).next().text(errMsg); flag = false; return false; } } } }); return flag; } function clearError(arg) { // 清空之前的错误提示 $(arg).next().text(""); } // 上面都是我定义的工具函数 $.extend({ validate: function (arg) { $("form :submit").on("click", function () { return check(arg); }); $("form :input[type!='submit']").on("focus", function () { clearError(this); }); } }); })(jQuery);
课后习题:
- 登录+验证
- 左侧菜单
- 表格-增、删、改、查
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三个按钮操作</title> <style> .cover{ position: fixed; top: 0; left: 0; width: 100%; height: 5000px; background: rgba(0,0,0,0.4); z-index: 8000; } .hide{ display: none; } .model{ top: 25%; left: 25%; position:absolute; width: 400px; height: 300px; background: white; z-index: 9000; } </style> </head> <body> <input type="button" class="add" value="添加成员"> <table border="2"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>yimi</td> <td>sleep</td> <td><input type="button" value="编辑" class="edit"><input type="button" value="删除" class="delete"></td> </tr> <tr> <td>2</td> <td>提提</td> <td>打球</td> <td><input type="button" value="编辑" class="edit"><input type="button" value="删除" class="delete"></td> </tr> <tr> <td>3</td> <td>景老师</td> <td>喝茶</td> <td><input type="button" value="编辑" class="edit"><input type="button" value="删除" class="delete"></td> </tr> <tr> <td style="">4</td> <td>哪吒</td> <td>传播负能量</td> <td><input type="button" value="编辑" class="edit"><input type="button" value="删除" class="delete"></td> </tr> </tbody> </table> <div class="cover hide"></div> <div class="model hide"> 姓名<input type="text" class="name" value=" " ><br> 爱好<input type="text" class="habbly" value=" "><br> <input type="submit" value="提交"> <input type="button" value="取消" class="cancel"> </div> <script src="jquery-3.3.1.js"></script> <script> //弹出模态框的函数 function showModel() { $('.cover,.model').removeClass('hide') } //隐藏模态框的函数 function hideModel() { $('.cover,.model').addClass('hide'); $('.name,.habbly').val('') } //给添加按钮绑定事件 $('.add').on ('click',function () { showModel() } ); //给取消按钮绑定事件 $('.cancel').on('click',function () { hideModel() }); var $table=$('table'); //给表格中的每一行删除按钮绑定事件 $table.on('click','.delete',function () { $(this).parent().parent().nextAll().each(function () {//循环 点击的那个删除标签的父标签tr的父标签td的所有同辈标签 var num=$(this).children().first().text(); //申明一个num变量表示 这些同辈标签的子标签的第一个标签的内容 $(this).children().first().text(num-1) //将这些同辈标签的子标签的第一个标签的内容减一 }); $(this).parent().parent().remove() //删除点击的一行 }); //将编辑按钮绑定事件 $table.on('click','.edit',function () { showModel(); //点击编辑按钮,调用显示模态框函数 $('.model').data('k1',$(this).parent().parent()); //在模态框中存一个键是k1 值为当前标签的父标签tr的父标签td标签, var name=$($(this).parent().parent().children()[1]).text(); // 声明一个name变量 里面存的是当前标签的父标签tr的父标签td标签的子标签数组中索引为1的标签的文本内容 var habbly=$($(this).parent().parent().children()[2]).text();// // 声明一个habbly变量 里面存的是当前标签的父标签tr的父标签td标签的子标签数组中索引为2的标签的文本内容 $('.name').val(name); //将类名是name的标签的值设置为变量name $('.habbly').val(habbly); //将类名是habbly的标签的值设置为变量habbly }); //将提交按钮绑定事件 $('input[type=submit]').on ('click',function () { var namevalue=$('.name').val(); // 声明一个变量namevalue 等于 获取类名是name的标签的值 var habblyvalue=$('.habbly').val(); //声明一个变量habblyvalue 等于 获取类名是habbly的标签的值 var TR=$('.model').data('k1'); // 声明一个变量TR 等于 data中k1的值 if (TR !== undefined) { //如果data中k1的值不为空 则是点击的编辑按钮 TR.children().eq(1).text(namevalue); //则将data中k1的值($(this).parent().parent())的子标签中索引为 1 的标签的文本内容设置为namevalue TR.children().eq(2).text(habblyvalue); //则将data中k1的值($(this).parent().parent())的子标签中索引为 2 的标签的文本内容设置为habblyvalue $('.model').removeData('k1') //清空data中k1 的值 } else { // 如果data中k1的值为空,则是添加按钮 var trEle = document.createElement('tr'); //创建一个tr标签 var num = $('table tr').length; //声明一个变量num 表示的是新的数据的序号 //将模态框中获取到的name值,habbly值以及编辑删除按钮添加到新建的tr标签中 var Trvalue = '<td>' + num +'</td>'; Trvalue += '<td>' +namevalue+'</td>'; Trvalue += '<td>' +habblyvalue+ '</td>'; Trvalue += '<td><input type="button" value="编辑" class="edit"><input type="button" value="删除" class="delete"></td>'; trEle.innerHTML=Trvalue; $('table tbody').append(trEle); } //调用隐藏模态框函数 hideModel() }) </script> </body> </html>
模态框:
1.定义表格及按钮(添加按钮,编辑按钮,删除按钮,提交按钮,取消按钮),绑定事件
2.定义盖板层
绝对定位,相对于浏览器窗口上下左右都为0,背景颜色,透明度
3.定义弹出框
定义长,宽,背景颜色 绝对定位,上,左都为50%,为了居中,需要向左,向上各移动长宽的一般 绑定事件
4.给盖板层和弹出框添加hide属性,用来隐藏
5.点击按钮,触发事件
找到盖板层和弹出框,移除hide属性,展示模态框
6.点击取消模态按钮,触发事件
找到遮罩层和弹出窗增加hide属性,隐藏模态框