JQuery描述及案例

一、JQuery3.3.1
1、概述
 简介：jQuery是一个快速而简洁的JavaScript库，由John Resig在2006年创建，其中有一个很好的座右铭: Write less, do more 。 jQuery简化了HTML文档遍历，事件处理，动画和Ajax交互，以实现快速Web开发。 jQuery是一个JavaScript工具包，旨在通过编写更少的代码来简化各种任务。

官网：http://jquery.com/

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

宗旨：Write less, do more.    写得少，做得多。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
引入：

<script src="jquery-3.3.1.min.js></script>        该标签如果用来引包，里面不允许写任何js语句！
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    alert("hello world.");
</script>
注：使用jQuery要先引入包、jquery-3.3.1.min.js去注释、缩短了变量等长度、比较小、所以引用这个min.js包

2、入口函数
$()或jQuery() 称之为jq选择器环境，在里面加上引号填写相关选择器即可，就可以获取匹配的元素。

js：window.οnlοad=function(...){}
jq：$(document).ready(function(){...});
$(function(){...});
1.    两者功能都一致，都可以让获取元素的行为发生在渲染元素之后；
2.    JS入口只允许存在一个，书写多个的话，后面的会覆盖前面的；
3.    JQ入口允许存在多个，且并行存在，都会生效；
4.    JS入口需要等待页面上所有资源加载完毕，而JQ入口只需要等待页面上标签渲染完毕即可，JQ入口速度更快。
演示：

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
 
    // JS 页面加载完成
    window.onload = function () {
        alert("test1");
    }
 
    window.onload = function () {
        alert("test2");
    }
 
    // $ 符号就是 jquery 的简写方式.
    // 复杂书写 : 
    $(document).ready(function () {
        alert("test3");
    });
 
    // 简化书写
    $(function () {
        alert("test4");
    })
 
</script>

3、事件
js：js对象.onclick = function(){...}
jq：jquery对象.click(function(){...})
注意：jq中的事件类型统一不要加on
演示：

js代码：

<script src="../js/jquery-3.3.1.min.js"></script>
<s