jquery中的属性和css

时间：2024-06-09 13:33:50

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）。

(function($) {

   //判断是否存在cssHooks方法

    if ( !$.cssHooks ) {

      throw("jQuery 1.4.3 or above is required for this plugin to work");

      return;

    }

    //元素是否有borderRadius属性

      if ( borderRadius && borderRadius !== "borderRadius" ) {

      $.cssHooks.borderRadius = {

    //获取元素的borderRadius属性

        get: function( elem, computed, extra ) {

          return $.css( elem, borderRadius );

        },

   //设置元素的borderRadius属性

        set: function( elem, value) {

          elem.style[ borderRadius ] = value;

        }

      };

    }

  })(jQuery);

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

相关文章