0%

jQuery 操作 DOM

DOM 值操作

text() 和 html()

同 js 的 innerText 和 innerHTML

1
2
3
4
5
6
取文本:
c.text(); 不带标签
c.html(); 带标签
设置文本:
c.text('文本');
c.html('文本'); -- 文本--"<a href=''>皇家赌场</a>"

class 类值操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html代码
<div class="c1">

</div>
css代码:
.c1{
background-color: red;
height: 100px;
width: 100px;
}
.c2{
background-color: green;
}
jQuery
$('div').addClass('c2');
$('div').removeClass('c2');
$('div').toggleClass('c2');
示例:
var t = setInterval("$('div').toggleClass('c2');",500);

val 值操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
示例:
html代码:
<input type="text" id="username">
<input type="radio" class="a1" name="sex" value="1">男
<input type="radio" class="a1" name="sex" value="2">女
<input type="checkbox" class="a2" name="hobby" value="1">抽烟
<input type="checkbox" class="a2" name="hobby" value="2">喝酒
<input type="checkbox" class="a2" name="hobby" value="3">烫头
<select name="city" id="s1">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
<select name="lover" id="s2" multiple>
<option value="1">波多</option>
<option value="2">苍井</option>
<option value="3">小泽</option>
</select>

获取值

1
2
3
4
5
6
7
8
9
文本输人框:$('#username').val();
单选radio框:$('.a1:checked').val();
多选checkout框:$('.a2:checked').val()是不行的;需要循环取值,如下:
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
单选select框:$('#city').val();
多选select框:$('#lover').val();

设置值

1
2
3
4
5
文本输入框:$('#username').val('you are my love');
单选radio框:$('.a1').val([2]); // 注意内容必须是列表,写的是value属性对应的值
多选checkout框:$('.a2').val(['2','3'])
单选select框:$('#city').val('1');
多选select框:$('#lover').val(['2','3'])

模态对话框

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
HTML代码:
<h1>26期新热榜</h1>
<div>
<button id="btn">弹他</button>
</div>

<img src="1.jpg" alt="">


<div class="login hide" >
<h3 style="text-align: center">欢迎来到王者荣耀</h3>

<div>
用户名:<input type="text">
</div>
<div>
密码:<input type="text">
</div>
<div>
<button id="login-btn">登录</button>
<button id="login-cancel">取消</button>
</div>
</div>

<div class="shadow hide"></div>

CSS写法:
.shadow{
position: fixed; /* 固定定位 */
top:0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.8);
z-index: 90; /* 控制定位的元素的层级,数字越大越在上层显示 */
}

.login{
position: fixed;
top:50%;
left: 50%;
background-color: white;
width: 300px;
height: 360px;
z-index: 100;
margin-left: -150px;
margin-top: -180px;
}

.hide{
display: none;
}

js代码:
$('#btn').click(function () {
$('.shadow').removeClass('hide');
$('.login').removeClass('hide');
});

$('#login-cancel').click(function () {
$('.shadow').addClass('hide');
$('.login').addClass('hide');
});

模态对话框就是当点击网页中某个标签之后,会让背景颜色变暗不可选,只有当用户填写表格或点击关闭,才会退出。

创建标签

1
2
3
4
5
6
7
8
9
10
11
12
13
添加标签:  $('.c1').html('<a href="http://www.baidu.com">百度</a>'); 但是这个属于替换内容,将标签内原来的内容全部替换掉.

js
var a = document.createElement('a');

jquery:
$('<a>',{
text:'这还是个链接',
href:'http://www.baidu.com',
class:'link',
id:'baidu',
name:'baidu'
})

文档操作

标签内部的后面插入内容(append)

1
2
3
4
5
6
7
8
9
10
11
html代码:
<div class="c1">
<h1>xx</h1>
</div>
方式1:
1. var a = document.createElement('a'); 创建标签
2. a.href = 'http://www.jd.com'; 添加属性
3. a.innerText = '京东'; 添加文本
$('.c1').append(a);
方式2: 常用
$('.c1').append('<a href="http://www.baidu.com">百度</a>');

