jQuery_基础学习3

最新推荐文章于 2021-07-04 21:33:24 发布

H之一

最新推荐文章于 2021-07-04 21:33:24 发布

阅读量126

点赞数

分类专栏：前端 jQuery JavaScript 文章标签： jquery

本文链接：https://blog.csdn.net/H_zhiyi/article/details/108641396

版权

前端同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

27 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		  #div1{
				background-color: red;
				width: 300px;
				height: 300px;
			   }
				</style>
		<script src="jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#but1").click(function(){
					$("#div1").append("hello");
					$("#div1").append("<h2>hello</h2>");
					$("#div1").append("<img src='avatar5.png'/>");
				});
				$("#but2").click(function(){
					$("#div1").prepend("hello");
					$("#div1").prepend("<h2>hello</h2>");
					$("#div1").prepend("<img src='avatar5.png'/>");
				});
				$("#but3").click(function(){
					$("#div1").after("hello");
					$("#div1").after("<h2>hello</h2>");
					$("#div1").after("<img src='avatar5.png'/>");
				});
				$("#but4").click(function(){
					$("#div1").before("hello");
					$("#div1").before("<h2>hello</h2>");
					$("#div1").before("<img src='avatar5.png'/>");
				});
			});
		</script>
	</head>
	<body>
		<input type="button"  id="but1" value="测试append" />
		<input type="button"  id="but2" value="测试prepend" />
		<input type="button"  id="but3" value="测试after" />
		<input type="button"  id="but4" value="测试before" />
		<div id="div1"></div>
	</body>
</html>

在这里插入图片描述 jQuery-删除元素
remove()-删除被选元素（及其子元素）【有过滤功能】
empty()-从被选元素中删除子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				background-color: red;
				width: 300px;
				height: 300px;
			}
		</style>
		<script src="jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#but1").click(function(){
					$("#div1").empty();
				});
				$("#but2").click(function(){
					$("#div1").remove();
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="but1" value="测试empty()" />
		<input type="button" id="but2" value="测试remove()" /><br>
		<div id="div1">
			<img src="avatar5.png" >
		</div>
	</body>
</html>

在这里插入图片描述 jQuery-获取并设置CSS类

addClass()-向被选元素添加一个或多个样式类
removeClass()-从被选元素删除一个或多个类
toggleClass()-对被选元素进行添加/删除类的切换操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				background-color: red;
				width: 300px;
				height: 300px;
			}
		</style>
		<script src="jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#but1").click(function(){
					$("#div1").addClass("div1");
				});
				$("#but2").click(function(){
					$("#div1").removeClass("div1");
				});
				$("#but3").click(function(){
					$("#div1").toggleClass("div1");
				});
			});
		</script>
	</head>
	<body>
		<input type="button"  id="but1" value="测试addClass()" />
		<input type="button"  id="but2" value="测试removeClass()" />
		<input type="button"  id="but3" value="测试toggleClass()" />
		<div id="div1"></div>
	</body>
</html>

在这里插入图片描述

CSS()-设置或返回样式属性
css(样式属性名称)返回被选元素的指定样式属性值
css(样式属性名称，属性值)设置被选元素的具有这个样式。
css({样式属性名称，属性值，样式属性名称，属性值}）设置被选元素具有一组样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#but1").click(function(){
					//$("#div1").css({"width":"200px","height":"200px","background-color":"red"});
					$("#div1").css({"background-color":"red","width":"300px","height":"300px"});
				});
				$("#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 type="button" id="but1" value="css(属性名称)" />
		<input type="button" id="but2" value="css(属性名称','属性值)" />
		<input type="button" id="but3" value="css({样式属性名称:属性值,样式属性名称:属性值})" /><br>
		<div id="div1">	</div>
	</body>
</html>

在这里插入图片描述 面试题：
根据下边的html内容编写脚本语言（javascript或jquery）

<div>
<lable>姓名</lable><input type="text" name="userName" value="张宝"/>
<label>工号</label><input type="text" name="workCode" value=""/>
<input type="hidden" id="id" value="12df3aed2" />
</div>
1.	获取userName的input输入框的值，并将此值追加字符串”01”,再次回填到此输入框内
$("[name='userName']").val($("[name='userName']").val()+"01");
2.	将内容为工号的label标签的内容变为红色字体，并将字体大小设置为16px
$("label:last").css({"color":"red","font-size":"16px"});

在这里插入图片描述

jQuery each() 方法

认识javaScript的Dom对象
var javascriptDomObject=document.getElementById(“p5”);
[object HTMLParagraphElement]
认识Jquery对象
var jqueryObj=$("#p5");
[object Object]
转换
1.dom对象转换成jQuery对象
var javascriptDomObject=document.getelementByid(“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="jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(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 type="button" id="but1" value="each" />
		<p>测试用的p元素1</p>
		<p>测试用的p元素2</p>
		<p>测试用的p元素3</p>
		<p>测试用的p元素4</p>
	</body>
</html>

在这里插入图片描述

H之一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_基础学习3

jQueryjQuery-添加元素append()-在被选中元素中插入内容【由下往上】prepend()-在被选中元素中插入内容【由上往下】after()-在被选元素之后插入内容before()-在被选元素之前插入内容<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ .
复制链接

扫一扫

专栏目录