jQuery 属性操作

jQuery 常用属性操作有两种：prop() / attr() ;

固有属性值

所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。

语法

1.获取属性语法

prop("属性");

2.设置属性语法

prop("属性", "属性值");

注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

案例代码

html

<form action="" data-id="1">
  <div>
    <label for="name">请输入姓名</label>
    <input type="text" name="" id="name" />
  </div>
  <div>
    <a href="http://www.baidu.com" title="百度">百度</a>
  </div>
  <div>
    请选择性别：
    <label>男<input type="radio" name="gender" value="man" /></label>
    <label
      >女<input type="radio" name="gender" value="woman" checked="checked"
    /></label>
    <label>其他<input type="radio" name="gender" value="none" /></label>
  </div>
</form>
<div class="div"></div>

javascript

$(function () {
  /*获取元素固有的属性值*/
  // 1. element.prop("属性名") 获取元素固有的属性值
  console.log("a.href:\t", $("a").prop("href"));
  // 两个值会就给元素设置值
  $("a").prop("title", "我们都挺好");

  // 监听按钮切换获取 radio 的值
  $('[name="gender"]').change(function () {
    console.log("input.value:\t" + $(this).prop("value"));
  });
});

自定义属性值

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index ="1"。

语法

1、获取属性语法

attr("属性"); // 类似原生 getAttribute()

2、设置属性语法

attr("属性", "属性值"); // 类似原生 setAttribute()

该方法也可以获取H5自定义属性

注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

演示代码

html

<a href="http://www.baidu.com" title="都挺好">都挺好</a>
<input type="checkbox" name="input" checked="checked" />
<div index="1" data-index="2">我是div</div>
<span>123</span>

javascript

$(function () {
  // attr 元素的自定义属性
  $("div").attr("index", 2);
  console.log("div.index:\t", $("div").get(0));
});

文本属性值

jQuery 的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。

jQuery 内容文本值

常见操作有三种：html() / text() / val() ; 分别对应 JS 中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

语法

1、普通元素内容 html ( 相当于原生 inner HTML)

html() //获取元素的内容
html("内容") // 设置元素的内容

2、普通元素文本内容 text( (相当与原生 innerText )

text()   //获取元素的文本内容
text("文本内容") // 设置元素的文本内容

3、表单的值 val() (相当于原生 value )

val()  //获取表单的值
val("内容") // 设置表单的值

注意：html() 可识别标签，text() 不识别标签。

演示代码

html

<div>
  <span>正心老师</span>
</div>
<input type="text" value="请输入内容" />

javascript

// 1. 获取设置元素内容 html()
console.log("div.html:\t", [$("div").html()]);
$("div").html("正心全栈编程");
// console.log('div.html:\t', [$('div').html()])

// 2. 获取设置元素文本内容 text()
console.log("div.text:\t", [$("div").text()]);
$("div").text("正心全栈编程");
console.log("div.text:\t", [$("div").text()]);

// 3. 获取设置表单值 val()
console.log("input.value:\t", [$("input").val()]);
$("input").val("正心全栈编程");

// 数据同步
$("input").change(function () {
  $("div").text($(this).val());
});