前端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用法
document.getElementById("d1").innerText "我是div"
jQuery用法:
$("#d1").text() "我是div"
$("条件").方法()
$("#d1")
w.fn.init [div#d1]
document.getElementById("d1")
<div id="d1">我是div</div>
jQuery对象根据索引值能拿到具体的标签对象
$("#d1")[0]
<div id="d1">我是div</div>
document.getElementById("d1").innerText
"我是div"
$("#d1")[0].innerText
"我是div"
不能对jQuery对象调用原生DOM对象的属性或方法
$("#d1").innerText
undefined
原生的DOM不能调用jQuery的text方法
document.getElementById("d1").text()
查找标签
id选择器 $("#d1") w.fn.init [div#d1] class选择器 $(".c1") w.fn.init(2) [div.c1, p.c1, prevObject: w.fn.init(1)]0: div.c11: p.c1length: 2prevObject: w.fn.init [document]__proto__: Object(0) 标签选择器 $("p") w.fn.init [p.c1, prevObject: w.fn.init(1)] 所有元素选择器 $("*") w.fn.init(11) [html, head, meta, meta, title, body, div#d1, div.c1, p.c1, script, script, prevObject: w.fn.init(1)] 找到有c1 class类的div标签 $("div.c1") 组合选择器 $(".c1,#d1") //样式类是c1和id是d1的标签 层级选择器 $("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(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 复制代码
$("#u1>li:first") $("#u1>li:last") $("#u1>li:eq(2)") $("#u1>li:even") $("#u1>li:odd") $("#u1>li:gt(1)") $("#u1>li:lt(1)") $(".c1") w.fn.init(2) [div.c1, p.c1, prevObject: w.fn.init(1)] $(".c1:not(p)") w.fn.init [div.c1, prevObject: w.fn.init(1)] $("div") w.fn.init(3) [div.c1, div, div, prevObject: w.fn.init(1)] $("div:has(p)") w.fn.init [div, prevObject: w.fn.init(1)]
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
弹出框
DOM: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <style> .cover{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color:rgba(0,0,0,0.4); z-index: 10; } .modal{ position: absolute; width: 700px; height: 400px; top: 50%; left: 50%; margin-top: -200px; margin-left: -350px; background-color: white; z-index: 20; } .close{ float: right; font-size: 20px; margin-top: 15px; margin-right: 15px; } .hide{ display: none; } </style> </head> <body> <button id="b1">点我弹出</button> <div class="cover hide"></div> <div class="modal hide"> <span class="close" id="s1">x</span> </div> <script> var b1Ele = document.getElementById("b1"); b1Ele.onclick = function (ev) { document.getElementsByClassName("cover")[0].classList.remove("hide"); document.getElementsByClassName("modal")[0].classList.remove("hide"); }; var s1Ele = document.getElementById("s1"); s1Ele.onclick = function (ev) { document.getElementsByClassName("cover")[0].classList.add("hide"); document.getElementsByClassName("modal")[0].classList.add("hide"); }; </script> </body> </html>
jQuery <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <style> .cover{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4); z-index: 10; } .modal{ width: 700px; height: 400px; position: absolute; top: 50%; left: 50%; margin-top: -200px; margin-left: -350px; background: white; z-index: 20; } .close{ float: right; margin-right: 15px; margin-top: 10px; font-size: 20px; } .hide{ display: none; } </style> </head> <body> <button id="b1">点我弹出</button> <div class="cover hide"></div> <div class="modal hide"> <span class="close" id="s1">X</span> </div> <script src="jquery-3.3.1.min.js"></script> <script> var b1Ele = $("#b1")[0]; b1Ele.onclick = function(){ $(".cover")[0].classList.remove("hide"); $(".modal")[0].classList.remove("hide"); }; var s1Ele = $("#s1")[0]; s1Ele.onclick = function(){ $(".cover")[0].classList.add("hide") $(".modal")[0].classList.add("hide") } </script> </body> </html>
优化版:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
.cover{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.4);
z-index: 10;
}
.modal{
width: 700px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -350px;
background: white;
z-index: 20;
}
.close{
float: right;
margin-right: 15px;
margin-top: 10px;
font-size: 20px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<button id="b1">点我弹出</button>
<div class="cover hide"></div>
<div class="modal hide">
<span class="close" id="s1">X</span>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
var b1Ele = $("#b1")[0];
var $coverEle = $(".cover");
var $modalEle = $(".modal");
b1Ele.onclick = function(){
$coverEle.removeClass("hide");
$modalEle.removeClass("hide");
};
var s1Ele = $("#s1")[0];
s1Ele.onclick = function(){
$coverEle.addClass("hide");
$modalEle.addClass("hide")
}
</script>
</body>
</html>
属性选择器
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
<div s="123">div1</div>
<div>div2</div>
<input type="text">
<input type="password">
<input type="submit">
$("div")
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$("[s]")
w.fn.init [div, prevObject: w.fn.init(1)]
$("input[type='submit']")
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$("input[type!='submit']")
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
表单常用筛选
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性
:enabled
:disabled
:checked
:selected
<input type="text" disabled>被禁用
<input type="checkbox"checked>
<input type="radio">
<select >
<option value="111">111</option>
<option value="222">222</option>
</select>
$(":checked")
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]
$("input:checked")
w.fn.init [input, prevObject: w.fn.init(1)]
$(":selected")
w.fn.init [option, prevObject: w.fn.init(1)]
筛选器
下一个元素
$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2")
<ul>
<li id="l1">111</li>
<li id="l2">222</li>
<li id="l3">333</li>
<li id="l4">444</li>
<li>555</li>
</ul>
<div>div</div>
$("#l2")
w.fn.init [li#l2]
$("#l2").next()
w.fn.init [li#l3, prevObject: w.fn.init(1)]
$("#l2").nextAll()
$("#l1").nextUntil("#l4")
上一个元素
$("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2")
$("#l3").prev()
w.fn.init [li#l2, prevObject: w.fn.init(1)]
$("#l3").prevAll()
w.fn.init(2) [li#l2, li#l1, prevObject: w.fn.init(1)]
$("#l3").prevUntil("#l1")
w.fn.init [li#l2, prevObject: w.fn.init(1)]
父亲元素
$("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#l2")
w.fn.init [li#l2]
$("#l2").parent()
w.fn.init [ul, prevObject: w.fn.init(1)]
$("#l2").parents()
w.fn.init(3) [ul, body, html, prevObject: w.fn.init(1)]
$("#l2").parentsUntil("html")
w.fn.init(2) [ul, body, prevObject: w.fn.init(1)]
儿子和兄弟元素
$("#id").children();// 儿子们 $("#id").siblings();// 兄弟们
$("ul")
w.fn.init [ul, prevObject: w.fn.init(1)]
$("ul").children()
w.fn.init(5) [li#l1, li#l2, li#l3, li#l4, li, prevObject: w.fn.init(1)]
$("#l2").siblings()
w.fn.init(4) [li#l1, li#l3, li#l4, li, prevObject: w.fn.init(1)]
查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
<div>
<span>span</span>
</div>
$("div").find("span")
等价于$("div spn")
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
div class="c1">div</div> <div> <span>span</span> </div> $("div") w.fn.init(2) [div.c1, div, prevObject: w.fn.init(1)]0: div.c11: divlength: 2prevObject: w.fn.init [document]__proto__: Object(0) $("div").filter(".c1") w.fn.init [div.c1, prevObject: w.fn.init(2)]
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <style> .menu { width: 100px; border: 1px solid darkgrey; } .item-title { height: 30px; line-height: 30px; background-color: #449900; color: white; text-align: center; border-bottom: 1px dotted darkgrey; } .hide { display: none; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="item-title">菜单一</div> <div class="item-body hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <div class="item"> <div class="item-title">菜单二</div> <div class="item-body hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <div class="item"> <div class="item-title">菜单三</div> <div class="item-body hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> </div> <script src="jquery-3.3.1.min.js"></script> <script> var $titleEles = $(".item-title"); for (var i=0;i<$titleEles.length;i++){ $titleEles[i].onclick=function () { console.log(this); // 把我自己的hide移除 //$(this).next().toggleClass("hide"); // 把其他的item-body标签 添加上hide //$(this).parent().siblings().find(".item-body").addClass("hide"); $(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide"); } } // $(".item-title").click(function () { // $(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide"); // }) </script> </body> </html>
操作标签
样式操作
addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
.c{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
}
.c1{
background-color: green;
}
</style>
</head>
<body>
<div id="d1" class="c c1"></div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
$("#d1") w.fn.init [div#d1.c.c1] $("#d1").removeClass("c1") w.fn.init [div#d1.c] $("#d1").addClass("c1") w.fn.init [div#d1.c.c1] $("#d1").removeClass("c1") w.fn.init [div#d1.c] $("#d1").addClass("c1") w.fn.init [div#d1.c.c1] $("#d1").hasClass("c1") ture
$(".c1") w.fn.init [div.c1, prevObject: w.fn.init(1)] $(".c1").css("color") "rgb(0, 0, 0)" $(".c1").css("font-size") "16px" $(".c1").css("color","red") w.fn.init [div.c1, prevObject: w.fn.init(1)] $(".c1").css({"color":"green","font-size":"20px"}) w.fn.init [div.c1, prevObject: w.fn.init(1)]
位置:
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <style> body{ margin: 0; } .c1{ height:100px; width: 100px; background-color: red; position: relative; } .c2{ height: 100px; width: 100px; background-color: green; position: absolute; top: 100px; left: 100px; } </style> </head> <body> <script src="jquery-3.3.1.min.js"></script> <div class="c1"> <div class="c2"></div> </div> </body> </html> $(".c1") w.fn.init [div.c1, prevObject: w.fn.init(1)] $(".c1").offset() {top: 0, left: 0} $(".c2").offset() {top: 100, left: 100} $(".c2").position() {top: 100, left: 100} 注:.c2 的 position操作的是相对于父标签的偏移 offset相对于当前窗口的一个偏移
返回顶部示例
<!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> .c1 { width: 100px; height: 200px; background-color: red; } .c2 { height: 50px; width: 50px; position: fixed; bottom: 15px; right: 15px; background-color: #2b669a; } .hide { display: none; } .c3 { height: 100px; } </style> </head> <body> <button id="b1" class="btn btn-default">点我</button> <div class="c1"></div> <div class="c3">1</div> <div class="c3">2</div> <div class="c3">3</div> <div class="c3">4</div> <div class="c3">5</div> <div class="c3">6</div> <div class="c3">7</div> <div class="c3">8</div> <div class="c3">9</div> <div class="c3">10</div> <div class="c3">11</div> <div class="c3">12</div> <div class="c3">13</div> <div class="c3">14</div> <div class="c3">15</div> <div class="c3">16</div> <div class="c3">17</div> <div class="c3">18</div> <div class="c3">19</div> <div class="c3">20</div> <div class="c3">21</div> <div class="c3">22</div> <div class="c3">23</div> <div class="c3">24</div> <div class="c3">25</div> <div class="c3">26</div> <div class="c3">27</div> <div class="c3">28</div> <div class="c3">29</div> <div class="c3">30</div> <div class="c3">31</div> <div class="c3">32</div> <div class="c3">33</div> <div class="c3">34</div> <div class="c3">35</div> <div class="c3">36</div> <div class="c3">37</div> <div class="c3">38</div> <div class="c3">39</div> <div class="c3">40</div> <div class="c3">41</div> <div class="c3">42</div> <div class="c3">43</div> <div class="c3">44</div> <div class="c3">45</div> <div class="c3">46</div> <div class="c3">47</div> <div class="c3">48</div> <div class="c3">49</div> <div class="c3">50</div> <div class="c3">51</div> <div class="c3">52</div> <div class="c3">53</div> <div class="c3">54</div> <div class="c3">55</div> <div class="c3">56</div> <div class="c3">57</div> <div class="c3">58</div> <div class="c3">59</div> <div class="c3">60</div> <div class="c3">61</div> <div class="c3">62</div> <div class="c3">63</div> <div class="c3">64</div> <div class="c3">65</div> <div class="c3">66</div> <div class="c3">67</div> <div class="c3">68</div> <div class="c3">69</div> <div class="c3">70</div> <div class="c3">71</div> <div class="c3">72</div> <div class="c3">73</div> <div class="c3">74</div> <div class="c3">75</div> <div class="c3">76</div> <div class="c3">77</div> <div class="c3">78</div> <div class="c3">79</div> <div class="c3">80</div> <div class="c3">81</div> <div class="c3">82</div> <div class="c3">83</div> <div class="c3">84</div> <div class="c3">85</div> <div class="c3">86</div> <div class="c3">87</div> <div class="c3">88</div> <div class="c3">89</div> <div class="c3">90</div> <div class="c3">91</div> <div class="c3">92</div> <div class="c3">93</div> <div class="c3">94</div> <div class="c3">95</div> <div class="c3">96</div> <div class="c3">97</div> <div class="c3">98</div> <div class="c3">99</div> <div class="c3">100</div> <button id="b2" class="btn btn-default c2 hide">返回顶部</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").on("click", function () { $(".c1").offset({left: 200, top:200}); }); $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#b2").removeClass("hide"); }else { $("#b2").addClass("hide"); } }); $("#b2").on("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"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <style> body{ margin: 0; } .c1{ height: 200px; width: 400px; background-color: red; padding: 20px; border: 10px solid green; margin: 30px; } </style> </head> <body> <script src="jquery-3.3.1.min.js"></script> <div class="c1"></div> <div class="c1"></div> </body> </html> $(".c1").height() 200 $(".c1").width() 400 $(".c1").innerHeight() 240 注:内容+padding $(".c1").outerHeight() 260 注:内容+padding+border
文本操作
HTML代码：
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
<div id="d1"> <div>div的文本 <p p标签的文本><span>哈哈哈哈</span></p> </div> </div> document.getElementById("d1").innerText "div的文本 哈哈哈哈" $("#d1").text() " div的文本 哈哈哈哈 " 注:将标签的空格换行也拿到了 $("#d1").text("嘿嘿嘿嘿") w.fn.init [div#d1] 注:将文档内容改变为"嘿嘿嘿嘿" $("#d1").text("<a href='http://www.baidu.com'>baidu</a>") w.fn.init [div#d1] 注:不识别a标签,只识别文档 $("#d1").html() " <div>div的文本 <p p标签的文本=""><span>哈哈哈哈</span></p> </div> " $("#d1").html("<a href='http://www.baidu.com'>baidu</a>") w.fn.init [div#d1] 注:可以识别标签
<input type="text" id="i1"> <select id="s1"> <option value="1">111</option> <option value="2">222</option> <option value="3">333</option> </select> <textarea id="t1" cols="30" rows="10"></textarea> $("#i1").val() "ssss" $("#i1").val("呵呵呵") w.fn.init [input#i1] input框内内容改变为:呵呵呵 $("#s1").val() "1" $("#s1").val(3) select框内内容改变 w.fn.init [select#s1] $("#t1").val() "世情薄,人情恶" $("#t1").val("人成各,今非昨") w.fn.init [textarea#t1] textarea框内的内容改为:人成各,今非昨
获取被选中的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:checked") w.fn.init [input#c2, prevObject: w.fn.init(1)] $("input:checked").val() "1" 选男 $("input:checked").val() "0" 选女
<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"> <hr> <lable for="d1">篮球</lable> <input id="d1" type="checkbox" value="basketball" name="hobby"> <lable for="d2">足球</lable> <input id="d2" type="checkbox" value="football" name="hobby"> <lable for="d3">双色球</lable> <input id="d3" type="checkbox" value="doublecolorball" name="hobby"> $("input:checked").val() "basketball" $("input[name='gender']:checked").val() "1" 选男 $("input[name='gender']:checked").val() "0" 选女 $("input[name='hobby']:checked").val() "basketball" val()获取值默认只能取第一个元素的值
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <from action=""> <div> <label for="input-name">登录名:</label> <input type="text" id="input-name" name="name" placeholder="请用户输入登录名"> <span class="error"></span> </div> <div> <label for="input-password">登录密码:</label> <input type="text" id="input-password" name="password" placeholder="请用户输入登录密码"> <span class="error"></span> </div> <div> <input type="submit" id="s1"> </div> </from> <script src="jquery-3.3.1.min.js"></script> <script> $("#s1").click(function () { var nameEle =$("#input-name").val(); var passwordEle = $("#input-password").val(); if (nameEle.length === 0) { $("#input-name").siblings(".error").text("用户登录名不能为空"); } if (passwordEle.length === 0){ $("#input-password").siblings(".error").text("用户登录密码不能为空"); } }) </script> </body> </html>
属性操作
用于ID等或自定义属性：
attr(attrName)// 返回第一个匹配元素的属性值 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性
<div id="d1" s1="hello">我是div</div> $("#d1").attr("id") "d1" $("#d1").attr("s1") "hello" $("#d1").attr("s1","你好") w.fn.init [div#d1] $("#d1").removeAttr("s1") w.fn.init [div#d1]
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
<input type="checkbox" value="1" id="i1" checked>点我 $("#i1").attr("checked") "checked" $("#i1").attr("checked") "checked" $("#i1").prop("checked") true $("#i1").prop("checked") false 获取文本属性用attr 获取布尔值的用prop
绑定事件的四种方式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <button id="b1">点我</button> <script src="jquery-3.3.1.min.js"></script> <script> function f(){ alert(123); } // <!--第一种--> // var b1Ele = document.getElementById("b1"); // b1Ele.onclick = function () { // f() // }; // 第二种 // $("#b1")[0].onclick = function () { // f() // } // // 第三种 $("#b1").click(function () { f() }) // 第四种 // $("#b1").on("click",function(){ // f(); // }) </script> </body> </html>
全选,反选,取消
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <style> .b1{ font-size: 40px; } </style> </head> <body> <from action=""> <table border="" cellspacing="10" cellpadding="20"> <thead> <tr> <th>序号</th> <th>内容一</th> <th>内容二</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="check" ></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" name="check" ></td> <td>333</td> <td>444</td> </tr> <tr> <td><input type="checkbox" name="check" ></td> <td>555</td> <td>666</td> </tr> </tbody> </table> </from> <input type="button" value="全选" class="b1" id="d1"> <input type="button" value="反选" class="b1" id="d2"> <input type="button" value="取消" class="b1" id="d3"> <script src="jquery-3.3.1.min.js"></script> <script> $("#d1").click(function() { $(":checkbox").prop("checked", true); }); // $("#d2").click(function() { // $("[name=check]:checkbox").each(function() { // console.log(this.checked); // this.checked = !this.checked // }); // }); $("#d2").click(function () { var $check = $(":checkbox"); for (var i = 0;i<$check.length;i++){ var tmp = $check[i]; var s = $(tmp).prop("checked"); // if (s){ // $(tmp).prop("checked",false); // } else{ // $(tmp).prop("checked",true); // } $(tmp).prop("checked",!s); } }); $("#d3").click(function () { $(":checkbox").prop("checked", false); }); </script> </body> </html>
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
<ul id="u1"> <li>张三</li> </ul> var liEle = document.createElement("li"); undefined liEle.innerText = "李四" "李四" $("ul").append(liEle) w.fn.init [ul#u1, prevObject: w.fn.init(1)] var liEle1 = document.createElement("li"); undefined liEle1.innerText = "王五" "王五" $(liEle1).appendTo("#u1") w.fn.init [li, prevObject: w.fn.init(1)]
结果:
张三
李四
王五
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
<ul id="u1"> <li>张三</li> </ul> var liEle2 = document.createElement("li") undefined liEle2.innerText = "马六" "马六" $("ul").prepend(liEle2) w.fn.init [ul#u1, prevObject: w.fn.init(1)] var liEle3 = document.createElement("li") undefined liEle3.innerText = "周七" "周七" $(liEle3).prependTo("#u1") w.fn.init [li, prevObject: w.fn.init(1)] 结果: 周七 马六 张三
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
<div id="d1">111</div> var divEle1 = document.createElement("div") undefined divEle1.innerText = "222" "222" $("#d1").after(divEle1) w.fn.init [div#d1] var divEle2 = document.createElement("div") undefined divEle2.innerText = "333" "333" $(divEle2).insertAfter(divEle1) w.fn.init [div, prevObject: w.fn.init(1)] 结果: 111 222 333
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。
注:remove后标签被删除
empty后标签在,内容删除
替换
replaceWith()
replaceAll()
<div id="d2"> <p>div中的p</p> </div> var aEle = document.createElement("a") undefined $(aEle).attr("href","http://www.baidu.com") w.fn.init [a] aEle.innerText = "baidu" "baidu" $("p").replaceWith(aEle) w.fn.init [p, prevObject: w.fn.init(1)] 将喷标签替换成a标签
var aEle = document.createElement("a")
undefined
$(aEle).attr("href","http://www.baidu.com")
w.fn.init [a]
aEle.innerText = "baidu"
"baidu"
$(aEle).replaceAll("p")
w.fn.init [a, prevObject: w.fn.init(1)]
克隆
clone()// 参数
<button class="btn">屠龙宝刀,点击就送</button> $(".btn").clone() 克隆一个新的按钮,不是页面上的 $(".btn").clone().insertAfter(".btn") 页面产生一个新的按钮
绑定事件
<!--克隆--> <button class="btn">屠龙宝刀,点击就送</button> <script src="jquery-3.3.1.min.js"></script> <script> $(".btn").click(function () { $(this).clone().insertAfter(this); }) </script> 点击按钮添加按钮 $(this).clone(true).insertAfter(this); 添加的按钮点击后也可以添加新的按钮
<!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> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px; } </style> </head> <body> <button id="b1">屠龙宝刀，点击就送</button> <hr> <button id="b2">屠龙宝刀，点击就送</button> <script src="jquery-3.2.1.min.js"></script> <script> // clone方法不加参数true，克隆标签但不克隆标签带的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加参数true，克隆标签并且克隆标签带的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script> </body> </html> 点击复制按钮
事件
常用事件
click(function(){...})点击事件
hover(function(){...})鼠标移动上去事件
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
keydown和keyup事件组合示例：
<!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.3.1.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> 按住shift键批量操作
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <table border="" cellpadding="3" cellspacing="3"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>张三</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>李四</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>王五</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>马六</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>赵七</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.3.1.min.js"></script> <script> $("#b1").click(function(){ $(":checkbox").prop("checked",true) }); $("#b2").click(function(){ var $check = $(":checkbox"); for (var i = 0;i<$check.length;i++){ var tmp = $($check)[i]; var s = $(tmp).prop("checked"); $(tmp).prop("checked",!s); } }); $("#b3").click(function(){ $(":checkbox").prop("checked",false) }); // 按住shift键，批量操作 // 定义全局变量 var flog = false; // 按下shift键 $(window).keydown(function (event) { console.log(event.keyCode); if (event.keyCode === 16){ flog = true; } }); // 松开shift键 $(window).keyup(function (event) { console.log(event.keyCode); if (event.keyCode === 16){ flog = false; } }); // select标签的值发生变化 $("select").change(function () { // 判断当前select行是否被选中 var checked =$(this).parent().siblings().first().find(":checkbox").prop("checked"); console.log(checked); if (flog&&checked){ // 取到当前select选中的值 var value = $(this).val(); // 找到选中的select,并赋值 $("input:checked").parent().parent().find("select").val(value) } }); </script> </body> </html>
hover事件示例：
<!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>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <style> body{ margin: 0; } .menu{ height: 50px; width: 100%; background-color: #4d4d4d; color: white; } .menu>ul{ list-style-type: none; margin: 0; padding: 0; } .menu>ul>li{ float: left; line-height: 50px; margin-right: 15px; position: relative; } .shop-car{ background-color: #2b669a; height: 50px; width: 100px; position: absolute; display: none; } </style> </head> <body> <div class="menu"> <ul> <li>登录</li> <li>注册</li> <li class="car">购物车 <div class="shop-car">购物车为空</div> </li> </ul> </div> <script src="jquery-3.3.1.min.js"></script> <script> $(".car").hover(function () { $(".shop-car").css("display","block") }, function () { $(".shop-car").css("display","none") } ) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <style> body{ margin: 0; } .menu{ height: 50px; width: 100%; background-color: #4d4d4d; color: white; } .menu>ul{ list-style-type: none; margin: 0; padding: 0; } .menu>ul>li{ float: left; line-height: 50px; margin-right: 15px; position: relative; } .shop-car{ background-color: #2b669a; height: 50px; width: 100px; position: absolute; display: none; } .hover>.shop-car{ display: block; } </style> </head> <body> <div class="menu"> <ul> <li>登录</li> <li>注册</li> <li class="car hover">购物车 <div class="shop-car">购物车为空</div> </li> </ul> </div> <script src="jquery-3.3.1.min.js"></script> <script> $(".car").hover(function () { $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); } ) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <style> body{ margin: 0; } .menu{ height: 50px; width: 100%; background-color: #4d4d4d; color: white; } .menu>ul{ list-style-type: none; margin: 0; padding: 0; } .menu>ul>li{ float: left; line-height: 50px; margin-right: 15px; position: relative; } .shop-car{ background-color: #2b669a; height: 50px; width: 100px; position: absolute; display: none; } .hover>.shop-car{ display: block; } </style> </head> <body> <div class="menu"> <ul> <li>登录</li> <li>注册</li> <li class="car">购物车 <div class="shop-car">购物车为空</div> </li> </ul> </div> <script src="jquery-3.3.1.min.js"></script> <script> $(".menu").on("mouseenter",".car",function () { $(this).addClass("hover"); }); $(".menu").on("mouseleave",".car",function (){ $(this).removeClass("hover"); }); </script> </body> </html>
注意：
像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。
实时监听input输入值变化示例：
<!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>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <input type="text" id="i1"> <script src="jquery-3.3.1.min.js"></script> <script> // input框失去焦点后触发事件 // $("#i1").blur(function () { // console.log($(this).val()); // }); // 只要input框的值发生变化就触发事件 $("#i1").on("input",function () { console.log($(this).val()) }) </script> </body> </html>
事件绑定
.on( events [, selector ],function(){})
四种绑定事件的方式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <button id="b1">点我</button> <script src="jquery-3.3.1.min.js"></script> <script> function f(){ alert(123); } // <!--第一种--> // var b1Ele = document.getElementById("b1"); // b1Ele.onclick = function () { // f() // }; // 第二种 // $("#b1")[0].onclick = function () { // f() // } // // 第三种 $("#b1").click(function () { f() }) // 第四种 // $("#b1").on("click",function(){ // f(); // }) </script> </body> </html>
事件冒泡
<body> <div id="d1"> <p id="p1"> <span id="s1">span</span> </p> </div> <script src="jquery-3.3.1.min.js"></script> <script> $("#d1").click(function(){ alert(123) }) </script> </body>
阻止事件冒泡
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <div id="d1"> <p id="p1"> <span id="s1">span</span> </p> </div> <form action=""> <input type="text" id="i2"> <input type="submit" id="i1"> </form> <script src="jquery-3.3.1.min.js"></script> <script> $("#d1").click(function(){ alert("div") }); $("#p1").click(function(){ alert("ppp") }); $("#s1").click(function(event){ alert("span"); // 阻止事件向上传递 event.stopPropagation() }); // 阻止默认事件传递 $("#i1").click(function (event) { alert("这是form中的提交按钮"); var value = $("#i2").val(); if (value.length === 0){ // 为空就不提交 // 不执行后续默认的提交事件 // 阻止默认事件的执行 event.preventDefault(); // 阻止后续事件的发生 return false; } }) </script> </body> </html>
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
示例：
表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () { // 删除按钮绑定的事件 })
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <button class="c1">点我</button> <script src="jquery-3.3.1.min.js\"></script> <script> // $(".c1").click(function(){ // alert("点我") // }); // 利用事件冒泡的原理,进行事件委托,把.c1样式类的事件委托给父标签body来处理 $("body").on("click",".c1",function(){ alert("点我") }) </script> </body> </html> var buttonEle = document.createElement("button") undefined $(buttonEle).addClass("c1") w.fn.init [button.c1] buttonEle.innerText = "点我2" "点我2" $("body").append(buttonEle) w.fn.init [body, prevObject: w.fn.init(1)]
动画效果
// 基本 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])
$("#i1").show(5000) w.fn.init [img#i1] $("#i1").toggle(5000) w.fn.init [img#i1] $("#i1").fadeIn(5000) w.fn.init [img#i1] $("#i1").fadeOut(5000) w.fn.init [img#i1] $("#i1").slideDown(5000) w.fn.init [img#i1] $("#i1").slideUp(5000) w.fn.init [img#i1] $("#i1").fadeIn(5000) w.fn.init [img#i1] $("#i1").fadeOut(5000) w.fn.init [img#i1] $("#i1").fadeTo(5000,0.5) w.fn.init [img#i1]
自定义动画示例：
<!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
for(var i=0;i<a1.length;i++){ console.log(a1[i]) } VM110:2 1 VM110:2 2 VM110:2 3 VM110:2 4 VM110:2 5 undefined a1.forEach(function(k,v){ console.log(k,v); }) VM137:2 1 0 VM137:2 2 1 VM137:2 3 2 VM137:2 4 3 VM137:2 5 4 undefined $.each(a1,function(k,v){ console.log(k,v) }) VM172:2 0 1 VM172:2 1 2 VM172:2 2 3 VM172:2 3 4 VM172:2 4 5 (5) [1, 2, 3, 4, 5]
注意：
在遍历过程中可以使用 return false提前结束each循环。
终止each循环
return false；
终止本次循环
return
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <style> .b1{ font-size: 40px; } </style> </head> <body> <from action=""> <table border="" cellspacing="10" cellpadding="20"> <thead> <tr> <th>序号</th> <th>内容一</th> <th>内容二</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="check" ></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" name="check" ></td> <td>333</td> <td>444</td> </tr> <tr> <td><input type="checkbox" name="check" ></td> <td>555</td> <td>666</td> </tr> </tbody> </table> </from> <input type="button" value="全选" class="b1" id="d1"> <input type="button" value="反选" class="b1" id="d2"> <input type="button" value="取消" class="b1" id="d3"> <script src="jquery-3.3.1.min.js"></script> <script> $("#d1").click(function() { $(":checkbox").prop("checked", true); }); $("#d2").click(function () { $(":checkbox").each(function () { var value = $(this).prop("checked"); if (value){ $(this).prop("checked",false); } else{ $(this).prop("checked",true) } }); }); $("#d3").click(function () { $(":checkbox").prop("checked", false); }); </script> </body> </html>
.data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
