jQuery学习笔记
jQuery概述
JavaScript库
JavaScript库，即library，是一个封装好的特定的集合（方法和函数），从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate，hide，show，比如获取元素等。
简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放在里面，这样我们可以快速高效的使用这些封装好的功能了。
比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。
常见的javascript库
- jQuery
- Prototype
- YUI
- Dojo
- Ext Js
- 移动端的zepto
这些库都是对元神JavaScript的封装，内部都是用JavaScript实现的
概述
jQuery是一个快速，简介的JavaScript库，其设计的宗旨是“write less ，Do more”,即倡导写更少的代码，做更多的事情。j就是JavaScript，Query查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。
学习jQuery本质：就是学习调用这些函数（方法）
jQuery的优点
- 轻量级，核心文件才几十kb,不会影响页面加载速度
- 跨浏览器兼容，基本兼容了现在主流的浏览器
- 链式编程，隐式迭代
- 对事件、样式、动画支持，大大简化了DOM操作
- 支持插件扩展开发，有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
- 免费、开源
jQuery的使用
下载地址：jQuery官方下载地址点击去下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<script>
// 1.等待页面DOM加载完毕后再去执行js 代码
// $(document).ready(function() {
// $('div').hide()
// })
// 2.等待页面DOM加载完毕后再去执行js 代码
$(function() {
$('div').hide()
})
</script>
<div></div>
</body>
</html>
jQuery的入口函数
// 等待页面DOM加载完毕后再去执行js代码
// 第一种写法
$(document).ready(function(){
$('div').hide();
})
// 第二种写法
$(function(){
...// 此处是页面DOM加载完成后的入口
})
jQuery的顶级对象
- $是jQuery的别称，在代码中可以用jQuery代替$,但是一般为了方便，通常都直接使用$.
- $是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery的方法
jQuery对象和DOM对象
- DOM对象：用原生js获取过来的对象就是DOM对象
var myDiv = document.querySelector('div')
// myDiv就是DOM对象
- jQuery对象：用jQuery方式获取过来的对象是jQuery对象，本质是$把DOM元素进行了包装
$('div') // $('div')是一个jquery对象
console.log($('div')
- jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）
DOM对象和jQuery对象之间是可以相互转换的
因为原生的js比jQuery更大，原生的一些属和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用
<body>
<video src="xxx.mp4"></video>
<script>
// 1.DOM对象转化为jQuery对象
// 第一种：直接获取视频，得到的就是jQuery对象
$('video')
// 第二种：使用原生js，获取过来的DOM对象
var myVideo = document.querySelector('video')
$(myVideo)
$(myVideo).play() // 这里会报错，原因jQuery里面没有play方法
// 2.jQuery对象转化为DOM对象
$('video')[0].play()
$('video').get(0).play()
</script>
</body>
jQuery常用的API
jQuery选择器
格式：$('选择器') // 里面选择器直接写css选择器即可，但是要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(’#id’) | 获取指定ID的元素 |
| 全选选择器 | $(’*’) | 匹配所有元素 |
| 类选择器 | $(’.class’) | 获取同一类class的元素 |
| 标签选择器 | $(‘div’) | 获取同一类标签的所有元素 |
| 并集选择器 | $(‘div,p,li’) | 获取多个元素 |
| 交集选择器 | $(‘li.current’) | 交集元素 |
jQuery层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(‘ul>li’) | 使用>号，获取亲儿子层级的元素，并不会获取孙子层级 |
| 后代选择器 | $(‘ul li’) | 使用空格，代表后代选择器，获取ul所有li元素，包括孙子 |
jQuery隐式迭代（重要）
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行响应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<div>一</div>
<div>一</div>
<div>一</div>
<div>一</div>
<script>
$(function() {
// 1.获取四个div元素
console.log($('div'))
// 2.给四个div设置背景颜色为粉色 jquery 对象不能使用style
$('div').css('background', 'pink')
})
</script>
</body>
</html>
jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(‘li:first’) | 获取第一个li元素 |
| :last | $(‘li:last’) | 获取最后一个li元素 |
| :eq(index) | $(‘li:eq(2)’) | 获取到li，选择索引为2，索引以0开始 |
| :odd | $(‘li:odd’) | 获取到的li元素中，选择索引为奇数的 |
| :even | $(‘li:even’) | 获取到的li元素中，选择索引为偶数的 |
jQuery筛选方法（重点）
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $(‘li’).parent(); | 查找父级 |
| children(selector) | $(‘ul’).children(‘li’); | 相当于$(“ul>li”),最近一级（儿子） |
| find(selector) | $(‘ul’).find(‘li’) | 相当于$(‘ul li’),后代选择器 |
| siblings(selector) | $(’.first’).siblings(‘li’) | 查找兄弟节点，不包括自己本身 |
| nextAll([expr]) | $(’.first’).nextAll() | 查找当前元素之后的所有同辈元素 |
| prevAll([expr]) | $(’.first’).prevAll() | 查找当前元素之前的所有同辈元素 |
| hasClass(class) | $(‘div’).hasClass(‘current’) | 检查当前的元素中是否含有某个特定的类，如果有则返回true,否则返回false |
| eq(index) | $(‘li’).eq(2) | 相当于$(‘li:eq(2)’),index从0开始 |
jQuery中排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
</head>
<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', 'pink')
// 3. 其余的兄弟去掉背景颜色
$(this).siblings('button').css('background', '')
})
})
</script>
</body>
</html>
例子：淘宝服饰精品案例分析
- 核心原理：鼠标经过左侧盒子某个小li,就让内容区盒子相对应的图片显示，其余的图片进行隐藏
- 需要得到当前小 li 的索引号，就可以显示对应索引号的图片
- jQuery得到当前索引号
$(this).index() - 中间对应的图片，可以通过eq(index)方法去选择
- 显示元素show() 隐藏元素 hide（）
jQuery操作CSS方法
- 参数只写属性名，则返回属性值
$(this).css('color')
- 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css('color','red')
- 参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号
// 第一种
$(this).css({"color":"red","font-size":"20px"})
// 第二种
$(this).css({width:400,height:400,backgroundColor:"red"})
// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则必须加上引号
jQuery设置样式的方法
作用等同于以前的classList，可以操作样式，注意操作类里面的参数不要加点
// 1.添加类名
$('div').addClass('current')
// 2.删除类名
$('div').remove('current')
// 切换类
$('div').toggleClass('current')
例子：tab栏切换分析
- 点击上面的li，当前的li添加current类，其余兄弟移除类
- 点击的同时，得到当前li的索引号
- 让下部里面相应的索引号的item(li)显示，其余的item隐藏类
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 800px;
height: 300px;
margin: 100px auto;
border: 1px solid #ccc;
}
.nav {
height: 50px;
width: 100%;
background-color: #ccc;
}
ul li {
list-style: none;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
cursor: pointer;
}
.nav li {
display: block;
text-decoration: none;
line-height: 50px;
padding: 0 20px;
color: #000;
}
.content {
height: 250px;
width: 100%;
overflow: hidden;
}
.content>ul>li>div {
height: 250px;
width: 100%;
}
.current {
background-color: red;
color: #fff !important;
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div class="container">
<div class="nav">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="content">
<ul>
<li>
<div>商品与价格</div>
</li>
<li>
<div>规格与包装</div>
</li>
<li>
<div>售后保障</div>
</li>
<li>
<div>商品评价(50000)</div>
</li>
<li>
<div>手机社区</div>
</li>
</ul>
</div>
</div>
<script>
$(function() {
$(".nav li").click(function() {
// 1.点击上面的 li ，当前的li添加current类 + 链式编程操作
$(this).addClass('current').siblings('li').removeClass('current')
// 2.点击的同时，得到当前li 的索引号
var index = $(this).index()
console.log(index)
// 3.让下面里面相对应的item显示，其他的隐藏
$(".content li").eq(index).show().siblings().hide()
})
})
</script>
</body>
</html>
类操作与className区别
- 原生js中className会覆盖元素原先里面的类名
- jQuery里面操作只是对指定类进行操作，不影响原先的类名
jQuery效果
滑动效果
- 下滑效果语法规范
slideDown([speed,[easing],[fn]])
下滑效果参数
1.参数都可以省略
2.speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或者表示动画时长的毫秒数值（如：1000）
3.easing:(optional) 用来指定切换效果，默认是“swing”，可用参数“linear”
- 上滑效果语法规范
slideUp([speed,[easing],[fn]])
参数同上
- 滑动切换效果语法规范
slideToggle([speed,[easing],[fn]])
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<style>
div {
width: 200px;
height: 200px;
background: pink;
display: none;
}
.show {
display: block;
}
</style>
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div>展示区域</div>
</body>
<script>
$(function() {
$('button').eq(0).click(function() {
// 下拉滑动 slideDown()
$('div').slideDown()
})
$('button').eq(1).click(function() {
// 上拉滑动 slideUp()
$('div').slideUp()
})
$('button').eq(2).click(function() {
// 切换滑动 slideToggle()
$('div').slideToggle(500)
})
})
</script>
</html>
事件切换
hover([over,]out)
参数说明
1.over鼠标移到元素上要触发的函数（相当于mouseenter）
2.out鼠标移出元素要触发的函数（相当于mouseleave）
例子1：事件切换 hover 就是鼠标经过和离开的复合写法
$(".nav>li").hover(function(){
// 鼠标进入的时候触发的函数
$(this).children("ul").slideDown(200);
},function(){
// 鼠标移出的时候触发的函数
$(this).children("ul").slideUp(200);
})
例子2：事件切换 hover ,如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function(){
$(this).children('ul').slideToggle(200);
})
例子3：简洁版滑动下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
<style>
ul,
li {
padding: 0;
list-style: none;
}
.nav>li {
position: relative;
float: left;
margin: 20px;
display: block;
height: 40px;
width: 120px;
}
.nav>li>ul {
position: absolute;
background-color: aquamarine;
display: none;
}
</style>
</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.事件切换 hover 就是鼠标经过和离开的复合写法
// $('.nav>li').hover(function() {
// $(this).children('ul').slideDown(200)
// }, function() {
// $(this).children('ul').slideUp(200)
// })
// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
// $('.nav>li').hover(function() {
// $(this).children('ul').slideToggle(200)
// })
// 3.停止动画
$('.nav>li').hover(function() {
// stop 方法必须写在动画的前面
$(this).children('ul').stop().slideToggle(200)
})
})
</script>
</body>
</html>
动画队列及其停止排队方法
动画或效果队列：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止动画：
stop()
说明：
1.stop() 方法用于停止动画或效果
2.注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画
淡入淡出效果
- 淡入效果语法规范
fadeIn([speed,[eading],[fn]])
淡入效果参数：
1.参数都可以省略
2.speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或者表示动画时长的毫秒数值（如：1000）
3.easing:(optional) 用来指定切换效果，默认是“swing”，可用参数“linear”
- 淡出效果语法规范
fadeOut([speed,[eading],[fn]])
- 淡入淡出切换
fadeToggle([speed,[eading],[fn]])
- 修改透明度
fadeTo([speed],opacity,[eading],[fn]])
透明度参数说明：
1.opacity透明度必须写，取值0-1之间，必须写
2.speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或者表示动画时长的毫秒数值（如：1000）
3.easing:(optional) 用来指定切换效果，默认是“swing”，可用参数“linear”
例子：淡入、淡出、淡入淡出切换、修改透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<style>
div {
width: 200px;
height: 200px;
background: pink;
display: none;
}
.show {
display: block;
}
</style>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出效果切换</button>
<button>修改透明度</button>
<div>展示区域</div>
</body>
<script>
$(function() {
$('button').eq(0).click(function() {
// 淡入效果 fadeIn()
$('div').fadeIn(1000)
})
$('button').eq(1).click(function() {
// 淡出效果 fadeOut()
$('div').fadeOut(1000)
})
$('button').eq(2).click(function() {
// 淡入淡出切换 fadeToggle()
$('div').fadeToggle(1000)
})
$('button').eq(3).click(function() {
// 修改透明度 fadeTo()
$('div').fadeTo(1000, 0.5)
})
})
</script>
</html>
自定义动画（animate）
- 语法
animate(params,[speed],[easing],[fn])
- 参数：
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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
<style>
div {
position: absolute;
height: 200px;
width: 200px;
background: pink;
}
</style>
</head>
<body>
<button>动起来</button>
<div></div>
<script>
$(function() {
$('button').click(function() {
$('div').animate({
left: 500,
top: 300,
opacity: 0.5
}, 500)
})
})
</script>
</body>
</html>
jQuery属性操作
jQuery属性操作
- 设置或获取元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性，比如a标签中的href属性，比如input标签里面的type
// 1.获取属性语法
prop("属性")
// 设置属性语法
prop("属性","属性值")
- 设置或获取元素自定义属性值attr()
// 1.获取属性语法
attr("属性") // 相当于原生getAttribute()
// 2.设置属性语法
attr("属性","属性值") // 类似于原生setAttribute()
// 该方法也可以获取H5自定义属性
- 数据缓存 data()
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除
// 1.附加数据语法
data("name","value") // 向被选元素附加数据
// 2.获取数据语法
data("name") // 向被选元素获取数据
// 同时，还可以读取HTML5自定义属性data-index,得到的是数字型
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<a href="http://www.baidu.com" title="">百度</a>
<input type="checkbox" checked>
<div index="1" data-index="2">我是自定义的</div>
<span>123456</span>
<script>
$(function() {
// 1.获取属性值 element.prop("属性名") 获取固有属性值
console.log($("a").prop("href"))
// 2.设置属性值
$('a').prop('title', 'hello')
$("input").change(function() {
console.log($('input').prop("checked"))
})
// 2.获取的自定义属性值， attr()
console.log($('div').attr('index'))
$('div').attr('index', '666')
// 3.数据缓存 data() 这个里面的数据是存放在元素的内存里面的
$('span').data('uname', 'andy')
console.log($('span').data('uname'))
// 这个方法获取data-index h5 自定义属性 第一个不用 写 data- 开头 ，返回的 是数字型
console.log($('div').data('index')) // 此处打印出来的是 2 数字型
})
</script>
</body>
</html>
购物车案例-全选
- 全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走
- 因为checked是复选框的固有属性，此时需要利用prop()方法获取和设置该属性
- 把全选按钮复制给3个复选框就可以了
- 当我们每次点击小的复选框按钮，就来判断
- 如果小复选框被选中的个数等于3就应该把全选按钮选上，否则全选按钮不选。
- :checked 选择器 :checked 查找被选中的表单元素
简单例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
</head>
<body>
<input type="checkbox" class="checkall"> 全选
<br>
<input type="checkbox" class="j-checkbox"> 商品一
<input type="checkbox" class="j-checkbox"> 商品二
<input type="checkbox" class="j-checkbox"> 商品三
<script>
$(function() {
// 1.全选 全不选功能模块
// 就是吧全选按钮(checkall)的状态赋值给 三个小的按钮(j-checkbox)就可以了
// 事件可以使用change
$('.checkall').change(function() {
// 获取 当前全选按钮的状态
// console.log($(this).prop('checked'))
$('.j-checkbox, .checkall').prop('checked', $(this).prop('checked'))
})
//2.如果复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选
$('.j-checkbox').change(function() {
// $('.j-checkbox').length 是所有的小复选框的个数
if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
console.log('全部选中')
$('.checkall').prop('checked', true)
} else {
console.log('未选中')
$('.checkall').prop('checked', false)
}
})
})
</script>
</body>
</html>
jQuery内容文本值
主要针对元素的内容还有表单的值操作
- 普通元素内容html() (相当于原生innerHTML)
html() // 获取元素的内容
html("内容") // 设置元素的内容
- 普通元素文本内容text() (相当于原生innerText）
text() // 获取元素的内容
text("内容") // 设置元素的内容
- 获取设置表单值 val()
$("input").val() // 获取值
$("input").val("123456") // 设置值
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
$(function() {
// 1.获取设置元素内容 html()
console.log($('div').html())
// $('div').html('123456')
// 2.获取设置元素文本内容 text()
console.log($('div').text())
// $('div').text('123456')
// 3.获取设置表单值 val()
console.log($('input').val())
$('input').val('123')
})
</script>
</body>
</html>
购物车案例-增减商品数量分析
- 核心思路：首先声明一个变量，当我们点击 + 号（increment）,就让这个值++，然后赋值给文本框
- 注意：只能增加本商品的数量，就是当前+号的兄弟文本框的值
- 修改表单的值是val()方法
- 注意：这个变量初始值应该是这个文本框的值，在这个值的基础上++，要获取表单元素的值
- 减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<div>
<button class="decrement">-</button>
<input type="text" class="itxt" value="1">
<button class="increment">+</button>
</div>
<div>
<button class="decrement">-</button>
<input type="text" class="itxt" value="1">
<button class="increment">+</button>
</div>
<script>
$(function() {
$('.increment').click(function() {
var n = $(this).siblings('.itxt').val()
n++
$(this).siblings('.itxt').val(n)
console.log(n)
})
$('.decrement').click(function() {
var n = $(this).siblings('.itxt').val()
if (n == 1) {
return false
}
n--
$(this).siblings('.itxt').val(n)
console.log(n)
})
})
</script>
</body>
</html>
购物车案例-修改商品小计分析
- 核心思想：每次点击+号，或者-号，根据文本框的值乘以当前商品的价格就是商品的小计
- 注意：只能增加商品的小计，就是当前商品的小计模块
- 修改普通元素的内容是text()方法
- 注意：当前商品的价格，要把￥符号去掉再相乘，截取字符串substr(1)
- parents('选择器‘)可以返回指定祖先元素
- 最后计算的结果如果想要保留两位小数通过toFixed(2)方法
- 用户也可以直接修改表单里面的值，同样要计算小计，用表单的change事件
- 用最新的表单内的值乘以单价即可，但是还是当前商品小计
例子：返回指定祖先元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<div class="one">
<div class="two">
<div class="three">
<div class="four">我不容易</div>
</div>
</div>
</div>
<script>
$(function() {
// 想要找见祖先 one
// console.log($('.four').parent().parent().parent())
console.log($('.four').parents('.one'))
})
</script>
</body>
</html>
例子：商品小计案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<div>
<div class="p-price">￥12.60</div>
<div class="p-num">
<div>
<button class="decrement">-</button>
<input type="text" class="itxt" value="1">
<button class="increment">+</button>
</div>
</div>
<div class="p-sum">￥12.60</div>
</div>
<div>
<div class="p-price">￥10.60</div>
<div class="p-num">
<div>
<button class="decrement">-</button>
<input type="text" class="itxt" value="1">
<button class="increment">+</button>
</div>
</div>
<div class="p-sum">￥10.60</div>
</div>
<script>
$(function() {
// 当用户点击 加号时触发的方法
$('.increment').click(function() {
var n = $(this).siblings('.itxt').val()
n++
$(this).siblings('.itxt').val(n)
console.log(n)
// 当前商品的价格
// var p = $(this).parent().parent().siblings('.p-price').text().substr(1)
var p = $(this).parents('.p-num').siblings('.p-price').text().substr(1)
// 计算当前商品的价格 * 数量 赋值给小计
// $(this).parent().parent().siblings('.p-sum').text("￥" + p * n)
$(this).parents('.p-num').siblings('.p-sum').text("￥" + (p * n).toFixed(2))
console.log(p)
})
// 当用户点击 减号的时候
$('.decrement').click(function() {
var n = $(this).siblings('.itxt').val()
if (n == 1) {
return false
}
n--
$(this).siblings('.itxt').val(n)
console.log(n)
// 当前商品的价格
// var p = $(this).parent().parent().siblings('.p-price').text().substr(1)
var p = $(this).parents('.p-num').siblings('.p-price').text().substr(1)
// 计算当前商品的价格 * 数量 赋值给小计
// $(this).parent().parent().siblings('.p-sum').text("￥" + p * n)
$(this).parents('.p-num').siblings('.p-sum').text("￥" + (p * n).toFixed(2))
})
// 用户修改文本框的值 计算 小计模块
$('.itxt').change(function() {
// 先得到文本框里面的值， 乘以 当前商品的单价
var n = $(this).val()
var p = $(this).parents('.p-num').siblings('.p-price').text().substr(1)
$(this).parents('.p-num').siblings('.p-sum').text("￥" + (p * n).toFixed(2))
})
})
</script>
</body>
</html>
jQuery元素操作
主要是遍历、创建、添加、删除元素等操作
- 遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，就需要用到遍历
- 语法1：
$('div').each(function(index,domElement){xxx;})
说明：
a.each()方法遍历匹配的每一个元素，主要用于DOM处理，each每一个
b.里面的回调函数有2个参数，index是每个元素的索引值，domElement是每个DOM元素对象，不是jQuery对象
c.所以想要使用jQuery方法，需要给这个dom元素转换为jQuery对象,$(domElement)
2. 语法2：
$.each(object,function(index,domElement){xxx;})
说明：
a.$.each()方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
b.里面的回调函数有2个参数，index是每个元素的索引值，domElement是每个DOM元素对象，不是jQuery对象
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<span class="sum">未知</span>
<script>
$(function() {
// 1.each() 方法遍历元素
var arr = ['red', 'green', 'blue']
var sum = 0
// $('div').each(function(index, ele) {
// // 回调函数第一个参数一定是索引号 第二个参数是DOM元素对象
// console.log(index, $(ele))
// // $(ele).css("color", 'blue')
// $(ele).css("color", arr[index])
// sum += Number($(ele).text())
// $('.sum').text(sum)
// })
// 2.$.each()
// $.each($('div'), function(i, element) {
// console.log($('div'), i, element)
// })
// 写法2可以遍历数组 或者对象 数据
$.each(arr, function(index, item) {
console.log(index, item)
})
})
</script>
</body>
</html>
购物车案例-计算总计和总额
- 核心思想：把所有文本框里面的值相加就是总计数量，总额同理。
- 文本框里面的值不相同，如果想要相加需要用到each遍历，声明一个变量，相加即可
- 点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值，同样会改变总计和总额
- 因此可以封装一个函数求总计和总额的，以上两个操作调用这个函数即可
- 注意：总计是文本框里面的值相加用val(),总额是普通元素的内容用text()
- 要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加
// 例子：计算总计和总额模块的函数
function getSum(){
var count = 0; // 计算总件数
var money = 0； // 计算总价钱
$(".itxt").each(function(i,ele){
count += Number($(ele).val())
})
$(".amount-sun em").text(count);
$("p-sum").each(function(i,ele){
sum += parseFloat($(ele).text().substr(1))
})
$(",price-sum em").text("￥" + moeny.toFixed(2))
}
创建元素
语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1.创建元素
var li = $("<li>我是后来创建的li</li>")
// 2.添加元素
// 内部添加
// $('ul').append(li) // 内部添加并且放到内容的最后面
// $('ul').prepend(li) // 内部添加并且放到内容的最前面
// 外部添加
var div = $('<div>我是后妈生的</div>')
// $('.test').after(div) // 把内容放入目标元素后面
$('.test').before(div) // 把内容放入目标元素的前面
// 内部元素添加元素，生成之后，它们是父子关系
// 外部添加元素，生成之后，它们是兄弟关系
// 3.删除元素
// $('ul').remove() // 删除匹配的元素（本身，自杀）
// $('ul').empty() // 删除匹配元素集合中的所有子节点
// $('ul').html('') // 清空匹配的内容元素
})
</script>
</body>
</html>
购物车案例-删除商品模块
- 核心思想：把商品remove()删除元素即可
- 有三个地方需要删除，1商品后面的删除按钮2删除选中的商品 3清理购物车
- 商品后面的删除按钮：一定是删除当前的商品，所以是从$(this)出发
$(".p-action a").click(function(){
$(this).parents('.cart-item').remove()
})
- 删除选中的商品：先判断小的复选框是否选中状态，如果是选中，则删除对应的商品
$('.remove-batch').click(function(){
// 删除的是小的复选框选中的商品
$('.j-checkbox:checked').parents('.cart-item').remove()
})
- 清空所有，删除商品
$('.clear-all').click(function(){
$('.cart-item').remove()
// 隐式迭代
})
购物车案例-选中商品添加背景
- 核心思想：选中的商品添加背景，不选中移除背景即可
- 全选按钮点击：如果全选选中，则所有的商品添加背景，否则移除背景
- 小的复选框点击：如果是选中状态，则当前商品添加背景，否则移除背景
- 这个背景，可以通过类名修改，添加类或者删除类
if($(this).prop('checked')){
// 让所有商品添加 check-cart-item 类名
$('.cart-item').addClass('check-cart-item')
}else{
$('.cart-item').removeClass('check-cart-item')
}
jQuery事件注册
事件绑定
语法：
element.事件(function(){})
// 其他事件和原生基本一致
// 比如：mouserover,mouseout,blur,focus,change,keydown,keyup,resize,scroll等
事件处理on() 绑定事件
on()方法在匹配元素上绑定一个或多个事件的时间处理函数
语法：
element.on(events,[selector],fn)
说明：
- events:一个或多个用空格分隔的事件类型，如“click” 或 “keydown”
- selector:元素的子元素选择器
- fn：回调函数，即绑定在元素身上的侦听函数
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.current {
background: blue;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>我是li1</li>
<li>我是li1</li>
<li>我是li1</li>
<li>我是li1</li>
<li>我是li1</li>
</ul>
<ol></ol>
<script>
$(function() {
// 1.单个事件注册
// $('div').click(function() {
// $(this).css("backgroundColor", "red")
// })
// $('div').mouseenter(function() {
// $(this).css("backgroundColor", "skyblue")
// })
// 2.事件处理 on
// $('div').on({
// mouseenter: function() {
// $(this).css("backgroundColor", "skyblue")
// },
// click: function() {
// $(this).css('backgroundColor', 'red')
// }
// })
$('div').on('mouseenter mouseleave', function() {
$(this).toggleClass('current')
})
// 二。on() 方法优势（委托）
$('ul').on('click', 'li', function() {
alert('hello')
})
// click 是绑定在ul身上的，但是触发的对象是 Ul 里面的 小 li
// 三、on可以动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert('111')
})
var li = $('<li>我是后创建的元素</li>')
$("ol").append(li)
})
</script>
</body>
</html>
on() 方法优势2：
可以事件委派操作，事件委派的定义就是，把原来加给子元素身上的时间绑定在父元素身上，就是把时间委派给父元素。
$("ul").on("click","li",function(){
alert("111")
})
on()方法优势3：
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
微博发布的案例
分析：
- 点击发布按钮，动态创建一个小li,放入文本框的内容和删除按钮，并且添加到ul中
- 点击删除按钮，删除本条留言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
margin: 100px auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box" id="weibo">
<span>发布微博</span>
<textarea class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
<script>
$(function() {
// 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮并且天骄到ulzhong
$('.btn').on('click', function() {
var li = $('<li></li>')
li.html($('.txt').val() + '<a href="javascript:;">删除</a>')
$('ul').prepend(li)
li.slideDown()
$('.txt').val('')
})
// 2.点击当前按钮删除当前评论
$('ul').on("click", 'a', function() {
$(this).parent().slideUp(function() {
$(this).remove()
})
})
})
</script>
</body>
</html>
事件解绑 off()
off()方法可以移除，通过off()方法添加的时间处理程序
$("div").off() // 解除div所有事件
$("div").off("click") // 解除div的点击事件，其它保留
$("ul").off("click","li") // 解除事件委托
one()绑定一次事件
如果有的事件只想触发一次，可以使用one()来绑定事件
自动触发事件
有些希望事件自动触发，比如轮播图自动播放功能跟点击右侧按钮一致，可以利用定时器自动触发右侧点击事件，不必鼠标点击触发。
// 1.元素.事件()
// 2.元素.trigger("事件")
// 3.元素.triggerHandler("事件") // 不会触发事件的默认行为
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
<style>
div {
height: 200px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
$(function() {
$("div").on("click", function() {
alert(111)
})
// 1.自动触发事件 元素.事件
// $("div").click()
// 2.元素.trigger("事件")
// $("div").trigger("click")
// 3.元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click")
})
</script>
</body>
</html>
jQuery的事件对象
事件被触发，就会有事件对象的产生
element.on(events,[selector],function(event){})
// 阻止默认行为：event.preventDefault 或者 return false
// 阻止冒泡：event.stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
<style>
div {
height: 200px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
$(function() {
$(document).on("click", function(event) {
console.log('点击了document')
})
$("div").on("click", function(event) {
console.log('div')
event.stopPropagation() // 停止冒泡
})
})
</script>
</body>
</html>
jQuery对象拷贝
如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法
语法：
$.extend([deep],target,object1,[objectN])
参数说明：
1.deep:如果设为true为深拷贝，默认为false，浅拷贝
2.target:要拷贝的目标对象
3.object1:待拷贝到第一个对象的对象
4.objectN：待拷贝到第N个对象
5.浅拷贝是把拷贝的对象复杂数据类型中的地址给目标对象，修改目标对象会影响被拷贝对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
</head>
<body>
<script>
$(function() {
var targetObj = {}
var obj = {
id: '1',
name: 'andy',
msg: {
age: 18
}
}
// $.extend(target,obj)
$.extend(true, targetObj, obj)
console.log(targetObj)
targetObj.msg.age = 16
console.log('修改后的', targetObj)
console.log('原来的', obj)
})
</script>
</body>
</html>
jQuery多库共存
问题描述
jQuery使用$符作为标识符，随着jQuery的流行，其他js库也会用这$作为标识符，这样一起使用会引起冲突
客观需求
需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
jQuery解决方案
1.把里面的$符号统一改为jQuery，比如：jQuery(‘div’)
2.jQuery变量规定新的名称：$.noConflict()
var xxx = $.noConflict()
xxx('div').click(function(){})
jQuery插件
jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成
注意：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，一次也称称为jQuery插件
插件网址：jQuery之家
插件使用步骤
1.引入相关文件（jQuery文件和插件文件）
2.复制相关html、css、js(调用插件)
图片懒加载
图片使用延迟加载可提高网页下载速度，它也能帮助减轻服务器负载，当我们页面滑动到可视区域，再显示图片
EasyLazyload 插件
注意：此时的js文件和js调用必须写到DOM元素（图片）最后面
全屏滚动：fullpage.js
todolist案例
功能描述
- 文本框里面输入内容，按下回车，就可以生成代办事项
- 点击代办事项复选框，就可以把当前数据添加到完成事项里面
- 点击已完成事项复选框，就可以把当前数据添加到代办事项里面
- 但是本页面内容刷新页面不会丢失
todolist 数据存储分析一
- 刷新页面不会丢失数据，因此需要用到本地存储localstorage
- 核心思路：不管按下回车，还是点击复选框，都把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
- 存储的数据格式：var todoList = [{title:“xxx”,done:false}]
- 注意点：本地存储localstorage里面只能存储字符串格式，因此需要把对象转化为字符串JSON.stringify(data)
- 注意：获取本地存储的数据，我们需要把里面的字符串数据转换为对象格式JSON.parse()
todolist 按下回车把新数据添加到本地存储里面分析二
- 切记：页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面
- 利用事件对象.keyCode判断用户按下回车键（13）
- 声明一个数组，保存数据
- 先要读取本地存储原来的数据（声明函数getData()）,放到这个数组里面
- 之后把最新从表单获取过来的数据，追加到数组里面
- 最后把数组存储给本地存储（声明函数（saveData()））todolist本地存储数据渲染加载到页面
todolist 本地存储数据渲染加载到页面
- 因为后面也会经常渲染加载操作，所以声明一个函数load(),方便后面调用
- 先要读取本地存储数据（数据不要忘记转换为对象格式）
- 之后遍历这个数据（$.each()）,有几条数据，就生成几个小li添加到ol里面
- 每次渲染之前，先把原先里面ol的内容清空，然后渲染加载最新的数据
todolist案例 删除操作
- 点击里面的a链接，不是删除的li,而是删除本地存储对应的数据
- 核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
- 我们可以给链接自定义属性记录当前的索引号
- 根据这个索引号删除相关的数据，数组的splice(i,1)方法
- 存储修改后的数据，然后存储给本地存储
- 重新渲染加载数据列表
- 因为a是动态创建的，我们使用on()方法绑定事件
todolist 正在进行和已完成选项操作
- 当我们点击了小的复选框，修改了本地存储数据，再重新渲染数据列表
- 点击之后，获取本地存储数据
- 修改对应数据属性done为当前复选框的checked状态
- 之后保存数据到本地存储
- 重新渲染加载数据列表
- load加载函数里面，新增一个条件，如果当前数据的done为true,就是已经完成的，就把列表渲染加载到ul里面
- 如果当前数据的done为false，则是待办事项，就把列表渲染到ol里面去。
todolist 统计正在进行个数和已经完成个数
- 在我们load函数里面操作
- 声明2个变量：todoCount待办个数，doneCount已完成个数
- 当进行遍历本地存储数据的时候，如果数据done为false，则todoCount++,否则doneCount++
- 最后修改响应的元素text()
完整代码实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todoList</title>
<script src="./jquery.js"></script>
<script src="./todolist.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul>li,
ol>li {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
height: 20px;
background-color: #ccc;
border-radius: 10px;
padding: 10px;
}
header {
background-color: #000;
height: 60px;
line-height: 60px;
}
section {
width: 800px;
margin: 0 auto;
}
.todo {
display: flex;
justify-content: space-between;
align-items: center;
}
.todo input {
width: 400px;
height: 30px;
}
header>section>h1 {
color: #fff;
}
</style>
</head>
<body>
<header>
<section class="todo">
<h1>TodoList</h1>
<input id="title" name="title" required placeholder="添加todo">
</section>
</header>
<article>
<section>
<h2>正在进行<span id="todoCount"></span></h2>
<ol id="todolist" class="demo-box">
<li>
<input type="checkbox"> 123
<a href="#">删除</a>
</li>
</ol>
<h2>已经完成<span id="doneCount"></span></h2>
<ul id="donelist"></ul>
</section>
</article>
</body>
</html>
javascript
$(function() {
// alert('111')
load()
// 1.按下回车 把完整数据 存储到本地存储里面
// 存储数据格式 var todoList = [{title:'xxx',done:false}]
$("#title").on("keydown", function(event) {
if (event.keyCode === 13) {
if ($(this).val() === '') {
alert('请输入您要的操作')
} else {
// console.log("您按下了回车键")
// 先对读取原来本地存储的原来数据
var local = getData()
console.log(local)
// 把local数组进行更新数据，把最新的数据追加给local数组
local.push({ title: $(this).val(), done: false })
// 把这个数组local 存储到本地存储
saveData(local)
// 1.todolist 本地存储数据渲染加载到页面
load()
// 清空掉输入框的值
$(this).val("")
}
}
})
// 3.todoList删除操作
$("ol,ul").on("click", "a", function() {
// alert("111")
// 先获取本地存储
var data = getData()
// 修改数据
var index = $(this).attr('id')
console.log(index)
// 保存到本地存储
data.splice(index, 1)
saveData(data)
// 重新渲染页面
load()
})
// 4.todoList 正在进行和已完成选项操作
$('ol,ul').on("click", "input", function() {
// alert('1111')
// 先获取本地存储的数据
var data = getData()
console.log(data)
// 修改数据
var index = $(this).siblings("a").attr("id")
// console.log(index)
data[index].done = $(this).prop("checked")
console.log(data[index * 1].done)
// 保存到本地存储
saveData(data)
// 重新渲染页面
load()
})
// 读取本地存储的数据
function getData() {
var data = localStorage.getItem('todolist')
if (data !== null) {
// 本地存储有数据的情况
// 本地存储里面的数据是字符串格式的，但是我们需要的是对象格式的
return JSON.parse(data)
} else {
// 本地存储无数据的情况
return []
}
}
// 保存本地存储数据
function saveData(data) {
localStorage.setItem("todolist", JSON.stringify(data))
}
// 渲染加载数据
function load() {
var data = getData()
console.log(data)
// 遍历之前先要清空ol里面的元素内容
var todoCount = 0; // 正在进行的个数
var doneCount = 0; // 已经完成的个数
$("ol").empty()
$("ul").empty()
// 遍历数据
$.each(data, function(i, n) {
// console.log(n)
if (n.done) {
$("ul").prepend('<li><input type="checkbox" checked="checked"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '>删除</a></li>')
doneCount++
} else {
$("ol").prepend('<li><input type="checkbox"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '>删除</a></li>')
todoCount++
}
})
$('#todoCount').text(todoCount)
$('#doneCount').text(doneCount)
}
})
jQuery尺寸、位置操作
jQuery尺寸
| 语法 | 说明 |
|---|---|
| width()/height() | 获取匹配元素宽度和高度，只算width/height |
| innerWidth()/innerHeight() | 获取匹配元素宽度和高度，width/height 包含padding |
| outerWidth()/outerHeight() | 获取匹配元素宽度和高度，width/height 包含padding、border |
| outerWidth(true)/outerHeight(true) | 获取匹配元素宽度和高度，width/height 包含padding、border、margin |
说明：
- 以上参数为空，则是获取相应值，返回的是数字型
- 如果参数为数字，则是修改相应值
- 参数不必写单位
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
<style>
div {
height: 200px;
width: 300px;
background-color: pink;
margin: 20px 30px;
border: 1px solid #ccc;
padding: 20px;
}
</style>
</head>
<body>
<div></div>
<script>
$(function() {
// 获取匹配元素的宽/高
console.log($("div").width()) // 300
console.log($("div").height()) // 200
// 获取匹配元素的宽高 包含 padding
console.log($("div").innerWidth()) // 340
console.log($("div").innerHeight()) // 340
// 获取匹配元素的宽高 包含 padding、border
console.log($("div").outerWidth()) // 342
console.log($("div").outerHeight()) // 342
// 获取匹配元素的宽高 包含 padding、border、margin
console.log($("div").outerWidth(true)) // 402
console.log($("div").outerHeight(true)) // 282
})
</script>
</body>
</html>
jQuery位置
位置主要有三个：offset()、position()、scrollTop()、scrollLeft()
- offset() 设置或获取元素偏移
offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
该方法有2个属性left、top、offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
可以设置元素的偏移：offset({top:10,left:20}) - position() 获取元素偏移
position()方法用于返回被选元素相当于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
注意这个方法只能获取不能设置偏移 - scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
scrollTop()方法设置或返回被选中元素被卷去的头部
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="./jquery.js">
</script>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
margin: 200px;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
top: 10px;
left: 10px;
}
</style>
<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: 300
// })
console.log($(".son").position());
})
</script>
</body>
</html>
例子：
$(function(){
// 被卷去头部 scrollTop()/被卷去左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top'
$(window).scroll(function(){
console.log($(document).scrollTop())
if($(document).scrollTop()===boxTop){
$(".back").fadeIn()
}else{
$('.back').fadeOut()
}
})
// 返回顶部
$(".back").click(function(){
$("body,html").stop().animate({
scrollTop:0
}) // 不能是文档document 是html和body元素做动画
})
})
说明：
带有动画的返回顶部
- 核心原理：使用animate动画返回顶部
- animate动画函数里面有个scrollTop属性，可以设置位置
- 但是是元素做动画，因此，$(“body,html”).animate({scrollTop:0})
jQuery和ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<div>
<ul></ul>
</div>
<script>
var dataList = []
$(function() {
$.ajax({
type: 'get',
url: 'http://localhost:3000/api/users',
success: function(res) {
// console.log(res)
dataList = JSON.parse(res)
console.log(dataList)
$.each(dataList, function(index, item) {
$("ul").append(`<li>${item.name}</li>`)
})
}
})
})
console.log(dataList)
</script>
</body>
</html>
1354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
