jQuery的一些使用方法

最新推荐文章于 2023-08-12 10:47:33 发布

GuessHat

最新推荐文章于 2023-08-12 10:47:33 发布

阅读量104

点赞数

分类专栏： # JQuery 文章标签： Web

本文链接：https://blog.csdn.net/Guesshat/article/details/107469056

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery的一些使用方法

1.读取/写入文本

text()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span id="span">456</span>
		<span id="span1"></span>
		<script type="text/javascript" src="js/jquery-1.11.3.js">
		</script>
		<script type="text/javascript">
		    // 读取文本
			alert($("#span").text())
			//写入文本
			$("#span1").text("123")
	
		</script>
	</body>
</html>

2.设置属性

获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。
attr 可设置的东西很多，当属性没有被设置时候，.attr()方法将返回undefined
prop 可以设置一些固有的属性：class id 等，其他属性设置时可能会无法返回
为了防止一些错误，对于有true/false的属性设置使用prop，其他使用attr
检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态，使用prop

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="img/1.jpg" >
		<script type="text/javascript" src="js/jquery-1.11.3.js">
		</script>
		<script type="text/javascript">

			$("img").attr("width","300px")
			//这里采用prop没有反应
			//$("img").prop("width","300px")
			
		</script>
	</body>
</html>

3.设置css样式

设置display属性
$("#img").css("display","none");
例如设置一个空div大小和背景色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			
		</div>
		<script type="text/javascript" src="js/jquery-1.11.3.js">
		</script>
		<script type="text/javascript">
			
			$("div").css("width","300px")
			$("div").css("height","300px")
			$("div").css("background-color","red")
	
		</script>
	</body>
</html>

在这里插入图片描述
给一个标签添加class
$("div").addclass("p")
相当于在原来的class后面添加
而$("div").attr("class","p")是将class替换了

4.jquery链式编程

一个对象上可以绑定多个事件，之间用点连接，具体代码如下：

$("table tr:gt(0)".mousemove(function(){}).mouseout(function(){});

5.each()

不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象

通常$拿到的都是一个集合，为了将里面的每一个元素进行区别设置，需要调用工具类点each()
如果遍历的是数组，i是索引，n是内容

$.each(数组，function(i,n){})

$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});

如果遍历的是对象，i为变量名称，n为变量内容
$.each(对象，function(i,n){})

$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});

GuessHat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的一些使用方法

jQuery的一些使用方法1.读取/写入文本text()<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <span id="span">456</span> <span id="span1"></span> <
复制链接

扫一扫