jquery前端方法库
封装各种dom操作 引入jq.js会暴露俩变量名$ jquery
1.jq选择器
1-1选择器 ,对元素的获取 语法： $(选择器)
1.:first
2.:last
3.:eq(索引) 按索引排列的第几个
4.:odd 按**索引**排列的奇数个
5:.even 按**索引**排列的偶数个
(注意：:odd 索引值是奇数,即 2,4,6
:even 索引值是偶数 从0开始，即1,3,5
从界面上来看 odd恰好是偶数行，even是奇数行。正好相反)
!1-2筛选器,对已经获取到的元素进行二次筛选
2筛选器：对jq的元素集合进行二次筛选，只有jq元素才可以使用
1.:first
2.:last
3.:eq(索引) 按索引排列的第几个
4.next() 当前元素的下一个元素
5.nextAll()
1.语法：元素集合.nextAll() 获取到当前元素后面的所有兄弟元素
2.语法：元素集合.nextAll(选择器) 获取到当前元素后面所有元素中指定选择器的那一个
6.nextUntil()
1.语法：元素集合.nextUntil() 获取到当前元素后面所有的兄弟元素
2.语法：元素集合.nextUntil(选择器) 获取到当前元素后面所有的兄弟元素，直到选择器元素为止（不包含选择器元素）
7.prev() 当前元素的上一个元素
8.prevAll()
1.语法：元素集合.prevAll() 获取到当前元素前面的所有兄弟元素
2.语法：元素集合.prevAll(选择器) 获取到当前元素前面所有元素中指定选择器的那一个
9.prevUntil()
1.语法：元素集合.prevUntil() 获取到当前元素前面所有的兄弟元素
2.语法：元素集合.prevUntil(选择器) 获取到当前元素前面所有的兄弟元素，直到选择器元素为止（不包含选择器元素）
10.parent()获取到当前元素的父元素
11.parents() 所有的祖先元素
1.语法：元素集合.parents() 获取结构父级的所有父元素
2.语法：元素集合.parents(选择器) 获取结构父级的所有父元素中符合选择器的那一个元素
12.children()获取到当前元素的子元素
1.语法：元素集合.children() 获取结构父级的所有子元素
2.语法：元素集合.children(选择器) 获取结构父级的所有子元素中符合选择器的那一个元素
13.siblings()拿到该元素的所有兄弟元素,自己除外
14.find()找到该元素所有后代元素里面符合选择器条件的元素
15.index() 获取该元素在其父元素里面的索引位置
jQuery操作文本内容
操作元素内文本和超文本
注意：属于jQuery 的方法,只能jQuery调用
1.html()
语法: 1.元素集合.html() 获取该元素的超文本内容,以字符串的形式返回
2.元素集合.html('内容') 设置元素集合内元素的超文本内容
完全覆盖式写入
隐式迭代 ：元素集合内有多少元素,就写入多少元素
2. text()
语法：1.元素集合.text() 获取该元素的文本内容,以字符串的形式返回
(文本内容不涉及html结构,拿到的是所有元素的文本内容,以一个字符串形式返回)
2.元素集合.text('内容')
3.val()
语法：1.元素集合.val()获取元素集合内元素的value值
2.元素集合.val('内容')设置元素的value值
完全覆盖式写入
隐式迭代 ： 元素集合内有多少元素,就写入多少元素
<div>超文本内容</div>
<div>超文本内容</div>
<div>超文本内容</div>
<input type="text" value="你好星期二">
<input type="text" value="你好星期三">
<script src="../js/jquery-1.8.3.min.js"></script>
<script>
//html()
console.log($("div").html());
$("div").html('<span>2022年8月2日 星期二</span>')
//text()
$("div").text('<span>2022年8月2日 星期二</span>')
//val() 只能拿到第一个值
console.log($('input').val());
$("input").val('hello world');
</script>
jq操作元素类名
1.addClass() 添加元素类名
2.removeClass() 删除元素类名
3.hasClass() 判断元素有没有类名
4.toggleClass() 切换类名 有就删除无就添加
<div>你好星期二</div>
<script src="../js/jquery-1.8.3.min.js"></script>
<script>
// 1.addClass()
console.log($('div').addClass('box'));
//3.hasClass
console.log($('div').hasClass('box'));
// 2.removeClass()
console.log($('div').removeClass('box'));
// 4.toggleClass()
console.log($('div').toggleClass('box'));
</script>
jq操作元素样式
1.css()
1-1 语法：元素集合.css('属性')
获取元素的某一个样式的值,不管是行内还是非行内(外联和内嵌)都能获取到
1-2 语法：元素集合.css('样式名','样式值') 设置元素行内样式
隐式迭代 ： 元素集合内有多少元素,就写入多少元素
单位 px 可以省略
jq事件绑定
事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，
让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡.
1.on() :事件绑定,根据不同的参数做不同的事情
1-1语法：元素集合.on(事件类型,事件处理函数) 直接绑定事件,有隐式迭代
$("ul>li").on("click", function () {
console.log("nh");
});
1-2 on(事件类型,选择器,事件处理函数) 事件委托的绑定,把选择器元素委托给元素集合里面的元素
(注意：选择器元素要是元素集合内元素的后代元素)
$("ul").on("click", "li", function () {
console.log("xq");
});
1-3 on(事件类型,复杂数据类型,事件处理函数)给集合内所有元素绑定事件
这个复杂数据类型是事件触发传递给事件的*参数* data
1-4 on(事件类型,选择器,数据,事件处理函数) 事件委托形式,带上传递参数
把选择器所属的事件,委托给元素集合内的事件
数据位置,就是在事件触发的时候传递给事件处理函数的参数
1-5 on({事件类型1：事件处理函数,事件类型2,事件处理函数2,...})
一次性绑定多个事件,无法传参
2.one() :事件绑定的方法,和on()方法参数使用形式一样,只能执行一次
?3.off() :解除事件绑定
3-1语法：元素集合.off(事件类型) 解除元素身上该事件类型的所有事件处理函数
3-2语法：元素集合.off(事件类型,事件处理函数) 解除元素身上该事件类型的某一个事件处理函数
4.trigger() 用js代码方式触发事件
语法：元素集合.trigger(事件类型)
jQuery 的事件函数
click() mouseover()...自带隐式迭代
唯一特殊事件 hover()
语法：元素集合.hover(移入的事件处理函数,移出的事件处理函数)
只传一个参数,移入移出都触发
<div style="width: 200px;height: 300px;background: rgb(98, 255, 98);"></div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
function A() {console.log('移入A')}
function B() {console.log('移出B')}
$('div').hover(
A,B
// function() {console.log('移入')},
// function() {console.log('移出')}
)
</script>
jQuery节点操作
1.创建节点
语法: $(html结构字符串)
1-1.$()里面传递一个选择器==获取节点
1-2.$()里面传递一个html结构字符串==创建节点
1-3.$()里面传递一个DOM元素节点==转换成jQuery元素
?2.插入节点
2-1 append() 语法:父元素.append(子元素) --放在父元素末尾
2-1 append() 语法:子元素.appendTo(父元素) --放在父元素末尾
-----------
2-3 prepend()语法:父元素.prepend(子元素) --放在父元素前面
2-4 prependTo()语法:子元素.prependTo(父元素) --放在父元素前面
3.外部插入(兄弟关系的插入)
3-1 after() 语法：存在元素.after(插入元素) --把插入元素放在存在元素后面,以兄弟关系出现
3-2 insertAfter() 插入元素.insertAfter(存在元素) --把插入元素放在存在元素后面,以兄弟关系出现
4.删除节点 remove()
4-1 语法：元素集合.remove() 同归于尽,把自己从自己的父节点里移除
4-2 语法：元素集合.empty() 清理门户,把所有后代节点移除,保留自己
5.替换节点
4-1 replaceWith()语法：被替换的节点.replaceWith(换上节点) √
4-1 replaceAll()语法：换上节点.replaceAll(被替换的节点)
6.克隆节点 clone()
6-1 语法：元素集合.clone() 必然携带所有节点过来
第一个参数默认是FALSE,表示不克隆元素本身的事件
jQuery 操作元素属性
三种属性操作
1.attr() 和 removeAttr()
获取语法：元素集合.attr(属性名) 获取标签属性,包括一些自定义属性
设置语法：元素集合.attr(属性名,属性值) 设置元素标签属性
把属性设在标签上,当做一个自定义属性使用
设置的都会变成字符串类型,对原生属性有些有用,有些没用
删除语法：元素集合.removeAttr(属性名) 删除元素自定义属性
多用于删除attr设置的属性,ID class也可以删除
1.prop() 和 removeProp()
获取语法：元素集合.prop(属性名) 获取元素的原生属性,也可以获取元素自定义属性
但是arrt设置的自定义属性他获取不到
设置语法：元素集合.prop(属性名,属性值) 设置元素原生属性,也可以设置元素自定义属性
设置的自定义属性不会显示在标签上,而是存储在元素身上
设置的是什么类型,获取到的还是什么类型
删除语法：元素集合.removeProp(属性名) 删除元素原生属性
只能删除prop设置的属性,ID class不可以删除
1.data() 和 removeData()
获取语法：元素集合.data(属性名) 获取使用 data()方法存储的数据,获取元素身上data-xxx属性
设置语法：元素集合.data(属性名,属性值) 只是吧数据存储在元素身上的某一空间内,不会出现在标签上
把属性设在标签上,当做一个自定义属性使用
设置的都会变成字符串类型,对原生属性有些有用,有些没用
删除语法：元素集合.removeData(属性名) 删除元素自定义属性
只能删除data设置的属性,不可以删除元素身上 data-xxx的属性
<div class="abc" data-index="hello">星期三</div>
<p data-index="hello world">你好</p>
<u >hello</u>
<input type="checkbox">
<input type="button" value="按钮">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
//attr() 和 removeAttr()
//获取标签属性
console.log($('div').attr('class'));
// 设置
$('div').attr('id', 'xiaoqiao')
console.log(typeof $('div').attr('class'));//string
$('input[type=button]').click(() => {
console.log('1');
$('input').attr('checked', true)//当做一个自定义属性，没有映射到dom元素
})
// 删除
$('div').removeAttr('id', 'xiaoqiao')
//prop() 和 removeProp()
$('p').prop('a', 'xiaoqiao')
$('p').prop('ab', 20)
console.log(typeof $('p').prop('ab'));//number
//删除
$('p').removeProp('ab')
console.dir($("p"));
//data() 和 removeData()
console.log($('div').data('index'));//获取 hello
$('p').data('abc',200);//设置
$('p').data('abcd',200);//设置
$('p').removeData('abcd');//删除
console.log($('p'))
</script>
jq获取元素尺寸
1.width() 和 height() 获取元素内容位置的尺寸
语法：元素集合.width() 元素集合.height()
2.innerWidth() 和 innerHeight()
获取元素 内容 + padding 的尺寸
语法：元素集合.innerWidth() 元素集合.innerHeight()
3.outerWidth() 和 outerWidth()
获取元素 内容 + padding + border 的尺寸
语法：元素集合.outerWidth() 元素集合.outerWidth()
3-2.outerWidth(true) 和 outerWidth(true)
获取元素 内容 + padding + border +margin的尺寸
语法：元素集合.outerWidth(true) 元素集合.outerWidth(true)
jq操作元素位置
1. offset() 是一个读写方法 获取
读写语法：元素集合.offset()
返回值：一个对象,里面包含一个x信息一个y信息
相对谁：相对页面左上角的绝对坐标
读取出来的是一个对象,offset()后不能继续链式编程
1-2.设置
语法：元素集合.offset({top:x,left:x})
设置的是相对页面左上角的绝对位置
2.position() 是一个读写方法
读写语法：元素集合.position()
返回值：一个对象,里面包含一个x信息一个y信息
就是元素的定位关系
如果定位的是right和bottom 会自动计算成left 和 top
jq动画
1.show() 显示
2.hide() 隐藏
3.toggle() 切换
4.slideDown() 下拉显示
5.slideUp() 上拉隐藏
6.slideToggle() 切换显示隐藏
实际操作 display: none;和 display:block;
语法：方法名(运动时间,运动曲线,回调函数)
运动时间：多长时间结束
运动曲线：什么方式运动
回调函数：运动结束后触发
jq渐隐渐显动画
1.fadeIn() 淡入--显示 opacity 0~ 1
2.fadeOut() 淡出--隐藏 opacity 1~ 0
3.fadeToggle() 切换
语法：方法名(运动时间,运动曲线,回调函数)
4.fadeTo()运动到指定透明度
语法：fadeTo(时间,指定透明度,运动曲线,回调函数)
jq综合动画 --点击方块变圆
1.animate()
语法：animate({属性},时间,运动曲线,回调函数)
注意：颜色属性不能运动
css3的2D和3D 动画效果运动不了
<button>点击</button>
<div></div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$('button').click(()=> {
$('div').animate({
width:400,
height:400,
borderRadius: '50%',
// backgroundColor:'red'//注意：颜色属性不能运动 xxx
},1000,'linear',()=>{console.log('运动结束');})
})
jq停止动画
1.stop()
语法：元素集合.stop() 立刻停止动画
运动到什么位置就停止在什么位置
2.finish()
语法：元素集合.finish() 立刻结束动画
