目录
一:JQuery入门
1.1: 目标
1.2:目录
1.3: JQuery概述
1: JavaScript 库
2: 常见的JavaScript库
3: jquery的概念
3.1;JQuery的优点
1.4:jQuery的基本使用
1:jQuery的下载
2: jQuery的使用步骤
3: jQuery的顶级对象 $
4: jQuery 对象和 DOM 对象
5: jquery对象 和dom对象
二: jQuery常用API
2.1:目标
2.2:目录
2.3: JQuery基础选择器
1: jQuery基础选择器
2: Query 层级选择器
2: 知识铺垫
2.1:jQuery 设置样式
3: 隐私迭代(重要)
4: jQuery筛选选择器
5: jQuer筛选方法(重点)
6: 新浪微博下拉框
7: jQuery筛选方法(重点)
8:jQuery里面的排他思想
9: 案例 -淘宝服饰精品案例
10: 链式编程
2.4: jQuery样式操作
1: 操作css方法
2: 设置类样式方法
3: 案例:tab 栏切换
3.1:需求分析
4:类操作与className区别
2.5: JQuery效果
1: 显示隐藏效果
1.1. 显示语法规范
1.2: 显示参数
1.1: 隐藏语法规范
1.2: 隐藏参数
1.1: 切换语法规范
1.2: 切换参数
2: 滑动效果
2.1: 下滑效果语法规范
2.2: 下滑效果参数
2.1: 上滑效果语法规范
2.2: 上滑效果参数
2.1: 滑动切换效果语法规范
2.2: 滑动切换效果参数
3: 事件切换
4:动画队列及其停止排队方法
4.1. 动画或效果队列
4.2:停止排队
5: 淡入淡出效果
5.1: 淡入效果语法规范
5.2:淡入效果参数
5.1:淡出效果语法规范
5.2:淡出效果参数
5.1: 淡入淡出切换效果语法规范
5.2: 淡入淡出切换效果参数
5.1: 渐进方式调整到指定的不透明度
5.2:效果参数
6:自定义动画animate
6.1: 语法
6.2: 参数
6.3: 案例 -王者荣耀手风琴效果分析
2.6: jQuery属性操作
1: 设置或获取元素固有属性值prop()
1.1:获取属性语法
1.2: 设置属性语法
2:设置或获取元素自定义属性值attr()
2.1:获取属性语法
2.2: 设置属性语法
3:数据缓存data()
3.1: 附加数据语法
3.2:获取数据语法
4:案例:购物车案例模块-全选
2.7: jQuery内容文本值
1. 普通元素内容html()(相当于原生inner HTML)
2. 普通元 素文本内容text()(相当与原生innerText)
3. 表单的值val()(相当于原生value)
4: 案例--购物车案例模块-增减商品数量分析
5: 案例-购物车案例模块-修改商品小计分析
html
5.1: 使用parents('选择器) 返回祖先元素(优化)
2.8: jQuery元素操作
1: 遍历元素
2: 遍历元素
3: 案例-购物车案例模块-计算总计和总额
4: 创建元素
5: 添加元素
5.1:内部添加
5.2:外部添加
6: 删除元素
7: 案例-购物车案例模块-选中商品添加背景
8: 案例:购物车案例模块-选中商品添加背景
2.9: jQuery 尺寸、位置操作
1: jQuery尺寸
编辑
2: jQuery位置
2.1: offset() 设置或获取元素偏移
2.2: position() 获取元素偏移
2.3: scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
2,4:案例-带有动画的返回顶部
2.5: 案例-品优购电梯导航
一:JQuery入门
1.1: 目标
能够说出什么是jQuery
能够说出JQuery的优点
能够简单使用jQuery
能够说出DOM 对象和jQuery对象的区别
1.2:目录
jquery概述
jquery的基本使用
1.3: JQuery概述
1: JavaScript 库
仓库:可以把很多东西放到这个仓库里面,找东西只需要到仓库里面查找到就可以了。
JavaScript 库:即library , 是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate , hide, show ,比如获取元素等。
简单理解:就是一个JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们就可以快速高效的使用这些封装好的功能了。
比如jquery ,就是为了快速方便的操作DOM,里面基本都是函数(方法)。
为了区别之前学的js。 jquery称为js库,而js就是原生的js.
2: 常见的JavaScript库
- jquery
- prototype
- YUI
- Dojo
- Ext JS
- 移动端的zepto
这些库都是对原生JavaScript的封装, 内部都是用JavaScript实现的,我们主要学习的是jQuery。
总:什么是js库? 就是js文件里面存放许许多多的函数,这些函数都是为了实现某些功能,把这些函数统一放入到js文件里面去,那么这个js文件就是js库; (之后开发就直接调用里面的函数即可)
3: jquery的概念
jQuery是一个快速,简洁的JavaScript库,其设计的宗旨是‘write Less, Do More'm,即提倡写更少的代码,做更多的事情。
j 就是 JavaScript ; Query查询 ;意思就是查询js ,把js中的DOM 操作做了封装,我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript 常用的功能代码,优化了DOM操作,事件处理,动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法)。
jQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提供开发效率。
3.1;JQuery的优点
- 轻量级,核心文件才几十kb,不会影响页面加载速度。
- 跨浏览器兼容,基本兼容了现在主流的浏览器
- 链式编程,隐式迭代
- 对事件,样式,动画支持,大大简化了DOM操作
- 支持插件扩展开发,有着丰富的第三方的插件,比如:树形菜单,日期控件,轮播图等
- 免费,开源
1.4:jQuery的基本使用
1:jQuery的下载
官网地址:https://jquery.com
版本:
1x : 兼容IE 678等低版本浏览器,官网不再更新
2x : 不兼容IE 678等低版本浏览器,官网不再更新
3x : 不兼容IE 678等低版本浏览器,是官网主要更新维护的版本(现在使用)
(用压缩后的版本,也就是product版本,因为空间更小)
各个版本的下载: https://code.jquery.com/
2: jQuery的使用步骤
1:引入jQuery文件
2: 调用
3: jQuery的入口函数
$ ( function ( ) {
.... // 此处是页面DOM 加载完成的入口
} ) ;
$ ( document).ready ( function ( ) {
... // 此处是页面DOM加载完成的入口
} ) ;
1: 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery帮我们完成了封装。
2: 相当于原生js中的DOMContentLoaded
3: 不同于原生js中的load事件是等页面文档,外部的js文件, css文件 ,图片加载完毕才执行内部代码。
4: 更推荐使用第一种方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1:引入jquery -->
<script src="jquery.mini.js"></script>
<style>
div {
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
<script>
// $('div').hide();
//1:方法一; 等着页面的DOM加载完毕再去执行js代码
// $(window).ready(function () {
// $('div').hide();
// });
// 2:方法二:等着页面DOM加载完毕再去执行js代码
$(function () {
$('div').hide();
});
</script>
</body>
</html>c
3: jQuery的顶级对象 $
用$把元素包装起来,进行调用函数;
1:$ 是jQuery的别称,在代码中可以使用jQuery 代替 $ ,但一般为了方便,通常都直接使用 $.
2: $ 是 jQuery 的顶级对象,相当于原生JavaScript 中的window,把元素利用 $ 包装成jQuery对象,就可以调用jQuery的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 1. $ 是jQuery的别称(另外的名字)
// $(function() {
// alert(11)
// });
jQuery(function() {
// alert(11)
// $('div').hide();
jQuery('div').hide();
});
// 2. $同时也是jQuery的 顶级对象
</script>
</body>
</html>
4: jQuery 对象和 DOM 对象
4.1: 用原生JS获取来的对象就是DOM对象
4.2: jQuery方法获取的元素就是jQuery对象
4.3: jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入js -->
<script src="jquery.mini.js"></script>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<span>
</span>
<script>
//1: DOM对象 :用原生js获取过来的对象就是DOM对象
var myDiv = document.querySelector('div'); //myDiv是DOM对象
var mySpan = document.querySelector('span'); // mySpan 是DOM对象
console.dir(myDiv);
// 2. jQuery对象: 用jquery方式获取过来的对象是jQuery对象。 本质:通过$把DOM元素进行了包装
$('div'); //是一个jQuery 对象
$('span'); // $('span')是一个jQuery 对象
console.dir($('div'));
// 3. jQuery 对象只能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 属性和方法
//3.1: dom对象和jquery对象隐藏的处理方式
myDiv.style.display = 'none'; //dom对象只能用原生js的属性和方法
myDiv.hide(); // myDiv是一个dom对象不能使用 jquery里面的hide方法
$('div').style.display = 'none'; // 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
</script>
</body>
</html>
5: jquery对象 和dom对象
DOM 对象与 jQuery对象之间是可以相互转换的。
因为原生js比jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装,要想要使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
1: DOM对象转换为jQuery对象: $(DOM对象)
$ ( ' div ')
2: jQuery对象转换为DOM对象(两种方式)
$ (' div ' ) [index]. index是索引号
$ (' div ').get(index) index是索引号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- muted禁音 -->
<video src="mov.mp4" muted></video>
<script>
//1: Dom对象转换为 jQuery对象
//情况一: 直接获取视频,得到就是jQuery对象
$('video');
//情况二:已经使用原生js 获取dom对象 ,然后转换成jquery对象
var myvideo = document.querySelector('video');
$(myvideo).play(); //jquery对象里面没有play这个方法
//2:播放
//2.1:使用dom对象播放,比较麻烦
myvideo.play();
//2.2: 使用jquery对象播放;0表达页面中就一个video,下标是0
$('video')[0].play(); //方法一
$('video').get(0).play(); //方法二
</script>
</body>
</html>
二: jQuery常用API
2.1:目标
- 能够写出常用的jQuery选择器
- 能够操作jQuery样式
- 能够写出常用的jQuery动画
- 能够操作jQuery属性
- 能够操作jQuery元素
- 能够操作jQuery元素尺寸,位置
2.2:目录
jQuery选择器
jQuery样式操作
jQuery效果
jQuery属性操作
jQuery文本属性值
jQuery元素操作
jQuery尺寸,位置操作
总: jQuery选择器(先获取dom元素) 其他的是对dom元素进行操作;
2.3: JQuery基础选择器
1: jQuery基础选择器
原生JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery 给我们做了封装,使获取元素统一标准。
$(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号
2: Query 层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1:引query.js对象 -->
<script src="jquery.mini.js"></script>
</head>
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ol>
<li>我是ol 的</li>
<li>我是ol 的</li>
<li>我是ol 的</li>
<li>我是ol 的</li>
</ol>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
//2: 调用js
//2.1: js的入口函数
$(function () {
//基本选择器
console.log($('.nav'));
//层级选择器
console.log($("ul li"));
});
</script>
</body>
</html>
2: 知识铺垫
2.1:jQuery 设置样式
$('div').css('属性', '值')
3: 隐私迭代(重要)
- 遍历内部DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。
- 简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
- 总:给同一个元素相同的操作,就是隐式迭代;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1:引入jquery.js -->
<script src="jquery.mini.js"></script>
</head>
<body>
<div>惊喜不,意外不</div>
<div>惊喜不,意外不</div>
<div>惊喜不,意外不</div>
<div>惊喜不,意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
//1:获取四个元素div
console.log($("div"));
//2: 隐式迭代---给相同的元素统一的操作
//2.1: div都改为pink色
$('div').css('background', 'pink');
$('ul li').css('color', 'skyblue');
</script>
</body>
</html>
4: jQuery筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1:引入jquery.js -->
<script src="jquery.mini.js"></script>
</head>
<body>
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<!-- -->
<script>
$(function () {
$('ul li:first').css('color', 'red');
$('ul li:eq(2)').css('color', 'blue');
$('ol li:odd').css('color', 'skyblue');
$('ol li:even').css('color', 'pink');
})
</script>
</body>
</html>
5: jQuer筛选方法(重点)
重点记住:parent()children()find()siblings()eq()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.mini.js"></script>
</head>
<body>
<div class="yeye">
<div class="father">
<div class="son">儿子</div>
</div>
</div>
<div class="nav">
<p>我是屁</p>
<div>
<p>我是p</p>
</div>
</div>
<script>
// 注意一下都是方法 带括号
$(function () {
// 1. 父 parent() 返回的是 最近一级的父级元素 亲爸爸
console.log($('.son').parent());
//2:子
// (1) 亲儿子 children() 类似子代选择器 ul>li
$('.nav').children('p').css('color', 'red');
//(2)可以选里面的所有的孩子,包括儿子和孙子 find() 类似于后代选择器
$('.nav').find('p').css('color', 'pink');
})
</script>
</body>
</html>
6: 新浪微博下拉框
之前元素js这个下拉菜单中li都需要遍历循环进行绑定事件,但是显示用jqurey就不需要for循环进行绑定了,因为隐式迭代会对内部li进行了绑定事件。用jquery就更加简单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<script src="jquery.mini.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<script>
$(function () {
// 鼠标经过
$('.nav > li').mouseover(function () {
// $(this) 是jQuery 当前元素 this不要加引号
// show() 显示元素 hide() 隐藏元素
$(this).children('ul').show();
})
// 鼠标离开
$('.nav > li').mouseout(function () {
$(this).children('ul').hide();
})
})
</script>
</body>
</html>
7: jQuery筛选方法(重点)
重点记住:parent()children()find()siblings()eq()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.mini.js"></script>
</head>
<body>
<ol>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li class="item">我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
</ol>
<ul>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
</ul>
<div class="current">俺有current</div>
<div>俺木有current</div>
<script>
$(function () {
// 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
$('ol .item').siblings('li').css('color', 'red');
// 2. 第n个元素
var index = 2;
// (1) 我们可以利用选择器的方式选择
// $('ul li:eq(2)').css('color', 'blue');
$('ul li:eq(' + index + ' )').css('color', 'blue');
// (2) 我们可以利用选择方法的方式选择 更推荐这种写法
// $('ul li').eq(2).css('color', 'green');
// $('ul li').eq(index).css('color', 'green');
// 3. 判断是否有某个类名
console.log($('div:first').hasClass('current'));
console.log($('div:last').hasClass('current'));
})
</script>
</body>
</html>
8:jQuery里面的排他思想
想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
js排他思想的区别:
1:需要for循环,每个按钮都有循环绑定点击事件,然后给当前的按钮添加背景颜色,其他的按钮都有取消背景颜色。
2: 而jquery中不需要for循环,因为隐式迭代,就已经内部给每个按钮绑定了点击事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.mini.js"></script>
</head>
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function () {
//1;隐式迭代,给所有的按钮都绑定了点击事件
$('button').click(function () {
//给当前的按钮添加背景颜色
$(this).css('background', 'pink');
//给其他按钮不添加背景颜色
$(this).siblings('button').css('background', '');
})
})
</script>
</body>
</html>
9: 案例 -淘宝服饰精品案例
问题: 怎么知道鼠标经过了哪个小li ?那就用索引号,获取当前的小li的索引号,并展示相对应的图片;
案例分析:
①核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏。
②需要得到当前小li 的索引号,就可以显示对应索引号的图片
③jQuery 得到当前元素索引号$(this).index()
④中间对应的图片,可以通过eq(index) 方法去选择
⑤显示元素show()隐藏元素hide()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 250px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
border-right: 0;
overflow: hidden;
}
#left,
#content {
float: left;
}
#left li {
background: url(images/lili.jpg) repeat-x;
}
#left li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover {
background-image: url(images/abg.gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="jquery.mini.js"> </script>
<script>
$(function () {
// 1. 鼠标经过左侧的小li
$('#left li').mouseover(function () {
//得到当前li的索引号
var index = $(this).index();
console.log(index);
})
// 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
$('#content div').eq(index).show();
// 4. 让其余的图片(就是其他的兄弟)隐藏起来
$('#content div').eq(index).siblings.hide();
})
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<div id="content">
<div>
<a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
</div>
</div>
</div>
</body>
</html>
10: 链式编程
链式编程是为了节省代码量,看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.mini.js">
</script>
</head>
<body>
woshi body 的文字
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function () {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$('button').click(function () {
// 2. 让当前元素颜色变为红色
$(this).css('background', 'red');
//3:其余的元素不变色
$(this).siblings().css('background', '');
//4:链式编程
// 我的颜色为红色, 我的兄弟的颜色为空
$(this).css('background', 'red').siblingsz().css('background', '');
// 我的兄弟变为红色 ,我本身不变颜色
$(this).siblings().css('background', 'red');
// 最后是给我的兄弟的爸爸 body 变化颜色
$(this).siblings().parent().css('color', 'blue');
})
})
</script>
</body>
</html>c
2.4: jQuery样式操作
1: 操作css方法
jQuery 可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式。
1. 参数只写属性名,则是返回属性值
$(this).css(''color'');
2.参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
3.参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号,
$(this).css({ "color":"white","font-size":"20px"});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.mini.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
$(function () {
console.log($('div').css('width')); //获取值 200px
console.log($('width', '300px')); //修改值
console.log($('width', 300));
// $("div").css(height, "300px"); 属性名一定要加引号
//对象
$('div').css({
width: 500,
height: 500,
backgroundColor: 'red'
// 如果是复合属性则必须采取驼峰命名法,如果值不是数字,则需要加引号
})
})
</script>
</body>
</html>
2: 设置类样式方法
作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点。
1. 添加类
$(“div”).addClass(''current'');
2.移除类
$(“div”).removeClass(''current'');
3.切换类
$(“div”).toggleClass(''current'');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.mini.js"></script>
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
/* 添加过渡:使得动画效果更加明显 */
transition: all 0.3s;
}
/* 添加类:把修改的样式统一写到一个类中;需要的时候调用即可 */
.current {
background-color: skyblue;
/* 添加动画效果 */
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="current"></div>
<script>
$(function () {
//1:添加类 addClass( )
//1.1: 点击的时候就变颜色
// $('div').click(function () {
// $('div').addClass('current');
// });
//2: 删除类 removeClass( )
//2.1: 当div设置的类名也是current的时候,需要删除改类名
//效果:就是开始是蓝色。点击后,删除了current,会变成粉色
// $('div').click(function () {
// $(this).removeClass('current');
// });
//3:切换类 toggleClass()
//效果:蓝色和粉色来回切换
$('div').click(function () {
$(this).toggleClass('current');
})
})
</script>
</body>
</html>
3: 案例:tab 栏切换
3.1:需求分析
①点击上部的li,当前li 添加current类,其余兄弟移除类。
②点击的同时,得到当前li 的索引号
③让下部里面相应索引号的item显示,其余的item隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
<script src="jquery.mini.js"></script>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li>商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价(50000)模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
$(function () {
//1: 点击上面的li, 当前的li添加 current类(有样式),其他的兄弟要移除类
$('.tab_list li').click(function () {
//链式编程操作
$(this).addClass('current').siblings().removeClass('current');
//1.2:同时获取当前点击的li的索引号
var index = $(this).index();
console.log(index);
//1.3: 获取到的被点击的li的索引号,并显示对应的相关内容
$('.tab_con .item').eq(index).show().siblings().hide();
});
})
</script>
</body>
</html>c
4:类操作与className区别
原生JS 中className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 200px;
height: 100px;
background-color: pink;
transition: all .3s;
}
</style>
<script src="jquery.mini.js"></script>
</head>
<body>
<div class="one"></div>
<script>
//js原生
// var one = document.querySelector('.one');
// one.className = 'two';
//jquery
$('.one').addClass('two');
$('.one').removeClass('two');
</script>
</body>
</html>
2.5: JQuery效果
jQuery 给我们封装了很多动画效果,最为常见的如下:
1: 显示隐藏效果
1.1. 显示语法规范
show([speed,[easing],[fn]])
1.2: 显示参数
(1)参数都可以省略,无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
1.1: 隐藏语法规范
hide([speed,[easing],[fn]])
1.2: 隐藏参数
(1)参数都可以省略,无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
1.1: 切换语法规范
toggle([speed,[easing],[fn]])
1.2: 切换参数
(1)参数都可以省略,无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
建议:平时一般不带参数,直接显示隐藏即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
/* display: none; */
}
</style>
<script src="jquery.mini.js"></script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function () {
// 显示
$('button').eq(0).click(function () {
$('div').show(1000, function () {
alert(1);
})
});
//隐藏
$('button').eq(1).click(function () {
$('div').hide(1000, function () {
alert(1);
});
});
//切换
$('button').eq(2).click(function () {
$('div').toggle(1000, function () {
alert(2);
})
})
})
</script>
</body>
</html>
2: 滑动效果
2.1: 下滑效果语法规范
slideDown([speed,[easing],[fn]])
2.2: 下滑效果参数
(1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
2.1: 上滑效果语法规范
slideUp([speed,[easing],[fn]])
2.2: 上滑效果参数
(1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
2.1: 滑动切换效果语法规范
slideToggle([speed,[easing],[fn]])
2.2: 滑动切换效果参数
(1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
3: 事件切换
hover([over,]out)
(1)over:鼠标移到元素上要触发的函数(相当于mouseenter)
(2)out:鼠标移出元素要触发的函数(相当于mouseleave)
(3)如果只写一个函数,则鼠标经过和离开都会触发它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
display: none;
}
</style>
<script src="jquery.mini.js"></script>
</head>
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$(function () {
//下滑动 slideDown ()
$('button').eq(0).click(function () {
$('div').slideDown();
});
//上滑动
$('button').eq(1).click(function () {
$('div').slideUp();
});
//切换滑动
$('button').eq(2).click(function () {
$('div').toggle(200);
})
})
</script>
</body>
</html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<script src="jquery.mini.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function () {
//1:鼠标经过时,下拉内容
// $('.nav>li').mouseover(function () {
//展示show
// $(this).children('ul').show();
//下滑效果:slideDown
// $(this).children('ul').slideDown();
// });
//2:鼠标离开,
// $('.nav > li').mouseleave(function () {
//hide隐藏
// $(this).children('ul').hide();
//上滑效果:slideUp
$(this).children('ul').slideUp();
// });
//3:优化1,2
//hover 事件切换 hover 就是鼠标经过和离开的复合写法
//hover中用到了两个function()
// $('.nav > li').hover(function () {
// $(this).children('ul').slideDown();
// }, function () {
// $(this).children('ul').slideUp();
// });
//4: 比3还更加优化 hover slidetoggle
$('.nav > li').hover(function () {
$(this).children('ul').slideToggle();
});
});
</script>
</body>
</html>
4:动画队列及其停止排队方法
4.1. 动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
4.2:停止排队
stop()
(1)stop() 方法用于停止动画或效果。
(2)注意:stop() 写到动画或者效果的前面,相当于停止结束上一次的动画。
(3) 谁做动画,谁就加stop();
(4);动画都有这种问题存在,需要添加stop();
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function () {
// 鼠标经过
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 当前元素 this不要加引号
// // show() 显示元素 hide() 隐藏元素
// $(this).children("ul").slideDown(200);
// });
// // 鼠标离开
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切换 hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function () {
// stop 方法必须写到动画的前面;
$(this).children("ul").stop().slideToggle();
//stop 方法写在动画的后面就表示停止动画效果;
// $(this).children('ul').slideToggle().stop();
});
})
</script>
</body>
</html>
5: 淡入淡出效果
5.1: 淡入效果语法规范
fadeIn([speed,[easing],[fn]])
5.2:淡入效果参数
(1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
5.1:淡出效果语法规范
fadeOut([speed,[easing],[fn]])
5.2:淡出效果参数
(1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
5.1: 淡入淡出切换效果语法规范
fadeToggle([speed,[easing],[fn]])
5.2: 淡入淡出切换效果参数
(1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
5.1: 渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])
5.2:效果参数
(1)opacity 透明度必须写,取值0~1 之间。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。必须写
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
display: none;
}
</style>
<script src="jquery.mini.js"></script>
</head>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function () {
//1:淡入效果
$('button').eq(0).click(function () {
$('div').fadeIn(1000);
});
//2:淡出效果
$('button').eq(1).click(function () {
$('div').fadeOut(1000);
});
//3:淡入淡出切换
$('button').eq(2).click(function () {
$('div').fadeToggle(1000);
});
//4:修改透明度
$('button').eq(3).click(function () {
$('div').fadeTo(1000, 0.3);
})
})
</script>
</body>
</html>
//高亮图片
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="jquery.mini.js"></script>
<SCript>
$(function () {
//1:鼠标经过某张图片时候,其余的图片颜色变暗
//鼠标进入的时候,其他的li标签透明度:0.5
$('.wrap li').hover(function () {
$(this).siblings().stop().fadeTo(100, 0.5);
}, function () {
// 鼠标离开,其他li 透明度改为 1
$(this).siblings().stop().fadeTo(100, 1);
})
})
</SCript>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="images/01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/06.jpg" alt="" /></a>
</li>
</ul>
</div>
</body>
</html>
6:自定义动画animate
jquery封装的animate的函数功能更强大;
6.1: 语法
animate(params,[speed],[easing],[fn])
6.2: 参数
(1)params: 想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script src="jquery.mini.js"></script>
</head>
<body>
<button>动起来</button>
<div></div>
<script>
$(function () {
$('button').click(function () {
$('div').animate({
left: 500,
top: 300,
opacity: 4,
width: 500
}, 1000);
})
})
</script>
</body>
</html>c
6.3: 案例 -王者荣耀手风琴效果分析
布局分析:
1: 一个大盒子king,有一张背景图片。
2: 大盒子里面装了ul 和几个小 li
3: 每个li里面有a链接
4: a链接里面包含一个大图片和一个小图片
效果分析:
变化一:
1:每个li的宽度不一样,第一个是224px,其他的就是69px
2: 当鼠标放在某个li上,当前的li的宽度会变宽,变成224px;其他的图片宽度会变成69px;
变化二:
1: 当鼠标放在某个li上,当前的图片会变大(小图片看不见了。大图片显示出来了),其他兄弟的图片会变小;
总:
①鼠标经过某个小li有两步操作:
②当前小li 宽度变为224px,同时里面的小图片淡出,大图片淡入
③其余兄弟小li宽度变为69px,小图片淡入,大图片淡出
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴案例</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.king {
width: 852px;
margin: 100px auto;
background: url(images/bg.png) no-repeat;
overflow: hidden;
padding: 10px;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.king li.current {
width: 224px;
}
.king li.current .big {
display: block;
}
.king li.current .small {
display: none;
}
.big {
width: 224px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// 鼠标经过某个小li 有两步操作:
$(".king li").mouseenter(function() {
// 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
$(this).stop().animate({
width: 224
//当前li的孙子img中的小图片淡出,大图片淡入
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});
</script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="images/m1.jpg" alt="" class="small">
<img src="images/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/l1.jpg" alt="" class="small">
<img src="images/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/c1.jpg" alt="" class="small">
<img src="images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/w1.jpg" alt="" class="small">
<img src="images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/z1.jpg" alt="" class="small">
<img src="images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/h1.jpg" alt="" class="small">
<img src="images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/t1.jpg" alt="" class="small">
<img src="images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
</html>
2.6: jQuery属性操作
1: 设置或获取元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性,比如<a> 元素里面的href ,比如<input> 元素里面的type。
1.1:获取属性语法
prop(''属性'')
1.2: 设置属性语法
prop(''属性'', ''属性值'')
2:设置或获取元素自定义属性值attr()
用户自己给元素添加的属性,我们称为自定义属性。比如给div 添加index =“1”。
2.1:获取属性语法
attr(''属性'')。// 类似原生getAttribute()
2.2: 设置属性语法
attr(''属性'', ''属性值'')// 类似原生setAttribute()
该方法也可以获取H5 自定义属性
3:数据缓存data()
data() 方法可以在指定的元素上存取数据,并不会修改DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。
3.1: 附加数据语法
data(''name'',''value'')// 向被选元素附加数据
3.2:获取数据语法
date(''name'')//向被选元素获取数据
同时,还可以读取HTML5 自定义属性data-index ,得到的是数字型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.mini.js"></script>
</head>
<body>
<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("属性名") 获取元素固有的属性值
$('a').prop('href');
console.log($('a').prop('href'));
//2: 设置(修改)元素固有属性的属性值
$('a').prop('title', '我们都挺好');
console.log($('a').prop('title'));
//3:查看复选框改变的时候的值状态
$('input').change(function () {
console.log($(this).prop('checked')); //false true
});
// console.log($('div').prop('index'));//自定义属性要用attr获取
// 4. 元素的自定义属性 我们通过 attr()
console.log($('div').attr('index')); //获取属性值
$('div').attr('index', 5); //修改属性值
console.log($('div').attr('index'));
console.log($('div').attr('data-index'));
// 5. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($("div").data("index"));
})
</script>
</body>
</html>
4:案例:购物车案例模块-全选
案例分析:
①全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走。
②因为checked 是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。
③把全选按钮状态赋值给3小复选框就可以了。
④当我们每次点击小的复选框按钮,就来判断:
⑤如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。⑥:checked 选择器:checked 查找被选中的表单元素。
js
$(function(){
//1:全选 全不选功能模块
//就是把全选按钮(checkall) 的状态赋值给 三个小的按钮 (j-checkbox) 就可以了
//事件可以使用change
$('.checkall').change(function(){
// $('this').prop('checked');
// console.log($('this').prop('checked'));
//.Checkall是因为上下都有一个全选按钮,并且都是同一个类名,如果全部选或不选 则两个全选按钮都要一致
//把全选按钮的状态赋值给三个小按钮
$('.j-checkbox , .checkall').prop('cheched',$('this').prop('checked') )
})
})
需求:
第一次打开购物车,是没有全部选择的,应该是随便点击三个小按钮,当点击第三个按钮的时候,则是全部按钮都选择了,那么上面和下面的全选按钮就要自动的勾选上;
分析:
当小按钮的个数不等于3,那么全选按钮就不应该选;当每次点击小按钮的时候就判断,看到底小按钮有多少个被选中了,如果刚好等于3,则全选按钮就勾选上;
怎么知道有几个小按钮被选中呢? 用:checked 选择器
总:
③把全选按钮状态赋值给3小复选框就可以了。
④当我们每次点击小的复选框按钮,就来判断:
⑤如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。⑥:checked 选择器:checked 查找被选中的表单元素。
$(function () {
//1:全选 全不选功能模块
//就是把全选按钮(checkall) 的状态赋值给 三个小的按钮 (j-checkbox) 就可以了
//事件可以使用change
$('.checkall').change(function () {
// $('this').prop('checked');
// console.log($('this').prop('checked'));
//.Checkall是因为上下都有一个全选按钮,并且都是同一个类名,如果全部选或不选 则两个全选按钮都要一致
//把全选按钮的状态赋值给三个小按钮
$('.j-checkbox , .checkall').prop('cheched', $('this').prop('checked'))
});
//2: 如果复选框被选中的个数等于3(小按钮的个数),就应该把全选按钮选上,否则全选按钮不选
$('.j-checkbox').change(function () {
// if(被选中的小的复选框的个数 === 3){
// 就要选择全选按钮
// } else {
// 不要选中全选按钮
// }
console.log($('.j-checkbox:checked')); //得到对象,其中有length属性
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);
}
});
});
2.7: jQuery内容文本值
主要针对元素的内容还有表单的值操作。
1. 普通元素内容html()(相当于原生inner HTML)
html() // 获取元素的内容
html(''内容'') // 设置元素的内容
2. 普通元 素文本内容text()(相当与原生innerText)
text() // 获取元素的文本内容
text(''文本内容'') // 设置元素的文本内容
主要针对元素的内容还有表单的值操作。
3. 表单的值val()(相当于原生value)
val() // 获取表单的值
val(''内容'') // 设置表单的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.mini.js"></script>
</head>
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
// 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');
</script>
</body>
</html>
4: 案例--购物车案例模块-增减商品数量分析
需求:
点击数量+ ,那么数字就+1; 点击- ,数量-1;
分析:
核心思路:当文本框的数量是1,那么点击+,数量+1,并且把2赋值给文本框; 每点击一次都把最新的值赋值给文本框;
注意1:只能增加本商品的数量,怎么处理?点击哪个按钮的+ / - ,那么就把值赋值给它旁边的兄弟(文本框发生变化),其余的不变;
注意2:原来的变量初始值是多少?变量的初始值也是文本框的值,也就是在这个值上面进行变化。
减--(decrement) 的思路一样,但是如果文本框的值是1,就不能再减了。
//js
$(function () {
// 1: 增减商品数量模块 首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
$('.increment').click(function () {
//得到该兄弟文本框的值
var n = $(this).siblings('.itxt').val();
n++; //点击+号一次就累加
$(this).siblings('.itxt').val(n); //把新值赋值给文本框
});
//2:
$('.decrement').click(function(){
var n = $(this).siblings('.itxt').val();
//如果数量减到1,就不能再减了
if(n == 1){
return false;
}
n--;
$(this).siblings('.itxt').val(n);
})
})
5: 案例-购物车案例模块-修改商品小计分析
注意:找结构很重要,小计的单价与+/-的关系一定要找清楚;单价是它(当前)的父级的父级的兄弟;(如果直接写单价的类名,则是修改所有商品的单价);但这样会要写很多代码,可以优化使用parents('选择器);
处理的问题1:使得小数点后面保留两位小数,怎么做?可以使用toFixed(2)方法来保留几位小数;
处理的问题2: 如果文本框(表单里面)的数量可以直接修改,比如2直接改成100 ,小计是不会变的;那么就要让小计重新计算,用表单change事件;并且用最新的表单内的值乘以单价即可,但还是当前商品小计;
总·:
①核心思路:每次点击+号或者-号,根据文本框的值乘以当前商品的价格就是商品的小计
②注意1:只能增加本商品的小计,就是当前商品的小计模块(p-sum)
③修改普通元素的内容是text() 方法
④注意2:当前商品的价格,要把¥符号去掉再相乘截取字符串substr(1)
⑤parents(‘选择器’) 可以返回指定祖先元素
⑥最后计算的结果如果想要保留2位小数通过toFixed (2) 方法
⑦用户也可以直接修改表单里面的值,同样要计算小计。用表单change事件
⑧用最新的表单内的值乘以单价即可但是还是当前商品小计
$(function () {
// 1: 增减商品数量模块 首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
$('.increment').click(function () {
//得到该兄弟文本框的值
var n = $(this).siblings('.itxt').val();
n++; //点击+号一次就累加
$(this).siblings('.itxt').val(n); //把新值赋值给文本框
//3: 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
//当前的商品价格单价
// var price = $(this).parent().parent().siblings('.p-price').html();
//parents('.p-num')可以返回固定的祖先元素
var price = $(this).parents('.p-num').siblings('.p-price').html();
console.log(price);
//获取的单价有单位(¥),所以要去掉,为了后面的小计
price = price.substr(1);
//toFixed(2)保留两位小数
var pr = (p * n).toFixed(2);
//小计并复制
// $(this).parent().parent().siblings('.p-sum').html("¥" + price * n);
$(this).parents('.p-num').siblings('.p-sum').html('¥' + pr);
});
//2: 增减商品数量模块 首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
$('.decrement').click(function () {
var n = $(this).siblings('.itxt').val();
//如果数量减到1,就不能再减了
if (n == 1) {
return false;
}
n--;
$(this).siblings('.itxt').val(n);
//3: 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
//当前的商品价格单价
// var price = $(this).parent().parent().siblings('.p-price').html();
//优化上面一层一层的找
var price = $(this).parents('.p-num').siblings('.p-price').html();
//获取的单价有单位(¥),所以要去掉,为了后面的小计
price = price.substr(1);
//小计并复制
// $(this).parent().parent().siblings('.p-sum').html("¥" + price * n);
$(this).parents('.p-num').siblings('.p-sum').html('¥' + (p * n).toFixed(2));
});
//4: 用户修改文本框的里面的值 乘以 当前商品的单价
$('.itxt').change(function () {
//4.1: 先得到文本框的值
var n = $(this).val();
//4.2: 得到当前商品的单价
var price = $(this).parents('.p-num').siblings('.p-price').html();
//4.3: 取掉单位
price = price.substr(1);
//4.4: 修改小计
$(this).parents('.p-num').siblings('.p-sum').html('¥' + (p * n).toFixed(2));
})
})
html
</div>
<div class="c-container">
<div class="w">
<div class="cart-filter-bar">
<em>全部商品</em>
</div>
<!-- 购物车主要核心区域 -->
<div class="cart-warp">
<!-- 头部全选模块 -->
<div class="cart-thead">
<div class="t-checkbox">
<input type="checkbox" name="" id="" class="checkall"> 全选
</div>
<div class="t-goods">商品</div>
<div class="t-price">单价</div>
<div class="t-num">数量</div>
<div class="t-sum">小计</div>
<div class="t-action">操作</div>
</div>
<!-- 商品详细模块 -->
<div class="cart-item-list">
<div class="cart-item check-cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" checked class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p1.jpg" alt="">
</div>
<div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
</div>
<div class="p-price">¥12.60</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">¥12.60</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p2.jpg" alt="">
</div>
<div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
</div>
<div class="p-price">¥24.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">¥24.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p3.jpg" alt="">
</div>
<div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
</div>
<div class="p-price">¥29.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">¥29.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
</div>
<!-- 结算模块 -->
<div class="cart-floatbar">
<div class="select-all">
<input type="checkbox" name="" id="" class="checkall">全选
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
<a href="javascript:;" class="clear-all">清理购物车</a>
</div>
<div class="toolbar-right">
<div class="amount-sum">已经选<em>1</em>件商品</div>
<div class="price-sum">总价: <em>¥12.60</em></div>
<div class="btn-area">去结算</div>
</div>
</div>
</div>
</div>
</div>
5.1: 使用parents('选择器) 返回祖先元素(优化)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.mini.js"></script>
</head>
<body>
<div class="one">
<div class="two">
<div class="three">
<div class="four">我不容易</div>
</div>
</div>
</div>
<script>
//1: 一级一级的找到祖先元素
console.log($('.four').parent().parent().parent());
//2:优化一级一级网上找
console.log($('.four').parents());
console.log($('.four').parents('.one'));
</script>
</body>
</html>
2.8: jQuery元素操作
主要是遍历、创建、添加、删除元素操作。
1: 遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。
语法1:
$("div").each(function (index, domEle) { xxx;})
1. each() 方法遍历匹配的每一个元素。主要用DOM处理。each 每一个
2. 里面的回调函数有2个参数:index 是每个元素的索引号;demEle 是每个DOM元素对象,不是jquery对象
3. 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象$(domEle)
2: 遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。
语法2:
$.each(object,function (index, element) { xxx;})
1. $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
2. 里面的函数有2个参数:index 是每个元素的索引号;element 遍历内容
区别:如果遍历dom对象,用each() 方法最合适;如果想要 遍历数据,比如对象,数组,用$.each()更合适;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.mini.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function () {
//1:隐式方法,就是同一个元素进行同一个操作
// $('div').css('color', 'pink');
var sum = 0;
//定义一个数组
var arr = ['green', 'pink', 'red'];
//2:同一个元素,进行不同的操作,就用each遍历
// 如果针对于同一类元素做不同操作,需要用到遍历元素(类似for,但是比for强大)
$('div').each(function (index, domEle) {
//2.1: index获取每个元素的索引号(each里面就已经给每个元素索引号了)
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
console.log($(this).index());
//2.2: domEle是dom元素,不能调用css(jquery的方法)
// 回调函数第二个参数一定是 dom元素对象 也是自己命名
// domEle.css('color', 'red'); //报错
//应该先把dom转换成jquery对象才行
// $(domEle).css('color', 'red');
//实现不同的操作,需要定义一个数组
$(domEle).css('color', arr[index]);
//3:把每个元素的值累计
sum += parseInt($(domEle).text());
// console.log(sum);
});
console.log(sum);
//4:$.each() 方法遍历元素 主要用于遍历数据,处理数据
$.each($('div'), function (index, ele) {
console.log(index);
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>
</body>
</html>
3: 案例-购物车案例模块-计算总计和总额
①核心思路:把所有文本框里面的值相加就是总计数量。总额同理
②文本框里面的值不相同,如果想要相加需要用到each遍历。声明一个变量,相加即可
③点击+号-号,会改变总计和总额,如果用户修改了文本框里面的值同样会改变总计和总额
④因此可以封装一个函数求总计和总额的,以上2个操作调用这个函数即可。
⑤注意1:总计是文本框里面的值相加用val()总额是普通元素的内容用text()
⑥要注意普通元素里面的内容要去掉¥并且转换为数字型才能相加
注意:当刷新页面的时候,总计和总价也要计算的;也就是当第一次打开页面,调用下面总计和总价的函数即可;
$(function () {
// 1: 增减商品数量模块 首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
$('.increment').click(function () {
//得到该兄弟文本框的值
var n = $(this).siblings('.itxt').val();
n++; //点击+号一次就累加
$(this).siblings('.itxt').val(n); //把新值赋值给文本框
//3: 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
//当前的商品价格单价
// var price = $(this).parent().parent().siblings('.p-price').html();
//parents('.p-num')可以返回固定的祖先元素
var price = $(this).parents('.p-num').siblings('.p-price').html();
console.log(price);
//获取的单价有单位(¥),所以要去掉,为了后面的小计
price = price.substr(1);
//toFixed(2)保留两位小数
var pr = (p * n).toFixed(2);
//小计并复制
// $(this).parent().parent().siblings('.p-sum').html("¥" + price * n);
$(this).parents('.p-num').siblings('.p-sum').html('¥' + pr);
//调用总计
getSum();
});
//2: 增减商品数量模块 首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
$('.decrement').click(function () {
var n = $(this).siblings('.itxt').val();
//如果数量减到1,就不能再减了
if (n == 1) {
return false;
}
n--;
$(this).siblings('.itxt').val(n);
//3: 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
//当前的商品价格单价
// var price = $(this).parent().parent().siblings('.p-price').html();
//优化上面一层一层的找
var price = $(this).parents('.p-num').siblings('.p-price').html();
//获取的单价有单位(¥),所以要去掉,为了后面的小计
price = price.substr(1);
//小计并复制
// $(this).parent().parent().siblings('.p-sum').html("¥" + price * n);
$(this).parents('.p-num').siblings('.p-sum').html('¥' + (p * n).toFixed(2));
//调用总计
getSum();
});
//4: 用户修改文本框的里面的值 乘以 当前商品的单价
$('.itxt').change(function () {
//4.1: 先得到文本框的值
var n = $(this).val();
//4.2: 得到当前商品的单价
var price = $(this).parents('.p-num').siblings('.p-price').html();
//4.3: 取掉单位
price = price.substr(1);
//4.4: 修改小计
$(this).parents('.p-num').siblings('.p-sum').html('¥' + (p * n).toFixed(2));
//4.5: 调用计算总件数和总金额的函数
getSum(); //当用户修改了文本框的数量,就用调用总计
});
//5: 计算购物车的商品总数量和总金额模块
getSum(); //6:页面刷新(第一次打开的时候)先调用函数进行总计和总价
//5.1: 封装一个函数
function getSum() {
var count = 0; //计算总件数
var money = 0; //计算总价钱
//计算总件数
$('.itxt').each(function (index, ele) {
//$(ele).val()字符型 要转成int型
count += parseInt($(ele).val()); //ele是文本框(表单)的内容
});
//赋值给总件数
$('.amount-sum em').text(count);
//计算总价钱
//遍历每个小计
$('.p-sum').each(function (inex, ele) {
//获取每个小计的值 取消¥substr(1) $(ele).text().substr(1)是字符串,用parseFloat转换成符点数
money += parseFloat($(ele).text().substr(1));
});
//赋值给总价 保留两位小数toFixed(2)
$('.price-sum em').text('¥'+ money.toFixed(2));
};
//
})
4: 创建元素
语法:
$(''<li></li>'');
动态的创建了一个<li>
5: 添加元素
5.1:内部添加
element.append(''内容'');
把内容放入匹配元素内部最后面,类似原生appendChild。
element.prepend(''内容'')
把内容放入匹配元素内部最前面。
5.2:外部添加
element.after(''内容'') //把内容放入目标元素后面
element.before(''内容'') //把内容放入目标元素前面
①内部添加元素,生成之后,它们是父子关系。
②外部添加元素,生成之后,他们是兄弟关系。
6: 删除元素
element.remove() //删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') //清空匹配的元素内容
①remove 删除元素本身。
②empt() 和html('''') 作用等价,都可以删除元素里面的内容,只不过html 还可以设置内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
// 2. 添加元素
// (1) 内部添加
// $("ul").append(li); 内部添加并且放到内容的最后面
$("ul").prepend(li); // 内部添加并且放到内容的最前面
// (2) 外部添加
var div = $("<div>我是后妈生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 删除元素
// $("ul").remove(); 可以删除匹配的元素 自杀
// $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面内容
})
</script>
</body>
</html>
7: 案例-购物车案例模块-选中商品添加背景
需求:每个小商品后面都有一个删除按钮,点击一下可以删除商品;还有一个删除选中的商品,就是商品前面打了勾的就要删除;还有一个是清理购物车,就是清除所有的商品。
注意;每次清除或者删除商品的时候,都要重新计算下总价和总计(调用该函数);
①核心思路:选中的商品添加背景,不选中移除背景即可
②全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景
③小的复选框点击:如果是选中状态,则当前商品添加背景,否则移除背景
④这个背景,可以通过类名修改,添加类和删除类
$(function () {
// 1: 增减商品数量模块 首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
$('.increment').click(function () {
//得到该兄弟文本框的值
var n = $(this).siblings('.itxt').val();
n++; //点击+号一次就累加
$(this).siblings('.itxt').val(n); //把新值赋值给文本框
//3: 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
//当前的商品价格单价
// var price = $(this).parent().parent().siblings('.p-price').html();
//parents('.p-num')可以返回固定的祖先元素
var price = $(this).parents('.p-num').siblings('.p-price').html();
console.log(price);
//获取的单价有单位(¥),所以要去掉,为了后面的小计
price = price.substr(1);
//toFixed(2)保留两位小数
var pr = (p * n).toFixed(2);
//小计并复制
// $(this).parent().parent().siblings('.p-sum').html("¥" + price * n);
$(this).parents('.p-num').siblings('.p-sum').html('¥' + pr);
//调用总计
getSum();
});
//2: 增减商品数量模块 首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
$('.decrement').click(function () {
var n = $(this).siblings('.itxt').val();
//如果数量减到1,就不能再减了
if (n == 1) {
return false;
}
n--;
$(this).siblings('.itxt').val(n);
//3: 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
//当前的商品价格单价
// var price = $(this).parent().parent().siblings('.p-price').html();
//优化上面一层一层的找
var price = $(this).parents('.p-num').siblings('.p-price').html();
//获取的单价有单位(¥),所以要去掉,为了后面的小计
price = price.substr(1);
//小计并复制
// $(this).parent().parent().siblings('.p-sum').html("¥" + price * n);
$(this).parents('.p-num').siblings('.p-sum').html('¥' + (p * n).toFixed(2));
//调用总计
getSum();
});
//4: 用户修改文本框的里面的值 乘以 当前商品的单价
$('.itxt').change(function () {
//4.1: 先得到文本框的值
var n = $(this).val();
//4.2: 得到当前商品的单价
var price = $(this).parents('.p-num').siblings('.p-price').html();
//4.3: 取掉单位
price = price.substr(1);
//4.4: 修改小计
$(this).parents('.p-num').siblings('.p-sum').html('¥' + (p * n).toFixed(2));
//4.5: 调用计算总件数和总金额的函数
getSum(); //当用户修改了文本框的数量,就用调用总计
});
//5: 计算购物车的商品总数量和总金额模块
getSum(); //6:页面刷新(第一次打开的时候)先调用函数进行总计和总价
//5.1: 封装一个函数
function getSum() {
var count = 0; //计算总件数
var money = 0; //计算总价钱
//计算总件数
$('.itxt').each(function (index, ele) {
//$(ele).val()字符型 要转成int型
count += parseInt($(ele).val()); //ele是文本框(表单)的内容
});
//赋值给总件数
$('.amount-sum em').text(count);
//计算总价钱
//遍历每个小计
$('.p-sum').each(function (inex, ele) {
//获取每个小计的值 取消¥substr(1) $(ele).text().substr(1)是字符串,用parseFloat转换成符点数
money += parseFloat($(ele).text().substr(1));
});
//赋值给总价 保留两位小数toFixed(2)
$('.price-sum em').text('¥' + money.toFixed(2));
};
//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();
});
})
8: 案例:购物车案例模块-选中商品添加背景
①核心思路:选中的商品添加背景,不选中移除背景即可
②全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景
③小的复选框点击:如果是选中状态,则当前商品添加背景,否则移除背景
④这个背景,可以通过类名修改,添加类和删除类
$(function () {
//1:全选 全不选功能模块
//就是把全选按钮(checkall) 的状态赋值给 三个小的按钮 (j-checkbox) 就可以了
//事件可以使用change
$('.checkall').change(function () {
// $('this').prop('checked');
// console.log($('this').prop('checked'));
//.Checkall是因为上下都有一个全选按钮,并且都是同一个类名,如果全部选或不选 则两个全选按钮都要一致
//把全选按钮的状态赋值给三个小按钮
$('.j-checkbox , .checkall').prop('cheched', $('this').prop('checked'));
//3: 给商品添加背景颜色
//点击全选(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属性
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);
}
//3:(checked),就给所有的商品添加背景颜色,背景颜色用类
if ($(this).prop('checked')) {
//让当前的商品添加 check-cart-item 类名
$(this).parents('.cart-item').addClass('check-cart-item');
} else {
//移除 check-cart-item
$(this).parents('.cart-item').removeClass('check-cart-item');
}
});
});
2.9: jQuery 尺寸、位置操作
1: jQuery尺寸
- 以上参数为空,则是获取相应值,返回的是数字型。
- 如果参数为数字,则是修改相应值。
- 参数可以不必写单位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 15px solid red;
margin: 20px;
}
</style>
<script src="jquery.mini.js"></script>
</head>
<body>
<div></div>
<script>
$(function () {
// 1. width() / height() 获取设置元素 width和height大小
console.log($('div').width()); //获取值
$('div').width(300); //修改值
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($('div').innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($('div').outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($('div').outerWidth(true));
})
</script>
</body>
</html>
2: jQuery位置
位置主要有三个:offset()、position()、scrollTop()/scrollLeft()
2.1: offset() 设置或获取元素偏移
①offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
②该方法有2个属性left、top 。offset().top用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
③可以设置元素的偏移:offset({ top: 10, left: 30 });
2.2: position() 获取元素偏移
①position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
②该方法有2个属性left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离。
③该方法只能获取。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 400px;
height: 400px;
background-color: pink;
margin: 100px;
overflow: hidden;
position: relative;
}
.son {
width: 150px;
height: 150px;
background-color: purple;
position: absolute;
left: 10px;
top: 10px;
}
</style>
<script src="jquery.mini.js"></script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
$(function () {
// 1. 获取设置距离文档的位置(偏移) offset
console.log($('.son').offset());
console.log($('.son').offset().top); //获取该元素到文档的上距离
//修改值(对象的值)
$('.son').offset({
top: 200,
left: 200
});
// 2. 获取距离带有定位父级位置(偏移) position 如果没有带有定位的父级,则以文档为准
// 这个方法只能获取不能设置偏移
console.log($('.son').position());
//不能设置高宽距离
$('.son').position({
top: 200,
left: 200
});
})
</script>
</body>
</html>
2.3: scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
①scrollTop() 方法设置或返回被选元素被卷去的头部。
②不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。
2,4:案例-带有动画的返回顶部
①核心原理:使用animate动画返回顶部。
②animate动画函数里面有个scrollTop 属性,可以设置位置
③但是是元素做动画,因此$(“body,html”).animate({scrollTop: 0})
animate是元素做动画,但document不是元素,所以要把document修改成dom元素 $('body , html ' );
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 2000px;
}
.back {
width: 50px;
height: 50px;
background-color: pink;
position: fixed;
right: 10px;
bottom: 100px;
display: none;
}
.container {
width: 900px;
height: 500px;
background-color: skyblue;
margin: 400px auto;
}
</style>
<script src="jquery.mini.js"></script>
</head>
<body>
<div class="back">返回顶部</div>
<div class="container"></div>
<script>
$(function () {
//0;设置刷新页面/第一次进入页面时滚动条就在距离页面100的距离
$(document).scrollTop(100);
//1:获取盒子与页面顶部的距离
var boxDistance = $('.container').offset().top;
// console.log(boxDistance);
//2:页面滚动事件
$(window).scroll(function () {
//2: 判断 如果卷进去的距离 >= boxDistance,返回顶部的盒子就显示出来
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
console.log($(document).scrollTop()); //页面的滚动(卷入/出)
if ($(document).scrollTop() >= boxDistance) {
$('.back').fadeIn();
} else {
$('.back').fadeOut();
}
});
//3: 返回顶部
$('.back').click(function () {
// $(document).scrollTop(0); //直接返回顶部,但是用动画效果是最好的
$('body , html').animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
})
})
</script>
</body>
</html>
2.5: 案例-品优购电梯导航
功能一: 当页面滚动到今日推荐 模块。,就让电梯导航显示出来
实现:
1:先把电梯导航栏隐藏,当页面滚动到今日推荐·这个模块然后显示出来即可;
2: 判断-如果 页面滚动的距离 >= 今日推荐到顶部的距离 ,则电梯导航栏就显示出来,否则就隐藏;
//css
/*电梯导航*/
.fixedtool {
position: fixed;
top: 100px;
left: 50%;
margin-left: -676px;
width: 66px;
background-color: #fff;
/* 功能一 */
display: none;
}
//js
$(function(){
// 一:功能·1
//今日推荐到顶部的距离
var toolTop = $('.recommend').offset().top;
//页面滚动事件
$(window).scroll(function(){
//判断
if($(document).scrollTop() >= toolTop){
$('.fixedtool').fadeIn();
} else {
$('.fixedtool').fadeOut();
}
})
})
功能二:点击电梯导航中的内容,页面就可以滚动到相应内容区域
实现:
电梯导航栏中的内容需要做点击事件,里面有四个内容(盒子):家用电器,手机通讯,电脑办公,精品家具,这样就需要写4个点击事件。如果有100个,那么就要写100个点击事件 ,这样就会很麻烦,这里就需要一种很快的方法来实现;
2: 核心算法:因为电梯导航模块和内容区域模块是一一对应的;而且导航栏的内容(左)盒子与具体内容(右)的盒子是一一对应的;可以把导航栏中的盒子全部获取,然后做一个点击事件(但是最麻烦的是当点击某个盒子,页面应该怎么样滚动到对应的具体盒子?)
3; 按道理当点击导航栏第一个盒子,那么右边就要跳转到对应的第一个内容盒子(计算第一个盒子的offsetTop值),点击导航栏第二个盒子,那么右边就要跳转到对应的第二个内容的盒子(计算第二个盒子的offsetTop值);
4: 怎么知道点了导航栏的第几个盒子?可以通过索引号得知;只要做了点击事件就可以得到对应的索引号,通过索引号就可以把右边对应的内容大盒子的选择出来,然后计算出该内容大盒子的offsetTop值,这就是页面要滚动的对应的地方了;
疑问:为什么是计算offsetTOp值,因为展示的内容肯定是从最开始显示,就是盒子的最顶部开始展示,然后往下滑;
5: 然后就执行动画即可;(动画一定要排队stop)
总:导航栏盒子全部添加点击事件,然后获得索引号,根据索引号找到对应内容区的盒子,然后计算出内容区盒子的offsetTop值;
补充: 当点击到某个小li,导航栏的内容时,背景颜色为红色;
//js
//功能二:.fixedtool li 导航栏的盒子 ;floor w 内容区域的盒子
//2: 点击电梯导航页面可以滚动到相对应内容区域
$('.fixedtool li').click(function () {
console.log($(this).index()); //获取索引号
//当我们每次点击小li 就需要计算出页面要去往的位置
//选出对应索引号的内容区的盒子 计算它的.offset().top
var current = $('floor w').eq($(this).index()).offset().top;
//页面动画滚动效果
$('body, html').stop().animate({
screenTop: current
})
//补充:点击之后,让当前的小li 添加current 类名,其他兄弟移除current类名
$(this).addClass('current').siblings().removeClass();
})
})
功能三:问题: 当刷新一下页面,电梯导航就不见了
原因:功能一,当页面滚动的时候,才让这个导航栏显示或者隐藏;所以如果不滚动页面,那么刷新页面,导航栏是不显示的;所以需要把功能一中的判断显示导航栏的代码进行封装;当页面加载(刷新)就调用这个函数;当页面滚动的时候也调用一次这个函数;
//js
$(function () {
// 一:功能·1
//今日推荐到顶部的距离
var toolTop = $('.recommend').offset().top;
//1;页面加载刷新就调用一次,那么只要内容区域>= toolTop,那么也会显示导航栏
toggleTool();
//封装函数
function toggleTool() {
//判断
if ($(document).scrollTop() >= toolTop) {
$('.fixedtool').fadeIn();
} else {
$('.fixedtool').fadeOut();
}
}
//页面滚动事件
$(window).scroll(function () {
// //判断
// if ($(document).scrollTop() >= toolTop) {
// $('.fixedtool').fadeIn();
// } else {
// $('.fixedtool').fadeOut();
// }
//2:页面滚动也加载刷新一次
toggleTool();
});
功能四:当页面滚动到哪个页面,电梯导航栏就会凸显出对应的导航栏的内容;
(当我们页面滚动到内容区域某个模块,左侧电梯导航,相对应的小li模块,也会添加current类,兄弟移除current类;)
分析:触发的事件是页面滚动,因此这个功能要写到页面滚动事件里面
1:怎么知道滚动到了哪个内容的盒子?用each去遍历 内容区域的大模块;利用eanch中参数index,ele可以得到索引号和内容;
2: 判断条件: 被卷去的头部大于等于内容区域里面的每个模块offset().top,就可以拿到对应的索引号;也就是说当页面滚动大于等于第一个盒子的offset().top值,说明进入到了第一个盒子;以此类推
3: 利用这个索引号找到相应的电梯导航小li,并添加类,其他兄弟移除current
//页面滚动事件
$(window).scroll(function () {
// //判断
// if ($(document).scrollTop() >= toolTop) {
// $('.fixedtool').fadeIn();
// } else {
// $('.fixedtool').fadeOut();
// }
//2:页面滚动也加载刷新一次
toggleTool();
//功能四:
$('.floor .w').each(function (index, ele) {
//(ele).offset().top 内容的最顶部
if ($(document).screenTop() >= $(ele).offset().top) {
console.log(i);
//根据inde找到对应的导航栏li
$('.fixedtool li').eq(index).addClass('current').siblings().removeClass();
}
})
});
功能五:有bug需要处理-- 点击导航栏的第三个盒子,他会从当前的位置,一个一个移动到点击的第三个盒子上,而不是直接到第三个盒子
原因:因为功能二,只要点击操作,就会让页面滚动起来,一旦滚动就会触发前面的$(window). scroll ,那就会出现多次滚动的效果;
解决: 当我们点击了小li 此时就不需要执行 页面滚动事件里面的li 的背景选择 添加 current ;就可以用节流阀(互斥锁),就是可以决定什么时候开(用),什么时候关;
1: 添加判断,如果flag是正确的,那 就背景添加颜色,错误的就不执行;
2: 什么是错误的,当点击小li,那就flag变成false,不执行背景颜色的添加
$(function () {
// 一:功能·1
//功能五: 节流阀 互斥锁
var flag = true;
//今日推荐到顶部的距离
var toolTop = $('.recommend').offset().top;
//功能三
//1;页面加载刷新就调用一次,那么只要内容区域>= toolTop,那么也会显示导航栏
toggleTool();
//封装函数
function toggleTool() {
//判断
if ($(document).scrollTop() >= toolTop) {
$('.fixedtool').fadeIn();
} else {
$('.fixedtool').fadeOut();
}
}
//页面滚动事件
$(window).scroll(function () {
// //判断
// if ($(document).scrollTop() >= toolTop) {
// $('.fixedtool').fadeIn();
// } else {
// $('.fixedtool').fadeOut();
// }
//2:页面滚动也加载刷新一次
toggleTool();
//功能四:
if (flag) {
$('.floor .w').each(function (index, ele) {
//(ele).offset().top 内容的最顶部
if ($(document).screenTop() >= $(ele).offset().top) {
console.log(i);
//根据inde找到对应的导航栏li
$('.fixedtool li').eq(index).addClass('current').siblings().removeClass();
}
})
}
});
//功能二:.fixedtool li 导航栏的盒子 ;floor w 内容区域的盒子
//2: 点击电梯导航页面可以滚动到相对应内容区域
$('.fixedtool li').click(function () {
flag = flase; //不会执行了,但会出现问题;所以等动画完后,再改为true,然后就会执行功能四里面的判断
console.log($(this).index()); //获取索引号
//当我们每次点击小li 就需要计算出页面要去往的位置
//选出对应索引号的内容区的盒子 计算它的.offset().top
var current = $('floor w').eq($(this).index()).offset().top;
//页面动画滚动效果
$('body, html').stop().animate({
screenTop: current
}, function () {
flag = true; //
});
//补充:点击之后,让当前的小li 添加current 类名,其他兄弟移除current类名
$(this).addClass('current').siblings().removeClass();
})
})
//js
$(function() {
// 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
// 节流阀 互斥锁
var flag = true;
// 1.显示隐藏电梯导航
var toolTop = $(".recommend").offset().top;
toggleTool();
function toggleTool() {
if ($(document).scrollTop() >= toolTop) {
$(".fixedtool").fadeIn();
} else {
$(".fixedtool").fadeOut();
};
}
$(window).scroll(function() {
toggleTool();
// 3. 页面滚动到某个内容区域,左侧电梯导航小li相应添加和删除current类名
if (flag) {
$(".floor .w").each(function(i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
console.log(i);
$(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
}
})
}
});
// 2. 点击电梯导航页面可以滚动到相应内容区域
$(".fixedtool li").click(function() {
flag = false;
console.log($(this).index());
// 当我们每次点击小li 就需要计算出页面要去往的位置
// 选出对应索引号的内容区的盒子 计算它的.offset().top
var current = $(".floor .w").eq($(this).index()).offset().top;
// 页面动画滚动效果
$("body, html").stop().animate({
scrollTop: current
}, function() {
flag = true;
});
// 点击之后,让当前的小li 添加current 类名 ,姐妹移除current类名
$(this).addClass("current").siblings().removeClass();
})
})