jquery基础知识

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

注意:

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

操作元素偏移量

  • offset()
    作用: 获取元素距离【页面左上角】的距离
    返回值: 一个对象,结构如下,默认单位是pxpx省略
    {
        top:30,
        left:60
    }
    
  • position()
    作用: 获取元素的定位位置
    返回值: 返回元素CSS设置的定位值,结构如下
    {
        top:30,
        left:60
    }
    
    注意: 如果你CSS设置的是rightbottom,则jquery会帮你自动换算成lefttop

元素创建

  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()
    作用: 当前时间动画立即停止,但是元素状态直接回到动画的目标状态

你可能感兴趣的:(前端-JQuery,jquery,前端,javascript)