day59
jQuery
（1）链式操作、js与jq对象互相转换
（2）选择器
（3）筛选器
（4）样式操作
jQuery简介 引入： #方式一：本地引入 <script src="jquery-3.3.1.min.js"></script> <script> //注意，一定在引入jQuery之后，再使用jQuery提供的各种操作 </script> #方式二：直接使用CDN <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> code... </script> $是jQuery的别名 jQuery('.item').show() //等同于 $('.item').show() DOM文档加载的步骤 解析HTML结构。 加载外部脚本和样式表文件。 解析并执行脚本代码。 DOM树构建完成。 加载图片等外部文件。 页面加载完毕。 等待文档加载完毕后执行函数，有两种方式 # 1、执行时间不同 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 # 2、编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 $(document).ready()可以同时编写多个，并且都可以得到执行 # 3、简化写法不同 window.onload没有简化写法 $(document).ready(function(){})可以简写成$(function(){}); 链式操作、js与jq对象互相转换 #链式调用，原理就是 调用一个实例化方法返回的是当前的对象 $('.box1').css('color','red').next().css('width','200px').css('height','200px').css('background','green').removeAttr('class') <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <!-- <script src="http://www.xxx.com/jquery.min.js"></script>--> <style> .box { width: 200px; height: 200px; background-color: red; display: none; } </style> <script> // jQuery(".box").css("display","block") //jQuery = $ // jQuery(".box").show() //显示 -->display:inline、block、inline-block // $(".box").hide() //隐藏 -->display:none // alert(jQuery(".box").text()) // 加载时间点的区别 // JS // window.onload=function () { //等待文档加载结束后再运行 // var x=document.getElementsByClassName('box')[0] // alert(x.innerText) // } // jQuery // $(document).ready(function () { //等待文档加载结束后再运行 // alert(jQuery(".box").text()) // }) // onload只能有一个，jq的ready方式可以有多个 // window.onload=function () { // 这个不会运行 // alert(123) // } // window.onload=function () { // 出现多个onload只会运行最后一个 // alert(456) // } // $(document).ready(function () { // ready会一次运行 // alert(123) // }) // // $(document).ready(function () { // alert(456) // }) // $(document).ready可直接简写为 $ // $(function () { // alert(123) // }) // $(function () { // $(".box").show().css("background-color",'green') // 链式操作 // }) // $(function () { // var x=$(".box") // jq对象 // alert(x.text()) // text() 括号中有值则修改，没有值则读取 // jq对象=》js对象 // var x=$(".box")[1] // alert(x.innerText) // js对象->jq对象 // var box1=document.getElementsByClassName("box")[0] // alert(box1.innerText) // alert($(box1).text()) // -> // [div对象,] // alert($("#bbb").text()) // alert($("#bbb").get(0).innerText) // }) </script> </head> <body> <div class="box" id="bbb">1111111111111111</div> <div class="box">22222222222</div> <div class="box">33333333333333333331</div> <div id="xxx"> <p>111</p> <p>222</p> <p>3333</p> </div> </body> </html> 选择器 属性选择器： [attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于 // 示例 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签 表单常用筛选： :text :password :file :radio :checkbox :submit :reset :button 表单对象属性: :enabled :disabled :checked :selected <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 100px; border: 1px solid red; } </style> </head> <body> <div class="box a">1111</div> <div id="bbb b">2222</div> <div class="box c">3333</div> <div class="box d">4444</div> <div id="xxx"> <p>aaaa</p> <p>bbb</p> <p>ccc</p> </div> <a href="">点我</a> <form action=""> <input type="text" name="username" value="egon"> <input type="text" name="password" value="123" enabled> <input type="radio" name="gender" value="male" checked> <input type="radio" name="gender" value="female"> <input type="radio" name="gender" value="none"> </form> <script src="jquery.min.js"></script> <script> // 隐式迭代:每个对象都调用一次text()方法 // $(".box").text() // 等同于 // var objs=$(".box") // objs.each(function(i,obj){console.log(i,$(obj).text())}) // for显式迭代：取出的都是js对象 // for (var i=0;i<objs.length;i++){console.log(objs[i].innerText)} // each显式迭代：取出的也都是js对象 // var objs=$(".box") // objs.each(function(i,obj){console.log(i,obj.innerText)}) // i->索引 /* $(".box:first").text() "1111" $(".box:last").text() "4444" $(".box:eq(1)").text() // 根据索引选择 "3333" $(".box").first().text() // 等同于 .box:first "1111" $(".box").last().text() "4444" $(".box").eq(1).text() "3333" $("#xxx p:first").text() "aaaa" $("div") S.fn.init(5) [div.box.a, div#bbb b, div.box.c, div.box.d, div#xxx, prevObject: S.fn.init(1)]0: div.box.a1: div#bbb b2: div.box.c3: div.box.d4: div#xxxlength: 5prevObject: S.fn.init [document]__proto__: Object(0) $("div:even") // even 取偶数索引 S.fn.init(3) [div.box.a, div.box.c, div#xxx, prevObject: S.fn.init(1)] $("div:odd") // odd 取奇数索引 S.fn.init(2) [div#bbb b, div.box.d, prevObject: S.fn.init(1)] $("div:not(.box)") // 先找到所有div标签，再过滤掉含有.box的标签 // 子元素里有p标签的元素 $("div:has(p)") // has 在子元素中选择 // 子元素里没有有p标签的元素 $("div:not(:has(p))") // 过滤掉有P标签的 */ </script> </body> </html> 筛选器 下一个兄弟元素： $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") 上一个兄弟元素： $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") 父亲元素： $("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。 儿子和兄弟元素： $("#id").children();// 儿子们 $("#id").siblings();// 兄弟们 查找 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 $("div").find("p") 等价于$("div p") 筛选 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。 $("div").filter(".c1") // 从结果集中过滤出有c1样式类的 等价于 $("div.c1") 补充： .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素 样式操作 样式类 addClass(); // 添加指定的CSS类名。 removeClass(); // 移除指定的CSS类名。 hasClass(); // 判断样式存不存在 toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。 CSS css("color","red") //DOM操作：tag.style.color="red" 例： $("p").css("color", "red"); //将所有p标签的字体设置为红色 位置： offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 position() // 获取匹配元素相对父元素的偏移 scrollTop() // 获取匹配元素相对滚动条顶部的偏移 scrollLeft() // 获取匹配元素相对滚动条左侧的偏移 例1 $("#bb").offset({"left":100,"top":100}) 例2 $(window).scrollTop(0); // 跳到首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 20000px; border: 1px solid red; } .box { background-color: green; } .back { display: none; position: fixed; right: 0; bottom: 0; width: 80px; height: 80px; background-color: #f6c2d2; text-align: center; line-height: 80px; } </style> </head> <body> <input type="button" value="JJJPPPGGG" id="btn"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=232521391,706065066&fm=26&gp=0.jpg" alt=""> <div>1111</div> <div class="back">回到顶部</div> <script src="jquery.min.js"></script> <script> // setTimeout(function () { // $("div").addClass("box") // $("div").removeClass() // $("div").hasClass() // $("div").toggleClass() // $("div").css("background-color","green") // $("div").css({"background-color":"green","width":"100px"}) // alert($("div").offset()) // var v=$(window).scrollTop(200); // scrollTop控制滚轮，若没有参数则为获取滚轮位置 // alert(v) // },3000) // $("#btn").click(function () { // $("img").offset({"top":200,"left":200}) // }) $(window).scroll(function () { // 监听滚轮位置 // console.log(123) var v=$(window).scrollTop(); if (v > 4000) { $('.back').css('display',"block") }else { $('.back').css('display',"none") } }) // $(".back").click(function () { // $(window).scrollTop(0) // }) // 匀速移动 $(".back").click(function () { var top=$(window).scrollTop(); // 获取滚轮距离顶部的位置 var t=setInterval(function () { top-=100 $(window).scrollTop(top) if (top <= 0) { clearInterval(t) } },1) }) </script> </body> </html>
浙公网安备 33010602011771号