1.jQuery屬性操作
1.1設置或獲取元素固有屬性 prop()
所謂元素固有屬性就是元素本身自帶的屬性，比如元素裏面的href，比如元素裏面的type
1.獲取屬性語法
prop(“屬性”)
2.設置屬性語法
prop("屬性“, “屬性值”)
1.2設置或獲取元素自定義屬性值 attr()
用戶自己給元素添加的屬性，我們稱爲自定義屬性，比如給div添加 index = 1；
1.獲取屬性語法
attr(“屬性”)； //類似於原生getAttribute()
2.設置屬性語法
attr(“屬性”，“屬性值”)；//類似於原生setAttribute
1.3數據緩存data()
data()方法可以在指定的元素上存取數據，並不會修改DOM元素結構，一旦頁面刷新，之前存放的數據都將被移除。
1.附加數據語法
data(“name”, “value”); //向被選元素附加數據
2.獲取數據語法
data(“name”); //向被選元素獲取數據
同時，還可以讀取HTML5自定義屬性，data-index,得到的是數字型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.js"></script>
</head>
<body>
<a href="http://www.itcase.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", 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>
</html>
2.jQuery內容文本值
主要針對元素的內容還有表單的值操作
1.普通元素內容html()（相當於原生innerHTML)
html(); //獲取元素內容
html(“內容”); //設置元素的內容
2.普通元素文本內容text() (相當於原生innerText)
text(); //獲取元素文本內容
text(“文本內容”)； //設置元素文本內容
3.表單的值val()（相當於原生value）
val(); //獲取表單的值
val(“表單內容”)； //修改表單內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.js"></script>
</head>
<body>
<div>
<span>我是內容</span>
</div>
<input type="text" value="請輸入內容">
<script>
//1.獲取設置元素內容
// console.log($("div").html());
// $("div").html("123");
//2.獲取設置元素文本內容
console.log($("div").text());
$("div").text("123");
//3.獲取設置表單值 val()
console.log($("input").val());
$("input").val("123");
</script>
</body>
</html>
4.parents(“選擇器”)，可以返回指定祖先元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.js"></script>
</head>
<body>
<div class="one">
<div class="two">
<div class="three">
<div class="four">我不容易</div>
</div>
</div>
</div>
<script>
console.log($(".four").parent().parent().parent());
console.log($(".four").parents());
console.log($(".four").parents(".one"));
</script>
</body>
</html>
3.jQuery元素操作
主要是遍歷、創建、添加、刪除元素操作。
3.1遍歷元素
jQuery隱式迭代是對同一類元素做了同樣的操作，如果想要給同一元素做不同操作，就需要用到遍歷。
語法1：
1.each()方法遍歷匹配的每一個元素，主要用DOM處理，each()每一個
2.裏面的回調函數有兩個參數：index是每個元素的索引號，domEle是每個DOM元素對象，不是jQuery對象。
3.所以要想是使用jQuery方法，就需要給這個dom元素轉換爲jQuery對象$(domEle)
語法2：
1.$.each()方法可用於遍歷任何對象，主要用於數據處理，比如數組、對象
2.裏面的函數有2個參數：index是每個元素的索引號，element遍歷內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
$("div").css("color", "red");
//如果針對於同一類元素做不同的操作 需要遍歷元素 （類似於for，但是比for強大）
//1.each()方法遍歷元素
var sum = 0;
var arr = ["red", "green", "blue"];
$("div").each(function(index, domEle) {
//回調函數第一個參數一定是索引號 可以自己指定索引號名稱
console.log(index);
//回調函數第二個參數一定是dom元素對象
console.log(domEle);
// domEle.css("color"); //dom對象沒有css方法
$(domEle).css("color", arr[index]);
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); //輸出的是屬性名
console.log(ele); //輸出的是屬性值
})
})
</script>
</body>
</html>
3.2創建元素
語法：
動態創建了一個li標籤；
3.3添加元素
1.內部添加
把內容放入匹配元素內部最後面，類似原生appendChild
2.外部添加
①內部添加元素，生成後，他們是父子關係。
②外部添加元素，生成後，他們是兄弟關係。
3.4刪除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.js"></script>
</head>
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
//1.創建元素
var li = $("<li>我是後來創建的li</li>");
//2.添加元素
//(1)內部添加
// $("ul").append(li); //內部添加並且放到內容的最後面
$("ul").prepend(li); //內部添加並且放到內容的最前面
//(2)外部添加
var div = $("<div>我是後來的</div>");
$(".test").after(div);
$(".test").before(div);
//3.刪除元素
// $("ul").remove(); //可以刪除匹配的元素
// $("ul").empty(); //可以刪除匹配的元素裏面的子節點
$("ul").html("");
})
</script>
</body>
</html>