JQuery概述
*是一个javascript的简洁框架，它的宗旨是"write less,do more"。它简化了javascript代码，封装了javascript的功能，提供了设计模式，优化了html文档操作，事件处理，动画设计和Ajax的交互
*JavaScript框架：本质上是一些js文件，封装了js的原生代码.
jQuery的使用
1.导入 JQuery 的 js 文件
1.导入min.js 文件，我使用的是 jquery-3.3.1.min.js 版本
2.在项目中创建js目录，把 jquery-3.3.1.min.js 复制到目录中去
3.在HTML页面导入：<script src="js/jquery-3.3.1.min.js"></script>
2.jquery-xxx.js 与 jquery-xxx.min.js区别：
1.jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
2.jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快
3.JQuery对象和JS对象区别
1.JQ对象操作更加简便
2.JQ对象功能更多
3.JQ对象和JS对象不通用
4.JQuery对象和JS对象转化
1.JS转化为JQ
JQ=$(JS对象)
2.JQ转化为JS
JS=JQ[索引]
JS=JQ.get(索引)
JQuery的使用
我是VIP1
我是VIP2
事件绑定&入口函数&样式控制
1.事件绑定
$("#div").onclick(function(){方法体});
2.入口函数
$(function(){方法体})
3.css样式
$(function(){$("#div").css("backgroundColor",red)})
选择器
筛选具有相似特征的元素(标签)
1.基本选择器
1.标签选择器
*语法：$("标签名") 获得所有匹配标签名的元素
2.类选择器：
*语法 $(".class")
3.id选择器
*语法 $("#id")
4.并集选择器
*语法 $("选择器1,选择器2");
2.层次选择器
1..后代选择器
*语法 1.$("选择器1 选择器2")
2.$("选择器1>选择器2")
2.相邻兄弟选择器 $("选择器1+选择器2") 获取选择器1后面的选择器2
3.通用兄弟选择器 $("选择器1~选择器2") 获取选择器1到选择器2的所有选择器
4.兄弟姐妹选择器 语法： $("A").siblings("B") 选择A元素前后的所有B元素(同级)
3.属性选择器
1.属性名选择器 包含指定属性的选择器
$("A[属性名]")
2.属性值选择器 包含指定属性等于指定值的选择器
$("A[属性名='属性值']")
3.复合属性选择器 包含多个属性条件的选择器
$("A[属性名='属性值'][]....");
4.过滤选择器
1.首元素选择器
$("A:frist");
2.尾元素选择器
$("A:last");
3.偶数选择器
$("A:even")
4.奇数选择器
$("A:odd")
5.等于索引选择器
$("A:eql(index)")
6.大于索引选择器
$("A:gt(index)")
7.小于索引选择器
$("A:lt(index)")
8.标题选择器
$("header")
jQuery的DOM操作
1、文本 / 值 操作
html(),text(),val()
JQuery对象==JS对象
html() ———— innerHTML
text() ————innerText
val() ————value
1.html(): 获取/设置元素的标签体内容 (包含元素的子标签和文本)
2.text(): 获取/设置元素的标签体纯文本内容
3.val()： 获取/设置元素的value属性值
2、属性操作：attr(),prop()
1.通用属性操作
attr() === setAttribute和getAttribute
attr(属性名称); — 获取属性的值
attr(属性名称,属性值) — 设置的属性的值
1.attr(): 获取/设置元素的属性
2.removeAttr():删除属性
3.prop():获取和设置元素的属性
4.removeProp():删除属性
attr和prop区别？
1. 如果操作的是元素的固有属性，则建议使用prop
2. 如果操作的是元素自定义的属性，则建议使用attr
2.class属性操作：css(),addClass(),removeClass()
addClass（值） === attr(“class”,值)
removeClass（class值） === removeAttr（“class值”）
css() ==== js对象.style.属性
css(css属性名) 获取css属性名称对应值
css(css属性名,值) 设置css样式
1.addClass():添加class属性值
2.removeClass():删除class属性值
3.toggleClass():切换class属性
4.css():样式修改
3、CRUD操作
1.append():父元素将子元素追加到末尾
对象1.append(对象2)：将对象2添加到对象1内部.并且在尾部
2.preappend()：父元素将子元素追加到开头
对象1.preappend(对象2):将对象2添加到对象1内部，并且在开头
3.appendTo()：
对象1.appendTo(对象2):将对象1添加到对象2内部，并且在尾部
4.preappendTo()：
对象1.preappendTo(对象2):将对象1添加到对象2内部，并且在开头
5.after():添加元素到元素后边
对象1.after(对象2):将对象2添加到对象1的后边，兄弟关系
6.before():添加元素在元素前边
对象1.before(对象2):将对象2添加到对象1的前边
7.insertAfter()
对象1.insertAfter(对象2):将对象1添加到对象2的后边，兄弟关系
8.insetBefore()
对象1.insertBefore(对象2)：:将对象1添加到对象2的前边
9.remove():移除元素
对象1.remove()：对象1被移除
10.empty():清空元素的所有后代元素
对象1.empty():将对象1的后代的元素全不清空，但保留当前对象以及属性节点