jQuer对象的Gettter和Setter方法 -上篇

最新推荐文章于 2023-10-13 18:00:25 发布

(^_^ )

最新推荐文章于 2023-10-13 18:00:25 发布

阅读量194

点赞数

分类专栏： jQuery 文章标签：求喷

本文链接：https://blog.csdn.net/qq_38263696/article/details/83005174

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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>