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