jQuery 介绍
JavaScript 库
即 library,是一个封装好的特定的集合(方法和函数)
常见的JavaScript 库:jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等
jQuery的概念
jQuery 是一个快速、简洁的 JavaScript 库
把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质: 就是学习调用这些函数(方法)。
jQuery的优点
1. 轻量级。核心文件才几十kb,不会影响页面加载速度。
2. 跨浏览器兼容,基本兼容了现在主流的浏览器。
3. 链式编程、隐式迭代。
4. 对事件、样式、动画支持,大大简化了DOM操作。
5. 支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等。
6. 免费、开源。
<script>
// 1. $ 是jQuery的别称(另外的名字)
// $(function() {
// alert(11)
// });
jQuery(function() {
// alert(11)
// $('div').hide();
jQuery('div').hide();
});
// 2. $同时也是jQuery的 顶级对象
</script>
在这里插入代码片
顶级对象$和jQuery是一样的
jQuery 的基本使用
jQuery 的下载
jQuery的官网地址: [https://jquery.com/](https://jquery.com/),
版本差别
1x :兼容 IE 678 等低版本浏览器, 官网不再更新
2x :不兼容 IE 678 等低版本浏览器, 官网不再更新
3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的版本
jQuery中的顶级对象$
$是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用 $ 。
$是jQuery的顶级对象,相当于原生JavaScript中的 window
把元素利用$包装成jQuery对象,就可以调用jQuery 的方法
jQuery 对象和 DOM 对象
jQuery 方法和原生JS获取的元素是不一样的
1. 用原生 JS 获取来的对象就是 DOM 对象
2. jQuery 方法获取的元素就是 jQuery 对象。
3. jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)
只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。
jQuery 对象和 DOM 对象转换
把DOM对象转换为 jQuery 对象:$(Dom对象)
jQuery 对象转换为 DOM 对象: $('div')[0]
jQuery 对象转换为 DOM 对象:$('div').get(0)
知识铺垫
jQuery 设置样式
$('div').css('属性', '值')
jQuery 里面的排他思想
当前元素设置样式,其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
(
t
h
i
s
)
.
s
i
b
l
i
n
g
s
(
)
.
c
s
s
(
“
c
o
l
o
r
”
,
””
)
;
隐式迭代遍历内部
D
O
M
元素(伪数组形式存储)的过程就叫做隐式迭代。页面中所有的
d
i
v
全部隐藏,不用循环操作:
(this).siblings(). css(“color”,””); 隐式迭代 遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。 页面中所有的div全部隐藏,不用循环操作:
(this).siblings().css(“color”,””);隐式迭代遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。页面中所有的div全部隐藏,不用循环操作:(‘div’).hide();
链式编程
$(this).css(‘color’, ‘red’).sibling().css(‘color’, ‘’);
<script src="jquery.min.js"></script>
<script>
// $('div').hide();
// 1. 等着页面DOM加载完毕再去执行js 代码
// $(document).ready(function() {
// $('div').hide();
// })
// 2. 等着页面DOM加载完毕再去执行js 代码
$(function() {
$('div').hide();
})
</script>
在这里插入代码片
jQuery 选择器
基础选择器
$("#id) 获取指定D的元素
$("*") 匹配所有元素
$(".class")获取同一类class的元素
$("div") 获取同一类标签的所有元素
$("div,p, i")选取多个元素
$("li.current") 交集元素
层级选择器
$("ul>1i");使用>号,获取亲儿子层级的元素;注意,井不会获取孙子层级的元素
$("u1 1i”);使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等
筛选选择器
$("li:first") 获取第一个li元素
$("li:last") 获取最后一个li元素
$("li:eq(2)") 获取到的li元素中,选择索引号为2的元素,索引号index从0开始
$("li:odd") 获取到的li元素中,选择索引号为奇数的元素
$("li:even") 获取到的li素中,选择索引号为偶数的元素
筛选方法[{"src":"xap:resources/3a2aa3e85535b8d2ea295b4ec41ac7999b1365b637ac26384e5548e48a1651f9.png","width":626,"height":297}]
<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'); // $('div')是一个jQuery 对象
$('span'); // $('span')是一个jQuery 对象
console.dir($('div'));
// 3. jQuery 对象只能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 属性和方法
// myDiv.style.display = 'none';
// myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
// $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
</script>
<video src="mov.mp4" muted></video>
<script>
// 1. DOM对象转换为 jQuery对象
// (1) 我们直接获取视频,得到就是jQuery对象
// $('video');
// (2) 我们已经使用原生js 获取过来 DOM对象
var myvideo = document.querySelector('video');
// $(myvideo).play(); jquery里面没有play 这个方法
// 2. jQuery对象转换为DOM对象
// myvideo.play();
$('video')[0].play()
$('video').get(0).play()
</script>
jQuery 样式操作
操作 css 方法
参数只写属性名,则是返回属性值 :$(this).css('color');
参数是属性名,属性值,逗号分隔,是设置一组样式: $(this).css("color", "red");
参数可以是对象形式,方便设置多组样式 :$(this).css({ "color":"white","font-size":"20px"});
设置类样式方法
作用等同于以前的 classList,可以操作类样式, 注意操作类里面的参数不要加点
添加类 : $("div").addClass("current");
删除类 :$("div").removeClass("current");
切换类 :$("div").toggleClass("current");
5:jQuery 效果
显示隐藏
显示:show([speed, [easing],[fn]])
隐藏:hide([speed, [easing],[fn]])
切换显示隐藏:toggle([speed, [easing],[fn]])
参数
参数都可以省略,无动画直接显示。
speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数数
easing:(Optional) 用来指定切换效果,默认是 "swing",可用参数"linear"
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
滑入滑出
下滑:slideDown([speed,[easing],[fn]])
上滑:slideUp([speed,[easing],[fn]])
切换上滑夏欢:slideToggle([speed,[easing],[fn]])
淡入淡出
淡入:fadeIn([speed,[easing],[fn]])
淡出: fadeOut([speed,[easing],[fn]])
切换淡入淡出:fadeToggle([speed,[easing],[fn]])
渐进方式:fadeTo([[speed],opacity,[easing],[fn]])
opacity透明度必须写,取值0~1之间
参数
参数都可以省略,无动画直接显示。
speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数数
easing:(Optional) 用来指定切换效果,默认是 "swing",可用参数"linear"
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
自定义动画
animate(params, [speed],[easing], [fn])
params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法,如 borderLeft,其余参数都可以省略。
speed:三种预定速度之一的字符串("slow","normal",or "fast”)或表示动画时长的毫秒数值
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数 "linear"
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
停止动画队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
stop() 方法用于停止动画或效果。
stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画
每次使用动画之前,先调用 stop() ,在调用动画
事件切换
hover([over,]out)
over:鼠标移到元素上要触发的函数(相当于mouseenter)
out:鼠标移出元素要触发的函数(相当于mouseleave)
如果只写一个函数,则鼠标经过和离开都会触发它
<!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();
});
})
</script>
</body>
</html>
所有的动画效果都需要添加stop()方法,可以有效防止动效触发太快导致动画队列带来的视觉效果