jquery中的属性

Posted 吴晓尚

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery中的属性相关的知识,希望对你有一定的参考价值。

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

 

以上是关于jquery中的属性的主要内容,如果未能解决你的问题,请参考以下文章

将多个输出中的hls属性设置为单独的片段代码

Jquery插件 easyUI属性汇总

jQuery应用 代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

如何将 View 类中的代码片段移动到 OnAppearing() 方法?

Chrome-Devtools代码片段中的多个JS库