JS-jQuery

it2023-10-03 69

JS-jQuery

初体验

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>  <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0; padding: 0; } div{ position: relative; width: 200px; height: 200px; background: red; } </style> </head> <body> <ul> <li>12306</li> <li>12306</li> <li>12306</li> <li>12306</li> <li>12306</li> <li>12306</li> <li>12306</li> <li>12306</li> <li>12306</li> <li>12306</li> </ul> <div id="box"> 佩奇 </div> </body> </html> <script type="text/javascript"> //源码地址：https://www.jq22.com/jquery-info122 //中文手册地址：https://jquery.cuishifeng.cn/ //(注！jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的， //而是根据您项目需求所适合的版本 </script> <script type="text/javascript"> //JQ函数库在使用的时候要引包 //因为JS文件不能独立运行 $("li").click(function(){ $(this).css({"background":"red"}); }); $("div").animate({"left":1000},1000); </script>

JQ函数库的基本使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ol> <li class="cur">吃饭</li> <li>睡觉</li> <li>打豆豆</li> <li>喝酒</li> <li id="study">学习</li> <li>蹦迪</li> <li>游戏</li> <li> <ul> <li>123</li> <li>12356</li> </ul> </li> </ol> <p class="cur">哈哈</p> </body> </html> <script type="text/javascript"> //jQuery函数库：对外暴露的是$函数 //$函数是整个框架中最为重要的一个函数，可以获取节点 //JQ函数库支持我们学过的全部选择器，用来获取相应节点 //JQ支持链式语法。永远是$函数开头 //JQ对象是类数组，JQ对象才可以使用JQ函数库里面的函数 //CSS函数也是JQ提供的，用来设置匹配节点的行内样式 //标签选择器 $("li").css("color","red"); //类选择器 $(".cur").css("background","#00FFFF"); //id选择器 $("#study").css("font-size",20); console.log($("li")); </script>

JQ独有的选择器

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ width: 100%; height: 60px; background: green; list-style: none; } ul li{ float: left; padding: 20px; } </style> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul> <li>游戏</li> <li>人生</li> <li>军事</li> <li>直播</li> <li>汽车</li> <li>游戏</li> <li>人生</li> <li>军事</li> <li>直播</li> <li>汽车</li> </ul> </body> </html> <script type="text/javascript"> //selector:first:匹配节点的第一个元素 // $("li:first").css("color","red"); //selector:last:匹配节点的最后一个元素 // $("li:last").css("color","pink"); //偶数的li文字颜色为青色 //selector:odd 奇数选择器 //selector:even 偶数选择器 // $("li:odd").css("color","cyan"); // $("li:even").css("color","orange"); //:gt(index):大于选择器 // $("ul li:gt(3)").css("color","white"); //:lt(index):小于选择器 // $("ul li:lt(3)").css("color","blue"); //:eq(index):获取某一个准确的索引值节点 $("li:eq(3)").css("color","brown"); </script>

练习

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } table,td,tr{ border: 1px solid black; /*解决缝隙问题*/ border-collapse: collapse; } td{ width: 20px; height: 20px; } </style> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <table border="" cellspacing="" cellpadding=""> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html> <script type="text/javascript"> //表格隔行变颜色 $("tr:even").css("background","skyblue"); $("tr:odd").css("background","red"); </script>

JQ常用的方法

CSS（）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box"> 今天感觉不错 </div> </body> </html> <script type="text/javascript"> //css方法是JQ框架提供的，给匹配节点添加行内样式 //JQ支持链式语法：从左到右 //第一个参数：匹配节点添加样式名字 //第二个参数：匹配节点样式的属性值 //注意：这种样式不常用,因为只能设置一个样式 //所以给匹配节点设置样式的时候，统一传JSON格式 //属性值可以省略px，中间有-的需要用驼峰写法 $("div").css({ coler:"red", background:"cyan", fontSize:30, }); </script>

attr()

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0; padding: 0; } img{ width: 300px; height: 300px; } </style> </head> <body> <input type="text" name="" id="" value="" /> <input type="radio" name="" id="" value="" /> <input type="checkbox" name="" id="" value="" /> <img src="../img/4.jpg"/> </body> </html> <script type="text/javascript"> //attr是JQ框架提供，用来获取||设置节点属性值 //获取节点属性值 console.log($("input:eq(1)").attr("type")); //动态的设置节点属性值 $("input:eq(2)").attr("type","text"); //获取节点属性值 console.log($("img").attr("src")); //修改节点属性值 $("img").attr("src","../img/2.jpg"); </script>

