JavaScript-JQuery
1）$是JQuery的别称
2）$同时也是JQuery的顶级对象
// 等页面DOM加载完毕再去执行js代码
$(document).ready(function () {
// 隐藏div
$('div').hide();
})
$(function () {
$('div').hide();
})
2、DOM对象和JQuery对象相互转换
$('div')[0].play() JQuery对象转DOM对象
$('div')get(0).play() JQuery对象转DOM对象
$('div') DOM对象转JQuery对象
3、JQuery基础选择器
4、JQuery筛选选择器
5、JQuery筛选方法
6、仿新浪下拉菜单
<script>
$('.nav li').mouseover(function () {
$(this).children('ul').show();
});
$('.nav li').mouseleave(function () {
$(this).children('ul').hide();
});
</script>
7、排他思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/JQuery.min.js"></script>
</head>
<body>
<button>点我变色</button>
<button>点我变色</button>
<button>点我变色</button>
<button>点我变色</button>
<button>点我变色</button>
<script>
$(function () {
// 1、隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function () {
// 2、当前元素变化背景颜色
$(this).css('background','blue');
// 3、其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings('button').css('background','');
})
})
</script>
</body>
</html>
8、淘宝精品服饰案例
<script>
$(function () {
// 1、鼠标经过左侧的li
$("#left li").mouseover(function () {
// 2、得到当前li的索引号
let index = $(this).index();
// 3、让我们右侧的盒子相应索引号的图片显示出来
$('#content div').eq(index).show();
// 4、让其余的图片（其它兄弟）隐藏起来
$('#content div').eq(index).siblings().hide();
});
})
</script>
9、链式编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/JQuery.min.js"></script>
</head>
<body>
<button>点我变颜色</button>
<button>点我变颜色</button>
<button>点我变颜色</button>
<button>点我变颜色</button>
<button>点我变颜色</button>
<button>点我变颜色</button>
<button>点我变颜色</button>
</body>
<script>
$(function () {
$('button').click(function () {
$(this).css('background','red').siblings().css('background','');
});
})
</script>
</html>
10、操作CSS方法
11、设置类样式方法
12、Tab栏切换
<script>
$(function () {
$('.tab_list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
$('.tab_con .item').eq($(this).index()).show().siblings().hide();
});
})
</script>
13、JQuery效果（参数见手册）
| 函数 | 描述 |
|---|---|
| $(selector).hide() | 隐藏被选元素 |
| $(selector).show() | 显示被选元素 |
| $(selector).toggle() | 切换（在隐藏与显示之间）被选元素 |
| $(selector).slideDown() | 向下滑动（显示）被选元素 |
| $(selector).slideUp() | 向上滑动（隐藏）被选元素 |
| $(selector).slideToggle() | 对被选元素切换向上滑动和向下滑动 |
| $(selector).fadeIn() | 淡入被选元素 |
| $(selector).fadeOut() | 淡出被选元素 |
| $(selector).fadeTo() | 把被选元素淡出为给定的不透明度 |
| $(selector).animate() | 对被选元素执行自定义动画 |
14、简易版新浪下拉菜单
<script>
$(function () {
// 鼠标经过
$('.nav>li').mouseover(function () {
$(this).children('ul').slideDown(20);
});
// 鼠标离开
$('.nav>li').mouseleave(function () {
$(this).children('ul').slideUp(20);
});
//1、事件切换 hover 就是鼠标经过和离开的复合写法
$('.nav>li').hover(function () {
$(this).children('ul').slideDown(50);
},function () {
$(this).children('ul').slideUp(50);
})
//2、事件切换 hover 只有一个参数，鼠标经过和离开都会触发
$('.nav>li').hover(function () {
$(this).children('ul').slideToggle(60);
})
//3、停止排队，把stop()放前面
$('.nav>li').hover(function () {
$(this).children('ul').stop().slideToggle(60);
})
})
</script>
15、高亮选择案例
<script>
$(function () {
$('.wrap li').hover(function () {
// 鼠标经过，把它的兄弟节点的透明度改成0.5
$(this).siblings().stop().fadeTo(100,0.5);
},function () {
// 鼠标离开，把它的兄弟节点的透明度改成1
$(this).siblings().stop().fadeTo(100,1);
})
})
</script>
16、自定义动画效果animate
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/JQuery.min.js"></script>
<style>
div{
position: relative;
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<button>点我</button>
<div></div>
<script>
$(function () {
$('button').click(function () {
$('div').animate({
left:600,
top:200,
height:300,
opacity:.5, //透明度
},500);
})
})
</script>
</body>
</html>
17、王者荣耀手风琴案例
<script>
$(function () {
$('.king li').mouseover(function () {
//当前li宽度变为224px,同时小图片淡出，大图片淡入
$(this).stop().animate({
width: 224
}).find('.small').stop().fadeOut().siblings().stop().fadeIn();
//其余兄弟li宽度变为69px,小图片淡入，大图片淡出
$(this).siblings().stop().animate({
width: 69
}).find('.big').stop().fadeOut().siblings().stop().fadeIn();
})
})
</script>
18、JQuery属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/JQuery.min.js"></script>
</head>
<body>
<a href="http://www.baidu.com">点我</a>
<div index = '1' data-index="2">我是div</div>
<input type="checkbox" checked>
<script>
$(function () {
// 1、element.prop('属性名')获取元素固有的属性值
console.log($('a').prop('href'));
$('input').change(function () {
console.log($(this).prop('checked'));
})
// 2、元素自定义属性 attr()
console.log($('div').attr('index'));
console.log($('div').attr('data-index'));
// 3、数据缓存data() 数据存放在元素的内存里面
$('a').data("uname","red");
console.log($('a').data("uname"));
console.log($('div').data("index"));
})
</script>
</body>
</html>
19、购物车全选与非全选
$(function() {
// 把全选框的状态赋给三个小按钮
$(".checkall").change(function () {
$(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
})
$(".j-checkbox").change(function () {
// 判断小按钮的状态，如果三个都是true，那就把true给全选按钮
if ($(".j-checkbox:checked").length === $(".j-checkbox").length){
$(".checkall").prop("checked",true);
}else {
$(".checkall").prop("checked",false);
}
})
})
20、内容文本值
1、获取设置元素内容 html()
console.log($('div').html())
$('div').html('123')
2、获取设置元素文本内容 text()
console.log($('div').text())
$('div').text('123')
3、获取设置表单值 val()
console.log($('input').val())
$('input').val('123')
21、购物车之商品增减案例
//商品的增减
$(".increment").click(function () {
// 得到当前兄弟文本框的值
let n = $(this).siblings('.itxt').val();
if (n == 99){
return false;
}
n++;
$(this).siblings('.itxt').val(n);
});
$(".decrement").click(function () {
// 得到当前兄弟文本框的值
let n = $(this).siblings('.itxt').val();
if (n == 1){
return false;
}
n--;
$(this).siblings('.itxt').val(n);
});
22、购物车最终版
$(function() {
// 把全选框的状态赋给三个小按钮
$(".checkall").change(function () {
$(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
//判断全选框是否选中，如果选中那就隐式迭代把所有的.cart-item添加或者删除check-cart-item类
if($(this).prop("checked")){
$(".cart-item").addClass("check-cart-item");
}else {
$(".cart-item").removeClass("check-cart-item");
}
})
$(".j-checkbox").change(function () {
// 判断小按钮的状态，如果三个都是true，那就把true给全选按钮
if ($(".j-checkbox:checked").length === $(".j-checkbox").length){
$(".checkall").prop("checked",true);
}else {
$(".checkall").prop("checked",false);
}
//判断小按钮的选中状态，如果选中那就添加样式，否则就删去样式
if($(this).prop("checked")){
$(this).parents(".cart-item").addClass("check-cart-item");
}else {
$(this).parents(".cart-item").removeClass("check-cart-item");
}
})
//商品的增减
$(".increment").click(function () {
// 得到当前兄弟文本框的值
let n = $(this).siblings('.itxt').val();
if (n == 99){
return false;
}
n++;
$(this).siblings('.itxt').val(n);
//计算商品小计和数量
//parents()得到父辈节点
let p = $(this).parents('.p-num').siblings('.p-price').html();
//substr()分割，从第一个开始
p = p.substr(1);
//toFixed()保留多少位小数
let prices = (p*n).toFixed(2);
$(this).parents('.p-num').siblings('.p-sum').html("￥"+prices);
getSum();
});
$(".decrement").click(function () {
// 得到当前兄弟文本框的值
let n = $(this).siblings('.itxt').val();
if (n == 1){
return false;
}
n--;
$(this).siblings('.itxt').val(n);
//计算商品小计和数量
//parents()得到父辈节点
let p = $(this).parents('.p-num').siblings('.p-price').html();
//substr()分割，从第一个开始
p = p.substr(1);
//toFixed()保留多少位小数
let prices = (p*n).toFixed(2);
$(this).parents('.p-num').siblings('.p-sum').html("￥"+prices);
getSum();
});
//计算商品小计和数量
$(".itxt").change(function () {
let n = $(this).val();
//parents()得到父辈节点
let p = $(this).parents('.p-num').siblings('.p-price').html();
//substr()分割，从第一个开始
p = p.substr(1);
//toFixed()保留多少位小数
let prices = (p*n).toFixed(2);
$(this).parents('.p-num').siblings('.p-sum').html("￥"+prices);
getSum();
});
//计算总计和总额模块
getSum();
function getSum(){
let count = 0;
let money = 0;
$(".itxt").each(function (i,ele) {
count += parseInt($(ele).val());
})
$(".p-sum").each(function (i,ele) {
money += parseFloat($(ele).html().substr(1));
})
$(".price-sum em").html("￥"+money.toFixed(2));
$(".amount-sum em").html(count);
}
//删除当前商品
$('.p-action a').click(function () {
$(this).parents(".cart-item").remove();
getSum();
});
//删除选中的商品
$('.remove-batch').click(function () {
$(".j-checkbox:checked").parents(".cart-item").remove();
getSum();
});
//清理购物车
$('.clear-all').click(function () {
$(".cart-item-list").remove();
getSum();
})
})
23、JQuery尺寸位置操作
24、电梯导航
$(function() {
// 互斥锁
let flag = true;
function ToolTop() {
if ($(document).scrollTop() >= $('.recommend').offset().top){
$('.fixedtool').fadeIn();
}else {
$('.fixedtool').fadeOut();
}
}
ToolTop();
$(window).scroll(function () {
ToolTop();
//页面滚动到某个内容区域，左侧电梯导航li相应添加和删除current类名
if (flag){
$('.floor .w').each(function (i,ele) {
if ($(document).scrollTop() >= $(ele).offset().top){
$(".fixedtool li").eq(i).addClass('current').siblings().removeClass();
}
})
}
});
//电梯导航页面滚动到相应的内容区域
$('.fixedtool li').click(function () {
//点击电梯导航时，把flag改成false
flag = false;
//每次点击要去的位置
//选出对应索引号的内容区的盒子，计算它的.offset().top
let current= $('.floor .w').eq($(this).index()).offset().top;
//页面动画滚动效果
$('body,html').stop().animate({
scrollTop:current
},function () {
//执行完动画才改回true
flag = true;
});
$(this).addClass('current').siblings().removeClass();
})
})
25、事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/JQuery.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: purple;
}
.current{
background-color: red;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
</ul>
<ol>
</ol>
<script>
$(function () {
//1、事件处理on
$('div').on({
mouseenter:function () {
$(this).css('backgroundColor','red');
},
mouseleave:function () {
$(this).css('backgroundColor','skyblue');
},
click:function () {
$(this).css('backgroundColor','yellow');
}
});
// $('div').on("mouseenter mouseleave",function () {
// $(this).toggleClass("current");
// })
//2、on事件委派,click绑定在ul身上，但是触发的对象是li
$('ul').on("click","li",function () {
console.log("111");
})
//3、on可以给未来动态创建的元素绑定事件
$("ol").on("click","li",function () {
console.log(11);
});
let li = $("<li>我是后来创建的</li>");
$('ol').append(li);
})
</script>
</body>
</html>
26、微博发布案例
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
</style>
<script src="js/JQuery.min.js"></script>
<script>
$(function() {
// 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
$('.btn').on("click",function () {
let li = $("<li></li>");
li.html($(".txt").val()+"<a href='javascript:;'>删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
// 2.点击的删除按钮，可以删除当前的微博留言li
// on可以给动态创建的元素绑定事件
$("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" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
</body>
</html>
28、自动触发事件
//1.元素.事件()
$('input').click(); //会触发默认事件
//2.元素.trigger("事件")
$('input').trigger("click") //会触发默认事件
//3.元素.triggerHandler('事件')
$('input').trigger('click'); //不会触发默认事件
29、对象拷贝
30、JQuery多库共存
31、JQuery插件库
32、图片懒加载
<script src="./js/EasyLazyload.min.js"></script>
<script>
lazyLoadInit({
showTime:1100,
onLoadBackEnd:function(i,e){
console.log("onLoadBackEnd:"+i);
}
,onLoadBackStart:function(i,e){
console.log("onLoadBackStart:"+i);
}
});
</script>
33、TODOList案例
$(function () {
// 1. 按下回车 把完整数据 存储到本地存储里面
// 存储的数据格式 var todolist = [{title: "xxx", done: false}]
load();
$('#title').on('keydown',function (e) {
if (e.key === "Enter"){
if ($(this).val() === ''){
alert("请输入你要进行的操作！");
}else {
// 先读取本地存储原来的数据
let local = getData();
// 把local数组进行更新数据 把最新的数据追加给local数组
local.push({ title: $(this).val(), done: false });
// 把这个数组local 存储给本地存储
saveData(local);
load();
$(this).val('');
}
}
})
// 读取本地存储数据
function getData() {
let data = localStorage.getItem("todolist");
if (data !== null){
return JSON.parse(data);
}else {
return [];
}
}
// 保存本地存储数据
function saveData(data) {
localStorage.setItem("todolist",JSON.stringify(data))
}
// 删除数据
$("ol,ul").on("click","a",function () {
// 获取本地存储
let data = getData();
let index = $(this).attr("id");
// 修改数据
data.splice(index,1);
// 保存的本地存储
saveData(data);
// 重新渲染页面
load();
})
// 正在进行和已经完成选项操作
$("ol,ul").on("click","input",function () {
// 获得本地存储数据
let data = getData();
// 修改数据
let index = $(this).siblings("a").attr('id');
data[index].done = $(this).prop("checked");
// 保存到本地存储
saveData(data);
// 重新渲染
load();
})
// 渲染加载数据
function load() {
// 读取本地存储的数据
let data = getData();
let todoCount = 0;
let doneCount = 0;
// console.log(data);
// 加载前清空ol里面的元素数据
$('ol,ul').empty();
// 遍历这个数据
$.each(data,function (i,ele) {
if (ele.done){
$('ul').prepend("<li><input type='checkbox' checked><p>"+ele.title+"</p> <a href='javascript:;' id="+i+"></a></li>");
doneCount++;
}else {
$('ol').prepend("<li><input type='checkbox'><p>"+ele.title+"</p> <a href='javascript:;' id="+i+"></a></li>");
todoCount++;
}
});
$("#todocount").text(todoCount);
$("#donecount").text(doneCount);
}
})
