您的位置：首页 > Web前端 > JQuery

jQuery-属性设置

2016-06-03 14:27 399 查看

使用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： url 控制元素属性 jQuery

相关文章推荐

新的分享

章节导航