操作文本的方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <input type="text" name="" id="" value="请输入密码" /> <div id="box"> 今天感觉不错 </div> </body> </html> <script type="text/javascript"> //JQ对外暴露的都是函数，要加() //JQ提供的val方法，可以用来获取||设置表单元素文本 //获取表单元素文本 console.log($("input").val()); //修改表单元素文本 $("input").val("输入错误"); //JQ提供的html方法，可以用来获取|设置非表单元素文本 console.log($("div").html()); //修改非表单元素文本 $("div").html("输入错误hah"); </script>

类名操作

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: orange; } .cls{ background: blue; } </style> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <button>添加类名</button> <div id="box" class="box"> </div> <button>移除类名</button> <button>链式语法</button> </body> </html> <script type="text/javascript"> $("button:eq(0)").click(function(){ //给div添加类名 $("div").addClass("cls"); }); $("button:eq(1)").click(function(){ //给div移除类名 $("div").removeClass("cls"); }); //链式语法：连续打点【从左到右】 $("button:eq(2)").click(function(){ $("div").css({"width":500}).addClass("chain").html("链式语法"); }) </script>

其他常用方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> <li class="cur">喝酒</li> <li>烫头</li> </ul> </body> </html> <script type="text/javascript"> //index():获取匹配节点的索引值 //获取喝酒的索引值 // console.log($(".cur").index()); //each:遍历全部匹配的节点 //回调函数中有两个形参，第一个是索引值，第二个是匹配的节点 $("li").each(function(index,element){ //遍历每一个节点：添加样式 $(element).css({"color":"red","border":"1px solid black","width":index*100+50}) }) </script>

节点关系方法

获取父元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ width: 100%; height: 60px; list-style: none; border: 1px solid black; } ul li{ float: left; width: 100px; height: 60px; text-align: center; border-right: 1px solid black; } </style> </head> <body> <ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> <li>烫头</li> </ul> </body> </html> <script type="text/javascript"> //parent:可以获取到匹配节点的父元素 // $("li").parent().css({"background":"red"}); //this:函数上下文，如果在函数中出现（只能在函数体中使用） //事件处理函数中的上下文this，就是当前这个触发事件元素 $("li").click(function(){ $(this).css({"background":"red"}); }); </script>

其余节点关系方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id=""> <button>button</button> <p>p</p> <span id=""> span </span> </div> <div id=""> <h1>一级标题</h1> <h1>一级标题</h1> <h1>一级标题</h1> <h1>一级标题</h1> <p>段落</p> </div> </body> </html> <script type="text/javascript"> //siblings:获取兄弟姐妹节点 //如果不传选择器，匹配的是某一个节点的全部兄弟元素 //如果传选择器，匹配的是某一个节点的某个类型的兄弟元素 console.log($("body").siblings());//n.fn.init [head, prevObject: n.fn.init(1), context: document] console.log($("span").siblings("p"));//n.fn.init [p, prevObject: n.fn.init(1), context: document] //children：获取某一个节点的子节点 console.log($("div:eq(1)").children());//n.fn.init(5) [h1, h1, h1, h1, p, prevObject: n.fn.init(1), context: document] console.log($("div:eq(1)").children("p"));//n.fn.init [p, prevObject: n.fn.init(1), context: document] </script>

JQ常用的特效函数

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; background: skyblue; } </style> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <button>slideDown</button> <button>slideUp</button> <button>fadeOut</button> <button>fadeIn</button> <div id=""> </div> </body> </html> <script type="text/javascript"> //slideDown:元素向下滑动，可以有两个参数，都是可有可无(time,callback) //slideUp:元素向上卷起，可以有两个参数，都是可有可无(time,callback) //动态的改变标签的高度 //匹配第一个按钮，绑定单击事件 $("button:eq(0)").click(function(){ alert(123); //匹配div：将div进行下滑操作 $("div").slideDown(2000,function(){ //当前这个函数，动画结束之后执行 console.log("动画结束1"); }); }); $("button:eq(1)").click(function(){ //匹配div：将div进行上卷操作 $("div").slideUp(2000,function(){ //当前这个函数，动画结束之后执行 console.log("动画结束2"); }); }); // fadeOut:淡出：第一个参数：动画每次需要的时间；第二个参数：回调函数，动画结束后hi立即执行一次 // 动态的改变标签的透明度 $("button:eq(2)").click(function(){ //匹配div：将div进行淡出操作 $("div").fadeOut(2000,function(){ //当前这个函数，动画结束之后执行 console.log("动画结束3"); }); }); //fadeIn:淡入 $("button:eq(3)").click(function(){ //匹配div：将div进行淡入操作 $("div").fadeIn(2000,function(){ //当前这个函数，动画结束之后执行 $("div").css({ "background":"red", "width":100 }); }); }); </script>

