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>
