jQuery是一个JavaScript库，是对ECMAScript、dom、bom的浅封装，让用户更方便操作（可以理解成一个大的函数，函数内部封装了很多函数来供你使用）
jQuery的特点：轻量级、 强大的选择器、 出色的DOM封装、可靠的事件处理机制、 完善的Ajax、 出色的浏览器兼容性、 丰富的插件支持、完善的文档、支持链式操作
jQuery的引入
在www.bootcdn.cn/jquery/中下载库文件到本地
//1.本地引入
<script src="./js/jquery.js"></script>
//2.在线引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
入口函数写法
// jQuery入口有四种写法
// 第一种
jQuery(document).ready(function () {
alert('我是入口函数1')
})
// 第二种
$(document).ready(function () {
alert('我是入口函数2')
})
// 第三种（推荐写法）
jQuery(function () {
alert('我是入口函数3')
})
// 第四种
$(function () {
alert('我是入口函数4')
})
window.onload 和 $(function) 区别
window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
$(function) 可以定义多次的
注意：jQuery查询出来的结果是一个对象数组，就算根据id来进行查询就是返回的是一个对象数组。 数组内存放的是DOM对象。
选择器
jQuery选择器与CSS选择器几乎完全一致
jQuery中所有选择器都是以美元符号开头的：$()
元素选择器
$(function(){
$('button').on('click',function(){
$('.div1').hide();
})
})
<button>点我呀</button>
<div class="div1">one</div>
<div class="div2">two</div>
<div class="div13">three</div>
类选择器
$(function(){
var div1 = $('.div1');
var button = $('button');
button.click(function(){
div1.hide();
})
})
<button>点我呀</button>
<div class="div1">one</div>
<div class="div2">two</div>
<div class="div13">three</div>
id选择器
$(function(){
$('button').click(function(){
$('#div1').hide();
})
})
<button>点我呀</button>
<div id="div1" class="div1">one</div>
<div class="div2">two</div>
<div class="div13">three</div>
事件绑定
on(event,[selector],[data],fn) 事件绑定 off(event,[selector],fn) 解除绑定 one(event,[selector],fn) 只执行一次 trigger(event,[data]) 模拟事件 快捷绑定 click
$(function(){
// 1.事件绑定on
$('.child').on('click',function(){
// this指向dom
console.log(this);
})
// 2.一次事件绑定one
$('.child').one('click',function(){
//this指向dom
console.log(this);
})
// 3.模拟触发事件 trigger，在执行此操作之前应该先绑定事件
$('.child:last-child').trigger('click' )
// 4.解除绑定，在执行此操作之前应该先绑定事件,解绑第二个参数必须是具名函数，匿名函数不可解绑
function handler(){
console.log(this);
}
$('.child').on('click',handler);
$('.child').off('click',handler);
// 4.快速绑定
$('.child').click(function(){
console.log(this);
})
})
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child">three</div>
</div>
事件类型
jQuery中的事件全部都是对js事件的进一步封装，在原来的基础上去除了on
1.click()
当鼠标点击事件被触发时会调用一个函数
2.dblclick()
当双击元素时，会发生dbclick事件
3.mouseenter()
当鼠标指针穿过元素时，会发生mouseenter事件
4.mouseleave()
当鼠标指针离开元素时，会发生mouseleave事件
5.mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件
6.mouseup()
当元素上松开鼠标按钮时，会发生mouseup事件
7.hover()
hover(function(){},function(){})方法用于模拟光标悬停事件 当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）
8.blur()
当元素失去焦点时，发生blur事件
9.keydown()
键盘事件：按键按下事件
10.keyup()
键盘事件：按键抬起事件
<script>
$(function(){
// 1.click()
$('.son').click(function(){
console.log('你好呀');
})
// 2.dbclick
$('.son').dblclick(function(){
console.log('你好呀');
})
// 3.mouseenter()
$('.son').mouseenter(function(){
console.log('你好呀');
})
// 4.mouseleave()
$('.son').mouseleave(function(){
console.log('你好呀');
})
// 5.mousedown()
$('.son').mousedown(function(){
console.log('你好呀');
})
// 6.mouseup()
$('.son').mouseup(function(){
console.log('你好呀');
})
// 7.hover()
$('.son').hover(function(){
console.log('你好呀');
})
// 8.blur()
$('input').blur(function(){
console.log('你好呀');
})
// 9.keydown()
$('input').keydown(function(){
console.log('你好呀');
})
// 10.keyup()
$('input').keyup(function(){
console.log('你好呀');
})
})
</script>
<body>
<div id="father">
<input type="text">输入框
<div class="son">我是第一个</div>
<div class="son">我是第二个</div>
<div class="son">我是第三个</div>
</div>
</body>
事件代理
$('body').on('click','button',function(event){
console.log(event);
})
<body>
<button>点击</button>
</body
属性操作
插入节点
1.append()
向每个匹配的元素内部追加内容
2.appendTo()
将所有匹配的元素追加到指定的元素中
3.prepend()
向每个匹配的元素内部前置内容
4.prependTo()
将所有元素前置到指定元素中
5.after()
在每个匹配元素之后插入内容
6.insertAfter()
将所有匹配元素插入到指定元素的后面
7.before()
在每个元素之前插入内容
8.insertBefore()
将所有匹配的元素插入到指定的元素的前面
包裹节点
1.wrap()
将某个节点用其他标记包裹起来(将所有元素进行单独的包裹)
2.wrapAll()
将所有匹配元素用一个元素来包裹
3.wrappInner()
将每一个匹配元素的子内容（包括文本节点）用其他结构化标记包裹起来
删除节点
1.remove()
从DOM中删除所有匹配元素
2.detach()
删除所有匹配元素，但是不会把匹配的元素从jQuery对象中删除，因而可以在将来使用这些匹配元素，与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来.
3.empty()
严格来讲，empty()并不是删除节点，而是清空节点，他能清空元素中的所有后代节点
复制节点
clone()
复制一个节点
替换节点
replaceWith()
replaceAll()
两者作用相同，操作相互颠倒
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
