一、jQuery介绍
1.什么是jQuery
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。使开发者能够更方便的处理HTML文件、事件、实现动画效果,更方便与Ajax交互,能够极大地简化JavaScript,一句话概括为:让开发者更轻松得写JavaScript代码
2.jQuery的优势
1)jQuery的核心代码不到100k,导入的时候不影响网页的加载速度。库中包含丰富的DOM选择器,比起开发者写原生的JS代码更加方便,平常需要几行代码甚至更多才能解决的问题,导入库之后只需要一两行代码就可以轻松实现
2)支持链式表达式,库中的链式操作可以把多个操作写在一行代码内,是代码更加简洁
3)支持事件、样式、动画,简化了JS操作CSS的代码,代码的可读性比JS更强
4)支持Ajax操作,简化了Ajax操作,后端只需要返回一个JSON格式的字符串就能完成与前端交互
5)兼容性好,几本兼容了所有主流的浏览器,无需考虑太多兼容性问题
6)插件扩展开发,拥有丰富的第三方插件,例如树形菜单、日期控件、图片切换插件、弹出窗口等,网页渲染效果更好,可根据需要进行改写和封装插件
3.jQuery版本
1)1.x版本,兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
2)2.x版本,不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
3)3.x版本,不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
4.jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象是jQuery,那么它就可以使用jQuery里的方法,但值得注意的是虽然jQuery是包装DOM后产生的,但是jQuery对象无法使用DOM对象的任何方法,反之DOM对象也不可以使用它的方法
通常情况下,约定声明一个jQuery对象的时候在变量前加上符号:$
var $variable = jQuery对像 var variable = DOM对象 $variable[0] //jQuery对象转成DOM对象
$("ul").html(); //jQuery对象可以使用jQuery的方法 $("ul")[0].innerHTML; // DOM对象使用DOM的方法
二、jQuery应用
1.查找标签
1)选择器
id选择器
$("#idname");
标签选择器
$("tagname");
class选择器
$(".classname");
配合使用
$("tagname.classname"); // 找到有某个类的相应标签
所有元素的选择器
$("*");
组合选择器
$("#id, .classname, tagname");
层级选择器
//x和y可以是任意选择器 $("x y"); // x的所有后代y(子子孙孙) $("x > y"); // x的所有儿子y(儿子) $("x + y"); // 找到所有紧挨在x后面的y $("x ~ y"); // x之后所有的兄弟y
基本选择器
:first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素,从 0 开始计数 :odd // 匹配所有索引值为奇数的元素,从 0 开始计数 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not(元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
// 举例
$("div:has(h1)"); // 找到所有后代中有h1标签的div标签 $("div:has(li)"); // 找到所有后代中有li标签的div标签 $("li:not(li)"); // 找到所有不包含li标签的li标签 $("li:not(:has(a))"); // 找到所有后代中不含a标签的li标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹框和隐藏功能</title> <style> /*隐藏标签*/ .hide { display: none; } /*弹出弹框后改变背景*/ /*.cover {*/ /*position: fixed;*/ /*left: 0;*/ /*right: 0;*/ /*top: 0;*/ /*bottom: 0;*/ /*background-color: wheat;*/ /*z-index: 999;*/ /*}*/ /*弹框的大小、背景*/ .model { width: 500px; height: 500px; background-color: #33cccc; position: fixed; left: 50%; top: 50%; margin-left: -300px; margin-top: -200px; z-index: 1000; } </style> <script src="jQuery/jquery-3.3.1.js"></script> </head> <body> <!--按钮设置--> <input id="touch" type="button" value="按我弹出弹框"> <!--弹框设置--> <!--<div class="cover hide"></div>--> <div class="model hide"> <label for="i1">姓名</label> <input id="i1" type="text"> <label for="i2">联系方式</label> <input id="i2" type="text"> <input id="i3" type="button" value="关闭弹框"> </div> <script> /*移除隐藏标签的属性,打开弹框*/ var tButton = $("#touch")[0]; tButton.onclick = function(){ // var coverEle = $(".cover")[0]; var modelEle = $(".model")[0]; // $(coverEle).removeClass("hide"); $(modelEle).removeClass("hide"); }; /*加入隐藏标签的属性,关闭弹框*/ var cButton = $("#i3")[0]; cButton.onclick = function(){ // var coverEle = $(".cover")[0]; var modelEle = $(".model")[0]; // $(coverEle).addClass("hide"); $(modelEle).addClass("hide"); } </script> </body> </html>
属性选择器
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
<input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']"); // 取到checkbox类型的input标签 $("input[type!='text']"); // 取到类型不是text的input标签
表单
// 表单常用筛选
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
// 表单对象属性 :enabled :disabled :checked :selected
$(":checkbox"); // 找到所有的checkbox <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签 <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option
2)筛选器
下一个元素
$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2")
上一个元素
$("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2")
父亲元素
$("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止
儿子和兄弟元素
$("#id").children(); // 儿子元素 $("#id").siblings(); // 兄弟元素
查找元素
$("#id").find(); // 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
获取元素
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧菜单</title> <script src="jquery-3.3.1.min.js"></script> <style> .menu { width: 20%; height: 100%; background-color: aqua; } .title { text-align: center; padding: 10px; border-bottom: 1px solid white; } .items { background-color: aquamarine; } .item { padding: 5px; border-bottom: 1px solid white; } /*隐藏标签*/ .hide { display: none; } </style> </head> <body> <div class="menu"> <div class="choice"> <div class="title">上海市</div> <div class="items hide"> <div class="item">浦东新区</div> <div class="item">黄浦区</div> <div class="item">静安区</div> </div> <div class="title">广州市</div> <div class="items hide"> <div class="item">天河区</div> <div class="item">越秀区</div> <div class="item">海珠区</div> </div> <div class="title">深圳市</div> <div class="items hide"> <div class="item">福田区</div> <div class="item">南山区</div> <div class="item">罗湖区</div> </div> </div> </div> <script> $(".title").click(function () { $(".items").addClass("hide"); $(this).next().removeClass("hide"); }); </script> </body> </html>