jQuery的getter和setter概述
jQuery使用同一个方法来获取和设置 HTML属性 CSS样式 CSS类 HTML表单值 元素内容 位置高宽 元素数据
用作setter时, 会给jQuery对象中的每一个元素设置,方法接受对象参数或函数
函数是这样的 function(index,value/当前对应元素的属性值/){this是jQuery对象对应的元素}
用作getter时, 会获取jQuery对象中的第一个元素的相应的值
获取和设置HTML属性
attr(),removeAttr()。(与原生setAttrinute(), getAttribute() ,removeAttribute类似 )
获取和设置CSS属性
css()方法 返回元素的计算样式
获取和设置CSS类
addClass() removeClass() removeClass() hasClass() toggleClass() ;
获取和设置HTML表单值
val()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>this is test</title>
<script src="jquery-1.4.2.js"></script>
<style>
p{
font-size: 18px;
}
</style>
</head>
<body>
<h1 align="center" class="really">博主最帅</h1>
<h1 align="center" class="believe"> 博主最帅</h1>
<p class="p_test good">我是博主派来测试的小网页</p>
<p>我是博主派来测试的小网页</p>
<p>我是博主派来测试的小网页</p>
<p >我是博主派来测试的小网页</p>
<form action="#">
<p>
<lable>账号: </lable><input type="text" name="user" id="user" value="请输入账号">
</p>
<p>
<lable>密码: </lable><input type="text" name="pwd">
</p>
<p>
<label>性别: </label>
<label><input type="radio" name="gender" value="1" checked="checked"> 男</label>
<label><input type="radio" name="gender" value="2"> 女</label>
</p>
<p>
<label>爱好: </label>
<label><input type="checkbox" name="inter" value="1">游戏</label>
<label><input type="checkbox" name="inter" value="2">音乐</label>
<label><input type="checkbox" name="inter" value="3">电视</label>
</p>
<p>
<label>职业:</label>
<select name="love" id="love">
<option>
前端
</option>
<option>
PHP
</option>
<option>
后端
</option>
</select>
</p>
<p>
<input type="submit" value="注册">
</p>
</form>
</body>
</html>
<script>
//获取和设置HTML属性(att()方法)
var ps= document.getElementsByTagName("p");
ps=[].slice.call(ps,0);
ps.map(function(ele,index,arr){
ele.setAttribute("博主真帅","true");
},window);
console.log( ps[0].getAttribute("博主真帅")); //"true"
$("p").attr("className","go");
$("p").removeAttr("博主真帅");
//获取和设置css属性(css()方法设置 行间样式,或 获取计算样式)
$("p").css("backgroundColor",function(index,value){
var arr=["red","orange","yellow","blue"];
this.style.fontWidth="bolder";
return arr[index];
});
console.log($("p").css("font-size")); //"18px"
//获取和设置CSS类
//注意: class属性值 会被解析成为一个由空格分开的CSS类名列表
//addClass(), removeClass(),toggleClass()/*元素没有某些类,则添加,否则删除*/, hasClass()
$('h1').addClass(function(n){return "h1"+n});
var hs = document.getElementsByTagName("h1");
console.log([].map.call(hs,function(v,i,a){return v.className;})); //Array [ "really believe", "believe" ]
$('h1').removeClass("really h10");
//getterh和setterHTML表单值
// val()方法用来设置和获取HTML表单元素的value属性.
$("#user").val("very good"); //设置用户名
console.log($("#input").val()); //"vert good"
console.log($("#love").val() ==="前端") ; // true
console.log($("input:radio[name=gender]:checked").val()); //1
$("input:checkbox").val(["1","2"]); //选中带有这些名字或值得复选框
function test(){
$("input:text").val(function(i,attributeValue){return this.defaultValue});
}
setTimeout(test,3000); //3秒后文本框恢复原值
</script>