一、jQuery
1、介绍
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
2、优势
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插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
3、内容
1.选择器
2.筛选器
3.样式操作
4.文本操作
5.属性操作
6.文档处理
7.事件
8.动画效果
9.插件
10.each、data、Ajax
小提示：
1.jQuery官网：https://jquery.com/
2.jQuery中文文档：http://jquery.cuishifeng.cn/
4、jQuery版本
1.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的支持。
5、jQuery对象
1.概述
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。
例如：
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
2.约定
一般情况下我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象
3.jquery对象和dom对象转换
3-1、jQuery对象转成DOM对象：jQuery对象可以通过[index]方法获得相应的DOM对象。
var $divEle = $("#d1"); //得到jQuery对象
var divEle = $divEle[0]; //转换成DOM对象
var divEle = $("#d1")[0]; //转换成DOM对象
jQuery还可以通过.get(index)方法得到相应的DOM对象
var divEle = $divEle.get(0); //转换成DOM对象
3-2、DOM对象转成jQuery对象：用$()将DOM对象包装起来，就能获得jQuery对象了
var divEle = document.getElementById("d"); //得到DOM对象
var $divEle = $(divEle); //转成jQuery对象
二、jQuery之查找标签
基础写法：$(selector).action()
1、基本选择器
id选择器：$("#id")
class选择器：$(".className")
标签选择器：$("tagName")
配合使用：$("div.c1") // 找到有c1 class类的div标签
所有元素选择器：$("*")
组合选择器：$("#id, .className, tagName")
2、层级选择器
x和y可以为任意选择器
$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y") // 找到在x后面的第一个y(毗邻)
$("x ~ y") // 找到x的所有的弟弟y
3、属性选择器
[attribute]
[attribute=value] // 属性等于
[attribute!=value] // 属性不等于
例子：
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type]") // 找到有type属性的input标签
$("input[type='checkbox']"); // 找到type属性等于checkbox的input标签
$("input[type!='text']"); // 找到type属性不是text的input标签
4、基本筛选器
:first // 第一个
:last // 最后一个
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
:not(元素选择器) // 移除所有满足not条件的标签
例1：
$("div:has(h1)") // 找到所有后代中有h1标签的div标签
$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)") // 找到所有不包含c1样式类的li标签(即没有c1样式的li标签)
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签
区别：
![]()
$("div:has(h1)")：先找到所有div标签，然后看div标签的子子孙孙(后代)中是否有h1标签，有则符合条件，选择到的是div标签
比如：
<div>
<h1>符合条件</h1>
</div>
<div>
不符合条件
</div>
$("div:not(.c1)")：先找到所有div标签，然后看div标签的class属性，没有class="c1"的div标签才符合条件，选择到的是div标签
比如：
<div>
符合条件
</div>
<div class="c1">
不符合条件
</div>
has和not
例2：
![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li id="l3">3</li>
<li>4</li>
<li>5</li>
</ul>
<hr>
<div><p>div>p</p></div>
<div class="c1"><span>div>span</span></div>
<div class="c1">
<p>
<span>div>p>span</span>
</p>
</div>
</body>
</html>
HTML代码