jQuery入门之属性操作和内容文本【总结＋案例】

---

前言

jQuery属性操作主要是对元素属性的获取和修改，这里就介绍一下获取修改元素属性值prop(),attr(),data()以及获取修改内容文本值的html()，text()，val()

一、获取修改元素值

1.prop()

概述

prop（）设置或获取元素固有属性值,他获取的是属性原有的而不是用户自定义的，例如a标签里面的href这类

参数

参数有两种情况

1.prop(“属性”)
当prop(“属性”)时，prop()将获取该标签参数属性的属性值

<a href="http://www.itcast.cn" title="都挺好">都挺好</a>

//element.prop("属性名") 获取属性值
console.log($("a").prop("href"));

2.prop(“属性”,“属性值”)
当prop(“属性”,“属性值”)时，prop()将修改该标签参数属性的属性值

<a href="http://www.itcast.cn" title="都挺好">都挺好</a>

//element.prop("属性名") 获取属性值
$("a").prop("title", "这不是挺好的吗");

---

2.attr()

概述

attr()设置或获取元素自定义属性值，即为用户定义的属性值，比如data-index之类的用户自定义属性。语法与prop相同但是有可以获取html5的自定义属性的优点

参数

1.attr(“属性”)
当attr(“属性”)时，attr()将获取该标签参数属性的属性值

 <div index="1" data-index="2">我是div</div>

console.log("attr()设置或获取元素自定义属性值");
console.log($("div").attr("index"));

2.attr(“属性”,“属性值”)
当attr(“属性”,“属性值”)时，attr()将修改该标签参数属性的属性值

<div index="1" data-index="2">我是div</div>

$("div").attr("index", 4);

---

3.data()

概论

*data()方法可以在指定的 元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放是数据将被移除
*但是data()数据缓存，里面的数据存放在元素的缓存类里面
*也可以获取html5的自定义属性
*获取时不用写data-

参数

1.data(“属性”,“属性值”)
当data(“属性”,“属性值”)时，data()将修改该标签参数属性的属性值
但是data()数据缓存，里面的数据存放在元素的缓存类里面

<span>123</span>

 $("span").data("uname", "candy");

2.data(“属性”)
当data(“属性”)时，data()将获取该标签参数属性的属性值

<span>123</span>

console.log(" data()数据缓存 里面的数据存放在元素的缓存类里面");
console.log($("span").data("uname"));

---

二、获取修改内容文本值

html()

普通元素内容，同时会获取该元素下的子元素。相当于原生innerHTML。

参数

1.参数为空就是获取元素内容

   <div>
        <span>我是内容</span>
    </div>

console.log("html()普通元素内容");
console.log($("div").html());        

2.有参数就是设置元素内容

   <div>
        <span>我是内容</span>
    </div>

$("div").html("123");       

3.若html()参数格式为html(""),则可以实现清空该元素所有内容的效果

   <div>
        <span>我是内容</span>
    </div>

$("div").html("");       

---

text()普通文本内容

text()普通文本内容，获取的是元素内部的文字内容，不包括元素。相当于原生innerText

参数

1.参数为空就是获取元素内容，

<span>kira</span>

console.log("text()普通文本内容");
console.log($("div").text());      

2.有参数就是设置元素内容

<span>kira</span>

  $("span").text("poi");    

3.若text()参数格式为text(""),则可以实现清空该元素所有文字内容的效果

<span>kira</span>

$("span").text("");       

---

val()

用于input，获取设置表单值，相当于原生value。

参数

1.参数为空就是获取元素内容，

 <input type="text" value="请输入内容">

 console.log("获取设置表单值val()");
console.log($("input").val());   

2.有参数就是设置元素内容

 <input type="text" value="请输入内容">

  $("input").val("123");

3.若val()参数格式为val(""),则可以实现清空该元素所有文字内容的效果

 <input type="text" value="请输入内容">

 $("input").val("");     

---