首页 > 代码库 > Jquery属性&css 大全

Jquery属性&css 大全

 

1.attr(name|properties|key,value|fn)  设置或返回被选元素的属性值。

示例

返回文档中所有图像的src属性值。

jQuery 代码:

$("img").attr("src");

为所有图像设置src和alt属性。

jQuery 代码:

$("img").attr({ src: "test.jpg", alt: "Test Image" });

为所有图像设置src属性。

jQuery 代码:

$("img").attr("src","test.jpg");

把src属性的值设置为title属性的值。

jQuery 代码:

$("img").attr("title", function() { return this.src });

2.removeAttr(name) 从每一个匹配的元素中删除一个属性

示例

将文档中图像的src属性删除

HTML 代码:

<img src="http://www.mamicode.com/test.jpg"/>

jQuery 代码:

$("img").removeAttr("src");

结果:

[ <img /> ]

3. prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值。

示例

选中复选框为true,没选中为false

jQuery 代码:

$("input[type=‘checkbox‘]").prop("checked");

禁用页面上的所有复选框。

jQuery 代码:

$("input[type=‘checkbox‘]").prop({disabled: true});

禁用和选中所有页面上的复选框。

jQuery 代码:

$("input[type=‘checkbox‘]").prop("disabled", false);

$("input[type=‘checkbox‘]").prop("checked", true);

通过函数来设置所有页面上的复选框被选中。

jQuery 代码:

$("input[type=‘checkbox‘]").prop("checked", function( i, val ) {

  return !val;

});

4. removeProp(name) 用来删除由.prop()方法设置的属性集

示例

设置一个段落数字属性,然后将其删除。

HTML 代码:

<p> </p>

jQuery 代码:

var $para = $("p");

$para.prop("luggageCode", 1234);

$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");

$para.removeProp("luggageCode");

$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");

结果:

The secret luggage code is: 1234. Now the secret luggage code is: undefined.

5. addClass(class|fn) 为每个匹配的元素添加指定的类名。

示例

为匹配的元素加上 ‘selected‘ 类

jQuery 代码:

$("p").addClass("selected");

$("p").addClass("selected1 selected2");

回调函数 描述:

给li加上不同的class

HTML 代码:

<ul>

      <li>Hello</li>

      <li>Hello</li>

      <li>Hello</li>

</ul>

jQuery 代码:

$(‘ul li:last‘).addClass(function() {

 

  return ‘item-‘ + $(this).index();

});

6. removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。

示例

从匹配的元素中删除 ‘selected‘ 类

jQuery 代码:

$("p").removeClass("selected");

删除匹配元素的所有类

jQuery 代码:

$("p").removeClass();

回调函数描述:

删除最后一个元素上与前面重复的class

jQuery 代码:

$(‘li:last‘).removeClass(function() {

    return $(this).prev().attr(‘class‘);

});

7. toggleClass(class|fn[,sw]) 如果存在(不存在)就删除(添加)一个类。

示例

为匹配的元素切换 ‘selected‘ 类

jQuery 代码:

$("p").toggleClass("selected");

每点击三下加上一次 ‘highlight‘ 类

HTML 代码:

<strong>jQuery 代码:</strong>

jQuery 代码:

  var count = 0;

  $("p").click(function(){

      $(this).toggleClass("highlight", count++ % 3 == 0);

  });

回调函数 描述:

根据父元素来设置class属性

jQuery 代码:

