EasyClick Html UI 第二十节 jQuery获取和设置元素内容、属性
html方法的使用
jquery中的html方法可以获取和设置标签的html内容
示例
<script>
$(function(){
var $div = $("#div1");
// 获取标签的html内容
var result = $div.html();
alert(result);
// 设置标签的html内容,之前的内容会清除
$div.html("<span style='color:red'>你好</span>");
// 追加html内容
$div.append("<span style='color:red'>你好</span>");
});
</script>
<div id="div1">
<p>hello</p>
</div>
说明:给指定标签追加html内容使用append方法.
prop方法的使用
之前使用css方法可以给标签设置样式属性,那么设置标签的其它属性可以使用prop方法了。
示例
<style>
.a01{
color:red;
}
</style>
<script>
$(function(){
var $a = $("#link01");
var $input = $('#input01')
// 获取元素属性
var sId = $a.prop("id");
alert(sId);
// 设置元素属性
$a.prop({"href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});
// 获取value属性
// var sValue = $input.prop("value");
// alert(sValue);
// 获取value属性使用val()方法的简写方式
var sValue = $input.val();
alert(sValue);
// 设置value值
$input.val("222222");
})
</script>
<a id="link01">这是一个链接</a>
<input type="text" id="input01" value="111111">
说明: 获取value属性和设置value属性还可以通过val方法来完成。
总结
- 获取和设置元素的内容使用: html方法
- 给指定元素追加html内容使用: append方法
- 获取和设置元素属性的操作可以通过prop方法来完成
- 获取和设置元素的value属性可以通过val方法来完成,更加简单和方便
交流QQ群:620028786,647082990,772810035
————————————————— 版权声明—————————————-————
版权所有~Mr-老鬼 ~转载请注明原文地址
免责声明:本文所有的教程仅限交流学习使用不得用于违法用途,造成的法律后果本人不承担责任。