jQuery学习笔记
2024-02-23 蓝白
📝 主旨内容
#jquery 遍历对象each方法
#写法一：
遍历对象each方法（长用在dom）
#写法二
$.each方法 （常用在数据 ）
这个既能遍历 数组 也能遍历 对象
#jquery元素操作：创建元素
#1.创建元素
#2.内部添加 ：
let ele = $(“
- 我是新创建的
“);
$(‘ul’).append(ele); //这个是往后边放进去 类似原生的 appendChlid
$(‘ul’).prepend(ele); //这个是放 前面
#3.外部添加
4.删除元素
#jquery 删除商品小案例
删除当前商品要使用 $(this)，在删除多个时，用到了隐式迭代。（使用了 this就避免使用隐式迭代，相当于一开始就限制了范围）
1.
#jquery 尺寸位置操作
#尺寸操作
- 可以用来做 右侧的 返回顶部 按钮
- 可以设置点击某一个按钮后自动跳转某个位置 并且 带有动画效果
#位置操作
#jquery 事件注册方式
#1.单个事件注册
#2.事件处理on绑定一个或多个事件
例子： （以对象的方式来写）
写法一
写法二 （当多个事件的处理方式一样时）
#3.事件委派（对于 动态（后期通过js生成的）元素也可以绑定事件）
#jquery 事件解绑 以及自动触发
- .off() //接触所有绑定的事件
- .off(‘click) //接触所有绑定的点击事件
- 自动触发事件
#jquery对象拷贝extend
#1.简介
#2.深拷贝和浅拷贝的区别
#jquery 多库共存 自定义变量定义符号
#1.方法一
用jquery代替$来定义
#2.方法二
let jq=$.noConflict(); //然后在这之后后的所有定义符号会失效 那么 jq就是新的定义符号
#jquery 插件 下载使用
www.htmleaf.comopen in new window
图片懒加载、瀑布流插件、全屏滚动插件 等等
#TOdolist 网站案例
jq版：**todollist案例open in new window**
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ToDoList—最简单的待办事项列表</title>
<link rel="stylesheet" href="index.css">
<!-- <script src="js/jquery.min.js"></script> -->
<script src="<https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js>"></script>
<!-- <script src="js/todolist.js"></script> -->
</head>
<body>
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
</section>
</header>
<section>
<h2>正在进行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
<li>111111111111</li>
</ol>
<h2>已经完成 <span id="donecount"></span></h2>
<ul id="donelist">
<li>5555</li>
</ul>
</section>
<footer>
Copyright © 2014 todolist.cn
</footer>
</body>
<script>
xian();
$('#title').on('keydown', function (e) {
// console.log(e)
if (e.keyCode == 13) {
let duu = du(); //接收返回值 变为一个数组
// 定义一个数组，来存储用户输入的
if ($('#title').val() !== "") {
let obj = [{
title: $('#title').val(), //这个是获取输入框内容
done: false,
}];
let ddd = duu.concat(obj[0]); //合并数组,完成数组的更新
// 存到本地存储，完成更新
cun(ddd); //这个利用形参来传值
xian(); //渲染
// 输入框内容清空
$('#title').val("");
} else {
alert('请输入内容')
}
}
})
$('button').on('click', function () {})
// 删除按钮
$("#todolist").on("click", "a", function () {
// 1.先读取所有的数据
// 2.删除数据，并组成一个新的数组 array.splice(index,1);
// 3.存储数据
// 4.渲染数据
let date = du();
// let i = $("#todolist li a").attr("id");
let i = $(this).attr("id");
// console.log(i);
date.splice(i, 1);
// console.log(date);
cun(date); //存储数据
xian(); //渲染数据
})
// 复选框的效果
$("#todolist,#donelist").on("click", "input", function () {
let date = du();
let i = $(this).nextAll("a").attr("id");
date[i].done = $(this).prop("checked"); //同步复选框的状态
cun(date); //存储数据
xian(); //渲染数据
// alert(5);
})
// 读取数据
function du() {
// 先获取thing这个数据名
let date = JSON.parse(localStorage.getItem('thing'));
// 判断是否是空
if (date !== null) {
return date;
} else {
return [];
}
}
// 存储数据
function cun(date) {
localStorage.setItem('thing', JSON.stringify(date));
// // 开始数据存储 localStorage.setItem('存储时候的名字',存储对象); 键值对的方式，只能存储字符串的形式
// localStorage.setItem('thing', JSON.stringify(obj));
// //将存储的字符串转回对象的形式
// let objNew = JSON.parse(localStorage.getItem('thing'));
// let arrr = []; //最后的存储所有数据的数组
// arrr.push(objNew[0])
// console.log(arrr[0]);
}
// 渲染数据
function xian() {
let objNew = du();
// console.log(objNew);
// 先进行一个排他，因为每次都会重新渲染
$('#todolist,#donelist').children().remove();
let donecount = 0; //完成总数
let todocount = 0; //待办总数
$.each(objNew, function (i, ele) {
// console.log(i);//输出序号
// console.log(ele);
// 对渲染加一个判断， 渲染的时候对这个内容进行判断， 如果done值为true则渲染到donelist列表内
if (ele.done) {
$('#donelist').prepend("<li>" + "<input type='checkbox' checked='true'>" + "<p>" + ele.title +
"</p>" +
"<a href='javascript:;' id='" + i + "'></a>" + "</li>")
donecount++;
} else {
$('#todolist').prepend("<li>" + "<input type='checkbox'>" + "<p>" + ele.title + "</p>" +
"<a href='javascript:;' id='" + i + "'></a>" + "</li>")
todocount++;
}
})
$('#donecount').text(donecount);
$('#todocount').text(todocount);
}
</script>
</html>
核心是数据的本地存储以及对json的初步认识
jq学习结束，完美撒花 🌸🌸🌸
📎 链接
视频学习:
jq中文手册: