• 为了保证你在浏览本网站时有着更好的体验,建议使用类似Chrome、Firefox之类的浏览器~~
    • 如果你喜欢本站的内容何不Ctrl+D收藏一下呢,与大家一起分享各种编程知识~
    • 本网站研究机器学习、计算机视觉、模式识别~当然不局限于此,生命在于折腾,何不年轻时多折腾一下

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

web admin 2年前 (2016-07-16) 534次浏览 0个评论 扫描二维码

jquery-selectors-02

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

jQuery 筛选器之操作属性

方法 描述
$("SET").attr(name/properties/key,value/fn); 设置或返回被选元素的属性值
$("SET").removeAttr(name); 从每一个匹配的元素中删除一个属性
$("SET").prop(name/properties/key,value/fn); 获取在匹配的元素集中的第一个元素的属性值
$("SET").removeProp(name); 用来删除由.prop()方法设置的属性集

jQuery 筛选器之操作属性示例

  • $("SET").attr(name/properties/key,value/fn);
属性 描述
name 属性名称
properties 作为属性的“名/值”对象
key,value 属性名称,属性值
key,function(index, attr) 属性名称,返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。
  • 参数 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);
参数 描述
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 值的属性,而忽略了浏览器生成的任何错误

参数 描述
name 属性名称
properties 作为属性的名/值对对象
key,value 属性名称,属性值

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);
参数 描述
propertyName 要删除的属性名

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

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()

方法 描述
$("SET").html([val/fn]); 取得第一个匹配元素的 html 内容
$("SET").text([val/fn]); 取得所有匹配元素的内容
$("SET").val([val/fn/arr]); 获得匹配元素的当前值
  • .html 与.text 的异同`
  1. .html.text的方法操作是一样,只是在具体针对处理对象不同
  2. .html处理的是元素内容,.text处理的是文本内容
  3. .html只能使用在 HTML 文档中,.textXMLHTML文档中都能使用
  4. 如果处理的对象只有一个子文本节点,那么 html 处理的结果与 text 是一样的
  5. 火狐不支持innerText属性,用了类似的textContent属性,.text()方法综合了 2 个属性的支持,所以可以兼容所有浏览器

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

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

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

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

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

参数 描述
val 用于设定 HTML 内容的值
function(index, html) 此函数返回一个 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()结果返回一个字符串,包含所有匹配元素的合并文本

参数 描述
val 用于设置元素内容的文本
function(index, text) 此函数返回一个字符串,接受两个参数,index 为元素在集合中的索引位置,text 为原先的 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,selecttextarea

属性 描述
val 要设置的值
function(index, value) 此函数返回一个要设置的值,接受两个参数,index 为元素在集合中的索引位置,text 为原先的 text 值
array 用于check/select的值

获取文本框中的值

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 样式

方法 描述
$("SET").addClass(class/fn); 为每个匹配的元素添加指定的类名
$("SET").removeClass([class/fn]); 从所有匹配的元素中删除全部或者指定的类
$("SET").toggleClass(class/fn[,sw]); 如果存在(不存在)就删除(添加)一个类

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

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

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

参数 描述
class 每个匹配元素所要增加的一个或多个样式名,请用空格分开
function(index, class) 此函数必须返回一个或多个空格分隔的 class 名。接受两个参数,index 参数为对象在这个集合中的索引值,class 参数为这个对象原先的 class 属性值。

为匹配的元素加上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 一个或多个要删除的 CSS 类名,请用空格分开
function(index, class) 此函数必须返回一个或多个空格分隔的 class 名。接受两个参数,index 参数为对象在这个集合中的索引值,class 参数为这个对象原先的 class 属性值。
  • 参数 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]);

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

属性 描述
class CSS 类名
class,switch 要切换的 CSS 类名,用于决定元素是否包含 class 的布尔值。
switch 用于决定元素是否包含 class 的布尔值
function(index, class,switch)[, switch] 如下↓
  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';
  }
});

Deeplearn, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明前端开发利器 jQuery-操作属性
喜欢 (0)
admin
关于作者:

您必须 登录 才能发表评论!