jQuery的元素操作,事件处理,委托

元素操作

  1. 创建元素var li = $('<li></li>')
  2. 添加元素
  • 内部添加 $('ul').append(li) 放到内容的后面, prepend 放到内容的前面
  • 外部添加 $('ul').before(li) 放到指定元素的前面,after放到后面,兄弟关系
  1. 删除元素 $('ul').remove()zs的方式, empty或者html('')清空元素内的孩子

事件注册/处理

  1. 事件处理 ele.on({mouseenter:function(){},}),on可以处理一个或多个事件
  2. 相同元素不同处理方法,可以使用on(' ')多个事件用逗号隔开

事件委托

  1. on(‘方法’,’子元素’, ‘回调函数’),原理,冒泡处理
  2. on可以给未来动态创建的元素绑定事件
  3. 事件处理off() 解绑事件 off(‘某个事件’)解绑某个事件 off('click','li')接触事件委托
  4. one('')事件处理 只会触发一次
  5. 自动触发方式
  • ele.click()
  • trigger(‘事件方法’)
  • triggerHandler(‘事件方法’) 不会触发元素的默认行为 不会有光标闪烁

事件对象

  1. 注意有冒泡行为
  2. 拷贝对象$.extend(‘deep’,traget,obj,[objN])
  3. true深拷贝完全克隆,而且不会覆盖,如果有相同属性会合并;false浅拷贝,把原来复杂数据类型地址老贝给目标对象,拷贝地址,会将原来的属性覆盖

多库并存

  1. $改为jQuery
  2. 让jquery 释放会$的控制权 比如 var demo = jQuery.noConflict()

TodoList案例

  1. 亲兄弟才能使用$(this).index()
  2. splice(index,删除几个元素),数组的删除操作
  3. attr(‘自定义属性’), 可获取元素的属性值
  4. 原理:输入数据后,首先获取本地的数据库,将输入的值存入本地数据库保存,在进行一系列的渲染
  5. JSON.parse(data)方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象
  6. JSON.stringify()方法将一个 JavaScript 对象或值转换为 JSON 字符串

查看实例

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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

li {
list-style: none;
}

.box {
position: relative;
width: 600px;
height: 440px;
margin: 100px auto 10px;
background-color: #ccc;
border-radius: 10px;
}

::-webkit-scrollbar {
width: 6px;
height: 5px;
}

::-webkit-scrollbar-track {
background-color: rgba(50, 57, 61, 0.2);
border-radius: 2em;
}

::-webkit-scrollbar-thumb {
background-color: #202b33;
background-image: -webkit-linear-gradient(45deg, hsla(0, 0%, 100%, 0.4) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .4) 0, hsla(0, 0%, 100%, .4) 75%, transparent 0, transparent);
border-radius: 2em;
}

span {
display: block;
text-align: center;
font-size: 20px;
font-weight: 600;
color: rgb(9, 12, 11);
margin: 5px;
}

.int {
margin: 20px auto 0;
padding: 10px;
display: block;
outline: none;
overflow: auto;
border-radius: 10px;
}

li p {
display: inline-block;
margin: 0 10px;
color: rgb(49, 66, 141);
font-size: 15px;
font-weight: 600;
}
ol li,
ul li {
background-color: rgb(204, 235, 218);
border-radius: 5px;
padding-left: 10px;
margin: 10px 0;
border: 2px solid rgb(135, 198, 228);
}

ol li a,
ul li a {
float: right;
text-decoration: none;
font-size: 12px;
font-weight: 550;
color: rgb(33, 16, 49);
line-height: 20px;
margin-right: 10px;
}

ul,ol {
width: 550px;
height: 150px;
background-color: rgba(80, 226, 202, 0.288);
border-radius: 10px;
margin: 5px auto 0;
padding: 10px;
overflow: auto;
}
h5{
margin-left: 27px;
}
</style>

