1.有關于屬性的操作
專案原始碼
所謂的屬性操作就是操作一系列的元素的屬性,value啦class啦 .......特別是有關于input的操作是非常重要的,
為了完成后續有關于框架的高級騷操作,我們現在先來學習一下,jQuery的常用屬性操作的三種 prop(),attr(),data()
(1)、元素固有的屬性值prop()
- 所謂的固有的屬性 ,比如a標簽里面的href input里面的type等...
我們看一下如何獲取,還有如何設定
- 獲取:prpo('屬性')
- 設定屬性:prpo('屬性','屬性值')
- 非常的適合操作 表單的屬性 比如 disabled/checked/selected
(2)、自定義屬性值attr()
- 用于給元素添加自己定義的屬性
- 獲取:attr('屬性');
- 設定:attr('屬性','屬性值')
注意: 類似于原生的DOM>>>getAttribute(),該操作 適用于H5自定義屬性
(3)、資料相關data/非常重要!/
- 這個非常的重要!特別是到了后期操作資料渲染的時候,還有框架的時候,前端的三大框架里面都有用到類似的實作邏輯
- 附加(設定)資料的語法:data( 'name' ,'value')
- 獲取資料的語法 data('name').
注意:這種方式也同樣的適用于H5里面獲取自定義的屬性
代碼舉例:
<a href=https://www.cnblogs.com/BM-laoli/p/"http://www.baidu.com" title="都挺好">都挺好
我是div
123
<script>
$(function() {
//1. element.prop("屬性名") 獲取元素固有的屬性值
console.log($("a").prop("href"));
$("a").prop("title", "我們都挺好");
$("input").change(function() {
console.log($(this).prop("checked"));
});
// console.log($("div").prop("index"));
// 2. 元素的自定義屬性 我們通過 attr()
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
// 3. 資料快取 data() 這個里面的資料是存放在元素的記憶體里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 這個方法獲取data-index h5自定義屬性 第一個 不用寫data- 而且回傳的是數字型
console.log($("div").data("index"));
})
2.有關于文本屬性的操作
常見的文本操作主要有三種 html() / text()/ val();分別對應元素DOM的innerHTML、innerText 、value的屬性
這些操作并沒有什么難度,詳細請參見下面的代碼實體
<body>
<div>
<span>我是內容</span>
</div>
<input type="text" value=https://www.cnblogs.com/BM-laoli/p/"請輸入內容">
<script>
// 1. 獲取設定元素內容 html()
console.log($("div").html());
// $("div").html("123");
// 2. 獲取設定元素文本內容 text()
console.log($("div").text());
$("div").text("123");
// 3. 獲取設定表單值 val()
console.log($("input").val());
$("input").val("123");
</script>





