jQuery属性相关

最新推荐文章于 2023-03-21 17:02:08 发布

Tony_Liu0611

最新推荐文章于 2023-03-21 17:02:08 发布

阅读量180

点赞数

分类专栏： web前段(jQuery)

本文链接：https://blog.csdn.net/Tony_Liu0611/article/details/51931228

版权

web前段(jQuery) 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>属性相关</title>
	<script type="text/javascript" src="../jquery-2.2.3.js"></script>
	<style type="text/css">
	.class_p{
	font-size: 40px;
	color: blue;
	}

	</style>
	</head>
	<body>
	<div>
	<ul>
	<li class="lang_js">javascript</li>
	<li name="lang_java">javascript & java</li>
	</ul>
	</div>

	<p id="p_1">这是一个段落</p>
	<div class="div_1">

	</div>

	<input type="button" value="html/text" onclick="fn1(this);" />
	<br />

	<input type="button" value="addClass" onclick="fn2(this);" />
	<br />

	<input type="button" value="removeClass" onclick="fn3(this)" />
	<br />

	<input type="button" value="toggleClass" onclick="fn4(this)" >
	<br />

	<input type="button" value="css" onclick="fn5(this)" />
	<br />

	<input type="button" value="val" onclick="fn6(this)" />

	<script type="text/javascript">
	function fn1 (ele) {
	//获得class="lang_js" 的li
	var li_1 = $("ul li.lang_js");
	var li_2 = $("ul li[name = lang_java]");

	//html() 和 text() 的区别和用法
	console.log(li_1.html());
	console.log(li_2.html());
	console.log(li_2.text());

	//设值
	$(".div_1").html("<span style='color:red;'>这是通过html()设值的span元素</span>");
	$(".div_1 span").text("来打我啊！我要10个！");
	}

	function fn2 (ele) {
	//addClass()：给元素添加类样式
	$("#p_1").addClass("class_p");
	}

	function fn3 (ele) {
	//removeClass(): 移除某个元素的样式
	$("#p_1").removeClass("class_p");
	}

	function fn4 (ele) {
	//toggleClass(): 从添加和移除样式之间进行切换。
	$("#p_1").toggleClass("class_p");
	}

	function fn5 (ele) {
	//css()：给元素设置样式或获取样式
	//设值
	$(".lang_js").css("color", "red");

	//获取
	console.log($(".lang_js").css("color"));

	//同时设值多个样式
	$(".lang_js").css({
	"font-size" : "50px",
	color : "green"
	});

	//链式语法也可以同时设值多个样式
	$(".lang_js").css("color", "blue").css("font-size", "10px");
	}

	function fn6 (ele) {
	//val(): 获得value值和设值value值
	$(ele).val("改变自己！");
	//获得
	console.log($(ele).val());
	}

	</script>
	</body>
	</html>

Tony_Liu0611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery属性相关

lang="en"> charset="UTF-8"> 属性相关 type="text/javascript" src="../jquery-2.2.3.js"> type="text/css"> .class_p{ font-size: 40px; c
复制链接

扫一扫