我们都知道JavaScript有很多库和框架，那么JQuery到底是来干什么的呢？ JQuery概况为是一个流行的通用库。
通用 JavaScript 库提供适应任何需求的功能
所有通用库都致力于通过将常用功能封装为新 API 来补偿浏览器接口、弥补实现差异。其中有些 API 与原生功能相似，而另一些 API 则完全不同。通用库通常会提供与 DOM 的交互，对 Ajax 的支持，还有辅助常见任务的实用方法。
1.2JQuery的引入和简单使用
JQuery的引入
JQuery的引入通常有两种，一种是用script标签；一种是使用npm引用；我们介绍第一种引用方式
script标签，实例：
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
可以注意到其中script标签存在integrity和crossorigin属性，JQuery官网的解释：
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libraries are loaded from a third-party source.
大概意思是：integrity和crossorigin属性保证资源不被篡改，可用于SRI检测
SRI检测，子资源完整性（SRI）的检查， Subresource Integrity (SRI) checking
SRI英文参考：https:
crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin=
"anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据
标志，意味着出站请求会包含凭据。
integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，
Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，
脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提
供恶意内容。
JQuery的简单使用
<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery的初步使用</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</head>
<script>
$().ready(function() {
alert('第一种写法');
jQuery().ready(function() {
alert("第二种写法");
$(function() {
alert("第三种写法");
$(document).ready(function() {
alert("第四种写法");
</script>
</body>
</html>
2.对HTML节点元素的选定、遍历
JQuery的基本格式
例子： $("p").html("文字内容：1111<h1>222</h1>");
第一部分：选择器，即("p")
第二部分：改变的类型，html、css、click
第三部分：改变的内容，("改变的文字内容")、(function() {alert("点击触发的函数");})
基本选择器的基本使用
基本选择器，通配符(*)、标签名(p、div……)、id、class、混合（p, #id）
$("h1")、$("p")、$("h1,p,div")
$("h1").html("<h2>测试</h2>");
$("p").html("<h2>测试</h2>");
$("h1,p,div").html("<h2>测试</h2>");
层次选择器的基本使用
层次选择器，后代元素、子元素、兄弟元素
$("p span")、$("p>span")、$("p+div")、$("p~div")
$("p span").html("捕捉到");
过滤选择器的基本使用
过滤选择器，基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤。
特征：以冒号开头
$("div:last")
$("div:last").css("color", "blue");
$("div:contains('好看')").css("color", "red");
$("div:visible").css("fontSize", "28px");
$("div[class]").css("background", "white");
$("ul li:nth-child(1)").css("background", "yellow");
$("input:checked").css("width", "100px").css("height", "100px");
文档的遍历、元素追加限制的基本使用
1.遍历：常用的each()来迭代
$(selector).each(function(index,element){})
$("div").each(function(index, element) {
console.log(element.innerHTML);
alert(element.innerHTML + index + "测试");
2.元素追加限制：即在获取元素后，可根据元素继续获得如祖先、后代、同胞或继续限定元素
常用场景，this代表的元素想要获取相邻元素时
例子：$(this).next().css("backgroundColor", "blue")
$("ul li:eq(1) button").click(function (e) {
console.log(this);
console.log(e.target);
console.log($(this)[0]);
console.log($(".show_items+div")[0]);
console.log($(this).css("color", "red"));
console.log($(this).next().css("backgroundColor", "blue"));
3.对HTML属性的修改、内容的操作、节点的操作
HTML属性的修改
HTML属性的修改，基本属性 class属性 表单value属性、css属性
1.基本属性，文档元素属性的获得、设置、删除
2.class属性，CSS样式的添加、移除和添加移除开关
3.表单value属性，获取、设置
console.log($("input").attr("type"));
$("input").attr("hello", "world");
$("input").removeAttr("hello", "world");
$(".show_result").html("DOM文档操作之元素样式属性操作");
$("div").toggleClass("show_result");
$("input[type=text]").val("show_result");
内容的操作
操作元素内容的方法主要包括html()和text()方法。
1.html()方法用于获取或设置元素的HTML内容，
2.text()方法用于获取或设置元素的文本内容。
console.log($("div").text());
console.log($("div").html());
$("div").text("<h1>我来测试来了<h1>");
$("div").html("<h1>我来测试来了</h1>");
节点的操作
文档节点操作，节点的追加、节点的替换、节点的删除、节点的复制、节点的包裹
$("#id_test").append("1");
$("#id_test").prepend("<h1>2</h1>");
$("<h1>3</h1>").appendTo("#id_test");
$("<h1>4</h1>").prependTo("#id_test");
$("#id_test").after("<h1>5<h1>");
$("#id_test").before("<h1>6<h1>");
$("<h1>7</h1>").insertAfter("#id_test");
$("<h1>8<h1>").insertBefore("#id_test");
$("<h1>替换测试2</h1>").replaceAll("#id_test");
$("div").empty();
$("div").remove();
$('li:eq(0)').clone().appendTo('ul');
$('li:eq(0)').clone(true).appendTo('ul');
$('ul').append($('li:eq(0)').clone(true));
console.log($('li:eq(0)').clone(true));
$("li").wrap('<div></div>');
$("li").wrap('div');
$("ul").wrapAll('div');
$("ul").wrapInner('h1');
4.事件、动画、AJAX的使用
事件的使用
事件类型：页面加载、点击、移入、移出、移动、获取焦点、提交（submit）、选择（select）
$("button").click(function() {
alert("点击事件测试");
动画的使用
speed：slow、fast、固定值
easing：swing、linear
function：完成动画执行的函数
opacity：透明度
$("button").click(function() {
$('ul').toggle('slow','linear');
});
AJAX的使用
方法\说明
load(url,[data],[function]) 载入远程HTML文件代码并插入至DOM元素中
$.ajax(url,[settings]) 通用的Ajax方法，可发送请求并载入数据
$.get(url,[data],[function],[type]) 通过GET方式发送请求并载入数据
$.post(url,[data],[function],[type]) 通过POST方式发送请求并载入数据
$.getJSON(url,[data],[function]) 通过GET方式发送请求并载入JSON数据
$.getScript(url,[function]) 通过GET方式发送请求并载入JavaScript数据
$.ajax('jquery.html', {
data: {name: 'wpk', test: '666'},
success: function(msg) {
alert("ajax测试成功");
console.log(msg);
1.Web高级编程老师的PPT
2.w3school，遍历，www.w3school.com.cn/jquery/jque…
3.jquery官网，jquery的cdn引入及说明，code.jquery.com/
