jquery基础知识
🍓jquery下载及引入
下载地址:
- 源码版:
https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js
- 压缩版:
https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js
代码引入:
<script src="./js/jquery.js"></script>
🍓顶级对象
- 📌
DOM
中的顶级对象:document
- 📌
BOM
中的顶级对象:window
- 📌
jquery
中的顶级对象:$
🍓DOM对象与jquery对象转换
//DOM对象
var bth = document.getElementById('bth');
//DOM转juery对象
$(bth)
//juery对象转DOM对象
$(bth).get(0)
$(bth)[0]
🍓选择器
//1. id选择器:
$('#id')
//2. 类选择器:
$('.class')
//3. 标签选择器:
$('tag')
//4. 结构选择器:
$('li:nthchild(1)')
//5. 标签 + 类选择器
$('tag.class')
//6. 多条件选择器
$('tag1,tag2,tag3')
//7. 层级选择器
$('tag1 tag2 tag3')
//8. 后代选择器
$('tag1 > tag2 > tag3')
//9. 偶数选择器
$('tag:even')
//10. 奇数选择器
$('tag:odd')
//11. 索引选择器
$('tag:eq(index)')
$('tag:gt(index)')
$('tag:lt(index)')
//12. 属性选择器
$('tag:attribute')
🍓筛选器
first()
获取元素选择器集合中第一个元素last()
获取元素选择器集合中最后一个元素eq(index)
根据索引获取元素选择器集合中的某一个元素next()
获取元素选择器中下一个兄弟元素nextAll()
获取元素选择器中后面的所有兄弟元素prev()
获取元素选择器中前面一个兄弟元素prevAll()
获取元素选择器中前面所有的兄弟元素parent()
获取元素选择器的父级元素parents()
获取元素选择器的祖父级结构,直到html
为止siblings()
获取元素选择器所有的兄弟元素find(选择器)
找到该元素选择器中所有的后代元素中满足这个选择器的元素index()
获取当前元素在选择器范围内的索引,从0开始计算
🍓操作文本内容
html() -> innerHTML
传参: 赋值
不传参: 获取text() -> innerText
传参: 赋值
不传参: 获取val() -> value
(操作表单元素)
传参: 赋值
不传参: 获取
🍓操作类
- 添加类名
元素.addClass('className')
- 删除类名
元素.removeClass('className')
- 切换类名:本身有这个类名就删除,否则就添加
元素.toggleClass('className')
- 是否有类名
元素.hasClass('className')
🍓操作样式
- 📌拿到元素的某个样式值
元素.css(样式key)
- 📌单个单个设置元素样式(注意:样式值单位如果是
px
,则px
可以省略)
元素.css(样式key, 样式值)
- 📌对象设置元素样式
元素.css({ width:100, height:200 ... })
🍓操作属性
- 📌
attr
- 🍁
元素对象.attr(key)
获取元素标签原生属性或者自定义属性的值 - 🍁
元素对象.attr(key, value)
设置元素标签原生属性或者自定义属性的值,会直接响应在元素标签身上 - 🍁
元素对象.removeAttr(key)
删除元素标签原生属性或者自定义属性
- 🍁
- 📌
prop
- 🍁
元素对象.prop(key)
获取元素对象原生属性或者自定义属性的值(注意:它只能获取到元素对象身上自定义属性的值,无法获取到元素标签身上自定义属性的值) - 🍁
元素对象.prop(key, value)
- 🌷设置元素对象原生属性或者自定义属性的值
- 🌷设置原生属性时,会直接响应在元素的标签身上
- 🌷设置自定义属性时,不会响应在元素的标签身上,而是会响应在元素对象身上
- 🍁
元素对象.removeProp(key)
删除元素对象身上的自定义属性,不能删除原生属性,也不能删除元素标签身上的自定义属性
- 🍁
🍓获取元素的尺寸
- 📌
width()
和height()
获取元素内容区域的尺寸 - 📌
innerWidth()
和innerHeight()
获取元素内容区域 +padding
的尺寸 - 📌
outerWidth()
和outerHieght()
获取元素内容区域 +padding
+border
的尺寸 - 📌
outerWidth(true)
和outerHieght(true)
获取元素内容区域 +padding
+border
+margin
的尺寸
注意:
- 📌不管该元素是否隐藏,都能获取到元素的尺寸
- 📌不管你是什么盒子模型,各个方法获取的区域都不变
🍓操作元素偏移量
offset()
作用: 获取元素距离【页面左上角】的距离
返回值: 一个对象,结构如下,默认单位是px
,px
省略{ top:30, left:60 }
position()
作用: 获取元素的定位位置
返回值: 返回元素CSS
设置的定位值,结构如下
注意: 如果你{ top:30, left:60 }
CSS
设置的是right
和bottom
,则jquery
会帮你自动换算成left
和top
🍓元素创建
- 📌
$('标签的代码')
- 📌
对象.html('标签的代码');
注意: 页面加载后创建元素,会把页面中原有的内容全部干掉,一般做清空元素内容作用
//创建a标签
var baidu = $("<a href='http://www.baidu.com'>百度</a>");
//将a标签添加到div中的后面,作为子元素添加
$('#dv').append(baidu);
//将a标签添加到div中的前面,作为子元素添加
$('#dv').prepend(baidu);
//将a标签添加到div中的后面,作为子元素添加
baidu.appendTo('#dv');
//将a标签添加到div的后面,作为兄弟元素添加
$('#dv').after(baidu);
//将a标签添加到div的前面,作为兄弟元素添加
$('#dv').before(baidu);
//注意:这种情况会将$('#dv1 > p')选择器选中的元素剪切到$('#dv2')中作为子元素,原地方的元素会消失
$('#dv2').append($('#dv1 > p'));
//注意:这种情况会将$('#dv1 > p')选择器复制出来的对象放到$('#dv2')中作为子元素,原地方的元素不会消失
$('#dv2').append($('#dv1 > p').clone());
🍓其他函数
scrollLeft()
:获取元素水平卷曲出去的距离,一般与滚动事件配套使用scrollTop()
:获取元素垂直卷曲出去的距离,一般与滚动事件配套使用each(index, object)
:遍历jquery
对象clone()
:复制对象
🍓事件
- 📌事件绑定:
- 🍁
on()
绑定事件- 🌷单个事件绑定
语法:元素对象.on('事件类型', 事件函数)
- 🌷事件委托绑定(事件绑定在元素对象身上,但是用户【只有】对委托对象操作才能触发事件)
语法:元素对象.on('事件类型', '委托对象选择器', 事件函数)
- 🌷多事件绑定
元素对象.on({ 事件类型1:事件函数1, 事件类型2:事件函数2, 。。。 })
- 🌷单个事件绑定
- 🍁
one()
绑定事件- 🌷
one()
绑定事件语法与on()
一致 - 🌷
one()
与on()
的区别:
one()
绑定的事件只会触发一次,而on()
可以重复触发
- 🌷
- 🍁
- 📌
jQuery
里面常用的事件函数(注意:这些方法可以重复调用使得元素对于同一事件绑定多个函数)- 🍁
hover()
作用: 绑定鼠标移入移出事件
语法:hover(移入函数, 移出函数)
、hover(移入移出函数)
注意: 当传入一个函数时,移入移出都会触发这个函数 - 🍁
click()
作用: 绑定点击事件 - 🍁
mouseover()
- 🍁
mouseout()
- 🍁
change()
- 🍁
- 📌事件解绑
off()
解绑事件- 🍁解绑一个事件的所有函数
元素对象.off(事件类型)
- 🍁解绑一个事件中的某个函数
元素对象.off(事件类型, 函数名称)
- 🍁解绑一个事件的所有函数
- 📌代码触发事件:
trigger()
触发事件
元素对象.trigger(事件类型)
🍒🍒加载事件
//在页面中所有的内容全部加载完毕后触发,包括标签,图片,文字内容。。。
$(window).load(function(){}
//在页面中所有的内容全部加载完毕后触发,只包括标签,但是只会触发一次,且是按照页面加载顺序的最后一个绑定事件
$(document).ready(function(){}
//在页面中所有的内容全部加载完毕后触发,只包括标签,可以触发多次,绑定的所有加载事件都会触发
$(function(){})
🍓动画
🍒🍒显示隐藏动画
- 📌参数:
- 🍁参数1: 运动时间
- 🍁参数2: 运动曲线(默认
linear
匀速) - 🍁参数3: 运动结束的回调函数
- 📌
show()
显示 - 📌
hide()
隐藏 - 📌
toggle()
切换,show()
和hide()
两种状态切换 - 📌
slideDown()
向下展开显示 - 📌
slideUp()
向上折叠隐藏 - 📌
slideToggle()
切换,slideDown()
和slideUp()
两种状态切换 - 📌
fadeIn()
渐渐显示 - 📌
fadeOut()
渐渐隐藏 - 📌
fadeToggle()
切换,fadeIn()
和fadeOut()
两种状态切换 - 📌
fadeTo()
- 🍁渐渐隐藏或者显示到某种透明度状态
- 🍁参数比较特殊
参数1: 运动时间
参数2: 目标透明度(多了这个参数)
参数3: 运动曲线
参数4: 运动结束的回调函数
🍒🍒综合动画
animate()
参数1: 运动目标样式,是个对象
参数2: 运动时间
参数3: 运动曲线
参数4: 运动结束的回调函数
🍒🍒停止动画
- 📌
stop()
- 🍁作用: 将动画停止在当前时间的状态节点
- 🍁应用:
使得当前元素停止上一次的动画执行当前动画
元素对象.stop().toggle(2000)
- 📌
finish()
作用: 当前时间动画立即停止,但是元素状态直接回到动画的目标状态