共计 3010 个字符，预计需要花费 8 分钟才能阅读完成。
JQuery 属性操作
元素固定属性值 prop()
所谓的元素的固定属性就是元素自带的属性，如 a 链接中的 href 属性
语法
元素自定义属性值 attr()
用户本人给元素设置的属性，称为自定义属性
留神: 该办法也能够间接获取自定义属性
数据缓存 data()
data（）办法能够指定元素上设置属性，但不会批改 DOM 构造，一旦页面被从新刷新，之前寄存的数据都会被移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery 属性操作 </title>
<script src="./jquery-3.5.1.js"></script>
</head>
<body>
<a href="https://www.baidu.com/" title="百度"> 百度 </a>
<input type="checkbox" name=""id="" checked>
<div index='2' date-index='2'>DIV</div>
<span>SPAN</span>
<script>
$(function () {
// 1. 获取元素固有属性值
console.log($('a').prop('href'))
$('a').prop('title', 'baidu')
$('input').change(function () {console.log($('input').prop('checked'))
})
//2. 获取元素自定义的属性
console.log($('div').attr('index'))
console.log($('div').attr('index', "4"));
console.log($('div').attr('date-index'))
// 3. 数据缓存 外面的数据是寄存在内存外面
$('span').data('name', "尧子陌");
console.log($('span').data('name'))
})
</script>
</body>
</html>
JQuery 获取文本值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery 获取文本值 </title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<div>
<span>hello word</span>
</div>
<input type="text" value="请输出内容">
</body>
<script>
console.log($('div').html()) // 获取 div 外面的内容；$('div').html('Zero');
console.log($('input').val());// 打印表单外面的内容
$('input').val('520')
</script>
</html>
返回指定的先人元素
在 JQuery 中，能够通过 parents() 的办法来获取指定的先人元素，参数可间接写先人元素的名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 返回指定的先人元素 </title>
<script src="./jquery-3.5.1.js"></script>
</head>
<body>
<div class="container">
<div class="father">
<div class="son">123</div>
</div>
</div>
<script>
$(function() {console.log($('.son').parents('.container'));
console.log($('.son').parents('.father'));
})
</script>
</body>
</html>
遍历元素
在 JQuery 中，隐式迭代只是对雷同的元素做了同样的操作，如果想要给同一类元素做不同的操作，则须要用到遍历
惯例遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery 遍历元素 </title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<div>22</div>
<div>44</div>
<div>66</div>
<script>
$(function () {
// 第一种遍历办法
var arr = ['yellow', 'red', 'pink']
var sum = 0;
// 两个参数 i 指的是索引号 ele 指的是元素对象
$('div').each(function (i, ele) {console.log(i) // 打印索引号
console.log(ele) // 打印元素对象
$(ele).css('backgroundColor', arr[i]);
sum += parseInt($(ele).text());
})
console.log(sum)
})
</script>
</body>
</html>
$.each() 遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.each 遍历 </title>
<script src="./jquery-3.5.1.js"></script>
</head>
<body>
<script>
$(function() {var arr = ['yellow', 'red', 'pink'];
// 遍历数组
$.each(arr, function(i, ele) {console.log(i);
console.log(ele)
})
// 遍历对象
$.each({
name: "尧子陌",
age: 18
}, function(i, ele) {console.log(i);
console.log(ele)
})
})
</script>
</body>
</html>
创立 删除 增加元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 创立 删除 增加元素 </title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<ul>
<li> 高兴的天使 </li>
</ul>
<span>hello</span>
<p> 段落 </p>
<script>
$(function() {
// 外部操作
var li = $("<li> 创立的元素 </li>");
var li2 = $('<li> 第二次创立的元素 </li>')
$('ul').prepend(li);
$('ul').append(li2)
})
// 内部操作
var box = $('<div>Word</div>');
var box2 = $("<div> 尧子陌 </div>");
$('span').after(box)
$('span').before(box2);
// 删除元素
$('p').empty()
</script>
</body>
</html>
正文完
