目录
⛽️ 好好学习 天天向上 ⛽️
前言
在学习javascript后,有很多同学认为大量的js代码非常的繁琐,做一个轮播图自己一个一个敲,效率太低啦。好消息好消息,今天给大家讲解一个期待已久的jquery,前端的快乐不就来了吗
在讲解前呢,给大家先做一个知识的铺垫:
javascript库 :即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中封装了很多预先定义好的函数在里面,比如动画animate、hide、show、获取元素等。那么简单理解:就是一个js文件,里面对我们原生js代码进行了封装,存放到里面,这样我们可以快速高效的使用这些封装好的功能了 ,比如:jquery库,就是为了快速的操作DOM,里面基本都是函数(方法)
常见的一些库:
- jQuery
- Prototype
- YUI
- Dojo
- Ext JS
- 移动端的zepto
一、jQuery概念
jQuery是一个快速、简介的js库
jQuery封装了js常用的功能代码,优化了DOM操作、事件处理、动画设计、Ajax交互
那么我们的jQuery到底是写在哪里呢?没错!写在script标签里 😊
jQuery优点:
- 轻量级。核心文件才几十kb,不会影响页面加载速度
- 跨浏览器兼容。基本兼容了现在主流的浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持、大大简化了DOM操作
- 支持插件扩展开发。有着丰富的第三方的插件 比如树形菜单、日期空间、轮播图等
- 免费、开源
二、jQuery基本使用
2.1、基本使用
jQuery下载官网:https://jquery.com/
在头部引入下载好的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="./jQ/jQuery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<script>
$(function(){
$('div').show();
})
</script>
<div></div>
</body>
</html>
2.2、jQuery的入口函数
有另种写法 ,博主推荐第一种哟 简单 🍳
- $(function(){
.... //此处是页面DOM加载完成的入口
})
- $(document).ready(function(){
.... //此处是页面DOM加载完成的入口
});
与原生js中的入口函数区别:
- 和DOMContentLoaded一样是等页面主要的内容加载完后再执行jQuery代码
- 但是与load事件是不一样的,load是等页面所有的内容加载完后再执行
2.3、jQuery的顶级对象
jquery的顶级对象是: $
$相当于jQuery 两者都是可以互换使用
含义:把元素利用$包装成jQuery对象,就可以调用jQuery的方法
<body>
<div></div>
<script>
$(function () {
$(document).on("click", function () {
alert(8)
})
jQuery("div").on("click", function (event) {
alert(1);
event.stopPropagation(); //阻止冒泡。表示文档不会被点击
})
})
</script>
</body>
2.4、DOM对象和jQuery对象
区别:
- 它们获取的对象是不一样的,jQuery获取过来的对象是一种伪数组的形式存储的
- jQuery对象只能使用jQuery的属性和方法,DOM对象只能使用js的属性和方法
- 用原生js获取来的对象就是DOM对象、jQuery方法获取的元素就是jQuery对象
<body>
<div></div>
<script>
$(function () {
console.dir($("div"));
console.dir(document.querySelector("div"));
})
</script>
</body>
显示结果:
DOM对象和jQuery对象是可以相互转换的 :
- DOM对象转换为jQuery对象
将用DOM方法获取过来的元素放在 $()的括号里面 ,此时的Mydiv就可以使用jQuery的属性和方法了
<div></div>
<script>
var Mydiv = document.querySelector('div');
$(Mydiv).hide();
</script>
- jQuery对象转换为DOM对象
转换为DOM对象后就可以使用DOM对象里面的属性和方法了
方法一:
$('div')[index] index是索引号
$('div')[0];
方法二:
$('div').get(index) index是索引号
$('div').get(0);
三、jQuery选择器 (重点)
语法:$(“选择器”) // 里面选择器直接写css选择器即可,但是要加引号
3.1、初级选择器
ID选择器 | $("#id") | 获取指定id的元素 |
全选选择器 | $("*") | 匹配所有元素 |
类选择器 | $(".class") | 获取同一类class的属性 |
标签选择器 | $("div") | 获取同一类标签的所有元素 |
并集选择器 | $("div, p ,ul") | 获取多个元素 |
交集选择器 | $("li.current") | 交集元素 |
3.2、层级选择器
子代选择器 | $("ul>li") | 获取亲儿子层级的元素 |
后代选择器 | $("ul li") | 获取ul下的所有li元素 |
3.3、筛选选择器
:first | $("li:first") | 获取第一个li元素 |
:last | $("li:last") | 获取最后一个li元素 |
:eq(index) | $("li:eq(2)") | 获取li元素中,选择索引号为2的元素,索引号index从0开始 |
:odd | $("li:odd") | 获取li元素中,选择索引号为奇数的元素 |
:event | $("li:event") | 获取li元素中,选择索引号为偶数的元素 |
3.4、筛选方法获取元素
parent() | $("li").parent() | 查找父级 也就是亲父亲 |
children() | $("ul").children("li") | 查找的是最近一级 也就是亲儿子 |
find() | $("ul").find("li") | 后代选择器 如果里面都不写的话就是选择所有后代 |
siblings() | $(".first").siblings() | 查找兄弟节点,不包括自己本身,括号里面不写就是查找所有的兄弟元素 |
nextAll([ ]) | $(".first").nextAll() | 查找当前元素之后所有的同辈元素 |
prevt([ ]) | $(".first").prevtAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $("div").hasClass("protected") | 检查当前元素是否含有某个特定的类,如果有,则返回true |
eq(index) | $("li").eq(2) | 相当于$("li:eq(2)"),获取指定的元素 |
3.5、补充
:checked选择器 | :checked查找被选中的表单元素 | $(".j-checked:checked").length 返回的是有几个表单被选中了 |
parents("选择器") | 可以返回指定祖先元素 | $("li").parents(".box") 查找的是li的ul的亲兄弟 |
四、两个重要的思想(重点)
4.1、jQuery隐式迭代
给匹配到的所有元素进行循环遍历,执行相应的方法,相当于jQuery已经给我们做了循环这一步,而不用我们再进行循环遍历,大大的简化了我们的操作
$("div").css('bacground','pink'); // 获取过来的所有div盒子背景颜色都变成了粉色
4.2、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="./jQ/jQuery.min.js"></script>
</head>
<body>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<script>
//1、隐式迭代 给所有的按钮都绑定了点击事件
$('button').click(function () {
$(this).css("background", "pink");
//2、通过隐式迭代,将当前点击的元素的兄弟元素的背景设置为空
$(this).siblings('button').css("background", "");
})
</script>
</body>
</html>
五、jQuery链式编程及样式操作
5.1、链式编程
链式编程就是减少了代码量
就比如上面的排他思想的例子可以简写成
$(this).css("color","red").sibling().css("color",""); //表示将当前元素的字体设置为红色,其兄弟元素的字体设置成空
5.2、样式操作
样式操作一般情况下分为两种:1、样式比较简单 通过css来修改元素样式;2、样式比较复杂 通过类修改多个样式
- css修改
- 参数只写属性名,则返回属性值 例如:$(this).css("color") 返回的是200px
- 语法:$(this).css("属性名","属性值")。 值如果是数字不用跟单位或者引号,属性名必须添加引号
- 设置多组样式 语法:$(this).css({"color":"white","font-size":"20px"});
里面是一个对象 里面的属性可以不用添加引号
$("div").css({
width:400,
height:400
})
里面如果是复合属性则用驼峰命名法
- 类名修改
- 添加类名 $("div").addClass("current")
- 删除类名 $("div").removeClass("current")
- 切换类名 $("div").toggleClass("current")
类名不用加点
类不影响原来的类名 相当于追加类名
六、jQuery效果-动画
下面讲到的效果里面的参数都是一样的,这里统一讲 下面就不重复讲解了哟 ([speed,[easing],[fn]])里面的参数可以省略,无动画直接显示
- speed:三种预定速度之一的字符串("show","normal",or,"fast")或表示动画时长的毫秒数值(:1000);
- easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
6.1、显示隐藏效果
- 显示 show([speed,[easing],[fn]])
- 隐藏 hide([speed,[easing],[fn]])
- 切换 toggle([speed,[easing],[fn]])
6.2、滑动
- 下滑效果 slideDown([speed,[easing],[fn]])
- 上滑效果 slideUp([speed,[easing],[fn]])
- 切换效果 slideToggle([speed,[easing],[fn]])
6.3、事件切换
语法:hover([over,]out)
over:鼠标移动到元素上要触发的函数(相当与mouseenter)
out:鼠标移出元素要触发的函数(相当于mouseeleave)
$(".nav>li").hover(function(){},function(){});第一个函数时鼠标经过的事件,第二个函数时鼠标离开的事件
hover只写一个函数,那么鼠标经过鼠标离开都触发这个这个函数
$(".nav>li").hover(function(){
$(this).children("ul").slideToggle();//滑动切换
})
6.4、停止动画排队
原因:动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行,如果在短时间内触发动画,那么动画就会排队执行
解决方法:stop()
- stop()方法用于停止动画或效果
- 注意:stop()写到动画或者效果的前面,相当于停止结束上一次的动画
6.5、淡入淡出
- 淡入效果 fadaIn([speed,[easing],[fn]])
- 淡出效果 fadeOut([speed,[easing],[fn]])
- 淡入淡出切换效果 fadeToggle()
- 渐进方式调整到指定的不透明度 fadeTo([[speed].opcity,[easing],[fn]])
- opacity 透明度必须写,取值0~1之间
- speed 三种预定速度之一的字符串,("show","normal",or,"fast")或表示动画时长的毫秒数值(:1000)
- easing (Optional)用来指定切换效果,默认是“swing”,可用参数“linear”
- fn回调函数
6.6、自定义动画 animate
语法:animate(params,[speed],[easing],[fn])
参数:
- params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略
$(function(){ $("button").click(function(){ $("div").animate({ left:500, top:300, opacity:0.5, width:500 }) }) })
⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️
举一个例子让大家更加理解
下面是一个很典型的动画例子,很简单 希望大家都能理解 里面的代码有些我省略啦 ul里面的结构都是一样 博主的用心良苦啊 自己下去完善哟 相信你们更厉害 😁
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴案例</title>
<script src="./jQ/jQuery.min.js"></script>
</head>
<body>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img data-lazy-src="images/m1.jpg" alt="" class="small">
<img data-lazy-src="images/m.png" alt="" class="big">
</a>
</li>
</ul>
</div>
<script>
$(function () {
$(".king li").mouseenter(function () {
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
$(this).siblings("li").animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})
</script>
</body>
</html>
效果展示 【当鼠标移动到图片上的时候 每个li的小图片淡出,大图片会淡入】
主要用到的就是动画,也就是对大图片和小图片的效果展示,以及对li的宽度的改变。
本小节就讲到这里啦,如果你感兴趣就期待博主的下一篇博客吧,你会有意向不到的收获哦
别忘了三步曲哟点赞👍 评论 ✍️ 收藏 🌟