标签内部的上面插入内容(prepend)

1
2
$('.c1').prepend('<a href="http://www.baidu.com">百度</a>');
$('.c1').prepend('<h1>亚洲</h1>');

标签外部的下面插入内容(after)

1
$('.c1').after('<h1>兄弟</h1>');

标签外部的上面插入内容(before)

1
$('.c1').before('<h1>兄弟</h1>');

简单示例:

1
2
var s = $('<div>',{'class':'c2','text':'彭于晏'});
$('.c1').after(s);

empty 清空标签

1
2
方式1:$('.c1').empty();
方式2:$('.c1').html(''); .text('')

remove 删除标签

1
$('.c1').remove();

字符串格式化 ${变量名}

1
var tr_str = `<tr><td><input type="checkbox"></td><td>${inp_name}</td><td>${inp_hobby}</td><td><button class="delete">删除</button></td></tr>`;

增加和删除示例

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
HTML代码:
<div>
<button id="btn">新增</button>
</div>

<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>潘景祥</td>
<td>日京,日韩</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>薛晓博</td>
<td>日景祥,开车</td>
<td>
<button class="delete">删除</button>
</td>
</tr>

<tr>
<td><input type="checkbox"></td>
<td>王赛</td>
<td>日景祥</td>
<td>
<button class="delete">删除</button>
</td>
</tr>


</tbody>
</table>




<div class="login hide" >
<!--<form action="">-->

<div>
姓名:<input type="text" id="name">
</div>
<div>
毕生追求:<input type="text" id="want">
</div>
<div>
<button id="login-btn">保存</button>
<button id="login-cancel">取消</button>
</div>

<!--</form>-->
</div>

<div class="shadow hide"></div>

CSS写法:
.shadow{
position: fixed; /* 固定定位 */
top:0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.8);
z-index: 90; /* 控制定位的元素的层级,数字越大越在上层显示 */
}

.login{
position: fixed;
top:50%;
left: 50%;
background-color: white;
width: 300px;
height: 360px;
z-index: 100;
margin-left: -150px;
margin-top: -180px;
}

.hide{
display: none;
}

JS代码:
//一 新增 绑定用户的点击操作,弹出模态对话框
$('#btn').click(function () {
$('.shadow').removeClass('hide');
$('.login').removeClass('hide');
});

//2 点击取消 关闭模态对话框
$('#login-cancel').click(function () {
// 2.1
$('.shadow').addClass('hide');
$('.login').addClass('hide');
// 2.2 清空
$('#name').val('');
$('#want').val('');

});
// 3 保存
// 3.1 用户输入数据,然后点击保存时获取用户输入的数据
$('#login-btn').click(function(){
var inp_name = $('#name').val();
var inp_hobby = $('#want').val();

// 3.2 创建标签,将数据加入到标签里面
// var tr_str = '<tr><td><input type="checkbox"></td><td>'+ inp_name +'</td><td>'+ inp_hobby +'</td><td><button class="delete">删除</button></td></tr>';
var tr_str = `<tr><td><input type="checkbox"></td><td>${inp_name}</td><td>${inp_hobby}</td><td><button class="delete">删除</button></td></tr>`;

// 3.3 给tbody标签添加上我们做好的tr标签
$('tbody').append(tr_str);
// 3.4 关闭模态对话框,并且清空用户之前输入的数据
$('.shadow').addClass('hide');
$('.login').addClass('hide');
$('#name').val('');
$('#want').val('');


});

//二 删除
// $('.delete').click(function () {
// // $(this)标签点击的那个按钮
// $(this).parent().parent().remove();
//
//
// });

// $('.delete').on('click',function () {
// $(this).parent().parent().remove();
// })

// 事件委托
$('tbody').on('click','.delete',function () {
// $(this) 还是你点击的那个按钮标签
$(this).parent().parent().remove(); // tr

});

通过上面的代码,我们就可以实现表格内容的增加和删除了。

事件冒泡

