属性 css类 HTML代码/文本/值

属性

attr(name|properties|key,value|fn)

概述

设置或返回被选元素的属性值。

参数

nameString

属性名称

properties

作为属性的“名/值对”对象

key,valueString,Object

属性名称，属性值

key,function(index, attr)String,Function

1:属性名称。

2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

示例

参数name 描述:

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

jQuery 代码:

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

参数properties 描述:

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

jQuery 代码:

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

参数key,value 描述:

为所有图像设置src属性。

jQuery 代码:

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

参数key,回调函数 描述:

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

jQuery 代码:

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

 

 

removeAttr(name)

概述

从每一个匹配的元素中删除一个属性

1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。

参数

Name                                String

要删除的属性名

示例

描述:

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

HTML 代码:

<img src="test.jpg"/>

jQuery 代码:

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

结果:

[ <img /> ]

 

 

prop(name|properties|key,value|fn)

概述

获取在匹配的元素集中的第一个元素的属性值。//跟first（）有什么区别吗？

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

参数

Name                         String

属性名称

properties

作为属性的“名/值对”对象

key,value

属性名称，属性值

key,function(index, attr)

1:属性名称。

2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

示例

参数name 描述:

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

jQuery 代码:

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

参数properties 描述:

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

jQuery 代码:

$("input[type='checkbox']").prop({

  disabled: true

});

参数key,value 描述:

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

jQuery 代码:

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

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

参数key,回调函数 描述:

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

jQuery 代码:

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

  return !val;

});

 

removeProp(name)

概述

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

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

参数

propertyName                                String

要删除的属性名

示例

描述:

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

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. 

 

CSS 类

addClass(class|fn)

概述

为每个匹配的元素添加指定的类名。

参数

Class                         String            

一个或多个要添加到元素中的CSS类名，请用空格分开

function(index, class)

此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

示例

参数class 描述:

为匹配的元素加上 '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();

});

 

removeClass([class|fn])

概述

从所有匹配的元素中删除全部或者指定的类。

参数

Class                                       String

一个或多个要删除的CSS类名，请用空格分开

function(index, class)                                   Function

此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

示例

参数class 描述:

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

jQuery 代码:

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

参数class 描述:

删除匹配元素的所有类

jQuery 代码:

$("p").removeClass();

回调函数描述:

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

jQuery 代码:

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

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

});

 

toggleClass(class|fn[,sw])

概述

如果存在（不存在）就删除（添加）一个类。

参数

class

CSS类名

class,switch

1:要切换的CSS类名.

2:用于决定元素是否包含class的布尔值。

switch

用于决定元素是否包含class的布尔值。

function(index, class,switch)[, switch]

1:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。

2: 一个用来判断样式类添加还是移除的 boolean 值。

示例

参数class 描述:

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

jQuery 代码:

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

参数class,switch 描述:

每点击三下加上一次 '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';

  }

});

 

HTML代码/文本/值

html([val|fn])

概述

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

参数

valString

用于设定HTML内容的值

function(index, html)

此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

示例

无参数 描述:

返回p元素的内容。

jQuery 代码:

$('p').html();

参数val 描述:

设置所有 p 元素的内容

jQuery 代码:

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

回调函数描述:

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

jQuery 代码:

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

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

    });

text([val|fn])

概述

取得所有匹配元素的内容。

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

参数

valString

用于设置元素内容的文本

function(index, text)

此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。

示例

无参数 描述:

返回p元素的文本内容。

jQuery 代码:

$('p').text();

参数val 描述:

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

jQuery 代码:

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

回调函数 描述:

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

jQuery 代码:

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

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

    });

val([val|fn|arr])

概述

获得匹配元素的当前值。

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

参数

valString

要设置的值。

function(index, value)Function

此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。

arrayArray<String>

用于 check/select 的值

示例

无参数 描述://有责设定，无则获取。

获取文本框中的值

jQuery 代码:

$("input").val();

参数val 描述:

设定文本框的值

jQuery 代码:

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

回调函数 描述:

设定文本框的值

jQuery 代码:

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

  return this.value + ' ' + this.className;

});

参数array 描述:

设定一个select和一个多选的select的值

HTML 代码:

<select id="single">

  <option>Single</option>

  <option>Single2</option>

</select>

<select id="multiple" multiple="multiple">

  <option selected="selected">Multiple</option>

  <option>Multiple2</option>

  <option selected="selected">Multiple3</option>

</select><br/>

<input type="checkbox" value="check1"/> check1

<input type="checkbox" value="check2"/> check2

<input type="radio" value="radio1"/> radio1

<input type="radio" value="radio2"/> radio2

jQuery 代码:

$("#single").val("Single2");

$("#multiple").val(["Multiple2", "Multiple3"]);

$("input").val(["check2", "radio1"]);