一、JQuery介绍
1. JQuery介绍
JQuery是一个JavaScript库，也是一个JS文件。JQ中封装实现了很多方法，让使用变得更加简单不再像js那样需要使用大量的方法调用。但JQ也只是实现了一些方法，还有些没有实现，因此能够使用JQ实现的，JS都能做，但能够用JS做的，JQ不一定能够实现。
2. JQuery理念
JQ总的来说，体现了：write less，do more。 简单来说，就是代码量少，功能强大。
3. JQuery特性
① 丰富的强大的语法（CSS选择器），来查询文档元素；
② 高效的查询方法，用来找到与CSS选择器匹配的文档元素集；
③ 一套有用的方法，用来操作选中的元素；
④ 强大的函数式编程技巧，用来批量操作元素集，而不是每次操作单个；
⑤ 简介的语言用法（链式用法），用来表示一系列顺序操作。
引入方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p class="p1">腾讯课堂升级</p> <p class="p1">这几天看不到大家的消息</p> <button>按钮</button> <ul> <li>this is python</li> <li>this is java</li> <li>this is c++</li> </ul> <!--引入jq--> <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>--> <script src="jq-3_6.js"></script> <script> // // $()jq选择器 // $( // function () { // alert("123") // } // ) // js获取元素 // class 值是重复 集合对象 需要加下标 var ap1 = document.getElementsByClassName("p1") // console.log(ap1); // jq获取元素 .eq(下标) // var obtn = $("button").eq(0) var ap2 = $(".p1") // console.log(obtn); // ====================================================== // js 修改文本 // ap1.innerText = "一个人上课 好无聊啊" // ap1.innerHTML = "<h1>一个人上课 好无聊啊</h1>" // //jq 修改文本 // ap2.text("天气冷了 大家注意防寒保暖") // ap2.html("<h1>天气冷了 大家注意防寒保暖</h1>") // js获取元素 // ap1.innerText = "一个人上课 好无聊啊" // js必须指定下标修改 // // jq获取元素 个数区别 // ap2.text("天气冷了 大家注意防寒保暖") // 不指定下标 全部修改 // ====================================================== //jq 转js ap2是通过jq选择器获取到的元素 get() [] 指定元素下标 // ap2.get(0).innerText = "一个人上课 好无聊啊" // js 转jq ap1是通过js选择器获取到的元素 $() 进行转换 // $(ap1).html("this is python") //each 遍历 $("ul li").each(function () { //输出li的文本内容 this li // console.log($(this).text()); // console.log(this.innerText); console.log($(this).index()); //获取元素下标 }) </script> </body> </html>
二、JQuery操作HTML属性
| 属性 | 类名 |
| attr 设置、获取标签属性 | addClass 加class名字 |
| removeAttr() 移除标签属性 |
removeClass 移除传入的class；没有，移除全部 |
| toggleClass 操作Class类名，有就删，没有就加 |
| JQuery | JavaScript |
| html() | innerHTML |
| text() | innerText |
| val() | value |
三、JQuery操作CSS样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: skyblue; /*padding: 10px;*/ /*border: 2px solid red;*/ } * { margin: 0; padding: 0; } .box { background-color: red; } .box1 { width: 300px; height: 300px; background-color: green; } .box2 { width: 200px; height: 200px; background-color: orange; } .div1 { width: 300px; height: 300px; background-color: skyblue; position: relative; margin: 100px; } .div2 { background-color: red; position: absolute; left: 50px; top: 50px; } </style> </head> <body> <div class="div1"> <div class="div2"></div> </div> <input type="text" value="8888"> <input type="text" value="9999"> <script src="jq-3_6.js"></script> <script> // js修改html属性 var odiv = document.getElementsByTagName("div")[0] // odiv.className = "div1" // jq 修改html属性 添加class 属性 var adiv = $("div").eq(0) // adiv.addClass("box") // adiv.addClass("box1") //叠加 添加 // // 删除属性 // adiv.removeClass("box1") // // 修改 删除后新增 // adiv.addClass("box2") // // adiv.toggleClass("box") // 添加 // adiv.toggleClass("box1") // 叠加 添加 // adiv.toggleClass("box1") // 两个一致 执行删除操作 // 其他属性操作 属性名 属性值 // adiv.attr('id',"box") // 添加 // adiv.attr('id',"box1") // 修改 后者覆盖前者 // adiv.attr('name',"div1") // // //删除 // adiv.removeAttr("name") //js 获取value 值 // var oipt = document.getElementsByTagName("input")[0] // console.log(oipt.value); // jq 获取value值 val() 只获取一个 遍历修改操作 // var aipt = $("input") // console.log(aipt.val(666)); // js 修改样式 // odiv.style["backgroundColor"] = "yellow" // jq 修改样式 css // adiv.css({ // "backgroundColor" :"red", // "width" :"300px", // }) // console.log(adiv.width()); //width height 获取内容宽 高 // console.log(adiv.height()); // console.log(adiv.innerWidth()); // innerWidth 获取内容宽 高 +内边距 // console.log(adiv.innerHeight()); // // console.log(adiv.outerWidth()); //outerWidth 获取内容宽 高 +内边距+边框宽度 // console.log(adiv.outerHeight()); // // console.log($(".div2").position()); 父级必须是有加定位 // console.log($(".div2").offset()); // 到窗口的定位 </script> </body> </html>
四、JQuery事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 { width: 300px; height: 300px; background-color: skyblue; } .div2 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <button>按钮</button> <button>按钮2</button> <div class="div1"> <div class="div2"></div> </div> <script src="jq-3_6.js"></script> <script> //js事件 // var obtn = document.getElementsByTagName("button")[0] // obtn.onclick = function () { // // console.log(1) // } // jq事件 单击事件 var abtn = $("button").eq(0) // abtn.click(function () { // console.log(2); // }) function f() { console.log(2); } function ff() { console.log(3); } // 双击事件 // abtn.dblclick(f) // 划入事件 // abtn.mouseenter(f)// 划入事件 // abtn.mouseleave(ff) //划出事件 // abtn.hover(f, ff) //划入划出事件 // 冒泡事件 // $(".div1").click(f) // 划入事件 // $(".div2").click(function (e) { // e.stopPropagation() // 去除冒泡事件 // console.log(3); // }) //划出事件 //绑定单个事件 button单击事件发生后激活div1单击事件，在div1单击事件后div1背景颜色变化成设定颜色 $("button").eq(0).click(function () { $(".div1").on("click", function () { $(".div1").css({ "backgroundColor": "yellow", }) }) }) //绑定多个事件 同理button单击事件发生后激活div1单击事件 $("button").eq(0).click(function () { $(".div1").on({ "click": f, "dblclick": ff }) }) // 移除事件 off $("button").eq(1).click(function () { $(".div1").off("click") // 移除大盒子的单击事件 $(".div1").off("dblclick") // 移除大盒子的单击事件 }) </script> </body> </html>
五、JQuery动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 200px; background-color: skyblue; position: relative; } </style> </head> <body> <div></div> <button>按钮</button> <button>按钮2</button> <button>按钮3</button> <button>动画</button> <button>暂停动画</button> <script src="jq-3_6.js"></script> <script> var abtn = $("button") //按钮 var adiv = $("div").eq(0) //div abtn.eq(0).click(function () { // adiv.hide(2000)//隐藏 ms // adiv.slideUp(2000)//隐藏 ms adiv.fadeOut(5000)//隐藏 ms }) abtn.eq(1).click(function () { // adiv.show(2000)//显示 ms // adiv.slideDown(2000)//显示 ms adiv.fadeIn(5000)//显示 ms }) abtn.eq(2).click(function () { // adiv.toggle(2000)//隐藏 ms // adiv.slideToggle(2000) // 取反 adiv.fadeTo(5000, 0.3) // 设置透明度 自定义淡入 }) abtn.eq(3).click(function () { adiv.animate({ "width": "300px", "height": "300px", "top": "50px" }, 6000) }) abtn.eq(4).click(function () { adiv.stop() }) </script> </body> </html>
作业（包含左右箭头以及自动轮播）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> /*父级盒子*/ #box { width: 530px; height: 300px; border: 1px solid black; margin: 0 auto; position: relative; /*相对定位*/ } /*图片样式*/ .limg { width: 530px; height: 300px; } /*清除浏览器样式*/ * { margin: 0; padding: 0; } ul > li { list-style: none; /*清除小黑点*/ } .pic { position: absolute; /*绝对定位*/ } /*左右箭头的ul */ .btn > li { position: absolute; /*绝对定位*/ width: 50px; height: 50px; /*background-color: red;*/ /*top: 125px;*/ top: 50%; line-height: 50px; text-align: center; transform: translateY(-25px); font-size: 36px; color: white; } .btn .left { left: 0; } .btn .right { right: 0; } .btn > li:hover { background-color: #888888; } /*小圆点ul*/ .tab { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } /*小圆点li浮动*/ .tab li { float: left; width: 10px; height: 10px; background-color: red; border-radius: 50%; margin-left: 5px; } /*小圆点鼠标悬浮式*/ .tab li:hover { background-color: skyblue; } .tab li.on { background-color: orange; } </style> </head> <body> <div id="box"> <!-- 图片--> <ul class="pic"> <li><img src="./img/01.jpg" class="limg"></li> <li><img src="./img/02.jpg" class="limg"></li> <li><img src="./img/03.jpg" class="limg"></li> <li><img src="./img/04.jpg" class="limg"></li> </ul> <!-- 左右箭头--> <ul class="btn"> <li class="left"><</li> <li class="right">></li> </ul> <ul class="tab"> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="../lesson9/jq-3_6.js"></script> <script> // 获取所有元素 var apic = $(".pic li") var abtn = $(".btn li") var atab = $(".tab li") var abox = $("#box") // console.log(apic, atab, abtn); // 轮播图初始化 先把所有的隐藏 在对第一张展示 apic.hide().eq(0).show() // 清除所有小圆点class 在对第一个小圆点加 class ="on" atab.removeAttr("class").eq(0).addClass("on") var fist = 0 // 定义变化函数 function change(i) { // 0 1 2 3 //i = 3 i=2 apic.hide().eq(i).show() atab.eq(fist).removeAttr("class") // fist =3 atab.eq(i).addClass("on") fist = i // fist = 3 全局变量 } // 小圆点 atab.click(function () { // 得到当前点击事件元素下标 index var num = $(this).index() // apic.hide().eq(num).show() //atab.removeAttr("class").eq(0).addClass("on") change(num) }) // 左右箭头 abtn.click(function () { var num = fist // 拿到当前图片下标 if ($(this).index()) { // 上一张 // 得到当前图片下标 +1 //num+1 num += 1 if (num > apic.length - 1) { num = 0 } } else { //下一张 num -= 1 if (num < 0) { num = apic.length - 1 } } change(num) }) // 自动轮播 function auto() { time1 = window.setInterval(function () { var num = fist // 拿到当前图片下标 num += 1 // num=3 if (num > apic.length - 1) { num = 0 } change(num) }, 3000) } auto() // 划入暂停定时器 划出执行定时器 abox.hover(function () { clearInterval(time1) console.log(1); }, function () { auto() //执行函数 开启定时器 console.log(2); }) </script> </body> </html>
