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的尺寸

注意：

1. 不管该元素是否隐藏，都能获取到元素的尺寸
2. 不管你是什么盒子模型，各个方法获取的区域都不变

操作元素偏移量

• offset()
  作用： 获取元素距离【页面左上角】的距离
  返回值： 一个对象，结构如下，默认单位是px，px省略

  {
      top:30,
      left:60
  }
  

• position()
  作用： 获取元素的定位位置
  返回值： 返回元素CSS设置的定位值，结构如下

  {
      top:30,
      left:60
  }
  

  注意： 如果你CSS设置的是right和bottom，则jquery会帮你自动换算成left和top

元素创建

1. $('标签的代码')
2. 对象.html('标签的代码');
   注意： 页面加载后创建元素，会把页面中原有的内容全部干掉，一般做清空元素内容作用

	//创建a标签
	var baidu = $("百度");
	//将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： 运动结束的回调函数

综合动画

animate()
参数1： 运动目标样式，是个对象
参数2： 运动时间
参数3： 运动曲线
参数4： 运动结束的回调函数

停止动画

• stop()
  • 作用： 将动画停止在当前时间的状态节点
  • 应用：
    使得当前元素停止上一次的动画执行当前动画
    元素对象.stop().toggle(2000)
• finish()
  作用： 当前时间动画立即停止，但是元素状态直接回到动画的目标状态