JQuery操作

GG_Bonin

于 2022-08-29 21:38:15 发布

阅读量366

点赞数

分类专栏：前端开发文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_52596593/article/details/126591145

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JQuery筛选器方法

$\bullet$ $("#id").next() 查找下一个元素

$\bullet$ $("#id").nextAll() 查找同一层中，下面的所有元素

$\bullet$ $("#id").nextUntil("选择器") 查找每个匹配元素之后所有同辈元素，直到遇到符合指定表达式的元素为止

$\bullet$ $("#id").prev() 查找上一个元素

$\bullet$ $("#id").prevAll() 查找当前匹配元素集合中每个元素的前面的同胞元素

$\bullet$ $("#id").prevUntil("选择器") 查找当前元素前面所有的同辈元素，直到遇到符合指定表达式的元素为止

$\bullet$ $("#id").parent() 查找父元素

$\bullet$ $("#id").parents() 查找当前元素的所有父辈元素

$\bullet$ $("#id").parentsUntil() 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

$\bullet$ $("#id").children() 查找子元素

$\bullet$ $("#id").siblings() 查找兄弟元素，即同一层上下的所有元素
// 链式查找
$("#id").next().next().next()

JQuery操作标签

1.样式操作

addClass();    // 添加指定的css类名
removeClass;   // 移除指定的css类名
hasClass;      // 判断样式存不存在
toggleClass;   // 切换css类名，如果有类就删除，如果没有类就添加
.css("样式名","样式值") // 添加样式
text()         // 获取所有匹配元素的内容
text(val)      // 设置所有匹配元素的html内容
html()         // 获取第一个匹配元素的html内容
html(val)      // 设置所有匹配元素的html内容
val            // 获取第一个匹配元素的当前值
[0].files      // 获取文件值

2.pro和attr的区别

attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性

<input type="checkbox" checked id="i1" value="1">

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

ps：attr只作用于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选择返回true，没选中返回false。

3.文档处理

1.append():    添加到指定元素内部的后面
  $(A).append(B)    //把B追加到A后面

2.prepend():   添加到指定元素内部的前面
  $(A).append(B)    //把B前置到A
  
3.after():     添加到指定元素外部的后面
  $(A).after(B)     //把B放到A的后面 

4.before():    添加到指定元素外部的前面
  $(A).before(B)    //把B放到A的前面

remove():    //从DOM中删除所有匹配的元素
empty():     //删除匹配的元素集合中所有的子节点

JQuery绑定事件

JQuery绑定事件与JS中的绑定事件类似，但是JQuery有两种方法来绑定事件

方式一：
 JQuery对象.事件名.(function(){事件代码})
方式二：
JQuery对象.on('事件名',function(){事件代码})
ps：两种方法都可以有时候使用第一种方式绑定事件如果无法触发可以切换用第二种方式。

常用事件：
click       单击事件
hover       鼠标悬浮在上面
blur        失去焦点
focus       获得焦点
change      输入域发生改变
keyup       按下按键

阻止后续事件

有时候会遇到同一个标签上有多个事件，如果想执行完第一个事件就结束不继续执行后面的事件，可以通过两个方法来阻止：
方式一：
    直接在需要执行的事件后面加：return false
方式二：
    在需要执行的事件后面加：e.preventDefault()
事件冒泡：

涉及到标签嵌套并且有相同事件的时候那么会逐级往上反馈并执行直至最顶层对象，这个现象很多时候我们并不想要这样的执行就可以通过阻止后续事件来避免。

事件委托

可以理解为通过子节点元素绑定事件来传递给父元素DOM节点来统一管理其全部后代元素，事件绑定默认情况下是不会对动态创建的标签生效的如果想生效需要通过事件委托

$\bullet$ 可以减少事件绑定次数提高性能

$\bullet$ 可以让动态创建的标签绑定相同的事件
// $().on(事件名','发生在谁身上',定义函数(){})

$('div').on('click','button',function () {
            alert('我在提醒你！')
        })