jQuery
1. JQuery概述
1.1 概念
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
-
举例说明
例如: 点击按钮实现页面元素显示效果 //原生DOM版本 var btn = document.querySelector('button'); btn.onclick = function() { var divs = document.querySelectorAll('div'); for(var i = 0; i < divs.length; i++) { divs[i].style.display = 'block'; } } //JQ版本 $('button').click(function(){ $('div').show(); //$('div').show(1000); }) -
概念详解
-
什么叫 JavaScript 库
☞仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。 ☞JavaScript库：是一个封装好的特定的集合包大量的方法。从封装函数的角度理解库，就是在JavaScrip库中，封装了很多预先定义好的函数在里面 ☞简单理解： 就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 JQuery就是这样的一个js文件: 本质上就是对我们之前原生js代码封装后的一个js文件 //备注: j代表js Query代表查询
-
-
jQuery优点
- 轻量级。核心文件才几十kb，不会影响页面加载速度
- 跨浏览器兼容。基本兼容了现在主流的浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持，大大简化了DOM操作
- 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
- 免费、开源
1.2 使用
-
下载
官网地址: https://jquery.com/ 版本地址: https://code.jquery.com/ -
版本介绍
1. jQuery目标最新的版本是 v3.5.1【该版本不兼容IE6，7，8但是官网主要维护更新的版本】 2. jQuery v2版本 【不兼容IE6,7,8，不再维护】 3. jQuery v1版本 【兼容IE6,7,8,不再维护】 //Download the compressed, production jQuery 3.5.1 用于生产环境压缩后的文件 //Download the uncompressed, development jQuery 3.5.1 用于开发环境没有经过压缩 -
引用
1. 新建HTML页面 2. 在HTML页面中引用JQ文件 例如: <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jQuery.js"></script> //或者 <script type="text/javascript" src="jQuery.min.js"></script> </head> 3. 使用
1.4 入口函数
-
DOM中如果在HTML结构之前写JS代码,需要设置加载事件,获取HTML元素
<script type="text/javascript"> window.onload = function() { var div = document.querySelector('div'); console.log(div); } </script> -
JQ如果在HTML结构之前写js代码,需要设置加载事件(入口函数)
$(function(){ var div = document.querySelector('div'); console.log(div); }) //或者 $(document).ready(function(){ var div = document.querySelector('div'); console.log(div); }); 备注: // 如果将JQ代码写到HTML结构后面,则可以设置入口函数也可以不用设置 -
JQ入口函数与js中的load事件区别
☞ js中的load事件是整个页面都加载完成后包括外部的资源文件都加载完毕后才执行 ☞ jQuery中的入口函数是整个文档加载完成后就立即执行代码 ☞ js中的load事件只能写一个,如果写多个会被覆盖掉 ☞ Jquery中的入口函数可以写多个
1.4 $ 介绍
-
$就是JQuery的一个别名$(function(){ }) // 可以写成如下写法: jQuery(function(){ var div = document.querySelector('div'); console.log(div); }) -
$是JQ中的顶级对象☞ 在原生js中,顶级对象是window ☞ 在Jq中,顶级对象是 $, 本质就是通过JQ的方式将 window 对象转化为JQ对象 //例如: $(function(){ console.dir($); })
1.5 DOM对象和JQ对象转化
-
JQ就是对JS的封装,可以通过原生的JS获取页面元素,那么也可以通过JQ获取页面元素
-
通过JQ获取页面元素,并设置样式
//通过JQ方式隐藏页面中的div标签 var div = $('div'); div.hide(); -
DOM对象
通过 document 方式获取到的元素都叫DOM对象 -
JQ对象
通过$方式获取到的元素都叫JQ对象 //JQ对象中的方法或者属性原生DOM对象是不能使用的,反过来原生DOM对象中的方法或者属性JQ对象也无法使用 -
将JQ对象转为DOM对象方式一:
var div = $('div'); console.log(div); //通过$获取到的div就是一个JQ对象,那么JQ对象本质上就是一个伪数组,这个数组中存储的就是DOM对象 //第一种转化方式:JQ对象[索引] //代码演示: var div = $('div'); div = div[0]; div.style.display = 'none'; -
将JQ对象转化为DOM对象方式二:
语法:JQ对象.get(索引) //例如: var div = $('div'); div = div.get(0); div.style.display = 'none'; -
将DOM对象转化为JQ对象
语法:$(dom对象) // 例如: var div = document.querySelector('div'); div = $(div); div.hide();
2. JQ获取页面元素API
1.1基础选择器
-
语法
$('选择器'); 注意: 选择器就是CSS选择器 -
ID选择器
$('#id名') -
通配符选择器
$('*'); -
标签选择器
$('标签名'); -
并集选择器
$('选择器, 选择器..'); -
交集选择器
$('标签名.class');
1.2层级选择器
-
子代选择器
$('选择器 > 选择器'); -
后代选择器
$('选择器 选择器');
1.4 结构选择器
-
:first$('选择器:first'); //获取第一个元素 -
:last$('选择器:last'); //获取最后一个元素 -
eq(index)$('选择器:eq(值)'); //获取第n个元素,从0开始, -
odd$('选择器:odd'); //获取索引是奇数的元素 -
even$('选择器:even'); //获取索引是偶数的元素
1.5通过方法筛选
-
parent(选择器)或者parents(选择器)$('元素').parent(); //获取当前元素的直接父元素 $('元素').parents(选择器); //获取所有的父元素或者指定父元素 -
children(选择器)$('元素').children(选择器); // 获取当前元素的直接子元素,子代选择效果一样 -
find(选择器)$('元素').find(选择器); //获取当前元素下所有满足条件的子元素, 后代选择器 例如: var res = $('div').find('span'); console.log(res); -
siblings(选择器)$('元素').siblings(选择器); //获取当前元素的所有同级兄弟元素或者指定兄弟元素 -
nextAll(选择器)$('元素').nextAll(选择器); // 获取当前元素后面所有同级兄弟元素或者指定兄弟元素 -
prevAll([选择器])$('元素').prevAll(选择器); //获取当前元素前面所有同级兄弟元素或者指定元素 -
hasClass(类名)$('元素').hasClass('类名'); //判断当前元素是否有对应的类名,如果有返回true,否则返回false 例如: var res = $('a').hasClass('nav'); console.log(res); -
eq(值)$('元素').eq(值); //获取第几个元素, 从0开始 例如: var res = $('span').eq(1); console.log(res);
3. JQ方式元素注册事件
1.1 直接注册事件
语法:
JQ对象.事件名称(function(){
处理程序
})
例如:
<input type="button" value="按钮">
$('input').click(function(){
alert(123);
})
//补充事件名称:
点击事件: click
鼠标进入事件: mouseenter
鼠标离开事件: mouseleave
1.2隐式迭代
<input type="button" value="btn1">
<input type="button" value="btn2">
<input type="button" value="btn3">
//注册事件
var btns = $('input');
btns.click(function(){
console.log(this.value);
})
//补充: 获取每一个元素的索引位置 JQ对象.index();
//分析: 获取页面中的所有按钮后,给按钮注册事件,JQ不需要我们手动遍历注册,自己内部就可以遍历注册事件
//隐式迭代: JQ内部自动遍历DOM元素的过程
4. JQ方式操作元素样式
1.1 通过.css方式操作样式
-
.css设置单个样式
语法: $('元素').css('属性', 值); //例如: $('div').css('background-color','red'); //注意: 1. 这种写法只能给元素设置一个样式 2. 这种写法本质上就是通过行内样式给标签设置样式 //思考: 如果页面中有多个元素,通过这种方式能否给所有的标签都设置样式? <div></div> <div></div> $('div').css('background-color','red'); //代码验证: 是可以的, 因为这里面有隐式迭代 -
案例-导航隐藏显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .nav { width: 100%; height: 55px; background-color: #fcfcfc; border-top: 2px solid orange; border-bottom: 1px solid #ccc; } .nav .w { width: 980px; margin: 0 auto; } .nav a { color: #4c4c4c; text-decoration: none; font-family: '微软雅黑'; } .ul1>li { line-height: 55px; padding: 0 30px; float: left; } .u2 { border: 1px solid orange; border-top: 0 none; border-bottom: 0 none; display: none; } .u2 li { padding: 0 10px; border-bottom: 1px solid orange; } </style> </head> <body> <div class="nav"> <div class="w"> <ul class="ul1"> <li><a href="javascript:;">首页</a></li> <li><a href="javascript:;">关于我们</a></li> <li> <a href="javascript:;">联系我们</a> <ul class="u2"> <li><a href="javascript:;">邮件联系</a></li> <li><a href="javascript:;">电话联系</a></li> <li><a href="javascript:;">微信联系</a></li> </ul> </li> </ul> </div> </div> <script type="text/javascript" src="jQuery.min.js"></script> <script type="text/javascript"> $('.ul1 > li:last-child > a').mouseenter(function () { $(this).siblings().css({ 'display': 'block' }) }); $('.ul1 > li:last-child > a').mouseleave(function () { $(this).siblings().css({ 'display': 'none' }) }); </script> </body> </html> -
导航隐藏显示案例-链式编程写法
$('.ul1 > li:last-child > a').mouseenter(function () { $(this).siblings().css({ 'display': 'block' }) }).mouseleave(function () { $(this).siblings().css({ 'display': 'none' }) }) //总结: 1. 给元注册事件,可以在当前元素后面连着继续写 2. 链式编程核心,给具体的对象设置,如果不是一个对象,则不能使用链式编程写法 -
.css设置多个样式
语法: $('元素').css({ '属性': '值', '属性': '值', ... }) 例如: $('div').css({ 'width': '200px', 'height': 200, 'background-color': 'red' }) //注意: 1. 如果设置的值是数字,可以不用带有引号 2. 如果属性是按照CSS的属性方式设置,需要带有引号 . 例如 'background-color' 或者 backgroundColor -
案例淘宝
HTML和CSS代码
<!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 type="text/css"> * { margin: 0; padding: 0; list-style: none; vertical-align: middle; } .box { width: 250px; height: 250px; border: 1px solid red; margin: 50px auto; overflow: hidden; } .left { float: left; width: 50px; height: 250px; border-right: 1px solid red; box-sizing: border-box; } .left .item { width: 100%; height: 28px; border-bottom: 1px solid red; box-sizing: border-box; text-align: center; line-height: 28px; background-image: linear-gradient(to bottom, #fff, pink); cursor: pointer; } .right { width: 200px; height: 250px; float: left; position: relative; } .right img { position: absolute; } </style> </head> <body> <div class="box"> <div class="left"> <div class="item">女靴</div> <div class="item">雪地靴</div> <div class="item">冬裙</div> <div class="item">女包</div> <div class="item">毛衣</div> <div class="item">棉服</div> <div class="item">女裤</div> <div class="item">羽绒服</div> <div class="item">皮带</div> </div> <div class="right"> <img src="imgs/女靴.jpg" alt=""> <img src="imgs/雪地靴.jpg" alt="" style="display: none"> <img src="imgs/冬裙.jpg" alt="" style="display: none"> <img src="imgs/女包.jpg" alt="" style="display: none"> <img src="imgs/毛衣.jpg" alt="" style="display: none"> <img src="imgs/棉服.jpg" alt="" style="display: none"> <img src="imgs/女裤.jpg" alt="" style="display: none"> <img src="imgs/羽绒服.jpg" alt="" style="display: none"> <img src="imgs/皮带.jpg" alt="" style="display: none"> </div> </div> </body> </html>获取元素索引位置
//DOM版本 var divs = document.querySelectorAll('div'); for(var i = 0; i < divs.length; i++) { divs[i].index = i; divs[i].onclick = function() { alert(this.index); } } //JQ版本 通过 index()方法获取 $('div').click(function(){ console.log($(this).index()); })排他思想实现
//DOM实现排他思想, 点击div设置文字颜色 var divs = document.querySelectorAll('div'); for(var i = 0; i < divs.length; i++) { divs[i].onclick = function() { for(var j = 0; j < divs.length; j++) { divs[j].style.color = '#000'; } this.style.color = 'red'; } } //JQ实现排他思想 $('div').click(function(){ $(this).css('color', 'red').siblings().css('color','#000'); })实现淘宝案例
//每一个item注册一个鼠标进入事件 $('.item').mouseenter(function(){ //当前元素设置背景图片 $(this).css({ 'background-image': 'url(imgs/abg.gif)', 'color' : '#fff' }) //当前元素对应的图片显示 var index = $(this).index(); //根据当前index显示对应的内容 $('img').eq(index).css({ 'display': 'block' }).siblings().css({ 'display' : 'none' }) }).mouseleave(function(){ $(this).css({ 'background-image' : 'linear-gradient(to bottom, #fff, pink)', 'color' : '#000' }) })改进版淘宝案例写法
hover方法介绍语法: hover(function(){ }, function(){ }); //代码演示: $('div').hover(function(){ console.log('鼠标进入'); }, function(){ console.log('鼠标离开'); }) 介绍: 1. 第一个参数回调函数,表示鼠标进入时候触发的事件 (mouseenter) 2. 第二个参数回调函数,表示鼠标离开时候触发的事件 (mouseleave);改版后淘宝案例
$('.item').hover(function(){ $(this).css({ 'background-image': 'url(imgs/abg.gif)', 'color' : '#fff' }) //当前元素对应的图片显示 var index = $(this).index(); //根据当前index显示对应的内容 $('img').eq(index).css({ 'display': 'block' }).siblings().css({ 'display' : 'none' }) },function(){ $(this).css({ 'background-image' : 'linear-gradient(to bottom, #fff, pink)', 'color' : '#000' }) })
1.2 通过添加类方式操作样式
-
addClass('类名')语法: $('元素').addClass('类名'); //注意: 1. addClass中设置的是类名,不是类选择器 2. 通过addClass如果需要设置多个类名可以调用多次,如下代码: $('input').click(function(){ $('div').addClass('box'); $('div').addClass('br'); }) 3. 设置多个类名还可以如下写法 $('input').click(function(){ $('div').addClass('box br'); }) -
removeCLass('类名')语法: $('元素').removeClass('类名'); //例如: $('input').click(function(){ $('div').removeClass('box') }) $('input').click(function(){ $('div').removeClass('box br'); }) $('input').click(function(){ $('div').removeClass('box'); $('div').removeClass('br'); }) $('input').click(function(){ $('div').removeClass('box').removeClass('br'); }) -
toggleClass('类名')语法: $('元素').toggleClass('类名'); //例如: $('input').click(function(){ $('div').toggleClass('br'); }) $('input').click(function(){ $('div').toggleClass('br box'); }) -
案例-tab栏切换
<!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 type="text/css"> * { margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: '微软雅黑'; color: #999; } .box { width: 980px; margin: 50px auto; position: relative; } .nav { width: 100%; height: 50px; line-height: 50px; text-align: center; border-bottom: 2px solid orange; } .nav li { float: left; } .nav a { padding: 0 30px; } .active { background-color: #e1251b; } .active a { color: #fff; } .item { width: 100%; height: 200px; box-shadow: 0 0 5px 1px #ccc; position: absolute; } </style> </head> <body> <div class="box"> <div class="nav"> <ul> <li><a href="javascript:;">商品介绍</a></li> <li><a href="javascript:;">价格与包装</a></li> <li><a href="javascript:;">售后保障</a></li> <li><a href="javascript:;">商品评价</a></li> </ul> </div> <div class="content"> <div class="item" style="display: none">商品介绍</div> <div class="item" style="display: none">价格与包装</div> <div class="item" style="display: none">售后保障</div> <div class="item" style="display: none">商品评价</div> </div> </div> <script src="./jQuery.min.js"></script> <script> var li = $('.nav li'); li.hover(function(){ $(this).addClass('active').siblings().removeClass('active'); var index = $(this).index(); $('.item').eq(index).css({ 'display': 'block' }).siblings().css({ 'display': 'none' }) }, function(){ $(this).removeClass('active'); $('.item').css({ 'display': 'none' }) }) </script> </body> </html>
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！