一、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>