My jQuery notes
# jQuery
[TOC]
- JavaScript 库
封装了函数或者方法的一种 “集合”
其中的 jQuery 快速操作 DOM
# 一、jQuery
# 优点
# 二、jQuery 的基本使用
# 1.jQuery 的入口函数
可以像原生 js 把 script 写到 html 元素之前，有两种方法:
- 第一种方式
$(document).ready(function(){
//$('div').hide(); //想要执行的代码这
}) //js写在前还正常执行的第一种写法- 第二种方式
$(function(){
//$('div').hide(); //想要执行的代码这
}) //js写在前还正常执行的推荐写法
# 2.jQuery 的顶级对象 $
- 是 jQuery 的别称
- 是 jQuery 的顶级对象，相当于原生 js 的 windows
其实
$(...)跟jQuery(...)一样
# 3.jQuery 对象和 DOM 对象
- 原生 js 获取过来的是 DOM 对象 (querySelector 那些的…)
- jQuery 获取过来的是 jQuery 对象，还顺带包装成伪数组的形式，e.g.
$('div')是个获取到的 jQuery 对象，伪数组形式，获取了所有 div- DOM 和 jQuery 各自有自己的方法和属性，不能混用，会报错的
# 三、jQuery 常用 API
# 1.jQuery 选择器
# 普通选择器
//写法和document.querySelector('')类似
$('');
//层级选择器的写法：$('ul li'); $('ul>li');
隐式迭代：遍历内部 DOM 元素（jQuery 获取后返回的是一个伪数组），对每个对象执行相应操作
# 筛选选择器
<ul>
<li>34567</li>
<li>5364785</li>
<li>5364785</li>
<li>5364785</li>
<li>5364785</li>
</ul>
<script>
$(function() {
$('ul li:first').css('color','yellow');选择第一个
$('ul li:last').css('color','red');选择第二个
$('ul li:eq(2)').css('color','skyblue');选择索引号为2的（索引号从0开始）
$('ul li:odd').css('color','skyblue');选择索引号为奇数
$('ul li:even').css('color','red');选择索引号为偶数
})
</script>- 筛选方法
parent () 找的是亲父亲.
parents () 包含了当前元素所有父辈，祖辈，包括 html,body 这些.
parents (‘选择器’) 最好用的
<div class="father">
<div class="son"></div>
</div>
$(function() {
$('.son').parent().css('color','red');
})# 排他思想 (和链式编程！)
<button>123</button>
<button>123</button>
<button>123</button>
<button>123</button>
<button>123</button>
<button>123</button>
<script>
$(function(){
$('button').click(function(){
$(this).css('color','red');
console.log($(this).index());/获取被点击的按钮的索引号
$(this).siblings('button').css('color','');/其他兄弟元素不变
//链式编程的写法实现上面功能
$(this).css('color','red').siblings().css('color','');
})
})
</script>
注意这里的链式编程的写法
$(this).css('color','red').siblings().css('color','');可以这么干！
另外一个例子:
注意到底是哪个对象
# 2.jQuery 样式操作
- 操作 css 方法
- 设置类样式方法
切换类 ——> 没有则加上，有则去掉
- 类操作与 className 区别
原生 js 的 className 会覆盖原来的
但 jQuery 的类操作不会，它是追加类或者是删除指定的类
# 3.jQuery 效果
hover()表示鼠标经过和离开两者都有
//鼠标经过展示：
$('.mi>li').hover(function() {
$(this).children('ul').slideDown(2000);
},function() {
$(this).children('ul').slideUp(10);
})
//这样简化了上面的代码
$('.mi>li').hover(function() { //隐式迭代,会把所有的选中的小li加上事件
$(this).children('ul').stop().toggle();
//把stop写在前面，停止上一次动画,这么做就可以防止用户快速hover(鼠标经过,离开)触发多次动画效果一次一次的按照自己事件执行,前面加上stop就会每次触发hover停止上一次toggle(slidedown/slideup)然后执行这次的toggle(slidedown/slideup)
})这个 hover 很好用！
还有做动画的那个对象加 stop, 别选错了
自定义动画 animate，添加的是对象
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left:200,
top:300,
opacity:.3,
},1000)
})
})
</script>
<button>one</button>
<div></div>
// mouseenter() 会在鼠标时经过触发# 4.jQuery 属性操作
- prop() 获取自带属性并且可以改变属性值
<a href="http://www.baidu.com">zheli</a>
<input type="checkbox" checked="checked">
<script>
$(function() {
console.log($("a").prop("href"));
$("a").prop("title","good");
$("input").change(function() {
console.log($(this).prop("checked"));/值是布尔类型的
})
})
</script>
change()方法获取元素状态是否变化
- attr() 获取自定义属性并且可以改变属性值
- data () 获取属性值
1.h5 的自定义属性写法时 data 直接获取
2. 对自定义属性赋值时值是存储在缓存中，刷新了就没了，而且元素控制台 (console) 还看不到
<input type="checkbox" name="" id="iput">
<script>
$(function() {
$("#iput").data("name","andy");
console.log($("#iput").data("name"));
})
</script>控制台展示如下
# 5. 内容文本值
1. html() 相当于原生js的innerHTML(),获取元素内容（识别标签）
html() 获取值
html("...") 改变值
2. text() 相当于原生js的innerText()，获取元素文本内容（不识别标签）
text() 获取值
text("...") 改变值
3. val()相当于原生js的value(),获取表单值
val() 获取值
val("...") 改变值# 6. 元素操作
- 遍历元素 —— 给同一类元素做不同操作
<div>1</div>
<div>2</div>
<div>3</div>
<input type="text">
<script>
var attr = ["red","green","skyblue"];
var sum = 0;
$(function() {
$("div").each(function(index,elem) {
console.log(index);
$(this).css("color",attr[index]);
sum += parseInt($(elem).text());
})
$("input").val(sum);
})
</script>传进 function 的参数只是你写个名任意名，这个跟 js 里面的事件 (event) 一样，都是内定好的
并不是让你传那个值！
注意那个对象是 DOM 对象，不能用 jQuery 对象，要是用 jQuery 里面的属性或者方法需要转换
这种方法很像我们 js 里面的 for…in
可以用于 JQuery 对象也可以用于 DOM 对象比如说我们定的对象或者 Array 对象
跟第一种方式 (只能是从 jQuery 对象调用那个方法) 不同的是这个方式可以用于任何对象！
- 创建、添加、删除元素
<script>
var li = $("<li>555</li>"); //创建元素
var div = $("<p>100</p>");
$(function() {
$("ul").append(li);//添加子元素在最后面
$("ul").prepend(li);//添加子元素在最前面
$("div").before(div);//添加兄弟元素在前面
$("div").after(div);//添加兄弟元素在后面
$("ul").remove();//移除ul,包括ul他自己(ul标签)
$("ul").empty();//清空ul，只留下ul标签
$("ul").html("");//清空ul，只留下ul标签,注意是空字符串,要是什么都不填就是获取内容了
})
</script>
<ul>
<li>233</li>
</ul>
<div>hao out are you</div># 7. 尺寸、位置操作
可于 jQuery 文档搜索尺寸、位置
- offset() 设置或获取元素偏移
<script>
// offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
// 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
// 1. 获取设置距离文档的位置（偏移） offset
$(".son").offset({
top: 200,
left: 200
});
// console.log($(".son").offset());
// console.log($(".son").offset().top);
</script>- position() 获取元素偏移 (该方法只能获取偏移，不能设置偏移)
<script>
// position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
// 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
// 该方法只能获取,不能设置偏移
console.log($(".son").position().top);
$(".son").position({
top: 200,
left: 200
});
</script>- scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
<script>
// scrollTop() 方法设置或返回被选元素被卷去的头部。
// 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部
$(function () {
$(document).scrollTop(100);
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $('.container').offset().top;
$(window).scroll(function () {
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$('.back').fadeIn();
} else {
$('.back').fadeOut();
}
});
$('.back').click(function () {
$('html,body').animate({
scrollTop: 0
});
})
});
</script>
注意 animate 是给做动画的_元素，所以要是传 window 或者 document 是不管用的！！！_
# 8、其他
节流阀 / 互斥锁的思维解决两事件相互触发的情景
var flag = true;在不想触发的时候改成 false
然后再不想触发的代码执行之后改回 true
只有在 true 的时候可以触发
# 四、jQuery 事件
# 1、常见事件
- 单个事件注册
$("").事件(function() {
})- 事件处理
（1）on绑定一个或者多个事件
$("div").on({ //注意这里只是给on传进了多个事件类型,用{}包括住所有的
click : function() {
$(this).css("backgroundColor","skyblue");
},
mouseover : function() {
$(this).css("backgroundColor","red")
}
})
//如果事件处理程序相同，可以这样写
$("div").on("mouseenter mouseover",function() {//注意之间有空格
$(this).toggle();
})
（2）可以委派事件给父元素,给父元素绑定事件，但触发事件的是子元素
<ul>
<li>233</li>
<li>22</li>
<li>33</li>
</ul>
<script>
$("ul").on("click","li",function() {
alert('hi');
})
</script>
就不需要给每一个子元素添加事件 (虽然是隐式迭代，已经很方便), 直接委派给父元素就行，之后会冒泡到父元素然后触发事件.
⭐️⭐️⭐️⭐️⭐️_重要！！！ on() 可以给未来动态创建的元素也添加事件 (这个之前单个事件注册方法是做不到的)⭐️_⭐️⭐️⭐️⭐️⭐️
（3）给动态创建的元素也可以添加事件
<script>
$(function() {
$("ul").on("click","li",function() {
alert('hi');
})
var li = $('<li>jij</li>');
$("ul").append(li);
})
</script>
<ul>
<li>hao</li>
<li>en</li>
</ul>注意！先用
on给父元素绑定事件然后又才加子元素给这个父元素，之后要是点 (or whatever 事件 u set), 子元素也会冒泡给父元素让事件触发！要是使用之前的单事件绑定子元素不会对任何未来的 (不一定是代码在这个之后， 也有可能是某个事件触发时创建的新元素，这也算未来动态创建的元素) 动态创建的元素，因为这个事件只是绑定了代码执行到那里所以对应的元素给绑定上了事件，所以之后要是动态的创建了对应的元素是不会触发的，因为压根都没绑定 (注册) 事件
off()方法移除用.on()绑定的事件处理程序，可以有回调函数
$("ul").off() 解绑ul的所有事件
$("ul").off("click") 解绑ul的对应(这里是click)事件
$("ul").off("click","li") 解绑事件委托(li委托给ul的click事件)-
one () 绑定一次性事件，语法和 on () 一样
-
自动触发事件
// 如果事件是click那么下面有三种自动触发这个点击事件
// 自动触发点击事件
（1）$("div").click(); //这一种方式会触发默认行为(比如说表单获得焦点就会闪烁这些的)
（2）$("div").trigger("click"); //这一种方式会触发默认行为
（3）$("div").triggerHandler("click");//这一种方式不会触发默认行为
# 2. 事件对象
# 五、jQuery 其他方法
# 1.jQuery 对象拷贝
浅拷贝只复制地址，不开辟新的地址空间，修改地址里的内容会一起修改内容 (相当于直接把被拷贝的变量 (存着被拷贝的对象的地址) 赋值给目标变量)
深拷贝是开辟新的地址空间创建新对象，对新对象的操作不会影响到原来的对象
浅拷贝如果除了本身，拷贝的对象里面还有对象 (复杂数据类型), 那个也会浅拷贝 (拷贝地址)
深拷贝如果除了本身，拷贝的对象里面还有对象 (复杂数据类型), 那个也会深拷贝 (拷贝对象)
# 2. 多库共存
这么做就是我们自定义叫法，这里我们改成了 "suibian", 所以之后直接拿 suibian 代替 $ 来代表 jQuery 的各种操作
# 3.jQuery 插件
就是找想要的效果，然后参照源代码复制、粘贴、修改
Bootstrap 其实就是基于 jQuery 实现的，所以在用 BootStrap 需要导入 jQuery.min.js 和 Bootstrap 自己的 js 文件还有自己的 css 文件，然后就可以在 Bootstrap 官网找图标，JS 插件，组件 (完成好的 component),css 样式等等等…
然后调好了就可以复制粘贴然后修改一下
# 综合案例
案例：toDoList
① 文本框里面输入内容，按下回车，就可以生成待办事项。
② 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
③ 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。
④ 但是本页面内容刷新页面不会丢失。
案例：toDoList 分析
① 刷新页面不会丢失数据，因此需要用到本地存储 localStorage
② 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
③ 存储的数据格式：var todolist = [{title : ‘xxx’, done: false}]
④ 注意点 1： 本地存储 localStorage 里面只能存储字符串格式 ，因此需要把对象转换为字符串 JSON.stringify (data)。
⑤ 注意点 2： 获取本地存储数据，需要把里面的字符串转换为对象格式 JSON.parse () 我们才能使用里面的数据。
案例：toDoList 按下回车把新数据添加到本地存储里面
① 切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。
② 利用事件对象.keyCode 判断用户按下回车键（13）。
③ 声明一个数组，保存数据。
④ 先要读取本地存储原来的数据（声明函数 getData ()），放到这个数组里面。
⑤ 之后把最新从表单获取过来的数据，追加到数组里面。
⑥ 最后把数组存储给本地存储 (声明函数 savaDate ())
案例：toDoList 本地存储数据渲染加载到页面
① 因为后面也会经常渲染加载操作，所以声明一个函数 load，方便后面调用
② 先要读取本地存储数据。（数据不要忘记转换为对象格式）
③ 之后遍历这个数据（$.each ()），有几条数据，就生成几个小 li 添加到 ol 里面。
④ 每次渲染之前，先把原先里面 ol 的内容清空，然后渲染加载最新的数据。
案例：toDoList 删除操作
① 点击里面的 a 链接，不是删除的 li，而是删除本地存储对应的数据。
② 核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表 li
③ 我们可以给链接自定义属性记录当前的索引号
④ 根据这个索引号删除相关的数据 ---- 数组的 splice (i, 1) 方法
⑤ 存储修改后的数据，然后存储给本地存储
⑥ 重新渲染加载数据列表
⑦ 因为 a 是动态创建的，我们使用 on 方法绑定事件 (而不是 click)
案例：toDoList 正在进行和已完成选项操作
① 当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。
② 点击之后，获取本地存储数据。
③ 修改对应数据属性 done 为当前复选框的 checked 状态。
④ 之后保存数据到本地存储
⑤ 重新渲染加载数据列表
⑥ load 加载函数里面，新增一个条件，如果当前数据的 done 为 true 就是已经完成的，就把列表渲染加载到 ul 里面
⑦ 如果当前数据的 done 为 false， 则是待办事项，就把列表渲染加载到 ol 里面
案例：toDoList 统计正在进行个数和已经完成个数
① 在我们 load 函数里面操作
② 声明 2 个变量 ：todoCount 待办个数 doneCount 已完成个数
③ 当进行遍历本地存储数据的时候， 如果 数据 done 为 false， 则 todoCount++, 否则 doneCount++
④ 最后修改相应的元素 text ()
<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">
</ol>
<h2>已经完成 <span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
<footer>
Copyright © 2014 todolist.cn
</footer>
</body> <script>
$(function() {
// 1. 按下回车 把完整数据 存储到本地存储里面
// 存储的数据格式 var todolist = [{title: "xxx", done: false}]
load();
$("#title").on("keydown", function(event) {
if (event.keyCode === 13) {
if ($(this).val() === "") {
alert("请输入您要的操作");
} else {
// 先读取本地存储原来的数据
var local = getDate();
// console.log(local);
// 把local数组进行更新数据 把最新的数据追加给local数组
local.push({ title: $(this).val(), done: false });
// 把这个数组local 存储给本地存储
saveDate(local);
// 2. toDoList 本地存储数据渲染加载到页面
load();
$(this).val("");
}
}
});
// 3. toDoList 删除操作
$("ol, ul").on("click", "a", function() {
// alert(11);
// 先获取本地存储
var data = getDate();
console.log(data);
// 修改数据
var index = $(this).attr("id");
console.log(index);
data.splice(index, 1);
// 保存到本地存储
saveDate(data);
// 重新渲染页面
load();
});
// 4. toDoList 正在进行和已完成选项操作
$("ol, ul").on("click", "input", function() {
// alert(11);
// 先获取本地存储的数据
var data = getDate();
// 修改数据
var index = $(this).siblings("a").attr("id");
console.log(index);
// data[?].done = ?
data[index].done = $(this).prop("checked");
console.log(data);
// 保存到本地存储
saveDate(data);
// 重新渲染页面
load();
});
// 读取本地存储的数据
function getDate() {
var data = localStorage.getItem("todolist");
if (data !== null) {
// 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
return JSON.parse(data);
} else {
return [];
}
}
// 保存本地存储数据
function saveDate(data) {
localStorage.setItem("todolist", JSON.stringify(data));
}
// 渲染加载数据
function load() {
// 读取本地存储的数据
var data = getDate();
console.log(data);
// 遍历之前先要清空ol里面的元素内容
$("ol, ul").empty();
var todoCount = 0; // 正在进行的个数
var doneCount = 0; // 已经完成的个数
// 遍历这个数据
$.each(data, function(i, n) {
// console.log(n);
if (n.done) {
$("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>"); // 这里的有checked属性视为了让渲染时候添加到ul里面的小li带上对钩
doneCount++;
} else {
$("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
todoCount++;
}
});
$("#todocount").text(todoCount);
$("#donecount").text(doneCount);
}
});
</script>
无非就是先获本地存储中的数据取
然后在把本地存储数据中进行修改操作
然后在把修改好的数据保存到本地存储中
最后在进行渲染页面即可
