jquery中的属性操作-CSDN博客

本文链接：https://blog.csdn.net/x15514104477/article/details/140804807

jQuery中的属性操作主要包括对HTML元素的内容和属性的获取、设置和修改等操作。这些操作使得开发者能够以更简单、高效的方式处理网页内容和用户交互。

一.获取和设置内容

1.text([val | function])方法：

（1）解释：

用于获取或设置指定元素的文本内容。
当不带参数调用时，它会返回所有匹配元素的文本内容；当带参数调用时，可以根据提供的字符串或回调函数设置文本内容。

（2）语法：

$('p').text();

（3）参数解释：

val：
用于设置元素内容的文本
function(index, text)：
此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。

（4）示例：

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

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

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

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

2.html([val | fn])方法：

（1）解释：

类似于text()方法，但用于处理元素内的HTML内容。
它可以获取或设置元素的innerHTML，包括任何HTML标签。

（2）语法：

$('p').html();

（3）参数解释：

val： 用于设置元素内容的文本
function(index, text)：
此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。

（4）示例：

返回p元素的内容：

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

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

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

3.val([val|fn|arr])方法：

（1）解释：

专门用于表单元素，如input、select和textarea。
注意： 调用时若没有参数，将返回元素的当前值；若提供参数，则可以设置元素的值。

（2）语法：

$("input").val();

（3）参数解释：

**val：**要设置的值。

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

array： 用于 check/select 的值

（4）示例：

设定文本框的值：

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

用函数设定文本框的值：

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

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

<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

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

二.获取和设置属性

1.attr(name|properties|key,value|fn)方法：

（1）解释：

这是jQuery中用于获取和设置元素属性的核心方法。
通过指定属性名作为参数，可以获取该属性的值；通过同时指定属性名和值，可以设置属性的值。

（2）语法：

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

（3）参数解释：

name： 属性名称

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

key,value： 属性名称，属性值

key,function(index, attr)：
key:属性名称。
function:返回属性值的函数,第一个参数（index）为当前元素的索引值，第二个参数（attr）为原先的属性值。

（4）示例：

参数 properties 描述——为所有图像设置src和alt属性：

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

参数 key,value 描述——为所有图像设置src属性：

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

参数 key,function 描述——把src属性的值设置为title属性的值：

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

2.removeAttr(name)方法：

（1）解释：

用于从元素中删除指定的属性。这在需要动态调整元素行为或样式时非常有用。

（2）语法：

$('标签名').removeAttr('此标签的属性名')

（3）参数解释：

**name：**要删除的属性名

（4）示例：

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

<img src="test.jpg"/>

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

3.addClass(class|fn) 方法：

（1）解释：

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

（2）语法：

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

（3）参数解释：

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

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

（4）示例：

给li加上不同的class：

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

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

3.removeClass([class|fn])方法

（1）解释：

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

（2）语法：

$("p").removeClass();

（3）参数解释：

**class：**一个或多个要删除到元素中的CSS类名，请用空格分开

（4）示例：

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

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

4.toggleClass(class|fn[,sw])方法：

（1）解释：

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

（2）语法：

$("p").toggleClass("类名");

（3）参数解释：

class： CSS类名

class,switchString：
1.要切换的CSS类名.
2.用于决定元素是否包含class的布尔值。

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

（4）示例：

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

<strong>jQuery 代码:</strong>

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

三.综合操作

1.使用回调函数：

text()、html()、val()和attr()方法都接受回调函数作为参数。这种用法允许您根据现有内容或属性值动态计算新值。

2.链式操作：

jQuery的方法通常设计为可链式操作，这意味着可以在单个语句中连续调用多个方法。这对于简化代码、提高性能非常有帮助。