4.jQuery学习
jQuery介绍
jQuery是一个轻量级,兼容多浏览器的javascript库
官方网址: jQuery官网
中文文档:jQuery AP中文文档
jQuery优势
1.轻量级框架
2.丰富的DOM选择器
3.链式表达式
4.事件 样式 动画支持
5.Ajax操作支持
6.跨浏览器兼容
7.插件扩展开发
JS与jQuery的区别
jQuery就是用JS写的
JS是基础,jQuery是工具
jQuery版本
1.x
兼容IE 6 7 8
3.x
最新
压缩版本用于生产环境
没压缩的用于开发
jQuery的导入
<script src="jquery-3.2.1.js"></script>
注意点
在官方网下载jQuery文件后要引入到自己的代码中,引入的顺序 先引入文件,再script标签中写jQuery的代码,先导入后使用,否则会报错
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里提供的方法：例如$("#i1").html()。
$("#i1").html()表示 获取id的值为i1的元素的html代码 .html是jQuery的方法 相当于 document.getElementById("i1").innerHTML; 二者的方法不能相互使用
使用jQuery对象变量的时候在变量名前加$
var $s1 = jQuery对象 var s1 = DOM对象 $s1[0] //jQuery对象转换成DOM对象 var divEle = document.getElementById("d1") $(divEle) // DOM转换成jQuery对象
jQuery语法
$ 表示jQuery
基本选择器
ID选择器:
$("#id") //用于搜索的，通过元素的 id 属性中给定的值
标签选择器
$("标签的名字") //根据给定的元素标签名匹配所有元素
class选择器
$(".class的值") //一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。
所有元素选择器
$("*") //找到每一个元素
组合选择器
$("div,span") //将每一个选择器匹配到的元素合并后一起返回。
层级选择器
$("x y") //x的所有后代y(子子孙孙) $("x > y") //x所有儿子y(儿子) $(x + y) // 找到所有紧挨着x后代y $(x ~ y) // x后所有同级的y(兄弟)
筛选器
:first //第一个 :last //最后一个 :eq(index) //索引等于index的那个元素 从0开始 :even //匹配索引值为奇数的元素 :odd //匹配索引值为偶数的元素 :gt(index) //匹配所有大于给定所有值的元素 :lt(index) //匹配所有小于给定所有值的元素 :not(元素选择器) //去除所有与给定选择器匹配的元素 :has(元素选择器) //选取所有包含一个或多个标签在其内的标签(指从后代元素找) :focus //匹配当前获取焦点的元素
自定义模态框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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> <div class="cover hide"></div> <div class="modal hide"> <label for="i1">账号</label> <input type="text" id="i1"> <label for="i2">密码</label> <input type="text" id="i2"> <input type="button" id="i4" value="取消"> </div> <a id="i3" >登录</a> <script src="jquery-3.2.1.min.js"></script> <script> $("#i3").click(function () { $(".cover,.modal").removeClass("hide"); }); $("#i4").click(function () { $(".cover,.modal").addClass("hide") }); </script> </body> </html>
属性选择器
[attribute] //属性名
[attrbute = value] //匹配给定的属性是某个特定值的元素
[attribute!=value] //匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value] //匹配给定的属性是以某些值开始的元素
[attribute$=value] //匹配给定的属性是以某些值结尾的元素
[attribute*=value] //匹配给定的属性是以包含某些值的元素
表单筛选器
:text //匹配所有的单行文本框
:input //匹配所有 input, textarea, select 和 button 元素
:password //匹配所有密码框
:file //匹配所有文件域
:radio //匹配所有单选按钮
:checkbox //匹配所有复选框
:submit //匹配所有提交按钮
:reset //匹配所有重置按钮
:button //匹配所有按钮
表单对象属性
:enabled //匹配所有可用元素
:disabled //匹配所有不可用元素
:checked //匹配所有选中的被选中元素
:selected //匹配所有选中的option元素
例子
<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
筛选器方法
.next() //取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
.nextAll() //查找当前元素之后所有的同辈元素
.nextUntil('标签属性') //查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
.prev() //取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
.prevAll() //查找当前元素之前所有的同辈元素
.prevUntil('标签属性') //查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
父亲元素
parent() //取得一个包含着所有匹配元素的唯一父元素的元素集合
parents() //取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选
parentsUntil("标签属性") //取得一个包含着所有匹配元素的唯一父元素的元素集合
儿子和兄弟元素
.children() //取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
.siblings() //取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
查找元素
.find() //搜索所有与指定表达式匹配的元素
筛选元素
.filter() //筛选出与指定表达式匹配的元素集合
补充
.first() //获取第一个元素
.last() //获取最后一个元素
.not() //从匹配元素的集合中删除与指定表达式匹配的元素
.has() //保留包含特定后代的元素，去掉那些不含有指定后代的元素
.eq() //获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个
样式操作
样式类
addClass() //为每个匹配的元素添加指定的类名
removeClass() //从所有匹配的元素中删除全部或者指定的类
hasClass() //检查当前的元素是否含有某个特定的类，如果有，则返回true
toggleClass() //如果存在（不存在）就删除（添加）一个类
位置操作
offset() //获取匹配元素在当前视口的相对偏移
position() //获取匹配元素相对父元素的偏移
$(window).scrollTop() //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向左移动的距离
返回顶部示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> <style> .c2 { height: 50px; width: 50px; position: fixed; bottom: 15px; right: 15px; background-color:cornflowerblue; } .hide { display: none; } .c1{ height: 30px; } </style> </head> <body> <div class="c1">1</div> <div class="c1">2</div> <div class="c1">3</div> <div class="c1">4</div> <div class="c1">5</div> <div class="c1">6</div> <div class="c1">7</div> <div class="c1">8</div> <div class="c1">9</div> <div class="c1">10</div> <div class="c1">11</div> <div class="c1">12</div> <div class="c1">13</div> <div class="c1">14</div> <div class="c1">15</div> <div class="c1">16</div> <div class="c1">17</div> <div class="c1">18</div> <div class="c1">19</div> <div class="c1">20</div> <div class="c1">21</div> <div class="c1">22</div> <div class="c1">23</div> <div class="c1">24</div> <div class="c1">25</div> <div class="c1">26</div> <div class="c1">27</div> <div class="c1">28</div> <div class="c1">29</div> <div class="c1">30</div> <div class="c1">31</div> <div class="c1">32</div> <div class="c1">33</div> <div class="c1">34</div> <div class="c1">35</div> <div class="c1">36</div> <div class="c1">37</div> <div class="c1">38</div> <div class="c1">39</div> <div class="c1">40</div> <div class="c1">41</div> <div class="c1">42</div> <div class="c1">43</div> <div class="c1">44</div> <div class="c1">45</div> <div class="c1">46</div> <div class="c1">47</div> <div class="c1">48</div> <div class="c1">49</div> <div class="c1">50</div> <div class="c1">51</div> <div class="c1">52</div> <div class="c1">53</div> <div class="c1">54</div> <div class="c1">55</div> <div class="c1">56</div> <div class="c1">57</div> <div class="c1">58</div> <div class="c1">59</div> <div class="c1">60</div> <div class="c1">61</div> <div class="c1">62</div> <div class="c1">63</div> <div class="c1">64</div> <div class="c1">65</div> <div class="c1">66</div> <div class="c1">67</div> <div class="c1">68</div> <div class="c1">69</div> <div class="c1">70</div> <div class="c1">71</div> <div class="c1">72</div> <div class="c1">73</div> <div class="c1">74</div> <div class="c1">75</div> <div class="c1">76</div> <div class="c1">77</div> <div class="c1">78</div> <div class="c1">79</div> <div class="c1">80</div> <div class="c1">81</div> <div class="c1">82</div> <div class="c1">83</div> <div class="c1">84</div> <div class="c1">85</div> <div class="c1">86</div> <div class="c1">87</div> <div class="c1">88</div> <div class="c1">89</div> <div class="c1">90</div> <div class="c1">91</div> <div class="c1">92</div> <div class="c1">93</div> <div class="c1">94</div> <div class="c1">95</div> <div class="c1">96</div> <div class="c1">97</div> <div class="c1">98</div> <div class="c1">99</div> <div class="c1">100</div> <button id="b2" class="btn btn-default c2 hide">返回顶部</button> <script src="jquery-3.2.1.min.js"></script> <script> $(window).scroll(function () { if ($(window).scrollTop() > 100){ $("#b2").removeClass("hide") } else { $("#b2").addClass("hide") } }); $("#b2").click(function () { $(window).scrollTop(0) }) </script> </body> </html>
尺寸
height() //取得匹配元素当前计算的高度值（px）
width() //取得第一个匹配元素当前计算的宽度值（px）
innerHeight() //获取第一个匹配元素内部区域高度
innerWidth() //获取第一个匹配元素内部区域宽度
outerHeight() //获取第一个匹配元素外部高度
outerWidth() //获取第一个匹配元素外部宽度
文本操作
html标签
html() //取得第一个匹配元素的html内容
文本值
text() //取得所有匹配元素的内容
值
val() //获得匹配元素的当前值
属性操作
attr(attrName) // 返回第一个匹配元素的属性值 attr(attrNane,attrValue) // 为所有匹配元素设置一个属性值 attr({k1:v1,k2:v2}) // 为所有匹配元素设置多个属性值 removeAttr() // 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性 removeProp() //移除属性
代码
<input type="checkbox" value="1"> <input type="radio" value="2"> <script> $("input[value='1']").prop("checked", true); //设置让其选中，设置选中或不选中的时候要注意传的参数那个true和false不能写成字符串形式'true'\'false' .prop('checked','true')是不对的 $("input[value='2']").prop("checked", true); </script>
attr和prop的区别:
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
或
<input type="checkbox" checked id="i1" value="1"> $("#i1").attr("checked") // checked $("#i1").prop("checked") // true
自定义属性
<input type="checkbox" checked id="i1" value="1" me="自定义属性"> $("#i1").attr("me") // "自定义属性" $("#i1").prop("me") // undefined
全选 反选 取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" id="qx"> <input type="button" value="反选" id="fx"> <input type="reset" value="重置"> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>alex</td> <td>特斯拉</td> </tr> <tr> <td><input type="checkbox"></td> <td>wusir</td> <td>讲课</td> </tr> <tr> <td><input type="checkbox"></td> <td>景女神</td> <td>茶道</td> </tr> </tbody> </table> <script src="jquery-3.2.1.min.js"></script> <script> // 全选 $("#qx").click(function () { $("input:checkbox").prop("checked",true) }); //反选 $("#fx").click(function () { var $have = $("input:checked"); var $not = $("input:not(checked)"); $not.prop("checked",true); $have.prop("checked",false); }); // 重置 $("input:reset").click(function () { $("input:checkbox").prop("checked",false) }) </script> </body> </html>
文档处理
$(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()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在
替换
replaceWith() //将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll() //用匹配的元素替换掉所有 selector匹配到的元素
克隆
clone() //克隆匹配的DOM元素并且选中这些克隆的副本
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="c1">屠龙宝刀 点击免费送</button> <script src="jquery-3.2.1.min.js"></script> <script> $(".c1").click(function () { $(this).clone(true).insertAfter(this) //ture完全复制 }) </script> </body> </html>
事件
click(function(){...}) //触发每一个匹配元素的click事件
hover(function(){...}) //一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
blur(function(){...}) //当元素失去焦点时触发 blur 事件
focus(function(){...}) //当元素获得焦点时，触发 focus 事件
change(function(){...}) //当元素的值发生改变时，会发生 change 事件
keyup(function(){...}) //当按钮被松开时，发生 keyup 事件
keydown(function(){...}) //当键盘或按钮被按下时，发生 keydown 事件
mouseover(function(){...}) //当鼠标指针位于元素上方时，会发生 mouseover 事件
mouseenter(function(){...}) //当鼠标指针穿过元素时，会发生 mouseenter 事件 (只触发一次)
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</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:-12px; height: 50px; width: 80px; 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="jquery-3.2.1.min.js"></script> <script> $(".nav li").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover") } ); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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> <script src="jquery-3.2.1.min.js"></script> <script> flag = false; $(window).keydown(function (e) { if(e.keyCode === 16){ flag = true } }); $(window).keyup(function (e) { if(e.keyCode === 16){ flag = false } }); $("select").change(function () { var checked = $(this).parent().siblings().first().find(":checkbox").prop("checked"); if (checked === flag){ var value = $(this).val(); var $select = $("input:checked").parent().parent().find("select"); $select.val(value) } }) </script> </body> </html>
input事件
注意input事件不能直接绑定，必须用on绑定才行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="i1"> <script src="jquery-3.2.1.min.js"></script> <script> $("#i1").on("input",function () { console.log($(this).val()) }) </script> </body> </html>
事件绑定
.on(event,function(){...})
event:事件
function:事件处理函数
移除事件
.on(event,function(){...})
阻止后续事件执行
return false; // 常见阻止表单提交等
阻止冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d2{ height: 100px; width: 100px; background-color:green; } </style> </head> <body> <div id="d1"> <div id="d2"> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script> $("#d1").click(function () { alert("父级标签") }); $("#d2").click(function (e) { alert("子级标签"); // return false e.stopPropagation(); }) </script> </body> </html>
e.stopPropagation(); 用事件对象的这个方法就能阻止冒泡 （Propagation：传递的意思）
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度
第一种
$(document).ready(function(){
// 在这里写你的JS代码...
})
第两种
$(function(){
// 你在这里写你的代码
})
文档加载完绑定事件，并且阻止默认事件发生
<!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>
与window.onload的区别
1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
动画效果
show() //显示隐藏的匹配元素
hide() //隐藏显示的元素
toggle() //用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
slideDown() //通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
slideUp() //通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
slideToggle() //通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
fadeIn() //通过不透明度的变化来实现所有匹配元素的淡入效果
fadeOut() //通过不透明度的变化来实现所有匹配元素的淡出效果
fideTo() //把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数
fadeToggle() //通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数
animate() //用于创建自定义动画的函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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);//function里面可以接受两个参数，i是索引，v是每次循环的具体元素。
})
输出
010
120
230
340
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
终止each循环
return false；
.data()
任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
.data(key, value): 设置值
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key): 取值，没有的话返回undefined
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 99; } .modal { width: 300px; height: 200px; background-color: white; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; z-index: 1000; } .hide { display: none; } .input-box { margin: 40px; } </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><input type="checkbox"></td> <td>金老板</td> <td>开车</td> <td> <button class="fire">开除</button> <button class="edit">编辑</button> </td> </tr> <tr> <td><input type="checkbox"></td> <td>景女神</td> <td>茶道</td> <td> <button class="fire">开除</button> <button class="edit">编辑</button> </td> </tr> <tr> <td><input type="checkbox"></td> <td>苑昊（苑局）</td> <td>不洗头、不翻车、不要脸</td> <td> <button class="fire">开除</button> <button class="edit">编辑</button> </td> </tr> </tbody> </table> <div class="cover hide"></div> <div class="modal hide"> <div class="input-box"> <div> <label>姓名： <input type="text" id="name"> </label> </div> <div> <label>爱好： <input type="text" id="hobby"> </label> </div> <button id="cancel" type="button">取消</button> <button id="submit" type="button">提交</button> </div> </div> <script src="jquery.js"></script> <script> // 定义一个清空输入框并且隐藏模态框的方法 function hideModal() { // 1. 清空input的值 $("#name,#hobby").val(''); // 2. 隐藏起来 $(".cover,.modal").addClass('hide'); } // 定义一个显示模态框的方法 function showModal() { // 1. 移除cover和modal的hide样式 $(".cover,.modal").removeClass('hide'); } // 开除按钮的功能 $("table").on('click', '.fire', function () { // 点击开除按钮要做的事儿 // 把当前行移除掉 //this --> 触发当前点击事件的DOM对象 $(this).parent().parent().remove(); // 链式操作 }); // 新增按钮的功能 $("#add").click(function () { // 点击新增按钮要做的事儿 showModal(); }); // 点击modal中的cancel按钮 $("#cancel").click(function () { hideModal(); }); // 点击modal中的submit按钮 $("#submit").click(function () { // 1. 获取用户输入的值 var name = $("#name").val(); var hobby = $("#hobby").val(); // 判断是添加操作还是编辑操作 var $editTr = $(this).data('xyh'); if ( $editTr === undefined) { // 3. 创建一个tr标签，把数据塞进去 var trEle = document.createElement("tr"); $(trEle).append('<td><input type="checkbox"></td>'); $(trEle).append('<td>' + name + '</td>'); var tdTmp = document.createElement('td'); tdTmp.innerText = hobby; $(trEle).append(tdTmp); $(trEle).append('<td><button class="fire">开除</button> <button class="edit">编辑</button></td>') // 4. 把上一步的tr追加到表格的tbody后面 $('tbody').append(trEle); } else { // 进入编辑模式 // 1. 取出用户之前编辑的那一行 // 2. 修改对应td的文本 $editTr.children().eq(1).text(name); $editTr.children().eq(2).text(hobby); // 3. 清空submit 按钮身上的data $('#submit').removeData('xyh'); } // 2. 隐藏模态框，清空输入框 hideModal(); }); // 点击编辑按钮要做的事儿 $('body').on('click', '.edit', function () { // 1. 弹出模态框 showModal(); // 2. 把当前行的信息显示到模态框的input中 // 2.1 获取当前行的姓名和爱好 var $currentTr = $(this).parent().parent(); var nameValue = $currentTr.children().eq(1).text(); var hobbyValue = $currentTr.children().eq(2).text(); // 第二种方式： // var name = $(this).parent().prev().prev().text(); // var hooby = $(this).parent().prev().text(); // 2.2 把上一步获取的值设置给input标签 $('#name').val(nameValue); $('#hobby').val(hobbyValue); // 3. 给模态框中的提交按钮绑定一个data $('#submit').data('xyh', $currentTr); }) </script> </body> </html>
插件(了解即可)
jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
<script> jQuery.extend({ //$.extend({}) min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function max:function(a, b){return a > b ? a : b;} }); jQuery.min(2,3);// => 2 jQuery.max(4,5);// => 5 </script>
开关灯示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 200px; height: 200px; border: 1px solid orange; background-color: red; border-radius: 50%; display: inline-block; } .c2{ background-color: green; } </style> </head> <body> <div class="c1"></div> <button class="btn">点我</button> <script src="jquery-3.2.1.min.js"></script> <script> $(".btn").click(function () { $(".c1").toggleClass('c2') }) </script> </body> </html>
1. $("#i1")
2. $("h2")
3. $("input")
4. $(".c1")
5. $(".btn-default")
6. $(".c1, h2")
7. $(".c1, #p3")
8. $(".c1, .btn")
9. $("from input")
10. $("lable>input")
11. $("lable+input")
12. $("p2~li")
13. $("#f1 input:first") 或者 $("f1 input").first()
14. $("#my-checkbox input:last") 或者 $("#my-checkbox input").last()
15. $("#my-checkbox not(:checked)")
16. $("lable:has(input)")
