jQuery操作、筛选、事件

最新推荐文章于 2022-09-05 11:46:25 发布

段茜琳

最新推荐文章于 2022-09-05 11:46:25 发布

阅读量174

点赞数

分类专栏：笔记文章标签： jquery js html

本文链接：https://blog.csdn.net/weixin_45649686/article/details/113945832

版权

笔记专栏收录该内容

88 篇文章 3 订阅

订阅专栏

本文详细介绍了如何使用jQuery进行DOM操作，包括获取和设置样式属性、操作class，以及文本内容的处理。此外，还涵盖了事件绑定、筛选和事件处理的实践技巧，如ready事件、鼠标悬停效果和单次事件绑定。

摘要由CSDN通过智能技术生成

1.jQuery操作

1.css属性

取得样式name属性的值：css(name)
设置样式name属性的值：css(name,val)
同时设置多个name属性的值：css({“name”:“val”,“name”:“val”})
为每个匹配的标签添加指定的class : addClass(classname)
从所有匹配的标签中删除全部或指定的：removeClass(classname)
如果已经存在就删除一个类，如果没有就添加一个类：toggleClass(classname)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				//获得标签css属性值
				//console.log($("#divId").css("background-color"))
				
				//为标签css属性进行赋值操作
				/* $("#divId").css("background-color","green")
				$("#divId").css("width","200px") */
				
				//为标签css属性进行赋值操作  多组属性值
				//css()方法设置的样式为行级样式表 优先级最高
				//$("#divId").css({"background-color":"blue","width":"300px","height":"100px"})
				
				//操作标签的class属性值  为标签绑定类名
				//$("#divId2").addClass("divcss");
				
				//删除类名
				//$("#divId2").removeClass("divcss")
				
				//样式切换，如果没有就添加，如果有就删除
				//$("#divId2").toggleClass("divcss")
				
			}
			
		</script>
		<style type="text/css">
			.divcss{
				background-color: brown;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		
		<div id="divId" style="background-color: red;">
			div1
		</div>
		<div id="divId2" style="background-color: red;">
			div2
		</div>
		<input type="button" value="测试" onclick="test()" />
	</body>
</html>

2.文本

获得或设置标签的内容，可以识别标签：html()、html(val)
获得或设置标签的内容，不能识别标签，对<>进行转义：text()、text(val)
向所有匹配标签后追加一些html标记：append(content)
匹配的标签之间追加html内容：before(content)
匹配的标签之后追加html内容：after(content)
把指定的标签移动到指定标签中：appendTo(content)
从DOM中删除所有匹配的标签：remove()
清空DOM中所有匹配的内容：empty()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				//html() html(arg)  获得或设置标签的html内容，识别标签
				//console.log($("#divId").html())
				//$("#divId").html("<h1>11111<h1>")  覆盖之前的内容
				//text() text(arg)   获得或设置标签的html内容，不能识别标签 对< >进行转义
				//console.log($("#divId").text())
				//$("#divId").text("<h1>11111<h1>")
				
				
				//向标签内容后追加html内容，保留之前的 识别标签
				$("#divId").append("<i>11111<i>")
				
				//标签之后
				//$("#divId").after("<i>11111<i>")
				
				//标签之后
				//$("#divId").before("<i>11111<i>")
				
				//把前面指定的标签，移动到后面指定的标签中
				//$("p").appendTo("#divId")
				
				//从dom中删除指定标签
				//$("#divId").remove()
				
				//清空标签中的内容
				$("#divId").empty()
			}
			
		</script>
		
	</head>
	<body>
		
		<p>pppppp</p>
		
		<div id="divId" style="background-color: red;">
			<b>aaaaaaa</b>
		</div>
		<div id="divId2" style="background-color: red;">
			div2
		</div>
		<input type="button" value="测试" onclick="test()" />
	</body>
</html>

2.筛选操作

1.祖先

parent()返回指定标签的直接父级标签
parents()返回指定标签的所有祖先标签，直到根标签（< html >）

2.后代

children()返回指定标签的所有直接子标签
find()返回指定标签的后代标签，一路直到最后一个后代

3.同胞

siblings()返回指定标签的所有同胞标签
next()返回指定标签的后一个相邻标签
nextAll()返回指定标签的后面所有的同胞标签
prev()返回指定标签的前一个相邻标签
prevAll()返回指定标签的所有前面的同胞标签

4.过滤

first()返回指定标签的首个标签
last()返回指定标签的最后一个标签
eq()返回指定标签中带有指定索引号的标签
filter()返回匹配的标签
not()返回不匹配标准的所有标签

5.判断

is()根据选择器、标签或jQuery对象来检测匹配标签集合，如果这些标签中至少有一个标签匹配给定的参数，则返回true
hasClass()检查当前的标签是否含有某个特定的类，如果有，则返回true

3.事件

1.ready事件

当dom载入就绪可以查阅及操纵时绑定一个执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

2.绑定事件

click(function(){}) 点击事件
bind(“事件名称”,function(){})

3.合成事件

hover():一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法，当鼠标移动到一个匹配的标签上面时，会触发指定的第一个函数。当鼠标移出这个标签时，会触发指定的第二个函数。

4.其他事件

on():方法绑定事件处理程序到当前选定的jQuery对象中的元素
one():一次性事件
resize():当浏览器窗口改变大小时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			/* document.getElementById("id").onclick = function(){
				
			} */
			
			//ready事件 当dom载入就绪时执行  与onload事件功能一致
			/* $(document).ready(function(){
				alert(1)
			}) */
			//简写方式
			$(function(){
				//为标签动态绑定事件处理函数
				/* $("input").click(function(){
					alert(this.value)  //this表示当前对象，this是一个dom对象
				}) */
				/* $("input").dblclick(function(){
					alert(this.value)  //this表示当前对象，this是一个dom对象
				}) */
				//绑定指定事件及处理函数
				/* $("input").bind("click",function(){
					alert(this.value)
				}) */
				//解除绑定的指定事件
				//$("input").unbind("click")
				
				//模仿鼠标移入，移除事件
				/* $("#id1").hover(
						function(){//鼠标移入执行
							$(this).css("background-color","green")
						},
						function(){//鼠标移除执行
							$(this).css("background-color","red")
						}
				) */
				
				/* $("#btnId").toggle(
						function(){
							$("#id1").css("background-color","green")
						},
						function(){
							$("#id1").css("background-color","red")
						},
						function(){
							$("#id1").css("background-color","blue")
						}
				) */
				
				//
				/* $("#btnId").one("click",function(){
					alert(11)
				}) */
				//当浏览器窗口大小改变时触发
				/* var i = 0
				$(window).resize(function(){
					console.log(++i)
				}) */
			})
		
		</script>
		
	</head>
	<body>
	
		<input type="button" value="按钮1" />
		<input type="button" value="按钮2" />
		<input type="button" value="按钮3" />
		<input type="button" value="按钮4" />
		<input type="button" value="按钮5" />
		
		<div id="id1">
			div1
		</div>
		
		<input type="button" value="操作" id="btnId" />
		
	</body>
</html>

段茜琳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作、筛选、事件

1.jQuery操作1.css属性取得样式name属性的值：css(name)设置样式name属性的值：css(name,val)同时设置多个name属性的值：css({“name”:“val”,“name”:“val”})为每个匹配的标签添加指定的class : addClass(classname)从所有匹配的标签中删除全部或指定的：removeClass(classname)如果已经存在就删除一个类，如果没有就添加一个类：toggleClass(classname)<!DOC
复制链接

扫一扫

专栏目录