jQuery操作元素的属性

  • 首先通过选择器获取到元素对象
  • 获取
    • 对象名.attr(“属性名”) —-返回当前属性值
    • 注意此种方式不能获取value属性的实时数据，使用对象名.val()进行获取。
    • 对象名.attr相当于原生的-元素对象名.getAttribute(“属性名”);获取的不是value属性的实时数据
    • val()方法返回获取匹配的元素集合中第一个元素的当前值。
  • 修改
    • 对象名.attr(“属性名”,”属性值”); 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      <html>
      	<head>
      		<title>jQuery操作元素的属性</title>
      		<meta charset="UTF-8"/>
      		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
      		<script type="text/javascript">
      			function testField(){
      				//获取元素对象
      				var uname=$("#uname");
      				//获取
      				alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
      			}
      			
      			function testField2(){
      				//获取元素对象
      				var uname=$("#uname");
      				uname.attr("type","button");
      			}	
      		</script>
      	</head>
      	<body>
      		<h3>jquery操作元素属性</h3>
      		<input type="button" name="" id="" value="测试获取元素属性" onclick="testField()" />
      		<input type="button" name="" id="" value="测试修改元素属性" onclick="testField2()" />
      		<hr />
      		用户名:<input type="text" name="uname" id="uname" value="哈哈" />
      	</body>
      </html>

      jQuery 操作元素内容

  • 获取元素对象
    • 对象名.html()—-返回当前对象的所有内容，包括HTML标签。
    • 对象名.text()—-返回当前对象的文本内容，不包括HTML标签
    • 对象名.html()相当于原生js中的对象名.innerHTML
    • 对象名.text()相当于原生js中的对象名.innerText
  • 修改
    • 对象名.html(“新的内容”)—-新的内容会将原有内容覆盖，HTML标签会被解析执行
    • 对象名.text(“新的内容”)—-新的内容会将原有内容覆盖，HTML标签不会被解析
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      <html>
      	<head>
      		<title>操作元素HTML</title>
      		<meta charset="UTF-8"/>
      		<!--引入jQuery文件-->
      		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
      		<!--声明js代码域-->
      		<script type="text/javascript">
      			//声明函数
      			function testHtml(){
      				//获取元素对象
      					var showdiv=$("#showdiv");
      				//获取元素的内容
      					alert(showdiv.html());
      			}
      			
      			function testHtml2(){
      				//获取元素对象
      				var showdiv=$("#showdiv");
      				//修改元素内容
      				showdiv.html(showdiv.html()+"<i>今天天气真好，适合抓鬼子</i>");//内容追加
      			}
      			
      			function testText(){
      				//获取元素对象
      				var showdiv=$("#showdiv");
      				//获取元素内容
      				alert(showdiv.text());
      			}
      			
      			function testText2(){
      				//获取元素对象
      				var showdiv=$("#showdiv");
      				//修改元素内容
      				showdiv.text("<i>今天天气真好，适合抓鬼子</i>");
      			}
      			
      			
      		</script>
      	</head>
      	<body>
      		<h3>操作元素HTML</h3>
      		<input type="button" name="" id="" value="测试获取元素内容--html()" onclick="testHtml()" />
      		<input type="button" name="" id="" value="测试修改元素内容--html()" onclick="testHtml2()" />
      		<input type="button" name="" id="" value="测试获取元素内容--text()" onclick="testText()" />
      		<input type="button" name="" id="" value="测试修改元素内容--text()" onclick="testText2()" />
      		<div id="showdiv">
      			<b>皇军，前面有八路的干活</b>
      		</div>
      	</body>
      </html>