jQuery简介：
jQuery是一个高效、精简并且功能丰富的javascript库，它提供的API简单易学，且兼容众多浏览器，极大地简化了javascript代码开发，包含内容：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities。
jQuery优点：
- 轻量级。核心文件才几十kb，不会影响页面加载速度。
- 跨浏览器兼容，基本兼容了现在主流的浏览器。
- 链式编程、隐式迭代。
- 对事件、样式、动画支持，大大简化了DOM操作。
- 支持插件扩展开发，有着丰富的第三方的插件。
- 免费、开源。
jQuery 的使用步骤：
1.下载jQuery：
下载jQuery可以到官网地址： https://jquery.com/，选择自己需要的版本，不同版本之间的大概区别如下：
1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本
2.将jQuery文件引入项目：
下载下来的压缩包里面有两种格式jQuery文件，选择以min.js结尾的压缩文件（不压缩也可以，生产环境一般选择压缩文件）并通过script标签推荐引入到head标签中：
<head><script type="text/javascript" src="jquery.min.js"></script><!-- type="text/javascript"可以省略,当然jQuery文件可以使用cdn等网络资源 --></head>
3.在新的script标签中书写jQuery代码：
因为jQuery实际就是封装的javascript代码，因此jQuery代码和javascript代码可以相互书写，但是它们之间有自己的API，不能混淆，如：
<script>// 书写jQuery代码和javascript代码：$('p').text('这是一段文本');function myf(){};</script>
jQuery语法：
入口函数(文档就绪函数)：
因为jQuery在页面未加载完成时，是不能操作DOM元素的，为了避免出现这个问题，jQuery封装了像javascript中onload事件一样的方法，如：
<script>// 第一种: $(function(){书写jquery代码：})，这种比较简洁，推荐使用：$(function() {$('div').text('hello word');});// 第二种:通过$(document).ready()方法实现加载延时，同样在ready()方法的括号中使用function(){书写jQuery代码：}$(document).ready(function() {$('div').text('hello word');});</script>
注意：
1.在jQuery中$就是jQuery的顶级对象，在jQuery中任何$都可以使用jQuery代替（jQuery中的Q是大写），在jQuery中使用jQuery关键字可以解决其他语言中$命名冲突问题；
2.上面的两种方式都是指DOM元素的加载，相当于原生javascript中的DOMContentLoaded方法，并非指的图片等其他引用资源。
jQuery 对象和 DOM 对象实质比较：
jQuery的方法和javascript的方法是不同的，因此不能混淆使用，如DOM元素中的innerHTML和jQuery的html()是不能混淆使用；
jQuery对象和javascript对象也是不同的， 它们之间的实质是：jQuery对象是通过$符号将DOM对象包装后产生的，jQuery对象是一个伪数组。
jQuery 对象和 DOM 对象的相互转换：
因为jQuery对象是通过$包装后生成的，因此：DOM对象转jQuery对象仅需通过$符号或jQuery包裹，如：
<script>var divs = document.querySelector('div');divs.innerText = 'hello';// 通过$将divs这个DOM对象转换为jQuery对象：$(divs).css('color', 'red');</script>
因为jQuery对象实际是以DOM对象为元素的伪数组，因此可以通过索引的方式拿到某个DOM元素，一般索引为0的元素为DOM元素本身，因此一般都是通过[0]的方式将jQuery对象转换为DOM对象，但是jQuery中提供了get(0)方法转换为DOM元素，如：
<script>var $box = $('div');$box.html('hello word');// 通过[0]将jQuery对象转换为DOM对象：$box[0].style.color = 'skyblue';// 通过get()转换为DOM对象：$box.get(0).style.fontSize='20px';</script>
jQuery 选择器:
原生javascript中的选择器存在兼容性问题，而且使用比较单一，jQuery给我们封装了丰富而且没有兼容问题的选择器，其语法：$(‘CSS选择器’)，具体如下：
基础选择器：
<script>// 1标签选择器：$('div').text('hello');// 2.class类选择器：$('.p').html('<a href = "https://www.baidu.com">百度</a>');// 3.id选择器：$('#a').css('color', 'green');// 4.通配符选择器：$('*').css('fontSize', '30px');// 5.并集选择器：$('.p,a,span').css('fontSize', '12px');// 6.交集选择器：$('a.as').css('textDecoration', 'none');</script>
层级选择器：
层级选择器指父级选择器、父代选择器、子级选择器、后代选择器等。
<script>// 1.后代选择器：选中类名为box的div里面所有的p标签$('.box p').css('color', 'blue');// 2.子代选择器：选中类名为box的div的亲子p标签$('.box > p').css('color', 'red');</script>
属性选择器：
属性选择器指通过[‘属性’]表达式进行选择：
<script>// 1.选中具有class属性的标签：$('[class]').css('color', 'red');// 2.选中具有class属性，且class值为li的标签：$('[class="li"]').css('fontSize', '30px');// 3.选中具有href属性，但href值不为#的标签：$("[href!='#']").css('textDecoration', 'none');// 4.选中具有href属性，且href值以.com结尾的标签：$("[href$='.com']").css('display', 'none')</script>
筛选选择器
筛选选择器指的是通过特殊的字符进行筛选：
<script>// 1.选中一组li中的第一个li：$('li:first').css('color', 'yellow');// 2.选中一组li中的最后一个li:$('li:last').css('color', 'red');// 3.选中索引为3的li:$('li:eq(3)').css('color', 'pink');$('li').eq(3).css('fontSize', '28px');// 4.选中索引为奇数的li:$('li:odd').css('backgroundColor', 'skyblue');// 5.选中索引为偶数的li:$('li:even').css('backgroundColor', 'gray');</script>
节点选择器：
节点选择器指类似于DOM中节点的操作，具体如下：
<script>// 1.选中类名为li2的li的父级元素：特别提醒：当某个元素有多层父代元素时parent()括号中可以传入特指的某个父代元素的选择器$('li.li2').parent().css('listStyle', 'none');// 2.选中类名为ul2的ul中的亲子级li:$('.ul2').children().css('listStyle', 'decimal');// 3.找到div里面所有的span（后代选择器）: $('div').find('span').css('color', 'orange');// 4.找到类名为ul2的ul的所有兄弟元素：特别提醒：siblings()括号中可以传入要查找的具体元素的选择器$('ul.ul2').siblings('span').css('fontSize', '30px');// 5.查找id为lia元素的后面所有兄弟元素：$('#lia').nextAll().css('color', 'blue');// 6.查找类名为li2元素的前面所有兄弟元素：$('.li2').prevAll().css('color', 'skyblue');</script>
相同元素多次获取性能损耗问题：
在jQuery中同样的，如果在一个作用域中多次使用$(元素),此时会造成性能损耗，建议和原生javascript中一样将获取的元素通过变量本地化，如：
$('div').show();$('div').hide();//可以将$('div')用一个变量接收，使用时直接用变量即可，因此上面的代码可优化为：$div = $('div');$div.show();$div.hide();
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海
