1.1. jQuery 屬性操作
jQuery 常用屬性操作有三種：prop() / attr() / data() ;
1.1.1 元素固有屬性值 prop()
所謂元素固有屬性就是元素本身自帶的屬性，比如 <a> 元素裏面的 href ，比如 <input> 元素裏面的 type。
語法
獲取屬性:prop("屬性")
設置屬性:prop("屬性","屬性值 ")
注意：prop() 除了普通屬性操作，更適合操作表單屬性：disabled / checked / selected 等。
1.1.2 元素自定義屬性值 attr()
用戶自己給元素添加的屬性，我們稱爲自定義屬性。 比如給 div 添加 index =“1”。
語法
同prop,類似原生getAttribute()和setAttribute()
注意：attr() 除了普通屬性操作，更適合操作自定義屬性。（該方法也可以獲取 H5 自定義屬性）
1.1.3 數據緩存 data()
data() 方法可以在指定的元素上存取數據，並不會修改 DOM 元素結構。一旦頁面刷新，之前存放的數據都將被移除。
注意：同時，還可以讀取 HTML5 自定義屬性 data-index ，得到的是數字型。
演示代碼
<body>
<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<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"));
})
</script>
</body>
1.2. jQuery 文本屬性值
jQuery的文本屬性值常見操作有三種：html() / text() / val() ; 分別對應JS中的 innerHTML 、innerText 和 value 屬性。
1.2.1 jQuery內容文本值
常見操作有三種：html() / text() / val() ; 分別對應JS中的 innerHTML 、innerText 和 value 屬性，主要針對元素的內容還有表單的值操作。
語法
獲取和設置兩種操作,同上
注意：html() 可識別標籤，text() 不識別標籤。
演示代碼
<body>
<div>
<span>我是內容</span>
</div>
<input type="text" value="請輸入內容">
<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>
</body>
1.3. jQuery 元素操作
jQuery 元素操作主要講的是用jQuery方法，操作標籤的遍歷、創建、添加、刪除等操作。
1.3.1. 遍歷元素
jQuery 隱式迭代是對同一類元素做了同樣的操作。 如果想要給同一類元素做不同操作，就需要用到遍歷。
語法1
$("div").each(function(index,domEle){
xxx;
})
1.each()方法遍歷匹配的每一個元素.主要用DOM處理
2.裏面的回調函數有兩個參數:index是每個元素的索引號,domEle是每個DOM元素對象,不是jQuery對象
注意：此方法用於遍歷 jQuery 對象中的每一項，回調函數中元素爲 DOM 對象，想要使用 jQuery 方法需要轉換。
3.所以要想使用jQuery發方法,需要給這個DOM元素轉換爲jQuery對象$(domEle)
語法2
$.each(object,function(index,element){
xxx;
})
1.$.each()方法可用於遍歷任何對象,主要用於數據處理,比如數組,對象
2.裏面的函數有兩個參數:index是每個元素的索引號,element是遍歷內容
演示代碼
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// 如果針對於同一類元素做不同操作，需要用到遍歷元素（類似for，但是比for強大）
var sum = 0;
var arr = ["red", "green", "blue"];
// 1. each() 方法遍歷元素
$("div").each(function(i, domEle) {
// 回調函數第一個參數一定是索引號 可以自己指定索引號號名稱
// console.log(i);
// 回調函數第二個參數一定是 dom 元素對象，也是自己命名
// console.log(domEle); // 使用jQuery方法需要轉換 $(domEle)
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍歷元素 主要用於遍歷數據，處理數據
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 輸出的是 name age 屬性名
console.log(ele); // 輸出的是 andy 18 屬性值
})
})
</script>
</body>
1.3.3. 創建、添加、刪除
jQuery方法操作元素的創建、添加、刪除方法很多，則重點使用部分，如下：
語法總和
//創建元素
$("<li><li>");
//添加元素
//1.內部添加;
//把內容放到匹配元素內部的最後面,類似於原生appendChild
element.append("內容")
//內部添加並且放到內容的最前面
element.prepend("內容")
//2.外部添加
element.after("內容") //把內容放到目標元素後面
element.before("內容") //把內容放入目標元素前面
//刪除元素
element.remove() //刪除匹配的元素(本身)
element.empty() //刪除匹配的元素集合中所有的子節點
element.html("") //清空匹配的元素內容
內部添加元素,生成之後,它們是父子關係
外部添加元素,生成之後,它們是兄弟關係
注意：以上只是元素的創建、添加、刪除方法的常用方法
案例代碼
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 創建元素
var li = $("<li>我是後來創建的li</li>");
// 2. 添加元素
// 2.1 內部添加
// $("ul").append(li); 內部添加並且放到內容的最後面
$("ul").prepend(li); // 內部添加並且放到內容的最前面
// 2.2 外部添加
var div = $("<div>我是後媽生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 刪除元素
// $("ul").remove(); 可以刪除匹配的元素 自殺
// $("ul").empty(); // 可以刪除匹配的元素裏面的子節點 孩子
$("ul").html(""); // 可以刪除匹配的元素裏面的子節點 孩子
})
</script>
</body>
jQuery中分別爲我們提供了兩套快速獲取和設置元素尺寸和位置的API，方便易用，內容如下。
1.4.1. jQuery 尺寸操作
jQuery 尺寸操作包括元素寬高的獲取和設置，且不一樣的API對應不一樣的盒子模型。
語法
以上參數爲空,則是獲取相應值,返回的是數字型
如果參數爲數字,則是修改相應值
參數可以不必寫單位
代碼演示
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 獲取設置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 獲取設置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 獲取設置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 獲取設置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
注意：有了這套 API 我們將可以快速獲取和子的寬高，至於其他屬性想要獲取和設置，還要使用 css() 等方法配合。
1.4.2. jQuery 位置操作
jQuery的位置操作主要有三個： offset()、position()、scrollTop()/scrollLeft() , 具體介紹如下:
語法
1.offset()設置或獲取元素偏移
(1)offset方法設置或返回被選原色相對於文檔的偏移座標,跟父級沒有關係.
(2)該方法有2個屬性left,top offset().top用於獲取距離文檔頂部的距離,offset().left用於獲取距離文檔左邊的距離
(3)可以設置元素的偏移:offset({top:10,left:30})
2.position()
獲取距離帶有定位父級位置（偏移） 如果沒有帶有定位的父級，則以文檔爲準
3.scrollTop()/scrollLeft()設置或獲取元素被捲去的頭部和左側
代碼演示
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="back">返回頂部</div>
<div class="container"></div>
<script>
$(function() {
// 1. 獲取設置距離文檔的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 獲取距離帶有定位父級位置（偏移） position 如果沒有帶有定位的父級，則以文檔爲準
// 這個方法只能獲取不能設置偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
// 3. 被捲去的頭部
$(document).scrollTop(100);
// 被捲去的頭部 scrollTop() / 被捲去的左側 scrollLeft()
// 頁面滾動事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
// console.log(11);
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回頂部
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文檔而是 html和body元素做動畫
})
})
</script>
</body>