点击儿子标签会触发父级标签/祖父标签,等等的所有点击事件,这叫事件冒泡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html代码
<div class="c1">
<div class="c2"></div>
</div>
css代码
.c1{
border: 1px solid red;
height: 100px;
}
.c2{
border: 1px solid green;
height: 50px;
width: 50px;
}

jquery代码
$('.c1').click(function () {
alert('父级标签c1');
});
$('.c2').click(function () {
alert('儿子标签c2');
return false; // 阻止后续事件发生
});

事件委托

1
2
3
4
5
6
// 事件委托
$('tbody').on('click','.delete',function () {
// $(this) 还是你点击的那个按钮标签
$(this).parent().parent().remove(); // tr

});

prop属性操作

1
2
3
4
5
6
selected checked disabled enabled
设置属性
$('#d1').prop('checked',true); 选中
$('#d1').prop('checked',false); 取消选中
查看属性
$('#d1').prop('checked'); true表示选中了,false表示未选中

除了这四个属性,我们也可以操作HTML标签中的其它属性

1
2
3
4
5
var a = document.createElement('a');
a.href = 'xxx'; // 只能设置自带属性,而不能设置诸如 xx='oo' 的自定义属性

a.attr({'xx':'oo'}) // 属性设置(新增或修改)
a.attr('xx') // 获取属性

逻辑运算符

1
2
3
and  &&
or ||
not !

全选反选取消的代码示例

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>金老板</td>
<td>开车</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>景女神</td>
<td>茶道</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>苑昊(苑局)</td>
<td>不洗头、不翻车、不要脸</td>
</tr>
</tbody>
</table>
<script src="jquery.js"></script>
<script>

$('#all').click(function () {
$('[type="checkbox"]').prop('checked',true);

});
$('#cancel').click(function () {
$('[type="checkbox"]').prop('checked',false);

});

// 反选
$('#reverse').click(function () {

var all_inp = $('[type="checkbox"]');
for (var i=0;i<all_inp.length;i++){
var status = all_inp.eq(i).prop('checked');
// if (status){
// all_inp.eq(i).prop('checked',false);
// }else{
// all_inp.eq(i).prop('checked',true);
// }

// 简写方式
all_inp.eq(i).prop('checked',!status);

}


})



</script>
</body>
</html>

新增和删除示例

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
.shadow{
position: fixed; /* 固定定位 */
top:0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.8);
z-index: 90; /* 控制定位的元素的层级,数字越大越在上层显示 */
}

.login{
position: fixed;
top:50%;
left: 50%;
background-color: white;
width: 300px;
height: 360px;
z-index: 100;
margin-left: -150px;
margin-top: -180px;
}

.hide{
display: none;
}

</style>

</head>
<body>

<div>
<button id="btn">新增</button>
</div>

<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>潘景祥</td>
<td>日京,日韩</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>薛晓博</td>
<td>日景祥,开车</td>
<td>
<button class="delete">删除</button>
</td>
</tr>

<tr>
<td><input type="checkbox"></td>
<td>王赛</td>
<td>日景祥</td>
<td>
<button class="delete">删除</button>
</td>
</tr>


</tbody>
</table>




<div class="login hide" >
<!--<form action="">-->

<div>
姓名:<input type="text" id="name">
</div>
<div>
毕生追求:<input type="text" id="want">
</div>
<div>
<button id="login-btn">保存</button>
<button id="login-cancel">取消</button>
</div>

<!--</form>-->
</div>

<div class="shadow hide"></div>

</body>
<script src="jquery.js"></script>

<script>

// $('#btn').click(function () {
// $('.shadow').removeClass('hide');
// $('.login').removeClass('hide');
// });
//
// $('#login-cancel').click(function () {
// $('.shadow').addClass('hide');
// $('.login').addClass('hide');
// });


//一 新增 绑定用户的点击操作,弹出模态对话框
$('#btn').click(function () {
$('.shadow').removeClass('hide');
$('.login').removeClass('hide');
});

