jQuery引入
jQuery的介绍
1、jQuery是一个轻量级的、兼容多浏览器的JavaScript库(这里的兼容性主要是针对以前的IE浏览器来说的，因为当时的IE浏览器不兼容，但是现在基本所有的浏览器都能实现兼容)
2、jQuery 使用户能够更方便的处理 HTML Document、Events、实现动画效果、方便的进行 Ajax 交互，能够极大地简化 JavaScript 编程。它的宗旨就是：" Write less, do more."
jQuery 的优势：
1、一款轻量级的JS框架。jQuery核心js文件才 几十kb，不会影响页面的加载速度。
2、丰富的DOM选择器，jQuery 的选择器用起来很方便，比如要找到某个DOM对象的相邻元，js 可能要写好几行代码，而jQuery一行代码就可以搞定，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3、链式表达式。jQuery的链式操作可以把多个操作写在一行代码中，更加简洁。
4、事件、样式、动画支持。jQuery还简化了js操作css的代码， 并且代码的可读性也比js要强。
5、Ajax 操作支持。jQuery简化了Ajax操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6、跨浏览器兼容。jQuery 基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7、插件扩展开发。jQuery 有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等基本前端页面上的组件都有对应的插件，并且用jQuery插件做出来的效果很炫，且可以根据自己的需要去改写和封装插件，简单实用。
jQuery 包含以下内容：
1、选择器
2、筛选器
3、样式操作
4、文本操作
5、属性操作
6、文档操作
7、事件
8、动画效果
9、插件
10、each、data、Ajax
jQuery 选择
- 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") // 通过 .类名 来查找
所有元素选择器：
$("*") // * 是通用匹配
组合选择器：
$("#id,.className,tagName") // 各个查找条件之间是通过“,” 来分隔的，且不要打空格
层级选择器：
x 和 y 可以为任意选择器
$("x y"); // x 和 y是通过空格来连接的，在 x 的所有后代中查找 y
$("x>y"); // 在 x 的所有儿子中查找 y
$("x + y"); // 找到所有紧挨在 x 后面的 y
$("x~y"); // 找到的是 x 之后所有的兄弟 y
练习：
1、找到本页面中id是i1的标签
2、找到本页面中所有的h2标签
3、找到本页面中所有的input标签
4、找到本页面所有样式类中有c1的标签
5、找到本页面所有样式类中有btn-default的标签
6、找到本页面所有样式类中有c1的标签和所有h2标签
7、找到本页面所有样式类中有c1的标签和id是p3的标签
8、找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
// 1、找到本页面中id是i1的标签 $("#i1") //2、找到本页面中所有的h2标签 $("#h2") // 3、找到本页面中所有的input标签 $("input") // 4、找到本页面所有样式类中有c1的标签 $(".c1") // 5、找到本页面所有样式类中有btn-default的标签 $(".btn-default") // 6、找到本页面所有样式类中有c1的标签和所有h2标签 $(".c1,h2") // 7、找到本页面所有样式类中有c1的标签和id是p3的标签 $(".c1,#p3") // 8、找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签 $(".c1,.btn")
练习：
1、找到本页面中form标签中的所有input标签
2、找到本页面中被包裹在label标签内的input标签
3、找到本页面中紧挨在label标签后面的input标签
4、找到本页面中id为p2的标签后面所有和它同级的li标签
// 1、找到本页面中form标签中的所有input标签 $("form input") // 2、找到本页面中被包裹在label标签内的input标签 $("label>input") // 3、找到本页面中紧挨在label标签后面的input标签 $("label+input") // 4、找到本页面中id为p2的标签后面所有和它同级的li标签 $("label~input")
基本筛选器：
: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 class 的 li 标签
$("li:not(:has(a))") // 找到所有后代中不含 a 标签的 li 标签
注意：
1、这里的 has 和 not 不是简单的 有 和 没有 的意思，它两没啥关系（不是一组）
2、:not 和 :has 通常用 .not() 和 .has() 代替
3、$("div:has(.c1)") 等价于 $("div .c1") 并不等价于 $("div.c1")。
练习：
自定义模态框，使用jQuery实现弹出和隐藏功能。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>弹出模态框</title> 6 <style> 7 .cover { 8 position:fixed; 9 left:0; 10 right:0; 11 top:0; 12 bottom:0; 13 background-color:darkgray; 14 z-index:999; 15 } 16 .model { 17 position:fixed; 18 width:600px; 19 height:400px; 20 left:50%; 21 top:50%; 22 background-color: white; 23 margin-left:-300px; 24 margin-top:-200px; 25 z-index:1000; 26 } 27 .hide { 28 display:none; 29 } 30 </style> 31 </head> 32 <body> 33 34 <input type="button" value="弹" id="i0"> 35 <div class="cover hide"></div> 36 <div class="model hide"> 37 <label for="i1">姓名</label> 38 <input id="i1" type="text"> 39 <label for="i2">爱好</label> 40 <input id="i2" type="text"> 41 <input type="button" id="i3" value="关闭"> 42 </div> 43 44 <script src="jquery-3.2.1.min.js"></script> 45 <script> 46 var tButton=$("#i0"); 47 tButton.on("click",function () { 48 var coverEle=$(".cover")[0]; 49 var modelEle=$(".model")[0]; 50 $(coverEle).removeClass("hide"); 51 $(modelEle).removeClass("hide"); 52 }); 53 var cButton=$("#i3"); 54 cButton.on("click",function () { 55 var coverEle=$(".cover")[0]; 56 var modelEle=$(".model")[0]; 57 $(coverEle).addClass("hide"); 58 $(modelEle).addClass("hide"); 59 }) 60 </script> 61 62 63 </body> 64 </html>
属性选择器：
[attribute] [attribute=value] // 属性等于 [sttribute!=value] // 属性不等于 // 示例 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']"); // 取到 checbox 类型的 input 标签 $("input[type!='text']"); // 取到类型不是 text 的 input 标签
表单常用筛选：
:text
:password
:file
:radio
:checked
:submit
:reset
button
例子：
$(":checkbox") // 找到所有的checkbox
表单对象属性：
:enabled
:disabled
:checked
:selected
例子：
<form action="">
<input name="email" disabled="disabled">
<input name="id">
</form>
$("input:enabled"); // 找到可用的input标签
<select id="s1">
<option value="beijing">北京</option>
<option value="shanghai">上海市</option>
<option value="guangzhou" selected>广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
筛选器
下一个元素：
$("#id1").next // 找紧挨着指定id1之后的一个id
$("#id1").nextAll // 找指定id1之后的所有id
$("#id1"),nextUntil("#id2") // 从id1 开始一直找到id2为止，且不包含id2
上一个元素：
$("#id1").prev() // 查找紧挨id1之前的一个id
$("#id1").prevAll() // 查找id1之前的所有的id
$("#id1").prevUntil("#id2") // 查找id1之前的id知道找到id2为止，但是不包含id2
父亲元素：
$("#id1").parent() // 查找当前id1的父亲元素
$("#id1").parents() // 查找当前元素的所有父辈元素
$("#id1").parentsUntil("id2") // 查找当前元素的所有父辈元素直到找到id2为止，且不包含id2
儿子和兄弟元素：
$("#id1").childern(); // 儿子们
$("#id1").sibling(); // 兄弟们
例子：
$("li").eq(2) // 找出li标签中索引大于2的元素
$("li").first() // 找出li标签中的第一个元素
$("ul li").hasclass("test") // 找出ul后代li中有test类的元素
$(".test").next() // 找出紧挨test类之后的类
$(".test").nextAll() // 找出test类之后的所有类
$(".test").nextUntil() // 找出test类之后的类直到找到匹配的类为止
$("div").children(".test") // 在div 的子标签中找到有test类的子标签
$("div").find(".test") // 在所有的div标签中找含有test类的标签
$("div").prev() // 找出紧挨着div之前的一个类
$("div").prevAll() // 找出div之前的所有的类
$("div").prevUntil() // 找出div之前的类，直到找到匹配的类为止
$(".test").parent() // 找出.test的父标签
$(".test").partents() // 找出.test的所有父标签
$(".test").parentUntil() // 找出.test的父标签，直到找到匹配的为止
$("div").siblings() // 找到div标签的兄弟标签
查找元素：
$("#id1").find() // 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。在不知道各个元素之间的层级关系的时候可以使用。
补充：
.first() // 获取匹配的第一个元素。 .last() // 获取匹配的最后一个元素。 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素。 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
示例：左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单-jQuery</title>
<style>
.left {
position: fixed;
left: 0;
top: 0;
width: 20%;
background-color: darkgrey;
height: 100%;
}
.right {
width: 80%;
}
.title {
text-align: center;
padding: 10px 15px;
border-bottom: 1px solid red;
}
.content {
background-color: #336699;
}
.content > div {
padding: 10px;
color: white;
border-bottom: 1px solid black;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="item">
<div class="title" id="t1">菜单一</div>
<div class="content hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
<div class="item">
<div class="title" id="t2">菜单二</div>
<div class="content hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
<div class="item">
<div class="title" id="t3">菜单三</div>
<div class="content hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
</div>
<div class="right"></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
var $titleEles=$(".title");
$titleEles.on("click",function (){
$(this).next().toggleClass("hide").parent().siblings(".item").children(".content").addClass("hide");
})
</script>
</body>
</html>
示例；tab切换
tab切换操作元素(属性，css，文档处理)
属性操作
//------------------------------------属性 $("").attr(); $("").removeAttr() $("").prop(); $("").removeProp(); //-----------------------------------css类 $("").addClass(class|fn) $("").removeClass([class|fn]) //------------------------------------HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) //----------------------------------------- $("").css("color","red")
注意 attr 和 prop:
<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见 <script> // 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 // 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 // 像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果 // $("#chk1").attr("checked") undefined // $("#chk1").prop("checked") false // -----------手动选中的时候attr()获得到没有意义的undefined----------- // $("#chk1").attr("checked") undefined // $("#chk1").prop("checked") true console.log($("#chk1").prop("checked")); // false console.log($("#chk2").prop("checked")); // true console.log($("#chk1").attr("checked")); // undefined console.log($("#chk2").attr("checked")); // checked </script>
示例：全、反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
function selectall(){
$("table :checkbox").prop("checked",true)
}
function cancel(){
$("table :checkbox").prop("checked",false)
}
function reverse(){
// var idlist=$("table :checkbox")
// for(var i=0;i<idlist.length;i++){
// var element=idlist[i];
//
// var ischecked=$(element).prop("checked")
// if (ischecked){
// $(element).prop("checked",false)
// }
// else {
// $(element).prop("checked",true)
// }
//
// }
// jquery循环的两种方式
//方式一
// li=[10,20,30,40]
// dic={name:"yuan",sex:"male"}
// $.each(li,function(i,x){
// console.log(i,x)
// })
//方式二
// $("tr").each(function(){
// console.log($(this).html())
// })
$("table :checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
// if ($(this).prop("checked")){
// $(this).prop("checked",false)
// }
// else {
// $(this).prop("checked",true)
// }
// 思考:如果用attr方法可以实现吗?
});
}
</script>
</head>
<body>
<button onclick="selectall();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
</body>
</html>
示例：模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: rebeccapurple;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: coral;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: gold;
}
</style>
</head>
<body>
<div class="back">
<input id="ID1" type="button" value="click" onclick="action1(this)">
</div>
<div class="shade hide"></div>
<div class="models hide">
<input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
function action1(self){
$(self).parent().siblings().removeClass("hide");
}
function action2(self){
//$(self).parent().parent().children(".models,.shade").addClass("hide")
$(self).parent().addClass("hide").prev().addClass("hide")
}
</script>
</body>
</html>
样式操作
样式类
addClass(); // 添加指定的css类名 removeClass(); // 移除指定的css类名 hasClass(); // 判断样式存不存在 toggleClass(); // 切换css类名，如果有就移除，如果没有就添加
CSS
css("color","red") // DOM 操作:tag.style.color="red"
示例：
$("p").css("color","red") // 将所有p标签的字体设置为红色
位置：
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 position() // 获取匹配元素相对父元素的偏移 scrollTop() // 获取匹配元素相对滚动条顶部的偏移 scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
.offset() 方法允许我们检索一个元素相对于文档 ( document ) 的当前位置。
.offset() 和 .position() 的差别在于：.position() 是相对于父级元素的位移。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
.c1 {
width:100px;
height:100px;
background-color: #2459a2;
}
.c2 {
height:50px;
width:50px;
position:fixed;
bottom:15px;
right:15px;
background-color: rebeccapurple;
}
.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() // 这里的高度是指 css 盒子模型中的 center 的高度 innerhight() // 这里的高度指的是 css 盒子模型中的 center + padding 的高度 outerheught() // 这里的高度是指 css 盒子模型中的 center + padding + border 的高度 width() // 这里的宽度指的是 css 盒子模型中的 center 的宽度 innerwidth() // 这里的宽度指的是 css 盒子模型中的 center + padding 的宽度 outerwidth() // 这里的宽度指的是 css 盒子模型中的 center + padding + border 的宽度
文本操作
HTML 代码：
html() // 获取第一个匹配元素的 html 的内容 html(val) // 设置所有匹配元素的 html 内容
文本值：
text() // 获取所有匹配元素的内容 text(val) // 设置所有匹配元素的内容
值：
val() // 取第一个匹配元素的当前值 val(val) // 设置所有匹配元素的值 val([val1,val2]) // 设置 checkbox、select 的值
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例</title>
</head>
<body>
<label for="s1">城市</label>
<select id="s1">
<option value="baijing">北京</option>
<option value="shanghai">上海</option>
<option selected value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
<hr>
<label for="s2">爱好</label>
<select id="s2" multiple="multiple">
<option value="basketball">篮球</option>
<option value="football">足球</option>
<option value="boll">球</option>
<option selected value="doubleball">双色球</option>
</select>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 单选下拉框
$("#s1").val("shanghai"); // 在页面上显示的是选中的“上海”
// 多选下拉框
$("#s2").val(["basketball","football"]); // 在页面上显示的是选中了“篮球”和“足球”
</script>
</body>
</html>
自定义登录验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录验证</title>
<style>
.error {
color:red;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="input-name">用户名</label>
<input type="text" id="input-name" name="name">
<span class="error"></span>
</div>
<div>
<label for="input-password">密码</label>
<input type="password" id="input-password" name="password">
<span class="error"></span>
</div>
<div>
<input type="button" id="btn" value="提交">
</div>
</form>
<script src="jquery-3.2.1.min.js"></script>
<script>
var $inputNameObj=$("#input-name");
//失去焦点之后判断用户名输入框中是否为空，如果为空，则显示提示信息
$inputNameObj.on("blur",function () {
// 取到name那个input框的值
var username=$inputNameObj.val();
// 判断输入的name 长度是不是空
if(username.length===0){
// 如果长度为空，则显示错误提示信息
$inputNameObj.siblings(".error").text("用户名不能为空");
}
});
// 在获取焦点之后清空原本在用户名输入框中的内容
$inputNameObj.on("focus",function () {
$(this).next("span").text("");
});
var $inputPasswordObj= $("#input-password");
// 在失去之后判断密码输入框中的内容是否为空，如果为空，则显示错误提示信息
$inputPasswordObj.on("blur",function () {
var password=$inputPasswordObj.val();
if(password.length===0){
$inputPasswordObj.siblings(".error").text("密码不能为空");
}
});
// 获取焦点之后将密码框中的内容清空（即是将其内容设为空字符串）
$inputPasswordObj.on("focus",function () {
$(this).next("span").text("")
})
</script>
</body>
</html>
文档处理：
添加式到指定元素内部的后面
$(A).append(B) // 把 B 追加到 A 的内部的最后，成为 A 的最后一个子元素 $(A).appendTo(B) // 把 A 追加到 B 内部的最后，成为 A 的最后一个子元素
添加到指定元素内部的前面
$(A).prepend(B) // 把 B 添加到 A 的内部的前面，成为 B 的第一个子元素 $(A).prependTo(B) // 把 A 添加到 B 的内部的前面，成为 B 的第一个子元素
添加到指定元素外部的后面
$(A).after(B) // 把 B 放到 A 的后面，让 B 成为紧挨着 A 的兄弟元素 $(A).insertAfter(B) // 把 A 放到 B 的后面，让 A 成为紧挨着 B 的兄弟元素
添加到指定元素外部的前面
$(A).before(B) // 把 B 放到 A 的前面，让 B 成为紧挨着 A 的兄弟元素 $(A).insertBefore(B) // 把 A 放到 B 的前面，让 A 成为紧挨着 B 的兄弟元素
移除和清空元素
$("").remove() // 从DOM中删除所有匹配的元素，当要删除的元素是某个标签的子标签的时候，会连着父标签一起删除
$("").empty() // 删除匹配的元素集合中所有的子节点
替换
$("").replaceWith() $("").replaceAll() // 替换所有
克隆
clone() // 参数
点击复制按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>克隆示例</title>
<style>
.c1 {
background-color: #336699;
margin:5px;
padding:5px;
width:200px;
height:40px;
line-height:40px;
}
.c2 {
background-color: #8eb031;
margin:5px;
padding:5px;
width:200px;
height:40px;
line-height:40px;
}
</style>
</head>
<body>
<div class="c1">一刀暴击，刀刀有礼！</div>
<div class="c2">你点我一下试试.....</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// clone方法参加turn，克隆标签并且克隆标签带的事件
$(".c1").on("click",function () {
$(this).clone(true).insertAfter(this);
});
// clone方法不参加turn，克隆标签但不克隆标签带的事件
$(".c2").on("click",function () {
$(this).clone().insertAfter(this);
});
</script>
</body>
</html>
事件
页面载入:
ready() // 当DOM载入就绪可以进行查询及操纵的时候绑定一个要执行的函数 $(document).ready(function() {}) <=======>$(function() {})
事件处理:
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数
// .on 的 selector 函数是筛选出调用 .on 方法的 DOM 元素的指定子元素，如：
// $("ul").on("click","li",function() {console.log("click");}) 就是筛选出 ul 下的 li 给其绑定的 click 事件
[selector] 参数的好处：
好处在于 .on 方法为动态添加的元素也能绑定上指定的事件，如：
// $("ul,li").on("click",function() {console.log("click");}) 的绑定方式和
// $("ul,li").bind("click",function() {concole.log("click");}) 一样；我通过 js 给 ul 添加了一个
// li:$("ul").append("<li>js new li </li>");这个新加的 li 是不会被绑上 click 事件的
// 但是用 $("ul").on("click","li",function() {console.log("click");}) 方法绑定，然后动态添加
// li:$("ul").append("<li>js new li </li>"); 这个新生成的 li 被绑上了 click 事件
[data] 参数的调用： function myHandler(event) { alert(event.data.foo); } $("li").on("click",{foo:"bar"}, myHandler)
实例之面板拖动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面板拖动</title>
</head>
<body>
<div style="border:1px solid #ddd;width:600px;position:absolute;">
<div id="title" style="background-color:black;height:40px;color:white;">
标题
</div>
<div style="height:300px;">
内容
</div>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script>
$(function () {
// 页面加载完成之后自动执行
$("#title").mouseover(function () {
$(this).css("cursor","move");
}).mousedown(function (e) {
// console.log($(this).offset());
var _event=e||window.event;
// 原始鼠标纵坐标位置
var ord_x=_event.clientX;
var ord_y=event.clientY;
var parent_left=$(this).parent().offset().left;
var parent_top=$(this).parent().offset().top;
$(this).bind("mousemove",function (e) {
var _new_event=e||window.event;
var new_x=_new_event.clientX;
var new_y=_new_event.clientY;
var x=parent_left + (new_x-ord_x);
var y=parent_top + (new_y-ord_y);
$(this).parent().css("left",x+"px");
$(this).parent().css("top",y+"px");
})
}).mouseup(function () {
$(this).unbind("mousemove");
})
})
</script>
</body>
</html>
实例之放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bigger</title>
<style>
*{
margin: 0;
padding:0;
}
.outer{
height: 100%;
width: 100%;
border: dashed 5px cornflowerblue;
}
.outer .small_box{
position: relative;
}
.outer .small_box .float{
height: 175px;
width: 175px;
background-color: darkgray;
opacity: 0.4;
fill-opacity: 0.4;
position: absolute;
display: none;
}
.outer .big_box{
height: 400px;
width: 400px;
overflow: hidden;
position:absolute;
left: 360px;
top: 0;
z-index: 1;
border: 5px solid rebeccapurple;
display: none;
}
.outer .big_box img{
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div class="outer">
<div class="small_box">
<div class="float"></div>
<img src="small.jpg">
</div>
<div class="big_box">
<img src="big.jpg">
</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function(){
$(".small_box").mouseover(function(){
$(".float").css("display","block");
$(".big_box").css("display","block")
});
$(".small_box").mouseout(function(){
$(".float").css("display","none");
$(".big_box").css("display","none")
});
$(".small_box").mousemove(function(e){
var _event=e || window.event;
var float_width=$(".float").width();
var float_height=$(".float").height();
console.log(float_height,float_width);
var float_height_half=float_height/2;
var float_width_half=float_width/2;
console.log(float_height_half,float_width_half);
var small_box_width=$(".small_box").height();
var small_box_height=$(".small_box").width();
// 鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
var mouse_left=_event.clientX-float_width_half;
var mouse_top=_event.clientY-float_height_half;
if(mouse_left<0){
mouse_left=0
}else if (mouse_left>small_box_width-float_width){
mouse_left=small_box_width-float_width
}
if(mouse_top<0){
mouse_top=0
}else if (mouse_top>small_box_height-float_height){
mouse_top=small_box_height-float_height
}
$(".float").css("left",mouse_left+"px");
$(".float").css("top",mouse_top+"px")
var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
console.log(percentX,percentY)
$(".big_box img").css("left", -percentX*mouse_left+"px")
$(".big_box img").css("top", -percentY*mouse_top+"px")
})
})
</script>
</body>
</html>
常用事件
click(function() {......}) hover(function() {......}) blur(function() {.......}) focus(function() {......}) change(function() {......}) keyup(function() {.......})
