第一章 jQuery 概述
1-1 JavaScript库
仓库 : 把很多东西放到这个仓库里面,找东西只需要在仓库里面找到就可以
JavaScript库 : 即library,是一个封装好的特定的集合(方法和函数)。
- 封装了很多预先定义好的函数在里面,比如动画animate、hide、show;比如获取元素等
- JS文件 ,对原生js代码进行封装;
- 比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)
常见的JavaScript库:
jQuery
Prototype
YUI
Dojo
Ext JS
移动端的zepto
这些库都是对原生JavaScript的封装,内部都是用javaScript实现的,主要学习的jQuery
1-2 jQuery概述 :
- jQuery是一个快速、简洁的javaScript库,设计的宗旨是 “write Less, Do More”
- j 就是 javaScript ; Query 查询 ; 查询 js
- 把js里面的DOM操作封装 , 可以快速查询使用里面的功能
- jQuery 封装了JavaScript 常用的功能代码,优化了DOm操作、事件处理 、 动画设计 和Ajax 交互
- jQuery 的优点 :
- 轻量级,核心文件才几十kb , 不会影响页面加载速度
- 跨浏览器兼容, 基本兼容了现在主流的浏览器
- 链式编程 、 隐式迭代
- 对事件、样式 、 动画支持,大大简化了DOM操作
- 支持插件扩展开发,有着丰富的第三方的插件,例如 : 树形菜单 、 日期控件 、 轮播图等
- 免费、开源
1-3 jQuery的基本使用–入口函数(引入js)以及顶级对象$
- 1x : 兼容 IE 678 等低版本浏览器,官网不再更新
- 2x : 不兼容,不更新 低版本jQuery下载
- 3x : 不兼容,维护ing
先有Dom元素才能有JS代码的解决方法 : 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery帮我们完成了封装【相当于原生js中的DOMContentLoaded】;不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕后才能执行内部代码
$ (function () {//此处是页面DOM加载完成的入口})
推荐$(document).ready(function() {
//此处是页面DOM加载完成的入口})`
1
2
3
4
5
6
7
8
9
10
11
12<script>
//$('div').hide();
//1. 等着页面DOM加载完毕再去执行js代码
$(document).ready(function() {
$('div').hide();
})
//2. 等着DOM加载完毕再去执行js代码
$(function() {
$('div').hide();
})
</script>
<div></div>顶级对象$
$是jQuery的别称 (在代码中可以使用jQuery 代替$ )
1
2
3$(function() {
alert(11)
});1
2
3
4
5jQuery(function() {
alert(11)
//$('div').hide();
jQuery('div').hide();
})$同样是jQuery的 顶级对象,相当于原生js中的window, 把元素利用$包装成jQuery对象,就可以调用jQuery的方法
1-4 jQuery 对象 和DOM对象
用原生JS获取来的对象就是DOM对象
1
2
3
4<script>
var myDiv = document.querySelector('div');
log(myDiv);
</script>jQuery对象 : 用jQuery方式获取来的对象就是jQuery对象
对$把DOM元素进行了包装
```HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2. jQuery 对象只能使用 jQuery 方法, DOM 对象 则使用原生的 JavaScript 属性和方法
```HTML
<div></div>
<span></span>
<script>
var muDiv = document.querySelector('div'); //muDiv是DOM对象
var
muDiv.style.display = 'none';
XXXmuDiv.hide();XXX //这是错的,dom对象不能使用jquery里面的hide方法
$('div').style.display = 'none'; //这个$('div')是一个jQuery对象,不能使用原生的js属性和方法
</script>
- jQuery对象和DOM对象
- DOM对象和jQuery对象之间是可以相互转换的
- 原生js比jQuery更大,原生的一些属性和方法没被封装,需要用这些属性和方法把jQUery对象转换为DOM对象才能使用
- DOM对象与jQuery对象相互转换 :
- DOM对象转换成jQuery对象 :
$(DOM对象)
- jQuery对象转换成DOM对象(两种方式)
$('div')[index] //index是索引号
$('div').get(index) //index是索引号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<body>
<video src = "nov.mp4"></video>
<script>
//1. 下面这是直接获取视频,得到jQuery对象
$('video');
//2. 使用原生js获取DOM对象
var myvideo = document.querySelector('video');
//3. DOM对象转换成jQuery对象
$(myvideo);
$(myvideo).play(); //jQuery里面没有play这个方法
//4. jQuery对象转换成DOM对象
myvideo.play();
$('video')[0].play();
$('video').get(0).play;
</script>
</body> - DOM对象转换成jQuery对象 :
第二章 jQuery常用API导读
- 写出常用的jQuery选择器
- 操作jQuery样式
- 写出常用的jQuery动画
- 操作jQuery属性
- 操作jQuery元素
- 操作jQuery元素尺寸、位置
2-1 jQuery选择器
原生JS获取元素方式很多,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准
$("选择器") //里面选择器直接写CSS选择器即可,但是要加以引导
名称 用法 描述 ID选择器 $(“#id”) 获取指定ID元素 全选选择器 $(“*”) 匹配所有元素 类选择器 $(“.class”) 获取同一类class的元素 标签选择器 $(“div”) 获取同一类标签的所有元素 并集选择器 $(“div,p,li”) 选取多个元素 交集选择器 $(“div.current”) 交集元素 子代选择器 $(“ul>li”); 新儿子层级的元素 后代选择器 $(“ul li”); 使用空格,获取ul下的所有li元素,包括孙子
jQuery隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<div>惊喜不,意外不</div>
<div>惊喜不,意外不</div>
<div>惊喜不,意外不</div>
<div>惊喜不,意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
// 1. 获取四个div元素
console.log($("div"));
// 2. 给四哥div设置背景颜色为粉色,jQuery对象没有style
$("div").css("background", "pink");
//3. 隐式迭代就是把匹配的所有元素内部进行遍历循环,给每一个元素添加css这个方法
$("ul li").css("color", "red");
</script>
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元素中,选择索引号为偶数的元素 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() 查找当前元素之后所有的同辈元素 preventAll([expr]) $(“.last”).prevAll() 查找当前元素之前所有的同辈元素 hasClass(class) $(‘div’).hasClass(“protected”) 检查当前的元素是否含有某个特定的类,如果有,返回true eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始
重点记住: parent(),,,children(),,,find(),,,,siblings(),,,,eq()
2-2 案例
新浪下拉菜单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: 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 li {
border-bottom: 1px solid coral;
border-left: 1px solid coral;
}
.nav ul {
border-right: 1px solid coral;
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="">微博</a>
<ul>
<li><a href="">私信1</a></li>
<li><a href="">私信2</a></li>
<li><a href="">私信3</a></li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li><a href="">私信1</a></li>
<li><a href="">私信2</a></li>
<li><a href="">私信3</a></li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li><a href="">私信1</a></li>
<li><a href="">私信2</a></li>
<li><a href="">私信3</a></li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li><a href="">私信1</a></li>
<li><a href="">私信2</a></li>
<li><a href="">私信3</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
//鼠标经过
$(".nav>li").mouseover(function() {
// $(this) jQuery 当前元素 this不加引号
$(this).children("ul").show();
});
//鼠标离开
$(".nav>li").mouseout(function() {
$(this).children("ul").hide();
})
})
</script>jQuery排他思想
1
2
3
4
5
6
7
8
9
10
11<script>
$(function() {
// 1. 隐式迭代1111,给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代2222
$(this).siblings("button").css("background", "");
})
})
</script>淘宝服饰精品案例分析
- 核心原理 :鼠标经过左侧盒子某个小li,就让内容盒子相对应图片显示,其余的图片隐藏
- 需要得到当前小li的索引号,就可以显示对应索引号的图片
- jQuery得到当前元素索引号
$(this).index( )
- 中间对应图片,可以通过
eq(index)
方法去选择 - 显示元素
show()
,隐藏元素hide()
tab栏切换
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍1</li>
<li>商品介绍2</li>
<li>商品介绍3</li>
<li>商品介绍4</li>
<li>商品介绍5</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display:block;">edwedsede1defer1cdfjcn1</div>
<div class="item">edwedsede2defer2cdfjcn2</div>
<div class="item">edwedsede3defer3cdfjcn3</div>
<div class="item">edwedsede4defer4cdfjcn4</div>
<div class="item">edwedsede5defer5cdfjcn5</div>
</div>
</div>
<script>
$(function() {
//1. 点击上部的哩,当前的li 添加current类,其余兄弟移除类
$(".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>
##### 2-3 jQuery链式编程
1. 例如:
```html
<script>
$(function() {
// 1. 隐式迭代1111,给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代2222
$(this).siblings("button").css("background", "");
// 链式编程
$(this).css('color', 'blue').siblings("button").css("color", "");
})
})
</script>- 链式编程就是为了节省代码量
- 使用链式编程一定要注意是哪个对象执行样式
2-4 jQuery样式操作
- 使用css
- 操作类名
修改样式css方法
样式较为简单 : 使用css方法来修改简单元素样式
- 也可以操作类,修改多个样式
参数只写属性名, 则是返回属性值
1
$(this).css("color");
参数是属性名,属性值,逗号分隔,是设置遗族样式,属性必须加引号,值如果是数字可以不跟单位和引号
1
2$(this).css("color","red");
//$(this).css("width","300px");参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性名可以不加引号,属性值要加
1
2
3
4
5
6$(this).css({"color":"white","font-size":"30px"});
//$("div").css({
width: 200,
height: 200,
backgroundColor: "red";
})
设置类样式方法
等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点
```HTMl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
4. 切换类(案例:旋转之后变色)
```html
<style>
div {
width: 200px;
height: 200px;
margin: 200px auto;
background-color: pink;
transition: all .5s;
}
.current {
background-color: red;
transform: rotate(360deg);
}
</style>
<script src="../jquery.min.js"></script>
</head>
<body>
<div class="current"></div>
<script>
$(function() {
$("div").click(function() {
$(this).toggleClass("current");
})
})
</script>
2-5 jQuery类操作和className区别
- 类操作与className区别:
原生JS中className会覆盖元素原先里面的类名
jQuery里面类操作只是对指定类进行操作,不影响原先的类名
1
2
3
4
5
6
7
8<div class="one"></div>
<script>
// var one = document.querySelector(".one");
// one.className = "two";
//jQuery操作类
$(".one").addClass("two");
$(".one").removeClass("two");
</script>
2-6 jQuery效果
jQuery封装了很多动画效果
- 显示隐藏 :
show() ,,, hide() ,,,, toggle()
- 滑动 :
slideDown(),,,slideUp(),,,,slideToggle()
- 淡入淡出 :
fadeln(),,,fadeOut(),,,fadeTOggle(),,,, fadeTo()
- 自定义动画 :
animate()
- 显示隐藏 :
显示隐藏效果(太丑了,只用于显示和隐藏,参数基本不用):
show([speed , [easing], [fn]])
hide([speed , [easing], [fn]]);
toggle
([speed , [easing], [fn]]);参数: 参数都可以省略,无动画直接显示
- speed :三种预定速度之一的字符串 (”slow” , “normal” , “fast”)或表示动画时长的毫秒数
- easing : (Optional) 用来指定切换效果 ,默认”swing“,,可用参数 ”linear“
- fn : 回调函数,在动画完后曾时执行的函数, 每个元素执行一次
```html
<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, "linear", function() { // alert(0); }) }) $("button").eq(2).click(function() { $("div").toggle(1000); }) }) </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
3. 滑动效果:
`slideDown([speed , [easing], [fn]])`
`slideUp([speed , [easing], [fn]]); //上滑动`
`slideToggle([speed , [easing], [fn]]); //滑动切换`
- 参数: 参数都可以省略,无动画直接显示
- speed :三种预定速度之一的字符串 ("slow" , "normal" , "fast")或表示动画时长的毫秒数
- easing : (Optional) 用来指定切换效果 ,默认”swing“,,可用参数 ”linear“
- fn : 回调函数,在动画完后曾时执行的函数, 每个元素执行一次
- ```html
<script>
$(function() {
// //鼠标经过
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 当前元素 this不加引号
// $(this).children("ul").show();
// });
// //鼠标离开
// $(".nav>li").mouseout(function() {
// $(this).children("ul").hide();
// })\
// //鼠标经过和离开的复合效果
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// },
// function() {
// $(this).children("ul").slideUp(200);
// })
//还有更强复合效果
//事件切换 hover 如果只写一个函数, 那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
$(this).children("ul").slideToggle();
})
})
</script>
淡入淡出的方法:
fadeIn([speed , [easing], [fn]])
fadeOut
([speed , [easing], [fn]]);
fadeToggle
([speed , [easing], [fn]]);- 渐进方式调整到指定的不透明度
fadeTo([speed] ,opacity, [easing], [fn]); //speed和透明度必须得写
$("div").fade(1000, 0.5);
案例 : 突出显示
1
2
3
4
5
6
7
8
9
10
11<script>
$(function() {
//鼠标进入,其他的img透明度 0.5
$(".center img").hover(function() {
$(this).siblings().stop().fadeTo(400, .5);
}, function() {
$(this).siblings().stop().fadeTo(400, 1);
})
//鼠标离开,其他img透明度 1
})
</script>
2-7 动画队列及其停止排队方法
动画或效果队列
- 动画或者效果一旦触发就会执行,如果多次触发, 就造成多个动画或者效果排队执行
停止排队
stop()
stop()方法用于停止动画或效果
注意: stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画
```html
$(“.nav>li”).hover(function() {$(this).children("ul").stop().slideToggle(); })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
##### 2-8 自定义动画 animate
1. 语法: `animate(params , [speed] , [easing] , [fn]);`
- params :想要更改的样式属性,以对象形式传递,**必须写**。属性名可以**不带**引号,**如果是复合属性则需要采用驼峰命名法: borderLeft。**
- 其余参数都可以省略
2. 案例:
```html
<button>动起来</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
}, 500);
})
})
</script>
王者荣耀的手风琴案例(折叠卡片)
- 鼠标经过某个小li有两步操作:
- 当前小li宽度变为224px,同时里面的小图片淡出,大图片淡入
- 其余兄弟小li宽度变为69px,小图片淡入,大图片淡出
1 | 这好难,看都没看懂,这哪能整出来啊?? |
第三章 jQuery属性操作
3-1 获取以及设置元素的属性值
3-1(1)设置或获取元素固有属性值 prop()
获取属性值 :所谓元素固有属性就是元素本身自带的属性,比如
<a>
元素里面的href- 语法:
element.prop("属性名");
- 语法:
设置属性语法 :
1
prop("属性" , "属性值");
**例子 : **
1
2
3
4
5
6
7
8
9
10
11
12<a href="mmmmm">dnejrfrbf</a>
<input type="checkbox" checked>
<script>
//1. element.prop("属性名") 获得固有属性值
console.log($("a").prop("href")); //mmmmm
$("input").change(function() {
console.log($(this).prop("checked")); //true/false
})
//2. 设定属性值
var title = $("a").prop("title", "我们都挺好");
console.log(title);
</script>3-1(2)设置或获取元素自定义属性值
attr()
,该方法也可以获取H5 自定义属性获取属性语法:
1
attr("属性"); //类似原生getAttribute()
设置属性语法
1
attr("属性","属性值"); //类似原生setAttribute()
例子 :
1
2
3
4
5
6
7
8
9<div index="1" data-index="3">wifub</div>
<script>
$(function() {
// 元素的自定义属性, 通过 attr()获取属性值
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
})
</script>
3-1(3) 数据缓存 data()
data()方法可以在指定的元素上存取数据, 并不会修改DOM元素结构 【在DOM中看不见属性以及属性值】。 一旦页面刷新 , 之前存放的数据将被移除
添加以及获取数据语法
1
2date("name","value"); //向被选元素添加数据
date("name") //获取数据还可以读取HTML5自定义属性 data-index , 得到的是数字型