jQuery教程（持续更新）

jQuery

推荐编辑器VS code / hbuilder

在线编辑：https://sou.zhuyansong.com/dm/ 请选择库为JQuery

引言：
在前端中，JavaScript起到一个操控页面DOM的作用，作为一个脚本语言，他的代码量其实很大，在网页中，JavaScript操作DOM只能单独获取，效率极低，在多个同名对象时还需要遍历去找
而JQuery 虽然也只是一种基于JavaScript的客户端脚本库，也是通过CSS 选择器来选取元素。但是呢他将js繁琐的代码封装成了简单的方法供你调用。
说白了，JQuery其实呢就是JavaScript的一个代码集合，也就别人帮你写好了封装代码让你直接调用。就如同你学习JAVA时JDBC为什么可以越来越简单就是因为有人写好了第三方类让你直接用一个道理。
所以我们学习jQuery其实也就是为了方便我们自身，让写代码时更简单。（当然，其实jQuery也是过时的东西快淘汰了，现在流行Vue这种虚拟DOM而不是修改一点东西重新渲染整个页面...）

归纳一下JavaScript和jQuery 的区别
按道理说起来，jQuery确确实实全面优于原生的JS，挑较为明显的区别则可总结如下几点
代码复杂度：
js 代码复杂，就比如一个简简单单的获取元素，js是document.getElementById/name等，抛开难记，打字就要打不少，代码量过大。
jQuery代码简洁易记
容错率：
js的容错率很低，作为一个解释性语言，它的代码明明分工不同，但是如果在某一行出错，后面的所有代码便都会失效。
而jQuery则拥有较高容错率，前面的代码错了，并不影响后续的代码。
兼容性：
其次就是原生js对于浏览器的兼容性较差
而jQuery的方法则几乎兼容所有浏览器（包括IE）。

入门：
使用JQuery，必须先引入JQuery库！
如果开发环境有网络，可以直接引入CDN的库如：<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
如果开发环境没有网络，可以从 jquery.com 下载 jQuery 库然后本地引入 <script src="jquery-2.1.4.js"></script>

HTML CSS中 .代表class选择器 #代表ID选择器而标签名则是标签选择器,也称为元素选择器
ID选择器 > 类选择器 >标签选择器

0.jQuery中的$到底是什么？
在开始整个语法讲解之前，先从jQuery的这个标志性的符号开始说起吧！
$其实就代表jQuery，它是jQuery的别称。
而jQuery则是jQuery中提供的一个方法——包装器
$最重要的作用就是可以利用选择器来操作DOM元素。

1.JQuery选择器

JQuery的语法即通过CSS选择器来进行选取元素（注解：元素即HTML文档中的标签，如<a>,<p><h1>都是元素）执行操作，且JQuery所有的选择器都以美元 $ 符号开头
如下示例：
$("p") 标签选择器选择所有的<p>元素
$(".aa1") 类选择器选择所有类名为.aa1的class元素
$("#aa1") ID选择器选择所有ID为aa1的ID元素

元素的条件选择特性
如果某个 HTML文档中有多个div和<p>标签元素，我们想要选择某个div中的<p>标签就需要用到如下操作
$(".aa1 p") 即选择类名为.aa1的class元素中的所有<p>标签元素两个元素直接用空格隔开

如果需要选择一个div中的第一个<p>标签元素则可以
$(".aa1 p:first") 即选择类名为.aa1的class元素中的第一个<p>标签元素两个元素直接用空格隔开顺序条件用冒号
如果需要选择一个div中的最后一个<p>标签元素则可以
$(".aa1 p:last") 即选择类名为.aa1的class元素中的最后一个<p>标签元素两个元素直接用空格隔开顺序条件用冒号
那么问题来了如果我们要选择第二个和倒数第二个我们应该怎么做呢？这就需要用jQuery 的 eq() 方法！

2.JQuery选择器 eq（）方法
eq方法语法： $(选择对象).eq(索引) 即选择对象中的第几个，如果索引为负数则为倒序查找！
如选择一个div中的第二个个<p>标签元素则可以
$(".aa1 p").eq(2) 即选择类名为.aa1的class元素中的第二个<p>标签元素两个元素直接用空格隔开调用方法需要在选择器外通过.实现
也可以$(".aa1 p:eq(2)")

3.JQuery 函数 function
同于JavaScript，jQuery也将原生js的函数重新优化。

3.1 入口函数
入口函数，即在程序开始时执行的函数，比如Java中的main 主方法。
原生的JavaScript 入口函数写法为 windows.onload 该函数无法存在多个，如果存在多个，后面的会覆盖前面的，使得前面的失去有效性。
windows.onload =function(){
alert("hello world");
}; //（文档加载完毕，图片也必须加载完毕的时候才开始执行）不允许有多个，如有多个，后者覆盖前者

而jQuery则可以存在多个入口函数
jQuery的入口函数有两种写法：
第一种：基本入口函数（也是入口函数最简单的写法）
$(function ( ) ){
alert("hello world");
}; //文档加载完毕后执行。（文档加载完毕，图片不加载的时候即开始执行）允许有多个此种入口函数

第二种：事件函数
此方法是通过事件触发函数。其实就是通过选取器选取整个网页文档，在网页文档加载完成后执行函数。此方法还可以有更高阶的用法，ready是一个事件，他也可以写成click——点击时执行或其他事件
$(document).ready(function () {
alert(1);
}) //即在文档加载完毕后执行。（文档加载完毕，图片不加载的时候即开始执行）允许有多个此种入口函数