jquery教程之属性操作函数
一、html 取得第一个匹配元素的html内容
获取
$('p').html();
设置
$('p').html('设置html内容');
二、text 取得所有匹配元素的内容
$('p').text();
三、val 获得匹配元素的当前值,主要是表单元素
$('textarea').val();
$('textarea').val('设置val');
四、类名class
<p class="selected"></p>
addClass 为每个匹配的元素添加指定的类名
$("p").addClass("selected")
removeClass 从所有匹配的元素中删除全部或者指定的类。
$("p").removeClass("selected");
toggleClass 如果存在(不存在)就删除(添加)一个类。
$("p").toggleClass("selected");
五、属性
1.attr 推荐使用
attr(k,v)
attr 设置或者获取属性
var title=$("p").attr("title")
$("p").attr("title", "设置title");
$("check").attr("checked",true);
removeAttr 删除属性
$("p").removeAttr("title")
2.prop 不推荐
prop 是针对元素本身就带有的固有属性,比如id class title name checked等
prop 设置或者获取属性
var title=$("p").prop("title")
$("p").prop("title","设置title");
$("#check").prop("checked",true)
$("#check").proQp("checked",false)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a{
color: #0F8E82;
}
.b{
color: #E51400;
}
[title]{
color: red;
}
[tt]{
font-size: 36px;
}
</style>
</head>
<body>
<div id="el">
<p>第一段</p>
<p>第二段</p>
<textarea>val内容</textarea>
<div>
<button onclick='$("#el").addClass("a")'>addClass</button>
<button onclick='$("#el").removeClass("a")'>removeClass</button>
<button onclick='$("#el").toggleClass("a")'>toggleClass</button>
</div>
<div>
<input type="checkbox" id="check" />
</div>
<div>
<button onclick='$("#check").attr("checked",true)'>checked true</button>
<button onclick='$("#check").attr("checked",false)'>checked false</button>
<button onclick='$("#check").removeAttr("checked")'>checked remove</button>
<button onclick='$("#el").attr("tt","增加attr")'>add tt </button>
<button onclick='$("#el").removeAttr("tt")'>remove tt</button>
<button onclick='$("#el").attr("title","aaa")'>add title</button>
<button onclick='$("#el").removeAttr("title")'>remove title</button>
</div>
<div>
<button onclick='$("#check").prop("checked",true)'>checked true</button>
<button onclick='$("#check").prop("checked",false)'>checked false</button>
</div>
</div>
<script src="../jquery.min.js"></script>
<script>
console.log($('#el').html())
$('#el p:first').html('p first')
console.log($('p').text())
$('textarea').val('设置咯')
console.log($('textarea').val());
$('#el').addClass("a")
</script>
</body>
</html>