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对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
他与dom中的：document.getElementById("i1").innerHTML;效果一样
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
1 var $variable = jQuery对像 2 var variable = DOM对象 3 $variable[0] //jQuery对象转成DOM对象
拿上面那个例子举例，jQuery对象和DOM对象的使用：
1 $("#i1").html(); //jQuery对象可以使用jQuery的方法 2 $("#i1")[0].innerHTML; // DOM对象使用DOM的方法
jQuery基础语法
1.id选择器：
1 $("#d1") //选择ID 2 <div id="d1" style="background-color: red;"> 3 sdfsdfsdfsdfsdfasdfadf 4 <input type="text" id="i1"> 5 <input type="button" value="开始" id="start" onclick="start();"> 6 <input type="button" value="结束" id="end" onclick="end();"> 7 </div>
2.标签选择器：
1 $("div") //选择标签 2 <div id="d1" style="background-color: red;"> 3 sdfsdfsdfsdfsdfasdfadf 4 <input type="text" id="i1"> 5 <input type="button" value="开始" id="start" onclick="start();"> 6 <input type="button" value="结束" id="end" onclick="end();"> 7 </div>
3.class选择器：
1 $(".d1") //根据class选择 2 <div class="d1">d1</div>
4.配合使用：
$("div.c1") // 找到有div标签中class为d1的标签
5.所有元素选择器：
1 $("*")
6.组合选择器：
1 $("#id, .className, tagName") //$("#l1,.d1,input")
7.层级选择器：
1 $("x y");// x的所有后代y（子子孙孙） 2 $("x > y");// x的所有儿子y（儿子） 3 $("x + y")// 找到所有紧挨在x后面的y 4 $("x ~ y")// x之后所有的兄弟y
8.基本选择器：
1 :first // 第一个 2 :last // 最后一个 3 :eq(index)// 索引等于index的那个元素 4 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 5 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 6 :gt(index)// 匹配所有大于给定索引值的元素 7 :lt(index)// 匹配所有小于给定索引值的元素 8 :not(元素选择器)// 移除所有满足not条件的标签 9 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 10 11 //例子 12 $("div:has(h1)")// 找到所有后代中有h1标签的div标签 13 $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签 14 $("li:not(.c1)")// 找到所有不包含c1样式类的li标签 15 $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
自定义模态框，使用jQuery实现隐藏和弹出:
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>自定义模态框</title> 8 <style> 9 .cover { 10 position: fixed; 11 left: 0; 12 right: 0; 13 top: 0; 14 bottom: 0; 15 background-color: darkgrey; 16 z-index: 999; 17 } 18 .modal { 19 width: 600px; 20 height: 400px; 21 background-color: white; 22 position: fixed; 23 left: 50%; 24 top: 50%; 25 margin-left: -300px; 26 margin-top: -200px; 27 z-index: 1000; 28 } 29 .hide { 30 display: none; 31 } 32 </style> 33 </head> 34 <body> 35 <input type="button" value="弹" id="i0"> 36 37 <div class="cover hide"></div> 38 <div class="modal hide"> 39 <label for="i1">姓名</label> 40 <input id="i1" type="text"> 41 <label for="i2">爱好</label> 42 <input id="i2" type="text"> 43 <input type="button" id="i3" value="关闭"> 44 </div> 45 <script src="jquery-3.3.1.min.js"></script> 46 <script> 47 var tButton = $("#i0")[0]; 48 tButton.onclick=function () { 49 var coverEle = $(".cover")[0]; 50 var modalEle = $(".modal")[0]; 51 52 $(coverEle).removeClass("hide"); 53 $(modalEle).removeClass("hide"); 54 }; 55 56 var cButton = $("#i3")[0]; 57 cButton.onclick=function () { 58 var coverEle = $(".cover")[0]; 59 var modalEle = $(".modal")[0]; 60 61 $(coverEle).addClass("hide"); 62 $(modalEle).addClass("hide"); 63 } 64 </script> 65 </body> 66 </html>
9.属性选择器：
1 [attribute] 2 [attribute=value]// 属性等于 3 [attribute!=value]// 属性不等于 4 // 5 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 6 $("[href]") 选取所有带有 href 属性的元素。 7 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 8 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 9 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 10 // 示例 11 <input type="text"> 12 <input type="password"> 13 <input type="checkbox"> 14 $("input[type='checkbox']");// 取到checkbox类型的input标签 15 $("input[type!='text']");// 取到类型不是text的input标签 16 17 //表单常用的筛选 18 :text 19 :password 20 :file 21 :radio 22 :checkbox 23 24 :submit 25 :reset 26 :button 27 28 //例子 29 $(":checkbox") // 找到所有的checkbox
10.表单对象属性：
1 :enabled 2 :disabled 3 :checked 4 :selected 5 6 //例子 7 <form> 8 <input name="email" disabled="disabled" /> 9 <input name="id" /> 10 </form> 11 12 $("input:enabled") // 找到可用的input标签 13 14 //找到选择的option 15 <select id="s1"> 16 <option value="beijing">北京市</option> 17 <option value="shanghai">上海市</option> 18 <option selected value="guangzhou">广州市</option> 19 <option value="shenzhen">深圳市</option> 20 </select> 21 22 $(":selected") // 找到所有被选中的option
筛选器
1.下一个元素
1 $("#id").next() 2 $("#id").nextAll() 3 $("#id").nextUntil("#i2")
2.上一个元素
1 $("#id").prev() 2 $("#id").prevAll() 3 $("#id").prevUntil("#i2")
3.父亲元素
1 $("#id").parent() 2 $("#id").parents() // 查找当前元素的所有的父辈元素 3 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
4.兄弟和儿子元素
1 $("#id").children();// 儿子们 2 $("#id").siblings();// 兄弟们
5.查找元素
1 $("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 2 .first()// 获取匹配的第一个元素 3 .last()// 获取匹配的最后一个元素 4 .not()// 从匹配元素的集合中删除与指定表达式匹配的元素 5 .has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
6.左侧菜单栏实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>左侧菜单</title> 6 <style> 7 .left { 8 position: fixed; 9 left:0; 10 top:0; 11 width: 20%; 12 height: 100%; 13 background-color: rgb(47,53,61); 14 } 15 .right { 16 width: 80%; 17 height: 100%; 18 } 19 .menu { 20 color: white; 21 } 22 .title { 23 text-align: center; 24 padding: 10px 15px; 25 border-bottom: 1px solid #23282e; 26 } 27 .title a { 28 text-decoration: none; 29 color: white; 30 } 31 .items { 32 background-color: #181c20; 33 } 34 .item { 35 padding:5px 10px; 36 border-bottom: 1px solid #23282e; 37 } 38 .hide { 39 display: none; 40 } 41 </style> 42 </head> 43 <body> 44 <div class="left"> 45 <div class="menu"> 46 <div class="title"><a href="#">菜单一</a></div> 47 <div class="items"> 48 <div class="item">11</div> 49 <div class="item">22</div> 50 <div class="item">33</div> 51 </div> 52 </div> 53 <div class="menu"> 54 <div class="title"><a href="#">菜单二</a></div> 55 <div class="items"> 56 <div class="item">11</div> 57 <div class="item">22</div> 58 <div class="item">33</div> 59 </div> 60 </div> 61 <div class="menu"> 62 <div class="title"><a href="#">菜单三</a></div> 63 <div class="items"> 64 <div class="item">11</div> 65 <div class="item">22</div> 66 <div class="item">33</div> 67 </div> 68 </div> 69 <div class="menu"> 70 <div class="title"><a href="#">菜单四</a></div> 71 <div class="items"> 72 <div class="item">11</div> 73 <div class="item">22</div> 74 <div class="item">33</div> 75 </div> 76 </div> 77 </div> 78 <div class="right" ></div> 79 <script src="jquery-3.3.1.min.js"></script> 80 <script> 81 //查找标签 82 var $titleEle = $(".title"); 83 $titleEle.on("click",function () { 84 $(this).next().toggleClass("hide"); 85 $(this).next().sibling(".items").addClass("hide") 86 }) 87 </script> 88 </body> 89 </html>
标签操作
样式操作
1 addClass();// 添加指定的CSS类名。 2 removeClass();// 移除指定的CSS类名。 3 hasClass();// 判断样式存不存在 4 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
CSS
1 css("color","red")//DOM操作：tag.style.color="red" 2 //实例 3 $("p").css("color", "red"); //将所有p标签的字体设置为红色 4 //位置 5 offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 6 position()// 获取匹配元素相对父元素的偏移 7 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 (回滚首页按钮) 8 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
回到首页按钮：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>位置相关示例之返回顶部</title> 8 <style> 9 .c1 { 10 width: 100px; 11 height: 200px; 12 background-color: red; 13 } 14 15 .c2 { 16 height: 50px; 17 width: 50px; 18 19 position: fixed; 20 bottom: 15px; 21 right: 15px; 22 background-color: #2b669a; 23 } 24 .hide { 25 display: none; 26 } 27 .c3 { 28 height: 100px; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="c1"></div> 34 <div class="c3">1</div> 35 <div class="c3">2</div> 36 <div class="c3">3</div> 37 <div class="c3">4</div> 38 <div class="c3">5</div> 39 <div class="c3">6</div> 40 <div class="c3">7</div> 41 <div class="c3">8</div> 42 <div class="c3">9</div> 43 <div class="c3">10</div> 44 45 <button id="b2" class="btn btn-default c2 hide">返回顶部</button> 46 <script src="jquery-3.3.1.min.js"></script> 47 <script> 48 // 当屏幕滚轮向下滚动的时候就触发scroll事件 49 $(window).scroll(function () { 50 // 判断 window 距离屏幕顶部的距离是否大于100 51 if ($(window).scrollTop() > 100) { 52 $("#b2").removeClass("hide"); 53 }else { 54 $("#b2").addClass("hide"); 55 } 56 }); 57 58 $("#b2").on("click", function () { 59 // 点击返回顶部按钮的时候，让屏幕滚动到最上面 60 $(window).scrollTop(0); 61 }) 62 </script> 63 </body> 64 </html>
尺寸：
1 height() 2 width() 3 innerHeight() 4 innerWidth() 5 outerHeight() 6 outerWidth() 7 8 //例子 9 <html> 10 <head> 11 <meta charset="utf-8" /> 12 </head> 13 <body> 14 <p id="p1" style="background-color:yellow">This is a paragraph.</p> 15 <button class="btn1">改变高度</button> 16 <script type="text/javascript" src="jquery-3.3.1.min.js"></script> 17 <script> 18 var $botm = $(".btn1"); 19 $botm.on("click",function () { 20 $("#p1").height(50); 21 }); 22 </script> 23 </body> 24 </html>
文本操作
1 //html代码 2 html() // 取得第一个匹配元素的html内容 3 html(val) // 设置所有匹配元素的html内容 4 5 //文本值 6 text()// 取得所有匹配元素的内容 7 text(val)// 设置所有匹配元素的内容 8 9 //值 10 val()// 取得第一个匹配元素的当前值 11 val(val)// 设置所有匹配元素的值 12 val([val1, val2])// 设置checkbox、select的值 13 14 //示例 15 <label for="c1">女</label> 16 <input name="gender" id="c1" type="radio" value="0"> 17 <label for="c2">男</label> 18 <input name="gender" id="c2" type="radio" value="1"> 19 20 //获取checkbox或者radio的值 21 $("input[name='gender']:checked").val()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>jQuery val示例</title> 8 </head> 9 <body> 10 11 12 <label for="s1">城市</label> 13 <select id="s1"> 14 <option value="beijing">北京市</option> 15 <option value="shanghai">上海市</option> 16 <option selected value="guangzhou">广州市</option> 17 <option value="shenzhen">深圳市</option> 18 </select> 19 <hr> 20 <label for="s2">爱好</label> 21 <select id="s2" multiple="multiple"> 22 <option value="basketball" selected>篮球</option> 23 <option value="football">足球</option> 24 <option value="doublecolorball" selected>双色球</option> 25 </select> 26 27 <script src="jquery-3.3.1.min.js"></script> 28 <script> 29 // 单选下拉框 30 $("#s1").val("shanghai"); 31 // 多选下拉框 32 $("#s2").val(["basketball", "football"]); 33 </script> 34 </body> 35 </html>
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>文本操作之登录验证</title> 8 <style> 9 .error { 10 color: red; 11 } 12 </style> 13 </head> 14 <body> 15 16 <form action=""> 17 <div> 18 <label for="input-name">用户名</label> 19 <input type="text" id="input-name" name="name"> 20 <span class="error"></span> 21 </div> 22 <div> 23 <label for="input-password">密码</label> 24 <input type="password" id="input-password" name="password"> 25 <span class="error"></span> 26 </div> 27 <div> 28 <input type="button" id="btn" value="提交"> 29 </div> 30 </form> 31 <script src="jquery-3.3.1.min.js"></script> 32 <script> 33 $("#btn").click(function () { 34 var username = $("#input-name").val(); 35 var password = $("#input-password").val(); 36 37 if (username.length === 0) { 38 $("#input-name").siblings(".error").text("用户名不能为空"); 39 } 40 if (password.length === 0) { 41 $("#input-password").siblings(".error").text("密码不能为空"); 42 } 43 }) 44 </script> 45 </body> 46 </html>
属性操作
1 //用于ID或者自定义属性： 2 attr(attrName)// 返回第一个匹配元素的属性值 3 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 4 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 5 removeAttr()// 从每一个匹配的元素中删除一个属性 6 7 //实例 8 <!DOCTYPE html> 9 <html lang="zh-cn"> 10 <head> 11 <meta charset="UTF-8"> 12 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 13 <meta name="viewport" content="width=device-width, initial-scale=1"> 14 <title>属性操作实例</title> 15 </head> 16 <body> 17 18 <a id="a1" href="http://www.baidu.com">点我直达！</a> 19 <button id="b1">设置连接</button> 20 <input id="i1" type="checkbox"> 21 <script src="jquery-3.3.1.min.js"></script> 22 <script> 23 var $link = $("#b1"); 24 $link.on("click",function () { 25 $("#a1").attr("href","http://www.qq.com"); 26 }) 27 </script> 28 </body> 29 </html>
用户checkbox和radio的方法
1 prop() // 获取属性 2 removeProp() // 移除属性注意：
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
1 <input type="checkbox" value="1"> 2 <input type="radio" value="2"> 3 <script> 4 $(":checkbox[value='1']").prop("checked", true); 5 $(":radio[value='2']").prop("checked", true); 6 </script>