一、属性操作
1.1、说明
jQuery 常用属性操作有三种：prop() / attr() / data() ;
1.2、元素固有属性值 prop()
1.2.1、说明
所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。
1.2.2、获取属性
1.2.2.1、语法
1.2.2.2、案例1
1
2
3
4
5
6
7
8
9
10
| <body>
<a href="https://www.baidu.com" title="百度一下呗">百度一下,你就知道</a>
<script>
var href = $('a').prop('href');
var title = $('a').prop('title');
console.log(href);
console.log(title);
</script>
</body>
|
1.2.2.3、案例2
1
2
3
4
5
6
7
8
9
10
| <body>
跳舞:<input type="checkbox" checked>
<script>
$('input').change(function() {
var status = $(this).prop('checked');
console.log(status);
});
</script>
</body>
|
1.2.2.4、案例3
1
2
3
4
5
6
7
8
| <body>
<div index='1'></div>
<script>
console.log($('div').prop('index'));
</script>
</body>
|
1.2.3、设置属性语法
1.2.3.1、语法
1.2.3.2、案例1
1
2
3
4
5
6
7
| <body>
<div></div>
<script>
$('div').prop('id', 'mydiv');
</script>
</body>
|
1.2.3.3、案例2
1
2
3
4
5
6
7
8
9
| <body>
<div></div>
<script>
$('div').prop('index', 'mydiv');
</script>
</body>
|
1.2.4、总结
prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。
1.3、元素自定义属性值 attr()
1.3.1、说明
用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
1.3.2、获取属性语法
1.3.2.1、语法
1
| # attr('属性') // 类似原生 getAttribute()
|
1.3.2.2、案例1
1
2
3
4
5
6
7
| <body>
<div index="1"></div>
<script>
console.log($('div').attr('index'));
</script>
</body>
|
1.3.2.3、案例2
1
2
3
4
5
6
7
| <body>
<div id="helloworld"></div>
<script>
console.log($('div').attr('id'));
</script>
</body>
|
1.3.2.4、案例3
1
2
3
4
5
6
7
8
9
| <body>
<div data-index="10"></div>
<script>
console.log($('div').attr('data-index'));
</script>
</body>
|
1.3.3、设置属性语法
1.3.3.1、语法
1
| # attr('属性', '属性值') // 类似原生 setAttribute()
|
1.3.3.2、案例1
1
2
3
4
5
6
7
8
9
10
| <body>
<div></div>
<script>
$('div').attr('id', 'javascript');
$('div').attr('data-index', "100");
</script>
</body>
|
1.3.4、总结
attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性【就是有data前缀定义的属性。】）
1.4、数据缓存data()
1.4.1、说明
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
1.4.2、附加数据
1.4.2.1、语法
1
| # data('name','value') // 向被选元素附加数据
|
1.4.2.2、案例1
1
2
3
4
5
6
7
| <body>
<span>周芷若</span>
<script>
$('span').data('username', 'zhouzhou');
</script>
</body>
|
会发现，span这个DOM元素并没有任何的变化，只是临时性的把数据存储到了这个DOM元素上。
1.4.3、获取数据
1.4.3.1、语法
1
| # date('name') // 向被选元素获取数据
|
1.4.3.2、案例1
1
2
3
4
5
6
7
8
9
10
| <body>
<span>周芷若</span>
<script>
$('span').data('username', 'zhouzhou');
console.log($('span').data('username'));
</script>
</body>
|
1.4.3.3、案例2
1
2
3
4
5
6
7
| <body>
<span data-username='zhouzhiruo'>周芷若</span>
<script>
console.log($('span').data('username'));
</script>
</body>
|
1.5、全选案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <body>
全选: <input type="checkbox" id="checkAll"> <br/>
跳舞: <input class="j-checkbox" type="checkbox">
学习: <input class="j-checkbox" type="checkbox">
游泳: <input class="j-checkbox" type="checkbox" >
<script>
$('#checkAll').click(function() {
var status = $(this).prop('checked');
$(this).siblings('input').prop('checked', status);
});
$('.j-checkbox').click(function() {
if ($('.j-checkbox').length == $(".j-checkbox:checked").length) {
$('#checkAll').prop('checked', true);
} else {
$('#checkAll').prop('checked', false);
}
});
</script>
</body>
|
二、内容文本值
2.1、概述
2.1.1、说明
主要针对元素的内容还有表单的值操作。
jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和
value 属性。
2.1.2、普通元素内容 html()
==相当于原生inner HTML，html() 可识别标签==
1
2
| 1. html() // 获取元素的内容
2. html('内容') // 设置元素的内容
|
1
2
3
4
5
6
7
8
9
10
| <body>
<div id="content"></div>
<script>
$("#content").html('<h1>HelloWorld</h1>');
console.log($('#content').html());
</script>
</body>
|
2.1.3、普通元素文本内容 text()
==相当与原生 innerText，text() 不识别标签。==
1
2
| 1. text() // 获取元素的文本内容
2. text('文本内容') // 设置元素的文本内容
|
1
2
3
4
5
6
7
8
9
10
| <body>
<div id="content"></div>
<script>
$("#content").text('<h1>HelloWorld</h1>');
console.log($('#content').text());
</script>
</body>
|
2.1.4、表单的值 val()
==相当于原生value==
1
2
| 1. val() // 获取表单的值
2. val('内容') // 设置表单的值
|
1
2
3
4
5
6
7
8
9
10
| <body>
用户名: <input type="text" placeholder="请输入用户名">
<script>
$("input").val('张无忌');
console.log($('input').val());
</script>
</body>
|
2.2、案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <body>
数量:
<input type="button" value="-" id="subtract">
<input type="text" style="width: 20px;" value="1" class="number">
<input type="button" value="+" id="add">
<script>
$('#add').click(function() {
var value = $('.number').val();
value++;
$('.number').val(value);
});
$('#subtract').click(function() {
var value = $('.number').val();
value--;
if (value >= 1) {
$('.number').val(value);
} else {
$(this).prop('disabled', true);
}
});
</script>
</body>
|
三、元素操作
3.1、说明
jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。
3.2、遍历元素
3.2.1、说明
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
1
2
3
4
5
6
7
8
9
10
| <body>
<div>JavaScript</div>
<div>HTML</div>
<div>CSS</div>
<script>
$('div').css('color', 'red');
</script>
</body>
|
3.2.2、语法1
1
2
3
4
5
6
7
8
| # 语法
$("div").each(function (index, domEle) {
// 遍历操作
}）
# 说明
1. each() 方法遍历匹配的每一个元素。主要用DOM处理。
2. 里面的回调函数有2个参数： index 是每个元素的索引号; domEle 是每个DOM元素对象，不是jquery对象
3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| <body>
<div>JavaScript</div>
<div>HTML</div>
<div>CSS</div>
<script>
var arrs = ['red', 'blue', 'orange'];
$('div').each(function(index, domEle) {
console.log(index);
$(domEle).css('color', arrs[index]);
});
</script>
</body>
|
3.2.3、语法2
1
2
3
4
5
6
7
| # 语法
$.each(object，function (index, element) {
// 遍历操作
}）
# 说明
1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| <body>
<div>JavaScript</div>
<div>HTML</div>
<div>CSS</div>
<script>
var arrs = ['red', 'blue', 'skyblue'];
$.each($('div'), function(index, domEle) {
console.log(index);
$(domEle).css('color', arrs[index]);
});
</script>
</body>
|
1
2
3
4
5
6
7
8
9
10
| <body>
<script>
var arrs = ['red', 'blue', 'skyblue'];
$.each(arrs, function(index, item) {
console.log(index);
console.log(item);
});
</script>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <body>
<script>
var person = {
uname: 'HelloWorld',
age: 23
}
$.each(person, function(key, value) {
console.log(key);
console.log(value);
console.log(key + ":" + value);
});
</script>
</body>
|
3.3、创建元素及添加元素
3.3.1、创建元素
1
2
3
| # 语法
$(''<li></li>'');
动态的创建了一个 li 元素。
|
3.3.2、添加元素
3.3.2.1、内部添加
1
2
3
| # element.append('内容') 把内容放入匹配元素内部最后面，类似原生 appendChild。
# element.prepend('内容') 把内容放入匹配元素内部最前面。
|
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
<ul>
<li>原先的li</li>
</ul>
<script>
var $li = $('<li>周芷若</li>');
$('ul').append($li);
</script>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
<ul>
<li>原先的li</li>
</ul>
<script>
var $li = $('<li>周芷若</li>');
$('ul').prepend($li);
</script>
</body>
|
3.3.2.2、外部添加
1
2
3
| # element.after('内容') // 把内容放入目标元素后面
# element.before('内容') // 把内容放入目标元素前面
|
3.3.3、总结
1
2
| # 内部添加元素，生成之后，它们是父子关系。
# 外部添加元素，生成之后，他们是兄弟关系。
|
1
2
3
4
5
6
7
8
9
10
11
| <body>
<div class="demo">张无忌</div>
<script>
var $div = $('<div>周芷若</div>');
$('.demo').after($div);
</script>
</body>
|
1
2
3
4
5
6
7
8
9
10
| <body>
<div class="demo">张无忌</div>
<script>
var $div = $('<div>周芷若</div>');
$('.demo').before($div);
</script>
</body>
|
3.4、删除元素
3.4.1、语法
1
2
3
4
5
| # element.remove() // 删除匹配的元素（包括本身）
# element.empty() // 删除匹配的元素集合中所有的子节点
# element.html('') // 清空匹配的元素内容
|
3.4.2、案例1
1
2
3
4
5
6
7
8
9
10
| <body>
<ul>
<li>张无忌</li>
<li>周芷若</li>
</ul>
<script>
$('ul').remove();
</script>
</body>
|
3.4.3、案例2
1
2
3
4
5
6
7
8
9
10
| <body>
<ul>
<li>张无忌</li>
<li>周芷若</li>
</ul>
<script>
$('ul').empty();
</script>
</body>
|
3.4.4、案例3
1
2
3
4
5
6
7
8
9
10
| <body>
<ul>
<li>张无忌</li>
<li>周芷若</li>
</ul>
<script>
$('ul').html("");
</script>
</body>
|
3.3.5、总结
1
2
| 1. remove 删除元素本身。
2. empt() 和 html('') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。
|
