Jquery操作＜前端学习笔记＞

最新推荐文章于 2022-12-26 22:48:31 发布

DZW5323

最新推荐文章于 2022-12-26 22:48:31 发布

阅读量228

点赞数

分类专栏：前端文章标签： jquery 前端学习

本文链接：https://blog.csdn.net/dzw5323/article/details/125648810

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

jQuery

选择器

/*  jQuery 利用选择器获取的对象是jQuery对象，区别于DOM对象 */
// jQuery获取p标签 改变背景色为pink
$('p').css('backgroundColor'.'pink')
// dom 获取p标签 改变背景色 
document.querySelector('p').style.backgroundColor = 'pink'

/* ! 二者不混用!*/

事件绑定

//点击事件
$('选择器').click(function(){
    //逻辑...
    // this === 当前 DOM 对象
    // $this 转为 jQuery对象 使用css
})

// 获得焦点事件
$('选择器').focus(function(){
    //逻辑...
    // this === 当前 DOM 对象
    // $this 转为 jQuery对象 使用css
})
// 失去焦点事件
$('选择器').blur(function(){
    //逻辑...
    // this === 当前 DOM 对象
    // $this 转为 jQuery对象 使用css
})
// 移入事件
$('选择器').mouseenter(function(){
    //逻辑...
    // this === 当前 DOM 对象
    // $this 转为 jQuery对象 使用css
})
// 移出事件
$('选择器').mouseleave(function(){
    //逻辑...
    // this === 当前 DOM 对象
    // $this 转为 jQuery对象 使用css
})

链式编程

通过（.）把多个操作（方法）连续的写下去，形成链子一样的结构

// 大部分jQ对象方法的返回值还是同一个jQuery对象
$('.text').focus(回调).blur(回调).change(回调)

内容操纵

jQuery 中封装了设置和读取网页元素文本内容的方法

//设置
$('选择器').html('内容') //解析HTML
$('选择器').text('内容')
//读取
$('选择器').html() 
$('选择器').text() //只获取文本

过滤方法

jQuery 中封装了过滤方法，对jQuery对象中的dom元素再次筛选

// 匹配的第一个元素
.first()
// 匹配的最一个元素
.last()
// 根据索引匹配元素
.eq(索引)

/* 
-- eq方法的索引从0开始
-- 返回的是jQuery对象
*/

样式操作

// 1.键值对设置
.css('样式名','值')
// 2.对象方式设置
.css(对象)
.css({
    backgroundColor:'pink',
    color:'red',
    width:'200px',
    height:200
})
// 3.获取样式
.css('样式名')

属性操作

jQuery中对属性的操作进行封装，可以设置、获取和删除属性

// 1. 赋值
.attr('属性名','值')
// 2. 取值
.attr("属性名")
// 3. 删除属性
.removeAttr('属性名')

操纵value

jQUery 中封装了操纵表单元素value属性的方法，可以取值和赋值

// 1. 赋值
.val('参数')
// 2. 取值
.val()

查找方法

jQuery 中封装了查找元素的方法，可以基于元素的结构关系查找新的元素

// 1. 父元素
.parent()
// 2. 子元素
.children()
// 3. 兄弟元素
.siblings()
// 4. 后代元素
.find("选择器")

/* 
siblings、children 方法支持传入选择器
*/

操作类名

jQuery 中封装了为网页元素添加、移除、检测、切换类名的方法

// 1. 添加类名
.addClass('类名')
// 2. 移除类名
.removeClass('类名')
// 3. 判断类名是否存在 返回布尔值
.hasClass('类名')
// 4. 切换类名 存在则删除 不存在则添加
.toggleClass('类名')

事件进阶

jQuery 中封装了更为灵活的on/off、one方法处理DOM事件

// 1. 注册事件
.on("事件名",function(){})
// 2. 移除指定事件
.off("事件名")
// 3. 移除所有事件
.off()
// 4. 注册一次性事件
.one('事件名'，function(){})

触发事件

jQuery 中通过代码的方式触发绑定的事件

// 1. 直接触发
.事件名()
// 2. trigger触发事件（自动触发）
.trigger('事件名')
// 3. 触发自定义事件
.trigger('自定义事件')
// 4. 注册自定义事件
.on('自定义事件',function(){})

window事件绑定

使用jQuery 为window对象绑定事件

// 滚动
$(window).scorll(function(){})
// 点击
$(window).click(function(){})

获取位置

通过jQuery 直接获取元素的位置

// 取值
$('选择器').offset()
// 取值
$('选择器').position()
// 返回值
{top:126,left:58}

/* 
二者区别
    -- 参照物不同
        * offset参照<html>标签
        * position参照离他最近有定位的祖先元素
    -- margin
        * offset包含外边距
        * position以外边距为边界，不计算
*/

显示&隐藏动画

通过jQuery以动画的方式切换元素的显示&隐藏 display

// 显示
$('显示器').show(持续时间ms)
// 隐藏
$('选择器').hide(持续时间ms)
// 显示&隐藏
$('选择器').toggle(持续时间ms)

