jquery中的属性和css

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

//html
<img src="1.jpg" alt=""/>//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中的css用于设置元素的css样式

1.css（）设置元素的css样式

//html
<div class="box">it's a box</div>//jquery
$(".box").css({width:"100px",height:"100px",border:"1px solid #f00"})//div元素的宽变为了100px，高变为了100px，边框为红色的1px宽度的实线

2.jQuery.cssHook.直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性。$.cssHooks 对象提供了一种通过定义函数来获取或设置特定 CSS 值的方法。可以用它来创建新的 cssHooks 用于标准化 CSS3 功能，例如，盒子阴影（box shadows）及渐变（gradients）。

3.offset({coordinates}):获取或设置元素在当前视口中的位移，单位为px；position()：获取元素相对于父元素的位移

//html
<div class="box">
<p>this is a p</p>
</div>//jquery
$(".box").offset({top:50,left:100})//div元素处于窗口距离左边100px，上边50px的位置
$(".box p").position()//返回p元素在div中的位置对象，该对象有left，top两个属性

4.scrollTop():获取或设置匹配元素相对滚动条顶部的偏移；scrollLeft():获取或设置匹配元素相对滚动条左边的偏移。这两种方法对可见和隐藏元素均有效。

//html
<div class="box">box</box>//jquery
$(".box").scrollTop(50).scrollLeft(100)//div元素处于距离滚动条上边50px，左边100px的位置。

5.height():获取或设置元素的高度；width():获取或设置元素的宽度；innerHeight():获取元素的高度（不包括元素的边框及外边距）；innerWidth():获取元素的宽度（不包括元素的边框及外边距）；outerHeight([option]):获取元素的高度，option为true时包括元素的边框及外边距；outerWidth():获取元素的宽度，option为true时包括元素的边框及外边距。

//html
<div class="box">this is a box</div>//style
.box{ width:100px;height:100px;border:1px solid #000;margin:50px 20px 0 0}//jquery
$(".box").width(200)//宽度变为200px
$(".box").height(300)//高度变为300px
$(".box").innderWidth()//200px
$(".box").innderHeight()//300px
$(".box").outerWidth(true)//222px
$(".box").outerHright(true)//352px