动画函数animate

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ position: absolute; width: 100px; height: 100px; background: red; } </style> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id=""> </div> </body> </html> <script type="text/javascript"> //animate(json,time,callback):(必填，可有可无，可有可无), //json数据格式用来动画完成的样式 //time：时间 //callback: 回到函数 $("div").animate({ "left":1000, "width":200, // "opacity":0, "top":600 //跟颜色有关的属性不能参与动画 },5000,function(){ //动画结束后立即执行一次 console.log("动画结束执行"); }); </script>

animate()注意事项

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ position: absolute; width: 100px; height: 100px; background: pink; } </style> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div></div> </body> </html> <script type="text/javascript"> //探讨一个节点同时绑定多个动画:可以，会按照动画书写顺序完成 $("div").animate({"left":300},2000); $("div").animate({"top":300},2000); $("div").animate({"left":0},2000); $("div").animate({"top":0},2000); </script>

动画积累问题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ position: absolute; width: 200px; height: 200px; background: pink; border-radius: 50%; } </style> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <button>去北京</button> <button>去南京</button> <div></div> </body> </html> <script type="text/javascript"> //第一个按钮：绑定单击事件 //stop(true):终止当前元素所有积累的动画，放在animate之前 $("button:eq(0)").click(function(){ //添加一个动画 $("div").stop(true).animate({"left":600},2000); }); //第二个按钮：绑定单击事件 $("button:eq(1)").click(function(){ //添加一个动画 $("div").stop(true).animate({"left":0},2000); }); </script>

JQ给节点绑定事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; background: pink; margin: 10px; } </style> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id=""> </div> <div id=""> </div> </body> </html> <script type="text/javascript"> //绑定单击事件 $("div:eq(0)").click(function(){ //事件处理函数 $("div:eq(0)").css({ "background":"green", }); }); //鼠标移上 $("div:eq(1)").mouseenter(function(){ $("div:eq(1)").css({ "width":100, "height":100, "background":"yellow" }); }); //鼠标移除 $("div:eq(1)").mouseleave(function(){ $("div:eq(1)").css({ "width":200, "height":200, "background":"pink" }); }); </script>

siblings练习

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ width: 600px; height: 40px; list-style: none; margin: 50px auto; border: 1px solid black; } ul li{ float: left; width: 40px; height: 40px; background: orange; border-radius: 40%; margin-right: 30px; } </style> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html> <script type="text/javascript"> //绑定单击事件 $("li").click(function(){ $(this).css({"background":"black"}).siblings().css({"background":"skyblue"}); }); </script>

折叠卡片

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background: #eee; } #container{ width: 600px; margin: 30px auto; border: 1px solid black; } #container ul{ list-style: none; } #container ul li{ border: 1px solid orange; } #container ul li h3{ text-align: center; font-size: 18px; } #container ul li p{ display: none; } #container ul li p.cur{ display: block; } </style> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="container"> <ul> <li> <h3>当前如何通过互联网来创造个人价值</h3> <p class="cur">在当前的互联网时代，懂得如何利用互联网来实现个人的价值提升，对于未来的发展还是非常重要的。</p> </li> <li> <h3>升级传统营销：从传统营销的4P到互联网的五大解决方案</h3> <p>因为每个英文单词开头都是P，合起来就变成了4P。 4P的创举是杰罗姆·麦卡锡（E.Jerome Mccarthy）总结而成的，因为非常简洁、形象，所以成为所有营销人入门的分析框架，成为最经典的营销组合分析工具。</p> </li> <li> <h3>当前如何通过互联网来创造个人价值</h3> <p>在当前的互联网时代，懂得如何利用互联网来实现个人的价值提升，对于未来的发展还是非常重要的。</p> </li> <li> <h3>升级传统营销：从传统营销的4P到互联网的五大解决方案</h3> <p>因为每个英文单词开头都是P，合起来就变成了4P。 4P的创举是杰罗姆·麦卡锡（E.Jerome Mccarthy）总结而成的，因为非常简洁、形象，所以成为所有营销人入门的分析框架，成为最经典的营销组合分析工具。</p> </li> </ul> </div> </body> </html> <script type="text/javascript"> //给新闻标题绑定单击事件 $("h3").click(function(){ //写的少，做的多--->链式语法 $(this).siblings().slideDown(1000).parent().siblings().children("p").slideUp(1000); }); </script>