淡入&淡出动画

通过 jQuery以淡入&淡出的方式切换元素的显示隐藏

$('选择器').fadeIn(持续时间ms)
$('选择器').fadeOut(持续时间ms)
$('选择器').fadeToggle(持续时间ms)

展开&收起动画

通过jQuery以展开（高度增大-显示）&收起（高度减小-隐藏）的方式切换元素的显示隐藏

$('选择器').slideDown(持续时间ms)
$('选择器').slideUp(持续时间ms)
$('选择器').slideToggle(持续时间ms)

动画队列及停止方法

通过jQuery为元素设置的多个动画会依次添加到动画队列中，并根据添加的顺序依次播放

// 动画队列
['动画1','动画2','动画3','动画4']

// 停止当前动画 队列正常执行
$('选择器').stop()
// 清空队列 在动画当前状态停止
$('选择器').stop(true)
// 清空队列 知道的前动画的结束状态
$('选择器').stop(true,true)

/* 
动画方法和stop方法返回的是同一个jQuery对象
*/

自定义动画

jQuery 提供了animate方法来实现更为复杂的动画效果

 $('选择器').animate({
     //  动画属性 数值类的样式 backgroundColor不生效
     width:100,
     height:100;
     margin:100,
     ....
     //非样式的特殊属性
     scrollTop:100,
     scrollLeft:100
 },10000ms)

插入节点

jQuery中封装了在指定位置动态插入元素节点的方法，可以插入节点或者改变节点位置

// 4个方法参数一样 位置不同
$('父元素选择器').append(参数)  // 父元素结尾
$('父元素选择器').prepend(参数) // 父元素开头
$('父元素选择器').before(参数) // 兄弟元素前面
$('父元素选择器').after(参数) // 兄弟元素后面

/* 
-- 插入节点：传入创建的dom元素或者html结构
-- 改变位置：传入现有的dom元素或者jQuery对象
*/

动画的回调函数

所有的jQuery动画方法都支持传入回调函数

$('选择器').基础动画方法(持续时间--可选,回调函数--可选)
$('选择器').animate(属性,持续时间--可选,回调函数--可选)

/* 
-- 回调函数会在动画执行完毕时立刻执行
-- 回调函数的this时执行动画的dom元素
*/

动画的延迟方法

jQuery不仅可以设置动画执行速度，还能再动画执行前设置在一定的延时

$('选择器').delay(延时时间).动画方法()
$('选择器').delay(延时时间).动画方法().delay(延时时间).动画方法()

获取尺寸

jQuery对获取元素尺寸进行封装，使得在不同场景中获取元素尺寸十分方便

$('选择器').innerWidth() // 内容宽度 + 内边距
$('选择器').innerHeight() // 内容高度 + 内边距

$('选择器').outerWidth() // 内容宽度 + 内边距 + 边框
$('选择器').outerHeight() // 内容高度 + 内边距 + 边框

$('选择器').outerWidth(true) // 内容宽度 + 内边距 + 边框 + 外边距
$('选择器').outerHeight(true) // 内容高度 + 内边距 + 边框 + 外边距

事件参数

jQuery绑定的事件中可以获取事件参数（事件对象），用法和元素js完全一致

// 定义了事件参数
$('选择器').事件(function(event){
    //  阻止冒泡
    event.stopPropagation()
    event.preventDefault()
})

删除节点

jQuery中封装了动态删除元素节点的方法

jQuery对象.remove()

/* 
remove方法删除的是调用方法的元素节点
*/

事件委托

jQuery中封装额事件委托的支持，直接通过on方法即可使用

// 直接绑定
$('选择器').on('事件名',function(){})
// 事件委托
$('选择器').on('事件名','后代选择器'，function(){})

/* 
-- 减少事件注册
-- 解决动态追加后代元素的事件绑定问题
-- 原理是事件冒泡
-- 回调函数中的this是触发事件的dom对象
*/

入口函数

jQuery中提供了更加简便的入口函数写法

// 原生写法
window.onload = function(){}
// jQ写法
$(window).on('load',functino(){})
/* 
-- 页面资源加载完毕执行（包括图片、css等等）逻辑代码
*/

// 完整写法
$(document).ready(functino(){})
// 简化写法
$(function(){})
/* 
-- DOM载入完毕就会执行 快
*/

DZW5323

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery操作＜前端学习笔记＞

事件绑定链式编程通过（.）把多个操作（方法）连续的写下去，形成链子一样的结构内容操纵jQuery 中封装了设置和读取网页元素文本内容的方法过滤方法jQuery 中封装了过滤方法，对jQuery对象中的dom元素再次筛选样式操作属性操作jQuery中对属性的操作进行封装，可以设置、获取和删除属性操纵valuejQUery 中封装了操纵表单元素value属性的方法，可以取值和赋值查找方法jQuery 中封装了查找元素的方法，可以基于元素的结构关系查找新的元素操作类名jQuery
复制链接

扫一扫

专栏目录