JQuery
JavaScript库
仓库:可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。
JavaScript库:即library，是一个封装好的特定的集合（方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解︰就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)。
jQuery的基本使用
基本步骤
-
引入jQuery
<script src="../js文件/jquery.min.js"></script> -
使用即可
jQuery的入口函数
// 1.等着页面DOM加载完毕再去执行js代码
$(document).ready(function() {
... //此处是页面DOM加载完成的入口
})
// 2.等着页面DOM加载完毕再去执行js代码
$(function() {
... //此处是页面DOM加载完成的入口
})
- 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
- 相当于原生js 中的 DOMContentLoaded。
- 不同于原生js中的 load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
jQuery的顶级对象$
-
是 j Q u e r y 的别称，在代码中可以使用 j Q u e r y 代替 是jQuery的别称，在代码中可以使用jQuery代替 是jQuery的别称，在代码中可以使用jQuery代替，但一般为了方便，通常都直接使用$。
-
是 j Q u e r y 的顶级对象，相当于原生 J a v a S c r i p t 中的 w i n d o w 。把元素利用 是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用 是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用包装成Query对象，就可以调用jQuery的方法。
jQuery对象和DOM对象
- 用原生JS获取来的对象就是DOM对象
- jQuery方法获取的元素就是jQuery对象。
- 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>
</head>
<body>
<div></div>
<span></span>
<script>
var mydiv = document.querySelector('div')
console.dir(mydiv)
$('div')
console.dir($('div'))
// jQuery 对象只能使用jQuery方法，DOM对象则使用原生的 JavaScirpt属性和方法
// mydiv.style.display = 'none'
// mydiv.hide()这个无法实现
// $('div').style.display = 'none'这个无法实现
</script>
</body>
</html>
DOM对象与jQuery对象之间是可以相互转换的。
因为原生js 比jQuery更大，原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
- DOM对象转换为jQuery对象:$(DOM对象)
$('div')
- jQuery对象转换为DOM对象(两种方式)
$('div')[index] index是索引号
$('div').get(index) 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="../js文件/jquery.min.js"></script>
</head>
<body>
<video src="mov.mp4" muted></video>
<script>
// DOM对象转换为jQuery对象
//(1）我们直接获取视频，得到就是jQuery对象I
$('video')
// (2）我们已经使用原生js获取过来DOM对象
var myvideo = document.querySelector('video')
$(myvideo)
// jQuery对象转换为DOM对象
// myvideo.play()
$(myvideo)[0].play()
$(myvideo).get(0).play()
</script>
</body>
</html>
常用的API
jQuery选择器
原生S获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。
$(“选择器”)//里面选择器直接写CSS选择器即可，但是要加引号
基础选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(‘#id’) | 获取指定ID的元素 |
| 全选选择器 | $(‘*’) | 匹配所有元素 |
| 类选择器 | $(‘.class’) | 获取同一类class的元素 |
| 标签选择器 | $(‘div’) | 获取同一类标签的所有元素 |
| 并集选择器 | $(‘div,p,li’) | 选取多个元素 |
| 交集选择器 | $(‘li.current’) | 交集元素 |
层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“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="../js文件/jquery.min.js"></script>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<ul>
<li>lili</li>
<li>lili</li>
<li>lili</li>
</ul>
<script>
//1.获取四个div
$('div')
//2.设置颜色 jquery不能使用style
$('div').css('background','pink')
$('ul li').css('color','red')
</script>
</body>
</html>
jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(‘li:first’) | 获取第一个li元素 |
| :last | $(‘li:last’) | 获取最后一个li元素 |
| :eq(index) | $(‘li:eq(2)’) | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $(‘li:odd’) | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(‘li:even’) | 获取到的li元素中，选择索引号为偶数的元素 |
<!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="../js文件/jquery.min.js"></script>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<ul>
<li>lili</li>
<li>lili</li>
<li>lili</li>
</ul>
<script>
//1.获取四个div
$('div')
//2.设置颜色 jquery不能使用style
$('div').css('background','pink')
$('ul li').css('color','red')
$(function() {
$('div:first').css('color','red')
$('ul li:eq(2)').css('color','blue')
})
</script>
</body>
</html>
jQuery筛选方法（重点）
| 语法 | 用法 | 描述 |
|---|---|---|
| parent() | $(“li”).parent(); | 查找父级 |
| children(selector) | $(“ul”).children(“li”); | 相当于$(“u1>li”)，最近一级（亲儿子) |
| find(selector) | $(“ul”).find(“li”); | 相当于$("“ul li”),后代选择器 |
| siblings(selector) | $(“.first”).siblings(“li”); | 查找兄弟节点，不包括自己本身 |
| nextAll([expr]) | $(“.first”).nextAll(); | 查找当前元素之后所有的同辈元素 |
| prevtAll([expr]) | $(“.last”).prevtAll(); | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $(“div”).hasClass(‘protected’); | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
| eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
重点记住:parent() children() find() siblings() eq()
<!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>
<body>
<div class="gf">
<div class="father">
<div class="son">儿子</div>
</div>
</div>
<div class="nav">
<p>wsp</p>
<div>
<p>wspp</p>
</div>
</div>
<ol>
<li>我是ol 的li</li>
<li class="item">我是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>
</ul>
<script>
// 注意一下都是方法带括号
$(function() {
//父 parent()
console.log($('.son').parent());
//子
// (1)亲儿子 children(selector)
$(".nav").children('p').css('color','red');
//兄
$(function() {
//1．兄弟元素siblings除了自身元素之外的所有亲兄弟
$('ol .item').siblings('li').css('color','red')
// 2．第n个元素
// (1)我们可以利用选择器的方式选择
$("ul li:eq(2)").css('color','red')
// (2）我们可以利用选择方法的方式选择（推荐）
$("ul li").eq(2).css('color','red')
// 3．判断是否有某个类名
$("div:first").hasClass('current')
})
})
</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="../js文件/jquery.min.js"></script>
<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>
</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>
</ul>
<script>
$(function() {
// 鼠标经过
$('.nav>li').mouseover(function() {
// $(this) jQuery 当前元素 this不要加引号
// show() 显示元素
$(this).children("ul").show()
})
// 鼠标离开
$(".nav>li").mouseout(function() {
$(this).children("ul").hide();
})
})
</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="../js文件/jquery.min.js"></script>
</head>
<body>
<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",'')
// 链式编程
$(this).css('color','red').siblings().css('color','')
})
})
</script>
</body>
</html>
jQuery样式操作
jQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式。
-
参数只写属性名，则是返回属性值
$(this).css('color'); -
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css('color',"red"); -
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加号.
$(this).css('color':"red","font-size":"20px");
设置类样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
-
添加类
$("div").addClass("current"); -
移除类
$("div").removeClass("current") -
切换类
$("div").toggleClass("current")
<!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="../js文件/jquery.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transition: all 0.5s;
}
.current {
background-color: pink;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="current"></div>
<script>
$(function() {
// //1．添加类addc1ass()
// $("div").addClass("current")
// // 2．删除类 removeClass()
// $("div").removeClass("current")
// // 1．切换类 toggleClass()
// $("div").toggleClass("current")
$("div").click(function() {
$(this).toggleClass("current")
})
})
</script>
</body>
</html>
tab栏切换
点击上部的li，当前li添加current类，其余兄弟移除类。
点击的同时，得到当前li的索引号
让下部里面相应索引号的item显示，其余的item隐藏
<!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="../js文件/jquery.min.js"></script>
<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;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</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>
// 1.点击上部的li，当前li添加current类，其余兄弟移除类。
$(function() {
$(".tab_list li").click(function() {
$(this).addClass('current').siblings().removeClass("current")
// 2.点击的同时，得到当前li的索引号
var index = $(this).index()
console.log(index);
// 3.让下部里面相应索引号的item显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide()
})
})
</script>
</body>
</html>
类操作与className区别
原生JS中className会覆盖元素原先里面的类名。
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>
<style>
div{
width: 200px;
height: 200px;
margin: 100px auto;
transform: rotate(360deg);
}
</style>
<script src="../js文件/jquery.min.js"></script>
</head>
<body>
<div class="one"></div>
<script>
// var one = document.querySelector(".one")
// one.className = "two"
// $(".one").addClass("two") 这个addclass相当于追加类名不影响以前的类名
// $(".one").removeClass("two")
</script>
</body>
</html>
jQuery效果
jQuery给我们封装了很多动画效果，最为常见的如下:
| 显示隐藏 | 滑动 | 淡入淡出 | 自定义动画 |
|---|---|---|---|
| show() | slideDown() | fadeln() | animate() |
| hide() | slideUp() | fadeOut() | |
| toggle() | slideToggle() | fadeToggle() | |
| fadeTo() |
- 显示语法规范
show([speed,[easing],[fn]])
-
显示参数
( 1）参数都可以省略，无动画直接显示。
( 2 ) speed :三种预定速度之一的字符串(“slow”, "normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)。
( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
-
隐藏语法规范
hide([speed,[easing],[fn]])
-
显示参数
( 1）参数都可以省略，无动画直接显示。
( 2 ) speed :三种预定速度之一的字符串(“slow”, "normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)。
( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
( 4 ）fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
-
切换语法规范
toggle ([speed,[easing],[fn]])
-
显示参数
( 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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js文件/jquery.min.js"></script>
<style>
div{
width: 150px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function() {
$("button").eq(1).click(function() {
$("div").hide(1000,function() {
alert(1) //回调函数
})
})
$("button").eq(0).click(function() {
$("div").show(1000,function() {
alert(1) //回调函数
})
})
$("button").eq(2).click(function() {
//一般情况下，我们都不加参数直接显示隐藏就可以了
$("div").toggle(1000)
})
})
</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="../js文件/jquery.min.js"></script>
<style>
div{
width: 150px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$(function() {
$("button").eq(1).click(function() {
// 上拉滑动
$("div").slideUp(1000,function() {
alert(1) //回调函数
})
})
$("button").eq(0).click(function() {
// 下拉滑动
$("div").slideDown(1000,function() {
alert(1) //回调函数
})
})
$("button").eq(2).click(function() {
//一般情况下，我们都不加参数直接显示隐藏就可以了
$("div").slideToggle(1000)
})
})
</script>
</body>
</html>
事件切换
hover([over,]out)
(1 ) over:鼠标移到元素上要触发的函数(相当于mouseenter )
( 2 ) out:鼠标移出元素要触发的函数（相当于mouseleave )
<!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="../js文件/jquery.min.js"></script>
<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>
</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>
</ul>
<script>
$(function() {
// // 鼠标经过
// $('.nav>li').mouseover(function() {
// // $(this) jQuery 当前元素 this不要加引号
// // show() 显示元素
// // $(this).children("ul").show()
// $(this).children("ul").slideDown(500)
// })
// // 鼠标离开
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200)
// })
// 1.事件切换 hover就是鼠标经过和离开的复合写法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(500)
// },function() {
// $(this).children("ul").slideUp(200)
// })
// 2.事件切换 hover如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle(300)
})
})
</script>
</body>
</html>
动画队列及其停止排队方法
1.动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
2.停止排队
stop()
(1 ) stop(方法用于停止动画或效果。
(2)注意: stop(写到动画或者效果的前面，相当于停止结束上一次的动画。
淡入淡出效果
1.淡入效果语法规范
fadeIn([speed,[easing],[fn]])
2.淡出效果语法规范
fadeOut([speed,[easing],[fn]])
3.切换效果语法规范
fadeToggle([speed,[easing],[fn]])
4.渐进方式调整到指定的不透明度
fadeTo([speed,opacity,[easing],[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>
<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="../js文件/jquery.min.js"></script>
<script>
$(function() {
//鼠标进入的时候,其他的li标签透明度：0.5
$(".warp li").hover(function() {
$(this).siblings().stop().fadeTo(400,0.5)
},function() {
// 鼠标离开，其他li 透明度改为 1
$(this).siblings().stop().fadeTo(400,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>
自定义动画animate
语法
animate(params,[speed],[easing],[fn])
参数
( 1 ) params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)。
( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
王者荣耀手风琴效果
鼠标经过某个小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
}).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>
jQuery属性操作
所谓元素固有属性就是元素本身自带的属性，比如元素里面的href，比如元素里面的type.
1.获取属性语法
prop("属性")
2.设置属性语法
prop("属性","属性值")
设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
1. 获取属性语法
attr(''属性'') // 类似原生 getAttribute()
2. 设置属性语法
attr(''属性'', ''属性值'') // 类似原生 setAttribute()
改方法也可以获取 H5 自定义属性
数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
1. 附加数据语法
data(''name'',''value'') // 向被选元素附加数据
2. 获取数据语法
date(''name'') // 向被选元素获取数据
同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型
jQuery内容文本值
主要针对元素的内容还有表单的值操作。
1. 普通元素内容 html()（ 相当于原生inner HTML)
html() // 获取元素的内容
html(''内容'') // 设置元素的内容
2. 普通元素文本内容 text() (相当与原生 innerText)
text() // 获取元素的文本内容
text(''文本内容'') // 设置元素的文本内容
3. 普通元素文本内容 val() (相当与原生 innervalue)
val() // 获取元素的文本内容
val(''文本内容'') // 设置元素的文本内容
<!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="../js文件/jquery.min.js"></script>
</head>
<body>
<div>我是内容</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("113131")
</script>
</body>
</html>
jQuery元素操作
主要是遍历、创建、添加、删除元素操作。
遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
语法1
$("div").each(function(index,domEle) {xxx; })
1.each0方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2里面的回调函数有2个参数:index是每个元素的索引号; demEle是每个DOM元素对象，不是jquery对象
3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)
<!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="../js文件/jquery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// $("div").css("color",'red')
//如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大)
var arr = ["red",'green',"blue"]
var sum = 0
$("div").each(function(i,domEle) {
//回调函数第一个参数一定是索引号
// console.log(index)
// 可以自己指定索引号号名称
console.log(i);
// 回调函数第二个参数一定是dom元素对象
console.log(domELe);
$(domEle).css("color",arr[i])
sum += parseInt($(domEle).text())
})
// 1.each()方法遍历元素
})
</script>
</body>
</html>
语法2
$.each(object，function (index, element) { xxx; }）
-
$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
-
里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
<!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="../js文件/jquery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// $("div").css("color",'red')
//如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大)
var arr = ["red",'green',"blue"]
// var sum = 0
// $("div").each(function(i,domEle) {
// //回调函数第一个参数一定是索引号
// // console.log(index)
// // 可以自己指定索引号号名称
// console.log(i);
// // 回调函数第二个参数一定是dom元素对象
// console.log(domELe);
// $(domEle).css("color",arr[i])
// sum += parseInt($(domEle).text())
// })
// $.each() 方法遍历元素主要用于遍历数据，处理数据
// $.each($("div"),function(i,ele) {
// console.log(i)
// console.log(ele)
// })
$.each(arr,function(i,ele) {
console.log(i)
console.log(ele)
})
$.each({name : "andy",
age: 18},
function(i,ele) {
console.log(i) //输出是name age 属性名
console.log(ele) //属性值
})
})
</script>
</body>
</html>
创建、添加、删除元素
创建元素
语法
$("<li></li>")
添加元素
1.内部添加
element.append("内容")
把内容放入匹配元素内部最后面，类似原生appendChild。
2.外部添加
element.after("内容") //把内容放入目标元素后面
element.before("内容") //把内容放入目标元素前面
内部添加元素，生成之后，它们是父子关系。
外部添加元素，生成之后，他们是兄弟关系。
删除元素
element.remove() //删除匹配的元素(本身)
element.empty() //删除匹配的元素集合中所有的子节点
element.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="../js文件/jquery.min.js"></script>
</head>
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">原先的div</div>
<script>
$(function() {
// 1. 创建元素
var li = $("<li>后来的li</li>")
$("ul").prepend(li) //内容放入匹配元素内部最前面
// 2 添加元素
$("ul").append(li); //内容放入匹配元素内部最后面
// (2)外部添加
var div = $("<div>后来的</div>")
$(".test").after(div)
$(".test").before(div)
//3.删除
// $("ul").remove()
$("ul").empty()
$("ul").html("")
})
</script>
</body>
</html>
jQuery尺寸、位置操作
jQuery尺寸
| 语法 | 用法 |
|---|---|
| width()/height() | 取得匹配元素宽度和高度值只算width / height |
| innerWidth()/innerHeight() | 取得匹配元素宽度和高度值包含 padding |
| outerWidth()/outerHeight() | 取得匹配元素宽度和高度值包含padding . border |
| outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度值包含padding . borde、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="../js文件/jquery.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color:pink;
padding: 10px;
border: 15px solid red;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<script>
$(function() {
console.log($("div").width())
// console.log($("div").width(300))
console.log($("div").height())
console.log($("div").innerWidth())
console.log($("div").innerHeight())
console.log($("div").outerWidth())
console.log($("div").outerHeight())
console.log($("div").outerWidth(true))
console.log($("div").outerHeight(true))
})
</script>
</body>
</html>
jQuery位置
位置主要有三个:offset() . position() .scrollTop()/scrollLeft()
1.offset(设置或获取元素偏移
- offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
- 该方法有2个属性left、 top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。
- 可以设置元素的偏移: offset([ top: 10, left: 30 );
2.position()获取元素偏移
- position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
- 这个方法只能获取不能设置偏移
3.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>
<script src="../js文件/jquery.min.js"></script>
<style>
body {
height: 2000px;
}
.back {
position: fixed;
width: 50px;
height: 50px;
background-color: pink;
right: 30px;
bottom: 100px;
display: none;
}
.container {
width: 900px;
height: 500px;
background-color: skyblue;
margin: 400px auto;
}
</style>
</head>
<body>
<div class="back">返回顶部</div>
<div class="container">
</div>
<script>
$(function() {
$(document).scrollTop(100)
var box = $(".container").offset().top
// scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧**
$(window).scroll(function () {
console.log($(document).scrollTop())
if($(document).scrollTop() >= box){
$(".back").fadeIn()
}else{
$(".back").fadeOut()
}
})
$(".back").click(function() {
// $(document).scrollTop(0)
// 带动画效果
// 核心原理:使用animate动画返回顶部。
// animate动画函数里面有个scrollTop属性，可以设置位置
// 但是是元素做动画，因此$(“body,html" ).animate({scrollTop: O)
$("body,html").stop().animate({
scrollTop:0
// $("document").stop().animate({
// scrollTop:0 不能是文档而是 html和body元素做动画
})
})
})
</script>
</body>
</html>
jQuery事件
目标：
- 能够说出4种常见的注册事件
- 能够说出on绑定事件的优势
- 能够说出jQuery事件委派的优点以及方式
- 能够说出绑定事件与解绑事件
jQuery事件注册
单个事件注册
语法
Element.事件(function() {})
$("div").click(function(){事件处理程序})
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
jQuery事件处理
on() 绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法
element.on(events,[selector],fn)
-
events:一个或多个用空格分隔的事件类型，如"click"或"keydown”。
-
selector:元素的子元素选择器。
-
fn:回调函数即绑定在元素身上的侦听函数。
on() 方法优势1:
可以绑定多个事件,多个处理事件处理程序。
$(“div”).on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});
如果事件处理程序相同
$(“div”).on(“mouseover mouseout”, function() {
$(this).toggleClass(“current”);
});
实现事件委托
on0方法优势2∶
可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$("ul").on("click",'li',function() {
// click是绑定在ul身上的，但是触发的对象是ul里面的小li
alert("111")
})
在此之前有bind(), live() delegate(等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
on()方法优势3∶
动态创建的元素，click()没有办法绑定事件，on)可以给动态生成的元素绑定事件
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
<script src="../js文件/jquery.min.js"></script>
</head>
<body>
<ol></ol>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<script>
$(function() {
// 1.单个事件注册
// $("div").click(function() {
// $(this).css("background",'red')
// })
// $("div").mouseout(function() {
// $(this).css("background",'pink')
// })
// 2.事件处理on
// $("div").on({
// mouseenter:function() {
// $(this).css("background",'red')
// },
// click: function() {
// $(this).css("background",'skyblue')
// },
// mouseleave:function() {
// $(this).css("background",'pink')
// }
// })
$("div").on("mouseover mouseout",function() {
$(this).toggleClass("current")
})
// (2)on可以实现事件委托
// $("ul li").click()
$("ul").on("click",'li',function() {
// click是绑定在ul身上的，但是触发的对象是ul里面的小li
alert("111")
})
// on可以给未来动态创建的元素绑定事件
// $("ol li").click(function() {
// alert('11')
// })
$("ol").on("click","li", function() {
alert("111")
})
var li = $("<li>后来创建的li</li>")
$("ol").append(li)
})
</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="../js文件/jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script>
$(function() {
$(document).on("click",function() {
console.log("点击了document")
})
$("div").on("click",function(event) {
// console.log(event)
console.log("点击了div")
event.stopPropagation()
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>
jQuery 拷贝对象
如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法
语法：
$.extend([deep], target, object1, [objectN])
-
deep: 如果设为true 为深拷贝， 默认为false 浅拷贝
-
target: 要拷贝的目标对象
-
object1:待拷贝到第一个对象的对象。
-
objectN:待拷贝到第N个对象的对象。
-
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
-
深拷贝，前面加true， 完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。
<!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="../js文件/jquery.min.js"></script>
<script>
$(function() {
// var targetObj = {}
// var obj = {
// id : 1,
// name : "andy"
// }
// $.extend(targetObj,obj)
// console.log(targetObj)
// var targetObj = {
// id : 0
// }
// var obj = {
// id : 1,
// name : "andy"
// }
// // 会覆盖targetObj里面原来的数据
// $.extend(targetObj,obj)
// console.log(targetObj)
var targetObj = {
id : 0,
msg : {
sex : "男"
}
}
var obj = {
id : 1,
name : "andy",
msg : {
age : 18
}
}
// 会覆盖targetObj里面原来的数据
// $.extend(targetObj,obj)
// console.log(targetObj)
// // 1.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象
// targetObj.msg.age = 20
// console.log(targetObj)
// 2.完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。
$.extend(true,targetObj,obj)
console.log(targetObj)
targetObj.msg.age = 20
console.log(targetObj) //msg: {sex: '男', age: 20}
console.log(obj)
})
</script>
</head>
<body>
</body>
</html>
jQuery 多库共存
问题概述：
jQuery使用 作为标示符，随着 j Q u e r y 的流行 , 其他 j s 库也会用这 作为标示符，随着jQuery的流行,其他 js 库也会用这 作为标示符，随着jQuery的流行,其他js库也会用这作为标识符， 这样一起使用会引起冲突。
客观需求：
需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存
jQuery 解决方案：
- 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(‘‘div’’)
- jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();
jQuery 插件
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。
jQuery 插件常用的网站：
-
jQuery 插件库 http://www.jq22.com/
-
jQuery 之家 http://www.htmleaf.com/ (推荐，免费开源)
jQuery 插件使用步骤：
-
引入相关文件。（jQuery 文件 和 插件文件）
-
复制相关html、css、js (调用插件)。
jQuery 插件演示：
-
瀑布流
-
图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片。
我们使用jquery 插件库 EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面
-
全屏滚动（fullpage.js）
gitHub： https://github.com/alvarotrigo/fullPage.js
中文翻译网站： http://www.dowebok.com/demo/2014/77/
bootstrap JS 插件：
bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js插件使用 ，也必须引入jQuery 文件。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
