jQuery3

最新推荐文章于 2025-03-18 21:51:36 发布

270年前

最新推荐文章于 2025-03-18 21:51:36 发布

阅读量90

点赞数

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_49344258/article/details/108650684

版权

jQuery3

一.jquery HTML

1.jQuery添加元素

append() 在被选中元素中插入内容【由下往上】
prepend() 在被选中元素中插入内容【由上往下】
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
				background-color: violet;
				width: 300px;
				height: 300px;
			}
		</style>
		<script src="E:\网星学习\JQ\jquery-3.5.1.min.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$("#div1").append("game over");
					$("#div1").append("<h3>game over</h3>")
					$("#div1").append("<img src='E:\网星学习\2020.09.17\1\avatar.png'>");
				});
				$("#but2").click(function(){
					$("#div1").prepend("game over");
					$("#div1").prepend("<h3>game over</h3>")
					$("#div1").prepend("<img src='E:\网星学习\2020.09.17\1\avatar.png'>");
				});
				$("#but3").click(function(){
					$("#div1").after("game over");
					$("#div1").after("<h3>game over</h3>")
					$("#div1").after("<img src='E:\网星学习\2020.09.17\1\avatar.png'>");
				});
				$("#but4").click(function(){
					$("#div1").before("game over");
					$("#div1").before("<h3>game over</h3>")
					$("#div1").before("<img src='E:\网星学习\2020.09.17\1\avatar.png'>");
				});
			});
		</script>
		
	</head>
	<body>
		<input id="but1" type="button" value="测试append" />
		<input id="but2" type="button" value="测试append" />
		<input id="but3" type="button" value="测试after" />
		<input id="but4" type="button" value="测试bufore" /><br>
		<div id="div1"></div>
	</body>
</html>

2.jQuery 删除元素

remove() 删除被选元素（及其子元素）【有过滤功能】

empty() 从被选元素中删除子元素


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
				background-color:red;
				width: 300px;
				height: 300px;
			}
		</style>
		<script src="E:\网星学习\JQ\jquery-3.5.1.min.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$("#div1").empty();
				});
				$("#but2").click(function(){
					$("#div1").remove();
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试empty()" />
		<input id="but2" type="button" value="测试remove()" />
		<div id="div1">
			<img id="img1" src='E:\网星学习\2020.09.17\1\avatar5.png' />
			<h1>Hello World</h1>
		</div>
	</body>
</html>

3.jQuery 获取并设置css类

addClass() 向被选元素添加一个或多个样式类
removeClass() 从被选元素删除一个或多个类
toggleClass() 对被选元素进行添加/删除类的切换操作
css()设置或返回的样式属性

css（样式属性名称）返回被选元素大的指定样式属性值。

css（样式属性名称，属性值）设置被选元素的具有这个样式。

css（{样式属性名称：属性值，样式属性名称：属性值}）设置被选元素具有一组样式。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				background-color: saddlebrown;
				width: 300px;
				height: 300px;
			}
		</style>
		<script src="E:\网星学习\JQ\jquery-3.5.1.min.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$("#div1").addClass("div1");
				});
				$("#but2").click(function(){
					$("#div1").removeClass("div1");
				});
				$("#but3").click(function(){
					$("#div1").toggleClass("div1");
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试addClass()" />
		<input id="but2" type="button" value="测试removeClass()"/>
		<input id="but3" type="button" value="测试toggleClass()" /><br>
		<div id="div1"></div>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="E:\网星学习\JQ\jquery-3.5.1.min.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					alert($("#div1").css("width"));
				});
				$("#but2").click(function(){
					$("#div1").css("background-color","red");
					$("#div1").css("width","300px");
					$("#div1").css("height","300px");
				});
				$("#but3").click(function(){
					$("#div1").CSS({"background-color":"red","width":"300px","height":"300px"});
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="css(属性名称)" />
		<input id="but2" type="button" value="css('属性名称','属性值')" />
		<input id="but3" type="button" value="css({样式属性名称:属性值,样式属性名称:属性值})" /><br>
		<div id="div1"></div>
	</body>
</html>

二.jQuery遍历和参考

jQuery each()方法

认识JavasSript的DOM对象

var javascriptDomObject=document.getElementByld("p5");

[object HTMLParagraphElement]

认识jQuery对象

var jqueryObj=$("#p5");

[object Object]

转换

1.dom对象转换成jquery对象

var javascriptDomObject=document.getElementByld("p5");

$(javascriptDomObject);

2.jquery对象转换成dom对象

var jqueryObj=$("#p5");

alert(jqueryObj.get());

语法

$(selector)each(function(index,element))必需为每个匹配元素规定运行的函数。

index-被遍历出的每一个元素在数组中的位置。

element -当前的元素【javascript的Dom对象】(也可使用“this”选择器）

each()方法为每个匹配元素规定要运行的函数。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="E:\网星学习\JQ\jquery-3.5.1.min.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					/*$("p").each(function(index,element){
						var si=index*10+10;
						$(element).css("font-size",si+"px");
					});
					*/
					$("p").each(function(index){
						var si=index*10+10;
						$(this).css("font-size",si+"px");
					});
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="each" />
		<p>测试用P元素1</p>
		<p>测试用P元素2</p>
		<p>测试用P元素3</p>
		<p>测试用P元素4</p>
		<input id="but2" type="button" value="测试对象" />
		<p id="p5">测试用的p元素5</p>
	</body>
</html>

面试题：

根据下边的html内容编写脚本语言（javascript或jquery）

<div>

</div>

获取userName的input输入框的值，并将此值追加字符串”01”,再次回填到此输入框内

$("[name='userName']").val($("[name='userName']").val()+"01");

将内容为工号的label标签的内容变为红色字体，并将字体大小设置为16px

$("label:last").css({"color":"red","font-size":"16px"});


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="E:\网星学习\JQ\jquery-3.5.1.min.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					/*$("p").each(function(index,element){
						var si=index*10+10;
						$(element).css("font-size",si+"px");
					});
					*/
					$("p").each(function(index){
						var si=index*10+10;
						$(this).css("font-size",si+"px");
					});
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="each" />
		<p>测试用P元素1</p>
		<p>测试用P元素2</p>
		<p>测试用P元素3</p>
		<p>测试用P元素4</p>
		<input id="but2" type="button" value="测试对象" />
		<p id="p5">测试用的p元素5</p>
	</body>
</html>