轮播图

淡入淡出轮播图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background: #eee; } .container{ position: relative; width: 600px; height: 400px; margin: 30px auto; border: 1px solid black; /*移除隐藏*/ overflow: hidden; } ul{ position: absolute; width: 100%; height: 100%; list-style: none; background-size: ; } img{ width: 600px; height: 400px; } .lbtn{ position: absolute; width: 40px; height: 20px; left: 0px; top: 40%; /*小手*/ cursor: pointer; } .rbtn{ position: absolute; width: 40px; height: 20px; right: 0px; top: 40%; cursor: pointer; } </style> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container"> <ul> <li><img src="../img/1.jpg" alt="" /></li> <li><img src="../img/2.jpg" alt="" /></li> <li><img src="../img/3.jpg" alt="" /></li> <li><img src="../img/4.jpg" alt="" /></li> <li><img src="../img/5.jpg" alt="" /></li> </ul> <button class="lbtn"><</button> <button class="rbtn">></button> </div> </body> </html> <script type="text/javascript"> var step = 0; //左侧按钮的单击事件 $(".lbtn").click(function(){ //当前显示图片淡出 $("li:eq("+step+")").fadeOut(1000,function(){ //动画结束 step--; if(step < 0){ step = 4; } $("li:eq("+step+")").fadeIn(1000); }); }); //右侧按钮的单击事件 $(".rbtn").click(function(){ $("li:eq("+step+")").fadeOut(1000,function(){ step++; step = step > 4? 0:step; $("li:eq("+step+")").fadeIn(2000); }); }); </script>

传统轮播图

*{ margin: 0; padding: 0; } body{ background: #eee; } .container{ position: relative; width: 600px; height: 400px; margin: 30px auto; border: 1px solid black; overflow: hidden; } ul{ width: 100%; height: 100%; list-style: none; } ul li{ position: absolute; left: 600px; } ul li.cur{ left: 0px; } img{ width: 600px; height: 400px; } .lbtn{ position: absolute; width: 25px; height: 25px; left: 0px; top: 40%; cursor: pointer; } .rbtn{ position: absolute; width: 25px; height: 25px; right: 0px; top: 40%; cursor: pointer; } ol{ position: absolute; width: 150px; height: 20px; left: 40%; bottom: 10px; list-style: none; } ol li{ float: left; width: 20px; height: 20px; border-radius: 50%; background: #EEEEEE; text-align: center; margin-right: 10px; } ol li.show{ background: #2bc; color: white; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/default1.css"/> <script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container"> <ul> <li class="cur"><img src="../img/1.jpg" alt="" /></li> <li><img src="../img/2.jpg" alt="" /></li> <li><img src="../img/3.jpg" alt="" /></li> <li><img src="../img/4.jpg" alt="" /></li> <li><img src="../img/5.jpg" alt="" /></li> <li><img src="../img/6.jpg" alt="" /></li> </ul> <button class="lbtn"><</button> <button class="rbtn">></button> <ol> <li class="show">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html> <script type="text/javascript"> var idx = 0; //左侧按钮的单击事件 $(".lbtn").click(function(){ //当前显示的这张图 $("ul li:eq("+idx+")").css({"left":0}).stop(true).animate({"left":-600},1000); idx--; idx = idx<0?5:idx; //下张图的显示 $("ul li:eq("+idx+")").css({"left":600}).stop(true).animate({"left":0},1000); //小球的类名的切换 $("ol li:eq("+idx+")").addClass("show").siblings().removeClass("show"); }); //右侧按钮的单击事件 $(".rbtn").click(function(){ //当前显示的这张图 $("ul li:eq("+idx+")").css({"left":0}).stop(true).animate({"left":600},1000); idx++; idx = idx > 5?0:idx; //下张图的显示 $("ul li:eq("+idx+")").css({"left":-600}).stop(true).animate({"left":0},1000); //小球的显示 $("ol li:eq("+idx+")").addClass("show").siblings().removeClass("show"); }); </script>

最新回复(0)