一、概述：
简介：
jquery是一个优秀的javascript的轻量级框架，兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作。
并且 jquery的插件非常丰富，大多数功能都有相应的插件解决方案。
Jquery就是1个js文件，只不过它对JS进行了简化。Jquery由美国人John Resig在2006年创建。
官网：jquery.com/
分为1.X、2.X、3.X三个大版本，提供的方法基本一致，只不过2.X 3.X不再兼容IE 6、7、8之类的低版本浏览器。
宗旨：
Write less, do more. 写得少，做得多。
特性：
jQuery 是一个 JavaScript 函数库。
引入：
<script src="./jquery-1.11.1.min.js"></script> //该标签如果用来引包，里面不允许写任何js语句！
二、jQuery的选择器
1、基本选择器
ID选择器：$("#myDiv") 匹配唯一的具有此id值的元素
类选择器：$(".myClass") 匹配具有此类样式值的所有元素
标签选择器：$("div") 匹配指定标签名称的所有元素
通配符选择器：$("*") 匹配所有元素
并集选择器：$("div,span,p.myClass") 联合所有匹配的选择器
交集选择器：$("p.myClass") 匹配到p标签里面的类名 不常用
举例说明
/* 标签选择器 */
/* $("h2" )选取所有h2元素 */
console.log( $('h1') )
$('h1').css('color','red');
/* class选择器 */
/* $(" .title")选取所有class为title的元素 */
// for(var i=0;i<document.querySelectorAll('.a').length;i++){
// document.querySelectorAll('.a')[i].style.background = 'red';
// }
console.log( $('.a') );
$('.a').css('background','red');
/* id选择器 */
// $('#box').css('font-size','40px');
$('#box').css({color:'red',background:'green',padding:'10px'})
/* 并集选择器 */
$('#box,.a,p').css('color','green');
console.log( $('#box,.a,p') )
/* 全局选择器 */
$('*').css('background','red');
console.log( $('*')[13] )
2、层级选择器
后代选择器：$("form input") 后代选择器，选择ancestor的所有子孙节点
子代选择器：$("#main > span")main下一级的的所有span子节点
兄弟选择器：$("label + input") 兄弟相邻选择器，选择所有label相邻的第一个input节点
兄弟选择器：$("#prev ~ div") 相邻后边的所有，选择prev的所有后面的div同胞节点
举例说明
/* 后代选择器 */
/* 选取ancestor元素里的所有descendant（后代）元素 */
$('ul li').css({background:'#e8f0f2',color:'#fff'})
/* 选取parent元素下的child（子）元素 */
$('ul>li').css({border:'1px solid red',padding:'10px'})
/* 相邻元素选择器 */
/* 选取紧邻prev元素之后的next元素(不是一群 是一个) */
$('.a+li').css('background','#e8f0f2');
/* 同辈元素选择器 */
/* 选取prev元素之后的所有siblings元素(不是一个 是一群) */
$('.a~li').css('background','red');
3、筛选选择器，也是过滤选择器
$("li:first") 匹配第一个选择的li元素
$("li:last") 匹配最后一个选择的li元素
$("li:not(:first)")选择除了第一个标签之外的所有li标签
$("li").eq(4)选择第5个li标签 索引0开始
$("td:eq(2)") 匹配集合中指定位置的元素(从0开始)
$("li:odd") 选择索引为奇数 索引0开始
$("li:even") 选择索引为偶数的li标签 索引0开始
$("li:lt(3)") $("li:gt(3)")选择索引大于或者小于3的所有li标签
$(":animated") 获取正在执行动画效果的元素
举例说明：
/* 选取第一个元素 */
$('ul li:first').addClass('bg');
/* 选取最后一个元素 */
$('ul li:last').addClass('bg');
/* 选取去除所有与给定选择器匹配的元素 */
$('ul li:not(.a)').addClass('bg');
/* 选取索引是偶数的所有元素（index从0开始） */
$('ul li:even').addClass('bg');
/* 选取索引是奇数的所有元素（index从0开始） */
$('ul li:odd').addClass('bg');
/* 选取索引等于index的元素（index从0开始） */
$('ul li:eq(1)').addClass('bg');
/* 选取索引大于index的元素（index从0开始）(不包括当前的索引的) */
$('ul li:gt(1)').addClass('bg');
/* 选取索引小于index的元素（index从0开始）(不包括当前的索引的) */
$('ul li:lt(3)').addClass('bg');
/* 选取所有标题元素，如h1~h6 */
$('ul li :header').addClass('bg')
4、属性过滤选择器
$("div[属性]") 匹配所有具有指定属性的元素
$("input[name ='newsletter']") 匹配所有具有指定属性值的元素
$("input[name !='newsletter']") 匹配所有不具有指定属性值的元素
$("input[name ^='news']") 匹配所有指定属性值以news开头的元素
$("input[name $='letter']") 匹配所有指定属性值以letter结尾的元素
$("input[name *='man']") 匹配所有指定属性值含有man字符的元素
$("input[属性1 =“值”][name2 $= 'man']") 匹配同时符合多个选择器的所有元素
5、父子元素过滤器
$("ul li:nth-child(2)"), 匹配所有li标签的索引为2的li元素，索引0开始
$("ul li:nth-child(odd)"), 匹配所有li标签的奇数元素
$("ul li:nth-child(3n + 1)") 匹配所有li标签的第4,7,11元素
$("div span:first-child") 匹配所有span标签的第1个span元素
$("div span:last-child") 匹配所有span标签的最后一个span元素
parent() 获取指定标签的父节点
parents() 获取指定标签的祖先节点 父节点以上都是 传参如果指定祖先哪个就是哪个
parentsUntil() 获取指定标签的祖先节点直到...为止（不包含自己）
children() 获取指定标签的所有子节点
siblings() 获取指定标签的兄弟节点 除了自己以外的所有兄弟
$(当前元素).find(所有的后代元素)查找获得当前元素集合中每个元素的后代必须参数
/* find是找父元素下面的匹配的子集 */
$('ul').find('p').css('font-size','30px');
三、jQuery css操作的样式
1、css方法
语法:
第一种：$("元素名称").css(' name') 获取第一个匹配元素的样式属性。
第二种：$("元素名称").css(' name'，'value') 设置样式属性
第三种：是以对象的形式写多种样式
$('#box').css('background','red');
//以对象的形式写
$('#box').css(
{
background:'red',
fontSize:'30px', //注意(font-size)这种的需要驼峰命名的写法
color:green
}
);
2、addClass方法
语法：$("p").addClass('属性名1 属性名2'); 给某个元素添加一个类名，可以是多个类名
3、removeClass方法
语法：语法：$("p").addClass('属性名1 属性名2'); 给某个元素删除一个类名，可以是多个类名
4、toggleClass方法
语法：$("元素名称").toggleClass(“class”) 如果存在类就删除，如果没有就添加一个类
//鼠标移入
$('div').mouseover(function(){
/* 添加样式 */
// $(this).addClass('fs td bg')
/* 当你没有toggleClass参数里面的class的时候，你摸上去就会帮你addClass（添加样式） */
$(this).toggleClass('fs td bg')
})
//鼠标移出
$('div').mouseout(function(){
/* 移除样式 */
/* removeClass 没有参数表示默认删除所有样式 ，加具体的class参数，表示删除指定的class类名 */
// $(this).removeClass('bg')
/* 当你存在toggleClass参数里面的class的时候，你摸上去就会帮你removeClass（移除样式） */
$(this).toggleClass('fs td bg')
})
5、hasClass方法
语法：$("元素名称").hasClass(“class”) 查询指定的标签中是否有指定的类，有返回true，没有则返回false；
/* hasClass( )方法来判断是否包含指定的样式 */
let flag = $(this).hasClass('a');
console.log(flag);
/* if括号里面为true才能执行，所以第一个是判断是否存在，为true表示存在，存在就删掉，else表示不存在，不存在就加上样式 */
四、获取内容和修改内容的方法 text()和html()
1、$("元素名称").text() 如果没有内容则获取到元素的内容
$("元素名称").text('value') 有内容则修改该元素的内容为value
2、$("元素名称").html() 如果没有内容则获取到该元素的内容
$("元素名称").html('value') 有内容则修改该元素的内容为value
/* 设置 内容和标签 */
// document.getElementById('div1').innerHTML = '<h1>我爱学习</h1>'
// $('#div1').html('<h1>我爱和平</h1>')
/* 获取 内容和标签 */
// console.log( document.getElementById('div1').innerHTML );
// console.log( $('#div1').html() );
// text()可以获取或设置元素的文本内容
/* text 和 innerText只能获取内容，获取不了元素 */
// console.log( document.getElementById('div1').innerText );
// console.log( $('#div1').text() );
/* 首先会覆盖#div1内部的内容，然后会把标签也显示在页面上 */
// document.getElementById('div1').innerText = '<p>123</p>'
// $('#div1').text('<p>123</p>')
区别：
一：html()操作的是innerHtml属性节点的内容
text() 操作的是innerText属性节点的内容
二：html如果传递了参数表示设置标签的内容覆盖之前的内容,传递的是标签加内容会覆盖之前的标签和内容
text传递参数是标签，则以文本形式展示
三：html方法没有传参,获取第一个标签的节点内容
text方法没有传参,获取所有标签的文本内容拼接在一起返回
/* 区别 */
<div id="div1"><p>div1</p></div>
<h1>123</h1>
<h1>456</h1>
<h1>789</h1>
// 用于获取第一个匹配元素的HTML内容或文本内容
console.log( $('h1').html() );
// console.log(document.getElementsByTagName('h1')[0].innerHTML)
/* jq html方法 设置可以匹配所有的元素（可以设置多个） */
// $('h1').html('我爱江苏')
// console.log(document.getElementsByTagName('h1'));
/* 原生不可以设置多个 */
// document.getElementsByTagName('h1').innerHTML = 'WOAI'
/* 用于获取所有匹配元素的文本内容 */
// console.log($('h1').text());
/* 原生不可以获取所有匹配元素的文本内容 */
// console.log(document.getElementsByTagName('h1').innerText)
/* 用于设置所有匹配元素的文本内容*/
// $('h1').text('我爱红塔山')
// console.log(document.getElementsByTagName('h1'));
/* 原生不可以设置所有匹配元素的文本内容 */
// document.getElementsByTagName('h1').innerText = '我爱95至尊';
