jQuery是一个方法库，可以快速选择dom元素和操作元素。
使用jQuery
1.$(document).ready(function () {}) 代码书写在大括号内即可
ready是一个事件 相当于原生js中的DOMContentLoaded和load事件
$(document)是jquery中获取节点的方式
2.$(function () {}) 代码书写在大括号内即可
如果$()函数与编写的代码中的函数冲突，可以重新定义jQuery中的函数名
var $j = jQuery.noConflict() $j(function () {})
定义$j为新的jQ函数名 代码写在大括号内即可
jQuery中的选择器
1.基本选择器 仿照css选择器的规则，直接在小括号内书写css选择器的写法即可。返回的是jQuery的伪数组对象集合，没有选中节点也会返回空的jQuery的伪数组对象
$("#d1") 获取id为d1的节点
$("p>span") 获取p节点的直接子级span节点
2.过滤选择器
$("ul li:first") 选择所有li里面的第一个li
$("ul li:last") 选中所有li的最后一个li
$("ul li:eq(2)") 选中所有li里面的第三个li，这里的数字代表的是下标，从0开始
$("ul li:empty") 选中所有li里内容为空的li
$("ul li:even") 选中所有li里下标为奇数的li
$("ul li:odd") 选中所有li里下标为偶数的li
$("ul li:contains(5)") 选择所有li里内容函数5的li
3.属性过滤器
$("a[name]") 选中所有a节点中属性有name的a节点
$("a[href^=http]") 选中所有a节点中属性有href且href属性的属性值开始是http的a节点
$("a[href$=php]") 选中所有a节点中属性有href且href属性的属性值结尾是php的a节点
$("a[href*=php]") 选中所有a节点中属性有href且href属性的属性值中含有php的a节点
jQuery中的dom转化
原生JS中的dom不能使用jQuery中的dom方法
反之jQuery中的dom方法也不能使用原生JS中的方法
需要转换才能使用
1.jQuery中的dom转换为原生JS的dom
获取原生JS后，使用.name获取name值
$(dom)[0].name
2.原生JS中的dom转换成jQuery中的dom，使用.name获取值
$("dom")[0].name
$()方法接收的参数是多种
1.字符串，代表选择器，返回$dom
2.节点，代表原生dom，返回$dom
3.函数，代表ready事件的执行，没有返回值
jQuery链式操作
JS中的链式操作
const obj = {
f() {
console.log("f")
return this;
},
// 指定获取值的方法
g() {
console.log("g")
return this; //如果注释的是this 表示返回的是字符串
// return "hello world"; //如果注释hello world 表示返回的是obj对象
},
h() {
console.log("h")
return this;
}
}
obj.f().g().h(); //如果g方法返回为字符串输出结果为h is not a function，因为字符串中没有 //function方法
jQuery中的链式操作
在jquery中方法执行完后 如果没有明确的返回值要求 则返回当前的dom元素
这样的话就不需要手动书写return this
点击表单框之后控制台输出“开始输出”，点击其他元素后控制台输出“输出完毕”
$("input").click(function () {
console.log("开始输出")
}).parent().end().change(function () {
console.log('输出完毕')
})
parent() -- dom元素的父节点，end() -- 获取前一个dom元素 ，change() -- 改变内容时的事件
链式选择器
$("ul li:first") 正常使用jQuery选择器
$("ul li").first() 选择完所有li之后，链式调用li，选出第一个li
节点查找
$("li:first").parent() 第一个li的父节点
$("li:eq(1)").siblings() 第二个li的所有兄弟节点
$("li:first").next() 第一个li的下一个兄弟节点
$("li:first").nextAll() 第一个li的下面的所有兄弟节点
表单域选择器
$("input:radio") 获取单选框
$("input:checkbox") 获取多选框
$("input:radio:checked") 获取单选框的选中项
$("input:checkbox:checked") 获取多选框的选中项
