前端开发利器jQuery-操作属性

共计 6004 个字符，预计需要花费 16 分钟才能阅读完成。

每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。

jQuery筛选器之操作属性

jQuery筛选器之操作属性示例

• $("SET").attr(name/properties/key,value/fn);

• 参数name 描述:

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

jQuery代码:

1

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

• 参数properties 描述:

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

jQuery代码:

1

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

• 参数key,value

为所有图像设置src属性

jQuery代码:

1

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

• 参数key,回调函数

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

jQuery代码:

1

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

• $("SET").removeAttr(name);

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

HTML代码:

1

<img src="test.jpg"/>

jQuery代码:

1

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

结果:

1

[ <img /> ]

• $("SET").prop(name|properties|key,value|fn);

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

key,function(index, attr)

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

• 参数name

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

jQuery代码:

1

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

• 参数properties

禁用页面上的所有复选框

jQuery代码:

1
2
3

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

• 参数key,value

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

jQuery代码

1
2

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

• 参数key,回调函数

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

jQuery代码:

1
2
3

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

• $("SET").removeProp(name);

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

HTML代码:

1

<p> </p>

jQuery代码:

1
2
3
4
5

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")), ". ");

结果:

1

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

jQuery筛选器之操作HTML代码/文本/值

读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text()

• .html与.text的异同`

1. .html与.text的方法操作是一样，只是在具体针对处理对象不同
2. .html处理的是元素内容，.text处理的是文本内容
3. .html只能使用在HTML文档中，.text在XML和HTML文档中都能使用
4. 如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
5. 火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器

jQuery筛选器之操作HTML代码/文本/值示例

• $("SET").html([val|fn]);

这个函数不能用于XML文档。但可以用于XHTML文档。

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

.htm()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）

function(index, html)接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

返回p元素的内容

jQuery代码:

1

$('p').html();

• 参数val

设置所有p元素的内容

jQuery代码:

1

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

• 回调函数

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

jQuery代码:

1
2
3

$("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

• $("SET").text([val|fn]);

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

.text()结果返回一个字符串，包含所有匹配元素的合并文本

返回p元素的文本内容。

jQuery代码:

1

$('p').text();

• 参数val

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

jQuery代码:

1

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

• 回调函数

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

jQuery代码:

1
2
3

$("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

• $("SET").val([val|fn|arr]);

jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input,select和 textarea

获取文本框中的值

jQuery代码:

1

$("input").val();

• 参数val

设定文本框的值

jQuery代码:

1

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

• 回调函数

设定文本框的值

jQuery代码:

1
2
3

$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});

• 参数array

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

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13

<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代码:

1
2
3

$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);

jQuery筛选器之操作CSS样式

jQuery筛选器之操作CSS样式示例

• $("SET").addClass(class|fn);

.addClass();方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

为匹配的元素加上selected类

jQuery代码:

1
2

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

• 回调函数

给li加上不同的class

HTML代码

1
2
3
4
5

<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>

jQuery代码:

1
2
3

$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

• $("SET").removeClass([class/fn]);

如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除

• 参数class

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

jQuery代码:

1

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

• 参数class

删除匹配元素的所有类

jQuery代码:

1

$("p").removeClass();

• 回调函数

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

jQuery代码:

1
2
3

$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});

• $("SET").toggleClass(class|fn[,sw]);

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

1. 用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
2. 一个用来判断样式类添加还是移除的boolean值。

• 参数class

为匹配的元素切换selected类

jQuery代码:

1

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

• 参数class,switch

每点击三下加上一次highlight类

HTML代码:

1

<strong>jQuery 代码:</strong>

jQuery代码:

1
2
3
4

var count = 0;
$("p").click(function(){
    $(this).toggleClass("highlight", count++ % 3 == 0);
});

• 回调函数

根据父元素来设置class属性

jQuery代码:

1
2
3
4
5
6
7

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});