jquery基础知识

最新推荐文章于 2024-08-15 18:19:19 发布

码仆的逆袭

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量153

点赞数

分类专栏：前端-JQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_34191426/article/details/134361959

版权

前端-JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jquery基础知识

🍓jquery下载及引入
🍓顶级对象
🍓DOM对象与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()绑定事件
  1. 🌷单个事件绑定
    语法：元素对象.on('事件类型', 事件函数)
  2. 🌷事件委托绑定（事件绑定在元素对象身上，但是用户【只有】对委托对象操作才能触发事件）
    语法：元素对象.on('事件类型', '委托对象选择器'，事件函数)
  3. 🌷多事件绑定
```
元素对象.on({
    事件类型1:事件函数1,
    事件类型2:事件函数2,
    。。。
})
```
- 🍁one()绑定事件
  - 🌷one()绑定事件语法与on()一致
  - 🌷one()与on()的区别：
    one()绑定的事件只会触发一次，而on()可以重复触发
📌jQuery里面常用的事件函数(注意：这些方法可以重复调用使得元素对于同一事件绑定多个函数)
- 🍁hover()
  作用： 绑定鼠标移入移出事件
  语法： hover(移入函数，移出函数)、hover(移入移出函数)
  注意： 当传入一个函数时，移入移出都会触发这个函数
- 🍁click()
  作用： 绑定点击事件
- 🍁mouseover()
- 🍁mouseout()
- 🍁change()
📌事件解绑
off()解绑事件
1. 🍁解绑一个事件的所有函数
  元素对象.off(事件类型)
2. 🍁解绑一个事件中的某个函数
  元素对象.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： 运动结束的回调函数