JavaScript-13
1.jQuery的简介
- 常见的js库
jQuery、Prototype、YUI、Dojo、Ext JS、移动端zepto
- jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互
- 优点
- 轻量级，不会影响页面的加载速度
- 跨浏览器兼容
- 链式编程、隐式迭代
- 支持插件扩展开发
- 免费、开源
2.jQuery的基本使用
- 入口函数
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/jquery-3.6.0.js"></script> 7 </head> 8 <body> 9 <script> 10 $(function(){ 11 // 此处是页面DOM加载完成的入口 12 }); 13 $(document).ready(function(){ 14 // 此处是页面DOM加载完成的入口 15 }); 16 //不同于原生js的load事件是等页面文档、外部的js文件等等加载完毕后才执行 17 // 相当于原生的js中的 DOMConteneLoaded 18 </script> 19 </body> 20 </html>
- jQuery的顶级对象$
- $是jQuery的别称
- $相当于原生JavaScript中的window，把元素利用$包装成jQuery对象
- jQuery对象和DOM对象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 // 1.DOM对象：用原生js获取过来的对象就是DOM对象 10 var div = document.querySelector('div')； 11 // 2.jQuery对象：用jQuery获取过来的对象就是jQuery对象。本质：通过$把DOM元素进行了包装（伪数组形式包装） 12 $('div');//是一个jQuery对象 13 // 3.jQuery对象只能使用jQuery方法。DOM对象则使用原生的JavaScript属性和方法 14 </script> 15 </body> 16 </html>
- DOM对象和jQuery对象的相互转换
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/jquery-3.6.0.js"></script> 7 </head> 8 <body> 9 <script type="text/javascript"> 10 $('div'); 11 var div = document.querySelector('div'); 12 //1.DOM对象转换为jQuery对象：$(DOM对象) 13 $(div); 14 /* 15 2.jQuery对象转换为DOM对象(两种方式) 16 $('div')[index] 17 $('div').get(index) 18 */ 19 </script> 20 </body> 21 </html>
3.jQuery常用API
- jQuery基础选择器：$(“选择器”) 里面选择器直接写CSS即可，但是要加引号
| 名称 | 用法 | 描述 |
| ID选择器 | $(“id”) | 获取指定ID元素 |
| 全选选择器 | $(“*”) | 匹配所有元素 |
| 类选择器 | $(“.class”) | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”) | 获取多个元素 |
| 交集选择器 | $(“li.current”) | 交集元素 |
- jQuery层级选择器
| 名称 | 用法 | 描述 |
| 子代选择器 | $(“ul>li”) | 使用>号，获取亲儿子层级的元素。注意：并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”) | 使用空格，代表后代选择器，获取ul下所有的li元素，包括孙子等 |
- jQuery设置样式：$(“div”).css(‘属性’,’值’)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/jquery-3.6.0.js"></script> 7 <style type="text/css"> 8 .nav{ 9 width: 100px; 10 height: 100px; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="nav"></div> 16 <script type="text/javascript"> 17 $(".nav").css("background-color","lightpink"); 18 </script> 19 </body> 20 </html>
- 隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代
给所有匹配到的元素进行遍历循环，执行相应的方法，而不用我们再进行循环，从而实现简化操作的目的
- 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]) | $(“.first”).prevAll() | 查找当前元素之前的所有同辈元素 |
| hasClass(class) | $(“div”).hasClass(“protected”) | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
| eq(index) | $(“li”).eq(2) | 相当于$(“div:eq(2)”)，index从0开始 |
- 淘宝广告
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/jquery-3.6.0.js"></script> 7 <style type="text/css"> 8 *{ 9 padding: 0; 10 margin: 0; 11 } 12 .nav{ 13 margin-left: 300px; 14 margin-top: 80px; 15 } 16 .left{ 17 list-style: none; 18 float: left; 19 text-align: center; 20 } 21 .left li{ 22 border: 1px solid #000; 23 padding-top: 29px; 24 padding-bottom: 29px; 25 } 26 .hide { 27 display: none; 28 } 29 .show{ 30 background-color: #FFB6C1; 31 } 32 </style> 33 <script> 34 $(function(){ 35 $(".left>li").mouseenter(function(){ 36 $(this)[0].classList.add('show'); 37 if($(this).hasClass('show')){ 38 // 得到当前元素的索引号 39 var i = $(this).index(); 40 $("div.content img").hide(); 41 $("div.content img").eq(i).show(); 42 } 43 }) 44 $('.left>li').mouseout(function(){ 45 $(this)[0].classList.remove('show'); 46 }) 47 }) 48 </script> 49 </head> 50 <body> 51 <div class="nav"> 52 <ul class="left"> 53 <li>图片1</li> 54 <li>图片2</li> 55 <li>图片3</li> 56 <li>图片4</li> 57 </ul> 58 <div class="content"> 59 <div><img src="img/1.jpg" height="320px" ></div> 60 <div><img class = "hide" src="img/2.jpg" height="320px"></div> 61 <div><img class = "hide" src="img/3.jpg" height="320px"></div> 62 <div><img class = "hide" src="img/4.jpg" height="320px"></div> 63 </div> 64 </div> 65 </body> 66 </html>
- 链式编程
为了节省代码量，看起来更优雅
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/jquery-3.6.0.js"></script> 7 <script> 8 $(function(){ 9 $("button").click(function(){ 10 // $(this).css("background-color",'lightpink'); 11 // $(this).siblings().css("background-color",''); 12 // 上面两句相当于$(this).css("background-color",'lightpink').siblings().css("background-color",''); 13 $(this).css("background-color",'lightpink').siblings().css("background-color",''); 14 }) 15 }) 16 </script> 17 </head> 18 <body> 19 <button>提交</button> 20 <button>提交</button> 21 <button>提交</button> 22 <button>提交</button> 23 <button>提交</button> 24 <button>提交</button> 25 <button>提交</button> 26 </body> 27 </html>
4.jQuery样式操作
- 操作css方法
- 参数只写属性名，则返回的是属性值。$(this).css(“color”);
- 参数是属性名,属性值,逗号分割，是设置一组属性值，属性必须加引号，如果是数字可以不用跟单位和引号
- 参数可以是对象的形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号
- 注意：如果是复合属性，例如：background-color，则必须使用驼峰命名法：backgroundColor，如果值属性不是数字，则需要加引号
- 设置类样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点
-
- 添加类：$(this).addClass(“类名”)
- 删除类：$(this).removeClass(“类名”)
- 切换类名：$(this).toggleClass(“类名”)
- 类操作与classList的区别：原生JS中className会覆盖元素原先里面的类名，jQuery里面类操作知识对指定类进行操作，不影响原先的类名
- tab栏切换案例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/jquery-3.6.0.js"></script> 7 <script> 8 $(function() { 9 $("ul li").click(function() { 10 $(this).addClass("show").siblings().removeClass("show"); 11 $(".content div").eq($(this).index()).show().siblings().hide(); 12 }) 13 }) 14 </script> 15 <style type="text/css"> 16 * { 17 padding: 0; 18 margin: 0; 19 } 20 21 #nav ul { 22 list-style: none; 23 border: 1px solid #7a7a7a; 24 width: 700px; 25 margin: auto; 26 margin-top: 30px; 27 background-color: #e2e2e2; 28 padding-top: 9px; 29 padding-bottom: 9px; 30 font-size: 0px; 31 } 32 33 #nav ul li { 34 display: inline; 35 padding: 10px; 36 font-size: 16px; 37 } 38 39 .content { 40 width: 702px; 41 margin: auto; 42 } 43 44 .show { 45 background-color: #FF0000; 46 color: #F0F8FF; 47 } 48 49 .hiding { 50 display: none; 51 } 52 </style> 53 </head> 54 <body> 55 <div class="box"> 56 <div id="nav"> 57 <ul> 58 <li class="show">商品介绍</li> 59 <li>规格与包装</li> 60 <li>售后保障</li> 61 <li>商品评价（5000）</li> 62 <li>手机社区</li> 63 </ul> 64 </div> 65 <div class="content"> 66 <div>商品介绍模块内容</div> 67 <div class="hiding">规格与包装模块内容</div> 68 <div class="hiding">售后保障模块内容</div> 69 <div class="hiding">商品评价模块内容</div> 70 <div class="hiding">手机社区模块内容</div> 71 </div> 72 </div> 73 </body> 74 </html>
- jQuery效果
- 显示隐藏
- show()
- show([spped,[easing],[fun]])
- 参数都可以省略，无动画直接显示
- speed：三种预订速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数(如：1000)
- easing：(Optional)用来指定切换效果，默认是“swing”（慢快慢），可用参数“liner”（匀速）
- fn：回调函数，在动画完成之后执行的函数，每个元素执行一次
- hide()：参数和show一样
- toggle()：参数和show一样
- show()
- 滑动
- slideDown()：参数和show一样
- slideUp()：参数和show一样
- slideToggle()：参数和show一样
- 淡入淡出
- fadeln()：参数和show一样
- fadeOut()：参数和show一样
- fadeToggle()：参数和show一样
- fadeTo()：利用渐进的方式调整到指定透明度，参数多了一个opacity（必须写，参数在0~1）之间，speed必须写
- 自定义动画
- animate(params,[speed],[easing],[fn])
- params：想要更改的样式属性，以对象形式传递，必须写，属性可以不用带引号，如果是复合属性则要采取驼峰命名法
- animate(params,[speed],[easing],[fn])
- 显示隐藏
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/jquery-3.6.0.js"></script> 7 <script> 8 $(function(){ 9 $("button").click(function(){ 10 $("div").animate({ 11 left:500, 12 top:300, 13 opacity:0.5 14 },500) 15 }) 16 }) 17 </script> 18 <style type="text/css"> 19 div{ 20 position: absolute; 21 width: 200px; 22 height: 200px; 23 background-color: lightpink; 24 } 25 </style> 26 </head> 27 <body> 28 <button>动起来</button> 29 <div id="box"></div> 30 </body> 31 </html>
- hover([over],out)
- over：鼠标移到元素上要触发的函数（相当于mouseenter），out是鼠标离开时触发
- hover如果只写一个函数，name鼠标经过和鼠标离开都会触发这个函数
- 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
- stop()：用于停止动画或效果。注意：stop()必须动画或者效果的前面，相当于停止结束上一次动画
- 王者荣耀手风琴案例
版权声明：本文为Miraitowa56原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。