文章目录
1. 本地储存
1. window.sessionStorage
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
console.log(localStorage.getItem('username'));
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function() {
// 当我们点击了之后，就可以把表单里面的值存储起来
var val = ipt.value;
sessionStorage.setItem('uname', val);
sessionStorage.setItem('pwd', val);
});
get.addEventListener('click', function() {
// 当我们点击了之后，就可以把表单里面的值获取过来
console.log(sessionStorage.getItem('uname'));
});
remove.addEventListener('click', function() {
// sessionStorage.removeItem('uname');
});
del.addEventListener('click', function() {
// 当我们点击了之后，清除所有的
sessionStorage.clear();
});
</script>
2. window.localStorage
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function() {
var val = ipt.value;
localStorage.setItem('username', val);
})
get.addEventListener('click', function() {
console.log(localStorage.getItem('username'));
})
remove.addEventListener('click', function() {
localStorage.removeItem('username');
})
del.addEventListener('click', function() {
localStorage.clear();
})
</script>
案例：记住用户名
如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名
<input type="text" id="username">
<input type="checkbox" id="remember">记住用户名
<script>
var username=document.querySelector('#username');
var remember=document.querySelector('#remember');
if(localStorage.getItem('username')){
username.value=localStorage.getItem('username');
remember.checked=true;
}
remember.addEventListener('change',function(){
if(this.checked){
localStorage.setItem('username',username);
}else{
localStorage.removeItem('username');
}
})
2. jQuery入门
jQuery 的概念
下载：官网地址： https://jquery.com/
各个版本的下载：https://code.jquery.com/
jQuery 的入口函数
$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
jQuery 的顶级对象 $
1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
jQuery 对象和 DOM 对象
3. jQuery 常用API
1. jQuery 选择器
jQuery 设置样式：
$(‘div’).css(‘属性’, ‘值’)
1.基础选择器
2.层级选择器
隐式迭代（重要）
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
3.jQuery筛选选择器
jQuery筛选方法（重点）
jQuery 里面的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
案例：淘宝服饰精品案例
链式编程
2. jQuery 样式操作
操作 css 方法
设置类样式方法
案例：tab 栏切换
类操作与className区别
原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名
3. jQuery 效果
显示隐藏效果
滑动效果
事件切换
//1.事件切换 hover是鼠标经过和离开的复合写法
$(function(){
$(".nav>li").hover(function(){
$(this).children("ul").slideDown(200);
},function(){
$(this).children("ul").slideUp(200);
})
})
// 2.事件切换 hover 如果只写一个函数，鼠标经过和离开都会调用这个函数
$(function(){
$(".nav>li").hover(function(){
$(this).children("ul").slideToggle(200);
})
})
动画队列及其停止排队方法
谁做动画给谁加
$(function(){
$(".nav>li").hover(function(){
$(this).children("ul").stop().slideToggle(200);
})
})
淡入淡出效果
自定义动画 animate
案例：王者荣耀手风琴效果
鼠标经过某个小li 有两步操作：
当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
4. jQuery 属性操作
设置或获取元素固有属性值 prop()
设置或获取元素自定义属性值 attr()
数据缓存 data()
<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
$(function() {
//1. element.prop("属性名") 获取元素固有的属性值
console.log($("a").prop("href"));
$("a").prop("title", "我们都挺好");
$("input").change(function() {
console.log($(this).prop("checked"));
});
// console.log($("div").prop("index"));
// 2. 元素的自定义属性 我们通过 attr()
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($("div").data("index"));
})
</script>
案例：购物车案例模块-全选
案例：购物车案例模块-选中商品添加背景
// 1. 全选 全不选功能模块
// 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
// 事件可以使用change
$(".checkall").change(function() {
// console.log($(this).prop("checked"));
$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
if ($(this).prop("checked")) {
// 让所有的商品添加 check-cart-item 类名
$(".cart-item").addClass("check-cart-item");
} else {
// check-cart-item 移除
$(".cart-item").removeClass("check-cart-item");
}
});
// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
$(".j-checkbox").change(function() {
// if(被选中的小的复选框的个数 === 3) {
// 就要选中全选按钮
// } else {
// 不要选中全选按钮
// }
// console.log($(".j-checkbox:checked").length);
// $(".j-checkbox").length 这个是所有的小复选框的个数
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
5. jQuery 文本属性值
案例：购物车案例模块-增减商品数量-修改商品小计
// 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
$(".increment").click(function() {
// 得到当前兄弟文本框的值
var n = $(this).siblings(".itxt").val();
// console.log(n);
n++;
$(this).siblings(".itxt").val(n);
// 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
// 当前商品的价格 p
var p = $(this).parents(".p-num").siblings(".p-price").html();
// console.log(p);
p = p.substr(1);
console.log(p);
var price = (p * n).toFixed(2);
// 小计模块
// toFixed(2) 可以让我们保留2位小数
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
});
$(".decrement").click(function() {
// 得到当前兄弟文本框的值
var n = $(this).siblings(".itxt").val();
if (n == 1) {
return false;
}
// console.log(n);
n--;
$(this).siblings(".itxt").val(n);
// var p = $(this).parent().parent().siblings(".p-price").html();
// parents(".p-num") 返回指定的祖先元素
var p = $(this).parents(".p-num").siblings(".p-price").html();
// console.log(p);
p = p.substr(1);
console.log(p);
// 小计模块
$(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
getSum();
});
// 4. 用户修改文本框的值 计算 小计模块
$(".itxt").change(function() {
// 先得到文本框的里面的值 乘以 当前商品的单价
var n = $(this).val();
// 当前商品的单价
var p = $(this).parents(".p-num").siblings(".p-price").html();
// console.log(p);
p = p.substr(1);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
getSum();
});
6. jQuery 元素操作（遍历、创建、添加、删除）
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历
遍历标签用1，遍历数组对象用2
<script src="jquery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// $("div").css("color", "red");
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var sum = 0;
// 1. each() 方法遍历元素
var arr = ["red", "green", "blue"];
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// console.log(index);
// console.log(i);
// 回调函数第二个参数一定是 dom元素对象 也是自己命名
// console.log(domEle);
// domEle.css("color"); dom对象没有css方法
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
})
</script>
案例：购物车案例模块-计算总计和总额
// 5. 计算总计和总额模块
getSum();
function getSum() {
var count = 0; // 计算总件数
var money = 0; // 计算总价钱
$(".itxt").each(function(i, ele) {
count += parseInt($(ele).val());
});
$(".amount-sum em").text(count);
$(".p-sum").each(function(i, ele) {
money += parseFloat($(ele).text().substr(1));
});
$(".price-sum em").text("￥" + money.toFixed(2));
}
创建、添加元素
创建元素语法：var li=$(''<li >内容</li>'');
$("ul").prepend(li);
删除元素
案例：购物车案例模块-删除商品模块
// 6. 删除商品模块
// (1) 商品后面的删除按钮
$(".p-action a").click(function() {
// 删除的是当前的商品
$(this).parents(".cart-item").remove();
getSum();
});
// (2) 删除选中的商品
$(".remove-batch").click(function() {
// 删除的是小的复选框选中的商品
$(".j-checkbox:checked").parents(".cart-item").remove();
getSum();
});
// (3) 清空购物车 删除全部商品
$(".clear-all").click(function() {
$(".cart-item").remove();
getSum();
})
})
7. jQuery 尺寸、位置操作
jQuery 尺寸
jQuery 位置操作
案例：带有动画的返回顶部
案例： 品优购电梯导航
4. jQuery 事件注册
1. jQuery 事件处理
事件处理on()绑定事件
绑定的是ul，除法事件的是li
案例：发布微博案例
点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。
点击的删除按钮，可以删除当前的微博留言。
<script>
$(function(){
//1.点击发布按钮，动态创建一个li，放入文本框的内容和删除按钮，并且添加到ul中
$(".btn").on("click",function(){
var li = $("<li></li>");
li.html($(".txt").val()+"<a href='javascript:;''>删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val('');
})
//2.点击的删除按钮，可以删除当前的微博留言
/* $("ul a").click(function(){ //此时click不能给动态创建的a添加事件
alert(11);
}) */
$("ul").on("click","a",function(){
$(this).parent().slideUp(function(){
$(this).remove();
});
})
})
</script>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" class="txt" id="" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
事件处理 off() 解绑事件
自动触发事件 trigger()
2. jQuery 事件对象
事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event) {})
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()
5. jQuery 其他方法
1. jQuery 拷贝对象
深拷贝里面的不冲突的属性会合并到一起
2. 多库共存
jQuery 解决方案：
- 把里面的 $ 符号 统一改为 jQuery。 比如
jQuery(''div'') - jQuery 变量规定新的名称：
$.noConflict()
var xx = $.noConflict();；
3. jQuery 插件
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。
jQuery 插件常用的网站：
- jQuery 插件库 http://www.jq22.com/
- jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤： - 引入相关文件。（jQuery 文件 和 插件文件）
- 复制相关html、css、js (调用插件)。
jQuery 插件演示：
- 瀑布流
- 图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片。
我们使用jquery 插件库 EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面 - 全屏滚动（fullpage.js）
gitHub： https://github.com/alvarotrigo/fullPage.js
中文翻译网站： http://www.dowebok.com/demo/2014/77/
bootstrap JS 插件：
bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js插件使用 ，也必须引入jQuery 文件。
4. 案例：todolist
本地存储的数据格式
toDoList按下回车键把新数据添加到本地存储里面
$(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.push({title:$(this).val(),done:false});
saveDate(local);
// 2.todolist本地存储渲染加载到页面
load();
$(this).val("");
}
}
});
// 3.删除操作
$("ol,ul").on("click","a",function(){
// 先得到数据
var date = getDate();
// 再修改数据
var index = $(this).attr("id");//attr("")获取自定义属性值
date.splice(index,1);
// 再保存数据
saveDate(date);
// 最后渲染页面
load();
})
// 4.todolist正在进行和已完成选项操作
$("ol,ul").on("click","input",function(){
// 先得到数据
var date = getDate();
// 再修改数据
var index = $(this).siblings("a").attr("id");//attr("")获取自定义属性值
date[index].done=$(this).prop("checked");//prop("checked")获取固定属性
// 再保存数据
saveDate(date);
// 最后渲染页面
load();
})
//读取本地存储数据
function getDate(){
var date=localStorage.getItem("todolist");
if (date!==null){
// 本地存储里面的数据是字符串格式的，但是我们需要的是对象格式的
return JSON.parse(date);
}else{
return [];
}
}
// 保存本地存储数据
function saveDate(date){
localStorage.setItem("todolist",JSON.stringify(date));// 本地存储里面的数据是字符串格式的
}
// 加载到页面
function load(){
var date=getDate();
// 因为用了页面加载调用了一次load,（load里的prepend是追加），渲染数据又调用了一次，数据会出现两次
// 所以每次遍历前要清空ol里面的元素
$("ol,ul").empty();
var todoCount=0;
var doneCount=0;
//遍历每个数据，同时往ol里面添加li
$.each(date,function(i,n){
if(n.done){
$("ul").prepend("<li><input type='checkbox' checked='checked'> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></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);
}
})
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
