jquery中的属性

Posted 2020-08-09 吴晓尚

jQuery中的属性用于获取或设置元素的属性

1.attr(),获取或设置所有相匹配的元素的属性值；removeAttr("attr")，移除所有相匹配的元素的属性

//html
<img src="1.jpg" />

//jquery
$("img").attr("src")//"1.jpg"获取img的src属性值
$("img")attr({src:"2.jpg",alt:"this is a img"})//<img src="2.jpg" alt="this is a img"/> img的src值变为了"2.jpg",alt属性值变为了"this is a img"
$("img").removeAttr("alt")//<img src="2.jpg" /> 移除了img的alt属性，此时再次访问alt属性值会返回undefined。

 2.prop(),获取或设置相匹配的元素中第一个元素的属性值;removeprop("attr"),移除相匹配的元素中第一个元素的属性

//html
<p title="first">first</p>
<p title="last">last</p>

//jquery
$("p").prop("title","lucky")//<p title="lucky">first</p>只改变了第一个p的title值
$("p").attr("title","lucky")//<p title="lucky">first</p>,<p title="lucky">last</p>两个p的title值都改变了
$("p").removeProp("title")//<p>first</p>只移除了第一个p的title值
$("p").removeAttr("title","lucky")//<p>first</p>,<p>last</p>两个p的title值都移除了

 3.addClass(“”),给元素增加类名，即class的属性值；removeClass(""),移除元素的类名；toggleClass（“”）元素有该类名移除，没有该类名则增加

//html
<div class="box">box1</div>
<div class="two">box2</div>

//jquery
$("div").addClass("do")//<div class="box do">box1</div>,<div class="two do">box2</div>div元素都增加了do的类名
$("div").removeClass("do")//<div class="box">box1</div>,<div class="two">box2</div>div元素都移除了do的类名
$("div").toggleClass("box")//<div class="">box1</div>,<div class="two box">box2</div>第一个div移除了box类名，第二个div增加了box类名

 4.html(),获取或设置元素中的内容，包括html标签。等同于js中的innerHTML；text（），获取或改变元素标签中的文本内容。等同于js中的textContent；val()获取元素的value值，等同于js中的value

//html
<div class="box">box<p>it‘s a p</p></div>
<div class="text">text<p>it‘s a p</p></div>
<input type="text" value="text"/>

//jquery
//获取
$(".box").html()//“box it‘s a p”  div标签中的内容以html方式获取
$(".box").text()//“box <p>it‘s a p</p>” div标签中的内容以text方式获取
$("input[type=‘text‘]").val（）//"text" 获取input元素中的value值
//设置
$(".box").html("<u>aaa</ul>")// "aaa" div标签中的内容以html格式显现
$(".text").text("<u>aaa</ul>")//<u>aaa</ul> div标签中的内容以html格式显现
$("input[type=‘text‘]").val("noval")//<input type="text" value="noval"/>将input元素中的value值改为了noval