jQuery-属性设置

最新推荐文章于 2024-06-24 17:14:01 发布

六月u6

最新推荐文章于 2024-06-24 17:14:01 发布

阅读量671

点赞数

分类专栏：前端文章标签： url 控制元素属性 jQuery

本文链接：https://blog.csdn.net/u011121046/article/details/51578577

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

使用attr()方法控制元素属性
它的作用是设置或返回元素的属性
attr(属性名);获取元素属性名的值
attr(属性名，属性值);设置元素属性名的值
例如：<a href="127.0.0.1" id="a1">点我就走</a>
var $url = $("#a1").attr("href");则$url获取到了链接的href属性

操作元素内容
html()和text()都可以。当()内参数为空时，表示获取该元素内容；而如果方法中包含参数，
则表示将参数值设置为元素内容
html()可以获取元素的html内容，原文中的代码格式也一并获取了；html把格式可以应用
tetx()只能获取元素中的文本内容，不包含html格式代码，text不能应用格式，只能把它们当字符显示出来

addClass()和.css()可以设置元素的样式
$("#cloth").addClass("blue white");addClass()可以为元素设置多个类，类名之间用空格隔开
$("#content").css({"background-color":"red","color":"white"});用css设置多个样式时，注意{}和冒号，属性
之间用逗号隔开

removeAttr(name)和removeClass(class)分别可以实现移出元素的属性和样式的功能。
$("#a1").removeAttr("href");移出<a></a>的href属性
$("#content").removeClass("white blue");移出两个class样式，中间用空格隔开

append(content)向指定的元素中追加内容，content可以使字符、HTML元素标记、返回字符串内容的函数
var $append="<div id='test' title='hi'>我是动态创建的</div>";
$("body").append($append);注意：$append的内容要连续，不能手动敲回车的换行；原来的双引号在双引号中了，
所以要改成单引号

appendTo()方法向被选元素内插入内容
$(content).appendTo(selector);content表示需要插入的内容，参数selector表示被选的元素。默认插在尾部

$($html).appendTo("div");注意双引号

<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>属性选择器</title>
		<style type="text/css">
			.blue{
				background-color: blue;
			}
			.white{
				color: white;
			}
		</style>
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	</head>
	<body>
		<h3>控制元素属性</h3>
		<a href="127.0.0.1" id="a1">点我就走</a>
		<div>我要去的地方是：<span id="tip"></span></div>
		<br />

		<h3>html()和text()获取元素内容</h3>
		<div id="content"><i>我的身体有点歪噢</i></div>
		<div id="html"></div>
		<div id="text"></div>
		<br />

		<h3>addClass()方法设置元素样式</h3>
		<div id="cloth">我穿了一件蓝色的外衣</div>

		<h3>appendTo方法插入元素</h3>
		<div id="appendTodiv">
			<span class="tutor">小乌龟</span>
		</div>
		<span class="rabbit">小兔子</span>

		<script type="text/javascript">
			var $url = $("#a1").attr("href");
			$("#tip").html($url);

			var $html = $("#content").html();
			var $text = $("#content").text();
			$("#html").html($html);
			$("#text").text($text);

			$("#cloth").addClass("blue white");

			$("#a1").removeAttr("href");

			var $append="<div id='test' title='hi'>我是动态创建的</div>";
			$("body").append($append);

			 function rethtml() {
                var $html = "<div id='test' title='hi'>我是调用函数创建的</div>"
                return $html;
            }
            $("body").append(rethtml());

            $(".rabbit").appendTo("#appendTodiv");
		</script>
	</body>
</html>