jquery学习笔记
大约 5 分钟
jquery学习笔记
自学期间的笔记，从没想到会发布，所以写的很烂，稍加修改后，勉强能看，多多包涵
blibli：黑马程序员前端基础教程|jQuery网页开发案例精讲_哔哩哔哩_bilibili
jq中文手册：
jquery 遍历对象each方法
写法一：
遍历对象each方法（长用在dom）
写法二
$.each方法 （常用在数据 ）
这个既能遍历 数组 也能遍历 对象
jquery元素操作：创建元素
1.创建元素
2.内部添加 ：
let ele = $("
$('ul').append(ele); //这个是往后边放进去 类似原生的 appendChlid
$('ul').prepend(ele); //这个是放 前面
3.外部添加
4.删除元素
jquery 删除商品小案例
删除当前商品要使用 $(this)，在删除多个时，用到了隐式迭代。（使用了 this就避免使用隐式迭代，相当于一开始就限制了范围）
jquery 尺寸位置操作
尺寸操作
- 可以用来做 右侧的 返回顶部 按钮
- 可以设置点击某一个按钮后自动跳转某个位置 并且 带有动画效果
位置操作
jquery 事件注册方式
1.单个事件注册
2.事件处理on绑定一个或多个事件
例子： （以对象的方式来写）
写法一
写法二 （当多个事件的处理方式一样时）
3.事件委派（对于 动态（后期通过js生成的）元素也可以绑定事件）
jquery 事件解绑 以及自动触发
.off() //接触所有绑定的事件
.off('click) //接触所有绑定的点击事件
自动触发事件
jquery对象拷贝extend
1.简介
2.深拷贝和浅拷贝的区别
jquery 多库共存 自定义变量定义符号
1.方法一
用jquery代替$来定义
2.方法二
let jq=$.noConflict(); //然后在这之后后的所有定义符号会失效 那么 jq就是新的定义符号
jquery 插件 下载使用
https://www.jq22.com/
https://www.dowebok.com/
图片懒加载、瀑布流插件、全屏滚动插件 等等
TOdolist 网站案例
jq版：todollist案例
<!DOCTYPE html>
<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学习结束，完美撒花 🌸🌸🌸