jQuery相关文档
1、官网 https://jquery.com/
2、文档API：http://jquery.cuishifeng.cn/index.html
jQuery基本使用
1、引入
下载地址：https://jquery.com/download/
BootCDN jQuery各个版本地址： https://www.bootcdn.cn/jquery/
#方式一：本地引入
<script src="jquery-3.3.1.min.js"></script>
<script>
//注意，一定在引入jQuery之后，再使用jQuery提供的各种操作
</script>
#方式二：直接使用CDN
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
code...
</script>
2、jQuery对象
$是jQuery的别名
jQuery('.item').show()
//等同于
$('.item').show()
3、文档就绪事件
DOM文档加载的步骤：
1、解析HTML结构
2、加载外部脚本和样式表文件
3、解析并执行脚本代码
4、DOM树构建完成
5、加载图片等外部文件
6、页面加载完毕
等到文档加载完毕后执行函数，有两种方式
#1、执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
#2、编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
#3、简化写法不同
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
4、链式操作
原理：调用一个实例化方法返回的是当前的对象
$("#d1").first().css("color","red").next().css("color","yellow")
**5、jQuery DOM与js DOM的转换
js DOM：通过原生js获取的dom对象
jq DOM：通过jq选择器获取的dom对象
var divEle = document.getElementById("d1")
#1、Js DOM对象 ==> JQ DOM对象
$(divEle)
#2、JQ DOM对象 ==> JS DOM对象
$(divEle)[0]或者$(divEle).get(0)
选择器
1、基本选择器
$("#id") #id选择器
$(".className") # 类选择器
$("tagName") # 标签选择器
$("*") # 所有元素选择器
2、组合选择器
$("div.c1") # 找到类为c1的div标签
$("#id, .className, tagName") # 找到满足以上三个属性的所有标签
3、层级选择器
$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
4、基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(选择器)// 过滤掉所有满足not条件的标签
:has(选择器)// 过滤出所有后代中满足has条件的标签
5、表单常用筛选
:text
:password:file
:radio
:checkbox
:submit
:reset
:button
#例子
$(":checkbox") // 找到所有的checkbox
#表单对象属性:
:enabled
:disabled
:checked
:selected
#例子
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
筛选器
下一个兄弟元素：
$("#id").next() # 下一个
$("#id").nextAll() # 下面所有
$("#id").nextUntil("#i2") # 下一个直到id为i2的标签
上一个兄弟元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
查找
$("div").find("p") # 找到所有div标签中含有p标签的标签
等价于 $("div p")
筛选
$("div").filter(".c1") # 所有div标签中过滤出有c1样式类的标签
等价于 $("div.c1")
补充
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
标签操作之样式操作
样式类
addClass() // 添加指定的css类名
removeClass() // 移除指定的css类名
hasClass() // 判断样式存不存在
toggleClass() // 切换css类名，有则移除，无则添加
css
css("color","red")
#例子
$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置
offset() //标签相当于当前窗口的位移
position() //标签相当于父标签的位移
$(window).scrollTop() //右侧滚动条距离顶部的距离,括号里有参数代表设值
$(window).scrollLeft()
尺寸
height() // 文本高度
width() // 文本宽度
innerHeight() // 文本+padding
innerWidth()
outerHeight() // 文本+padding+border
outerWidth()
标签操作之文本内容操作
html
html() 是获取选中标签元素中所有的内容
html(val) 设置值
text
text() 获取所有匹配元素包含的文本内容
text(val) 设置文本内容
注意：值为标签时，不会被渲染为标签元素，只会被当作值渲染到浏览器中
val
vai() 用于操作input的value值
标签操作之属性操作
用于id等或自定义属性
attr(attrName) // 返回第一个匹配元素的属性值
$('.box2 img').attr('title','美女') // 为所有匹配元素设置一个属性值
attr({'title': '美女', 'alt':'图片被狗吃了'}) // 为所有匹配元素设置多个属性值
removeAttr('title') // 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop('value') // 获取value属性的值
prop('checked',true); // 设置属性
removeProp('value') // 移除value属性
标签操作之文档处理
//内部
$(A).appendTo(B) // 把A追加到B内部的最后面
$(A).prependTo(B) // 把A前置到B内部的最前面
//外部
$(A).insertAfter(B) // 把A放到B外部的后面
$(A).insertBefore(B) // 把A放到B外部的前面
===========================
//内部
$(A).append(B) // 把B追加到A内部的最后
$(A).prepend(B) // 把B前置到A内部的最前面
//外部
$(A).after(B) // 把B放到A外部的后面
$(A).before(B) // 把B放到A外部的前面
了解
移除和清空元素
$('.p1').remove() // 从DOM中删除所有匹配的元素。====>把元素本身删掉
$('.p1').empty() // 删除匹配的元素集合中所有的子节点====》把元素的子元素都删掉（包含文本内容）
替换
replaceWith()
replaceAll()
克隆
clone()
// clone方法不加参数true，克隆标签但不克隆标签带的事件
// clone方法加参数true，克隆标签并且克隆标签带的事件
事件
#绑定事件
#方式一
$("#d1").click(function () {
alert("...")
})
#方式二
$("#d1").on("click",function () {
alert("...")
}) // 支持事件委托
#this指代的是当前被操作的标签对象
$(this).clone().insertAfter（$('boy')）//clone默认情况下只克隆html和css，不克隆事件
$(this).clone(true)...... // 括号内加true即可克隆事件