//2 点击取消 关闭模态对话框
$('#login-cancel').click(function () {
// 2.1
$('.shadow').addClass('hide');
$('.login').addClass('hide');
// 2.2 清空
$('#name').val('');
$('#want').val('');

});
// 3 保存
// 3.1 用户输入数据,然后点击保存时获取用户输入的数据
$('#login-btn').click(function(){
var inp_name = $('#name').val();
var inp_hobby = $('#want').val();

// 3.2 创建标签,将数据加入到标签里面
// var tr_str = '<tr><td><input type="checkbox"></td><td>'+ inp_name +'</td><td>'+ inp_hobby +'</td><td><button class="delete">删除</button></td></tr>';
var tr_str = `<tr><td><input type="checkbox"></td><td>${inp_name}</td><td>${inp_hobby}</td><td><button class="delete">删除</button></td></tr>`;

// 3.3 给tbody标签添加上我们做好的tr标签
$('tbody').append(tr_str);
// 3.4 关闭模态对话框,并且清空用户之前输入的数据
$('.shadow').addClass('hide');
$('.login').addClass('hide');
$('#name').val('');
$('#want').val('');


});

//二 删除
// $('.delete').click(function () {
// // $(this)标签点击的那个按钮
// $(this).parent().parent().remove();
//
//
// });

// $('.delete').on('click',function () {
// $(this).parent().parent().remove();
// })

// 事件委托
$('tbody').on('click','.delete',function () {
// $(this) 还是你点击的那个按钮标签
$(this).parent().parent().remove(); // tr

});


</script>
</html>

常用事件

点击事件 click

1
2
3
4
5
$('.c1').click(function () {
//$(this)表示的就是它自己
$(this).css('background-color','green');
// $('.c1').css('background-color','green');
})

focus和blur

输入框获取或失去光标时触发的事件。

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
26
27
28
html代码:

<input type="text" id="username">
<div class="c1"></div>

css代码:
.c1{
background-color: red;
height: 200px;
width: 200px;
}
.c2{
background-color: green;
}

jQuery代码:
// focus获取光标时触发的事件
$('#username').focus(function () {
$(this).css({'background-color':'yellow'});
$('.c1').addClass('c2');

});
// blur失去光标时触发的事件
$('#username').blur(function () {
$(this).css({'background-color':'white'});
$('.c1').removeClass('c2');

});

change

域内容发生变化时触发的事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('select').change(function () {
// $('.c1').toggleClass('c2');
// console.log($(this));
// console.log($(this).options);
// console.log($(this).selectedIndex)
// console.log(this); //dom对象 $(this)jquery对象
// console.log(this.options);
// console.log(this.selectedIndex);
var option_text = this.options[this.selectedIndex].innerText;
console.log(option_text);
// if (option_text === '喝酒'){}
// 获取被选中的option标签的文本内容
// $(':selected').text();
});

hover

鼠标悬浮事件

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
26
27
28
29
30
31
32
33
34
35
36
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 200px;
width: 200px;
}
</style>
</head>
<body>

<div class="c1"></div>


</body>
<script src="jquery.js"></script>
<script>
$('.c1').hover(
// 鼠标进入时触发的事件
function(){
$('.c1').css({'background-color':'yellow'});
},
// 鼠标移出时触发的事件
function(){
$('.c1').css({'background-color':'blue'});
}
)


</script>
</html>

input

根据用户输入的内容,实时触发的事件。

input 事件只能使用 on 绑定。

1
2
3
4
$('#username').on('input',function () {
// console.log($(this).val());
// xxoo
});

绑定事件的两个方式

1
2
3
4
5
$('.c1').click(function(){})
$('.c1').on('click',function(){})

// 事件委托
$('.c1').on('click','子辈的标签选择器',function(){})

页面载入

1
2
3
4
5
6
7
8
9
window.onload =function(){}  //等页面内容全部加载完毕之后触发的事件,但是存在覆盖现象.它属于原生js的方法

jquery写法
$(function () {
$('.c1').click(function () {
$(this).toggleClass('c2');
})
});
等待所有标签加载完成之后触发的事件,不存在覆盖现象

关于window

window是整个heml文档,指代的是全局

1
2
var a = 10;     // 实际是:window.a
location.href; // 实际是:window.location.href;