$(‘div.foo‘).toggleClass(function() {

  if ($(this).parent().is(‘.bar‘) {

    return ‘happy‘;

  } else {

    return ‘sad‘;

  }

});

8. html([val|fn]) 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

示例

返回p元素的内容。

jQuery 代码:

$(‘p‘).html();

设置所有 p 元素的内容

jQuery 代码:

$("p").html("Hello <b>world</b>!");

回调函数描述:

使用函数来设置所有匹配元素的内容。

jQuery 代码:

$("p").html(function(n){

    return "这个 p 元素的 index 是:" + n;

});

9. text([val|fn]) 取得所有匹配元素的内容。

示例

返回p元素的文本内容。

jQuery 代码:

$(‘p‘).text();

设置所有 p 元素的文本内容

jQuery 代码:

$("p").text("Hello world!");

回调函数 描述:

使用函数来设置所有匹配元素的文本内容。

jQuery 代码:

$("p").text(function(n){

    return "这个 p 元素的 index 是:" + n;

    });

10. val([val|fn|arr]) 获得匹配元素的当前值。

示例

获取文本框中的值

jQuery 代码:

$("input").val();

设定文本框的值

jQuery 代码:

$("input").val("hello world!");

回调函数 描述:

设定文本框的值

jQuery 代码:

$(‘input:text.items‘).val(function() {

  return this.value + ‘ ‘ + this.className;

});

11. css(name|pro|[,val|fn]) 访问匹配元素的样式属性。

示例

取得第一个段落的color样式属性的值。

jQuery 代码:

$("p").css("color");

将所有段落的字体颜色设为红色并且背景为蓝色。

jQuery 代码:

$("p").css({ "color": "#ff0011", "background": "blue" });

将所有段落字体设为红色

jQuery 代码:

$("p").css("color","red");

逐渐增加div的大小

jQuery 代码:

  $("div").click(function() {

    $(this).css({

      width: function(index, value) {

        return parseFloat(value) * 1.2;

      },

      height: function(index, value) {

        return parseFloat(value) * 1.2;

      }

    });

  });

12. jQuery.cssHooks 直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性。

定义一个新的 cssHook 十分简单。下面的模板可以方便您创建自己的 cssHook:

(function($) {

    // first, check to see if cssHooks are supported

    if ( !$.cssHooks ) {

      // if not, output an error message

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

      return;

    }

      $.cssHooks["someCSSProp"] = {

      get: function( elem, computed, extra ) {

        // handle getting the CSS property

      },      set: function( elem, value ) {

        // handle setting the CSS value

     }

    };

  })(jQuery); 

 

            // add property to $.support so it can be accessed elsewhere

      $.support[ prop ] = supportedProp;

            return supportedProp;

    }

      // call the function, e.g. testing for "border-radius" support:

    styleSupport( "borderRadius" );

  })(jQuery); 

13. offset([coordinates]) 获取匹配元素在当前视口的相对偏移。

示例

获取第二段的偏移

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:last");

var offset = p.offset();

p.html( "left: " + offset.left + ", top: " + offset.top );

结果:

<p>Hello</p><p>left: 0, top: 35</p>

获取第二段的偏移

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

$("p:last").offset({ top: 10, left: 30 });

14. position() 获取匹配元素相对父元素的偏移。

示例

描述:

获取第一段的偏移

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:first");

var position = p.position();

$("p:last").html( "left: " + position.left + ", top: " + position.top );

结果:

<p>Hello</p><p>left: 15, top: 15</p>

15. scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。

示例

获取第一段相对滚动条顶部的偏移

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:first");

$("p:last").text( "scrollTop:" + p.scrollTop() );

结果:

<p>Hello</p><p>scrollTop: 0</p>

设置相对滚动条顶部的偏移

jQuery 代码:

$("div.demo").scrollTop(300);

16. scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移。

示例

获取第一段相对滚动条左侧的偏移

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:first");

$("p:last").text( "scrollLeft:" + p.scrollLeft() );

结果:

<p>Hello</p><p>scrollLeft: 0</p>

设置相对滚动条左侧的偏移

jQuery 代码:

$("div.demo").scrollLeft(300);

17. height([val|fn]) 取得匹配元素当前计算的高度值(px)。

示例

获取第一段的高

jQuery 代码:

$("p").height();

把所有段落的高设为 20:

jQuery 代码:

$("p").height(20);

参数function(index, height) 描述:

以 10 像素的幅度增加 p 元素的高度

jQuery 代码:

  $("button").click(function(){

    $("p").height(function(n,c){

    return c+10;

    });

  });

18. width([val|fn]) 取得第一个匹配元素当前计算的宽度值(px)。

示例

获取第一段的宽

jQuery 代码:

$("p").width();

把所有段落的宽设为 20:

jQuery 代码:

$("p").width(20);

以 10 像素的幅度增加 p 元素的宽度

jQuery 代码:

  $("button").click(function(){

    $("p").width(function(n,c){

    return c+10;

    });

  });

19. innerHeight() 获取第一个匹配元素内部区域高度(包括补白、不包括边框)。

示例

获取第一段落内部区域高度。

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:first");

$("p:last").text( "innerHeight:" + p.innerHeight() );

结果:

<p>Hello</p><p>innerHeight: 16</p>

20. innerWidth() 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。

示例

描述:

获取第一段落内部区域宽度。

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:first");

$("p:last").text( "innerWidth:" + p.innerWidth() );

结果:

<p>Hello</p><p>innerWidth: 40</p>

21. outerHeight([options]) 获取第一个匹配元素外部高度(默认包括补白和边框)。

示例

描述:

获取第一段落外部高度。

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:first");

$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

结果:

<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>

22. outerWidth([options]) 获取第一个匹配元素外部宽度(默认包括补白和边框)。

示例

描述:

获取第一段落外部宽度。

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:first");

$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );

结果:

<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>

 

Jquery属性&css 大全