<body>
<div class="box">
<span>留言区</span>
<input type="text" placeholder="请输入代办的事件" class="int">
<h5>正在进行中</h5>
<ul></ul>
<h5>已经完成的事件</h5>
<ol></ol>
</div>
<script>
// $(function () {
// $('button').click(function () {
// var li = $('<li></li>');
// li.html($('textarea').val() + '<a href="javascript:;">删除</a>')
// if ($('textarea').val() != '') {
// $('ul').prepend(li);
// li.slideDown();
// $('textarea').val('');
// }
// })
$(function () {
// todolist案例
eload();
$('.int').on('keydown', function (event) {
if (event.keyCode == 13) {
if ($(this).val() == '') {
alert('请输入内容')
} else {
var local = getData();
// console.log(local);
local.push({ title: $(this).val(), done: false });//追加数组
savedata(local);
eload();
$(this).val('');
}
}
})
$('ol,ul').on('click', 'input', function () {
var data = getData();
var index = $(this).siblings('a').attr('id');
// 修改数组中属性的值
data[index].done = $(this).prop('checked');
console.log(data);
savedata(data);
eload();
})
// 获取本地数据
function getData() {
var data = localStorage.getItem('todolist');
if (data !== null) {
console.log(typeof data);
console.log(typeof JSON.parse(data));
// 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象
return JSON.parse(data)
} else {
return [];
}
}
//保存本地存储
function savedata(data) {
// 设置本地存储 key,value,// 方法将一个 JavaScript 对象或值转换为 JSON 字符串
localStorage.setItem('todolist', JSON.stringify(data));
console.log(typeof JSON.stringify(data));
console.log(JSON.stringify(data));
}
// 本地存储渲染加载数据
function eload() {
var data = getData();
console.log(data);
// 这个操作为先删除后在进行渲染遍历
$('ul,ol').empty();
// 遍历数据,i为index,当前i下n为属性
$.each(data, function (i, n) {
console.log(n);
if (!n.done) {
$('ul').prepend('<li><input type="checkbox"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '>删除</a></li>').stop().slideDown().show();
} else {
$('ol').prepend('<li><input checked ="1" type="checkbox"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '>删除</a></li>').stop().slideDown().show();
}
})
}
// 删除对应的数据
$('ul,ol').on('click', 'li a', function () {
var data = getData();
console.log(data);
// 修改数据,查询自定义属性
var index = $(this).attr('id');
console.log(index);
//截取删除,index为删除的位置,后一个为删除的数量
data.splice(index, 1);
savedata(data);
eload();
})

})
// $('ul').on('click','li a',function(){
// $(this).parent('li').slideUp(function(){
// $(this).remove();
// })
// })
// })
</script>
</body>

查看图例

jQuery的尺寸

  1. width()/height() 获取元素的宽度和高度,只算width和height
  2. innerWidth()/height() 获取元素的width和padding的大小
  3. outerWidth()/Height() 包含padding,border
  4. outerWidth(true) 包含padding,border,margin

jQuery的位置

  1. offset() 方法 设置或返回距离文档的距离,不受父级的影响,返回的是对象object{}left/top,可以获取设置
  2. position() 获取元素的偏移量,先对于父级,只能获取不能设置
  3. scrollTop()/Left $(window).scroll(function(){})
  4. animate({scrollTop:0}),做动画效果,不能是文档,让body,html做动画效果

页面滚动楼层案例

  1. 使用排他思想,$(this).index() 获取当前索引号
  2. 使用节流阀控制滑动和点击时按钮抖动事件
  3. 使用链式编程,使用遍历each(function(i,ele){})方法
  4. 这里搭配节流阀,当点击按钮后flag=false,关闭页面滑动使得按钮添加类,等动画执行完成后在使得flag=true 添加一个回调函数

查看案例

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
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.box {
width: 80%;
height: 2000px;
display: flex;
margin: 0 auto;
flex-direction: column;
}

.box li {
flex: 1;
margin: 10px;
background-color: #ccc;
list-style: none;
border-radius: 10px;
}

ol {
position: fixed;
top: 30%;
left: 0;
width: 50px;
display: flex;
flex-direction: column;
}

ol li {
display: none;
flex: 1;
list-style: none;
text-align: center;
margin: 2px;
background-color: #ccc;
border-radius: 5px;
}

.box2 {
width: 20%;
height: 600px;
margin: 100px;
background-color: rgb(166, 224, 158);
margin: 0 auto;
}

li {
cursor: pointer;
}

.current {
background-color: rgb(241, 117, 117);
}
</style>

<body>
<div class="box2"></div>
<div class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<script>
$(function () {
// 当页面滑动到指定位置时,左侧的楼层显示出来
// 封装页面刷新后不滑动bug
// 页面自主滑动和点击按钮左侧按钮会出现抖动bug,这时候需要添加一个节流阀来控制
var flag = true;
scro();
function scro(){
if ($(document).scrollTop() > $('.box').offset().top) {
$('ol li').fadeIn();
}
else {
$('ol li').stop().fadeOut();
}
}
$(window).scroll(function () {
console.log($(document).scrollTop());
scro();
// 遍历大板块使得板块变化,左侧的楼层同步变化
if(flag){
$('.box li').each(function(i,ele){
if($(document).scrollTop()>=$(ele).offset().top){
console.log(i);
$('ol li').eq(i).addClass('current').siblings().removeClass();
}
})
}
})
// 点击楼层后使楼层切换到该位置
$('ol li').on('click', function () {
flag = false;
$(this).index();
var boxH = $('.box li').eq($(this).index()).offset().top;
// 这里搭配节流阀,当点击按钮后flag=false,关闭页面滑动使得按钮添加类,等动画执行完成后在使得flag=true 添加一个回调函数
$('body,html').scroll().animate({
scrollTop: boxH
},function(){
flag = true;
})
// 点击按钮后将背景颜色替换
$(this).addClass('current').siblings().removeClass();
})

})
</script>
</body>