jQuery知识点补充，筛选器方法，标签操作，jQuery事件绑定，阻止后续事件，事件冒泡，事件委托

一：筛选器方法

方法	功能
$(‘#d1’).next()	同级别下一个标签
$(‘#d1’).nextAll()	下面的所有同级别标签
$(‘#d1’).nextUntil(‘.d2’)	同级别下面的标签直到class=‘d2’,不包含class=‘d2’
$(“div”).children()	div中的每个子节点,第一层
$(“div”).find(“span”)	查找div下的所有span节点
$(“p”).prev()	紧邻p节点前的一个同辈节点
$(“p”).prevAll()	p节点之前所有的同辈节点
$(“#node”).prevUntil(“#node2”)	id为"#node"节点之前到id为’#node2’之间所有的同辈节点,掐头去尾
$(“p”).parent()	每个p节点的父节点
$(“p”).parents()	每个p节点的所有祖先节点,body,html
$(“#node”).parentsUntil(“#node2”)	id为"#node"节点到id为’#node2’之间所有的父级节点,掐头去尾
$(“div”).siblings()	所有的同辈节点,不包括自己

<body>
<div id="d1">div>
<span class="s1">span>
<span class="s2">span>

<div class="d2">div>

<script>
    // console.log($('#d1').next())
    // console.log($('#d1').nextAll())
    // $('#d1').nextUntil('.d2')  // 不包含最后一个

    //同级别上下所有,不包括自己
    console.log($('.s2').siblings())

script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

二：标签操作

1.属性操作：

方法	功能
$(“img”).attr(“src”)	返回文档中所有图像的src属性值
$(“img”).attr(“src”,“node.jpg”)	设置所有图像的src属性
$(“img”).removeAttr(“src”)	将文档中图像的src属性删除
$(“input[type=‘checkbox’]”).prop(“checked”, true)	选中复选框
$(“input[type=‘checkbox’]”).prop(“checked”, false)	不选中复选框
$(“img”).removeProp(“src”)	删除img的src属性

2.操作class类属性

方法	功能
$(“p”).addClass(“selected”)	为p节点加上 ‘selected’ 类
$(“p”).removeClass(“selected”)	从p节点中删除 ‘selected’ 类
$(“p”).toggleClass(“selected”)	如果存在就删除,否则就添加HTML代码/文本/值

3.标签内容操作

方法	功能
$(‘p’).html()	返回p节点的html内容
$(“p”).html(“Hello hello!”)	设置p节点的html内容
$(‘p’).text()	返回p节点的文本内容
$(“p”).text(“hello”)	设置p节点的文本内容
$(“input”).val()	获取文本框中的值
$(“input”).val(“hello”)	设置文本框中的内容

4.CSS样式操作

方法	功能
$(“p”).css(“color”)	访问查看p节点的color属性
$(“p”).css(“color”,“red”)	设置p节点的color属性为red
$(“p”).css({ “color”: “red”, “background”: “yellow” })	设置p节点的color为red，background属性为yellow（设置多个属性要用{}字典形式）

5.定位与偏移

方法	功能
$(‘p’).offset()	节点在当前视口的相对偏移,对象 {top: 5, left: 9}
$(‘p’).offset().top	相对于上边的偏移量
$(‘p’).offset().left	相对于左边的偏移量
$(“p”).position()	节点相对父节点的偏移,对可见节点有效，Object {top: 5, left: 8}
$(window).scrollTop()	获取滚轮滑的高度
$(window).scrollLeft()	获取滚轮滑的宽度
$(window).scrollTop(‘25’)	设置滚轮滑的高度为25

6.DOM内外部插入

方法	功能
$(“p”).append(“hello”)	每个p节点内后面追加内容
$(“p”).appendTo(“div”)	p节点追加到div内后
$(“p”).prepend(“Hello”)	每个p节点内前面追加内容
$(“p”).prependTo(“div”)	p节点追加到div内前
$(“p”).after(“hello”)	每个p节点同级之后插入内容
$(“p”).before(“hello”)	在每个p节点同级之前插入内容
$(“p”).insertAfter(“#node”)	所有p节点插入到id为node节点的后面
$(“p”).insertBefore(“#node”)	所有p节点插入到id为node节点的前面

7.DOM删除

方法	功能
$(“p”).empty()	删除匹配的节点集合中所有的子节点，不包括本身
$(“p”).remove()	删除所有匹配的节点,包括本身
$(“p”).detach()	删除所有匹配的节点(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)

8.克隆

方法	功能
$(“p”).clone()	克隆节点并选中克隆的副本
$(“p”).clone(true)	布尔值指事件处理函数是否会被复制

三：jQuery绑定事件

1.方式一:

jQuery对象.事件名(function(){事件代码})
<script>
$btnEle.click(function(){
	alert(123)
})
script>	
1
2
3
4
5
6

1.方式二:

jQuery对象.on('事件名',function(){事件代码})
<script>
$btnEle.on('click',function(){
    alert(123)
})
script>	
1
2
3
4
5
6

四：阻止后续事件

1.补充知识点：能够触发form表达提交数据动作的标签有：submit和button

2.给已经有事件的标签绑定事件，会先执行绑定的事件，再执行原有的事件，我们可以让原有的事件不被执行，方法是在新添加的事件中加入：return false

$(':submit').click(function(e) {
	alert(111)
	return false  //方式一
	e.preventDefault  //方式二
})
1
2
3
4
5

五：事件冒泡

1.涉及到标签嵌套且有相同事件的时候，那么会逐级往上反馈且执行相同的事件，这种现象叫做’事件冒泡’

2.阻止事件冒泡的方法如下：

$('span').click(function(e){
	alert('span');
	return false;  //方式一
	e.stopPropagation();  //方式二
})
1
2
3
4
5

六：事件委托

1.为什么要有事件委托？

为了让动态添加的标签事件绑定效果生效

$('div').on('click','button',function(){
	alert('插眼')
})
1
2
3

2.补充知识点：创建标签的两种方式

JS: document.createElement()
jQ:$('<标签名>')
1
2

七：Bootstrap框架

https://www.bootcss.com/

http://www.fontawesome.com.cn/

相关阅读:
Python基础入门例程8-NP8 为整数增加小数点
 Java架构师之路八、安全技术：Web安全、网络安全、系统安全、数据安全等
 Angular 14 新的 inject 函数介绍
 前端实用案例-借助echarts实现内容自动向上轮播
 Matlab：程序设计
 css样式导入模板
 Python数据分析中常用的工具类和方法【持续更新系列】
【vue-router 路由篇】传入私有数据给目标路由地址而不显示在url上
 如何在 HarmonyOS 对数据库进行备份，恢复与加密
 Java基础学习笔记（五）—— 面向对象编程（2）
原文地址：https://blog.csdn.net/Yydsaoligei/article/details/126589219