目录
1. 普通元素内容html()（相当于原生inner HTML)
2. 普通元 素文本内容text()(相当与原生innerText)
5.1: 使用parents('选择器） 返回祖先元素（优化）
2.3: scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
一：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>c3: 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>c2.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>c4:类操作与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>c6.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();
})
})
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
