搜索到
24
篇与
的结果
-
JQload( )方法示例演示 方法概述jQuery简化了Ajax开发过程,jQuery对Ajax做了大量的封装,我们使用起来也较为方便,不需要去考虑浏览器兼容性。对于封装的方式，jQuery 采用了三层封装:最底层的封装方法为: $.ajax( ),而通过这层封装了第二层有三种方法:.load()、$.get()和$.post(),最高层是$.getScript(和$.getJSON())方法。load()方法功能描述:载入远程HTML文件代码并插入到DOM中。调用语法:load(url,[data],[callback])url(String):待装入HTML网页网址data(Map):(可选)发送至服务器的key/value数据callback(Callback):(可选)载入成功时回调函数书写代码JSON数据源[ { "code":"10001", "name":"路人甲", "age":"18", "sex":"女" },{ "code":"10002", "name":"路人乙", "age":"19", "sex":"男" },{ "code":"10003", "name":"路人丙", "age":"20", "sex":"女" } ]HTML data页面<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.6.1.js"></script> <style> table th{ background-color: #ccc; border: solid 1px #000; } table{ border-collapse: collapse; border: solid 1px #000; text-align: center; } table td,th{ padding: 5px; } </style> </head> <table> <thead> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> </tbody> </table> <script> $(function(){ $.getJSON("xml/data.json",function(res){ var data = res; for (var i = 0; i < data.length; i++) { var str=`<tr> <td>`+data[i].code+`</td> <td>`+data[i].name+`</td> <td>`+data[i].age+`</td> <td>`+data[i].sex+`</td> </tr>`; $("tbody").append(str); } }) }) </script> </html>HTMl index页面<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.6.1.js"></script> <script src="js/index.js"></script> <style> .con{ margin-top: 10px; } </style> </head> <body> <div class="content"> <div class="tip"> <button class="btu">测试</button> </div> <div class="con"> </div> </div> </body> </html>JS index.js$(function(){ $(".btu").on("click",function(){ $(".con").load("data.html"); }) })效果展示 -
JSJQ实现ajax技术发起请求 什么是AJAXAJAX(啊扎克斯)是一种应用技术的缩写，它的英文全称为：(Asynchronous Javascript and XML异步JavaScript和XML) 。从ajax的名字就可以看出ajax是多种技术的集合，至少包括JavaScript和XML两项技术。事实上，ajax也并不是什么新技术，只是包括了HTML、XHTML、css、DOM、XML、XSTL和HMLHttpRequest等技术在内的一个技术集合。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。AJAX与传统WEB区别1.发送请求方式不同。传统Web应用通过浏览器发送请求，而Ajax技术则是通过JavaScript的XmlHttpRequest对象。2.服务器响应不同。针对传统Web应用，服务器的响应是一个完整的页面，而采用Ajax技术后，服务器的响应只是需要的数据。3.客户端处理的响应方式不同。传统的Web应用发送请求后，浏览器将等待服务器响应完成后重新加载整个页面。而采用Ajax技术后，浏览器不再空闲等待请求的响应，而只是通过JavaScript动态更新页面中需要更新的部分。为什么要使用AJAX减轻服务器的负担，按需取数。可以最大程度的减少冗余请求和响应对服务造成的负担。无刷新更新页面，减少用户心理和实际的等待时间。可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理。减轻服务器和速写的负担，节约空间和宽带租用成本。基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。AJAX异步技术实现的步骤AJAX发起请求readyState是用户客户端处理阶段状态0-(未初始化)还没有调用send()方法1-(载入）已调用send()方法，正在发送请求2-(载入完成)send()方法执行完成，已经接收到全部响应内容3-(交互)正在解析响应内容4-(完成)响应内容解析完成，可以在客户端调用了*/status 是服务器状态200为请求成功404为找不到指定接口请求失败JS方式发起请求代码<body> <div id="mydiv"> </div> <button onclick="loadXMLDoc()">发起请求</button> </body>$(function(){ //实例化ajax对象的方法 可复用 function creatXmlHttp(){ //声明变量存放ajax对象 var xmlHttp; //判断该浏览器是否存在XMLHttpRequest对象 if(window.XMLHttpRequest){ //实例化对象 xmlHttp = new XMLHttpRequest(); }else{ xmlHttp = new ActiveXObject("Microsofit.XMLHTTP"); } //把创建好的对象进行返回 return xmlHttp; } //绑定按钮的单击事件 $("#but").on("click",function(e){ var xmlHttp = creatXmlHttp(); console.log(xmlHttp); xmlHttp.onreadystatechange = function(){ console.log(xmlHttp.readyState); if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ console.log(xmlHttp.responseText); } } //配置请求，初始化请求 xmlHttp.open("get","接口地址",true); //提交请求 xmlHttp.send(); }) })JQ方式发起请求代码HTMl<script src="https://code.jquery.com/jquery-3.6.1.js"></script><style> table{ width: 400px; border: 1px solid #000; border-collapse: collapse; text-align: center; } table tr,td,th{ border: 1px solid #000; } thead th{ height: 30px; padding-left: 10px; padding-right: 10px; background-color: #ccc; font-size: 18px; } </style> <body> <table> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>QQ</th> </tr> </thead> <tbody> </tbody> </table> </body>ＪＱ$(function(){ //文档载入事件 $.ajax({ type:"get", url:"xml/data.json", success:function(userList){ console.log(userList); for (var i = 0; i < userList.length; i++) { var str =`<tr> <td>`+userList[i].code+`</td> <td>`+userList[i].name+`</td> <td>`+userList[i].age+`</td> <td>`+userList[i].qq+`</td> </tr>` $("tbody").append(str); } },error(res) { console.log("请求失败！错误原因："+res) } }) })ＪＳＯＮ[ { "code":"10001", "name":"xingyi", "age":"19", "qq":"123456" },{ "code":"10002", "name":"blog", "age":"18", "qq":"123456" } ]
-
JQ实现选项卡动态内容案例练习 效果演示需求分析需求当我们单击不同的卡片时，显示的内容也不同给选项卡添加动态的导航菜单、图片、内容选项卡导航菜单、图片、介绍通过后台数据源动态显示选择某一人物时，人物的图片和人物的介绍一并展示分析代码块都有简单注释，看不懂的地方百度复制代码后要注意图片路径，替换成你的没有本地JQ代码块的可以通过外链引入JS的数据源就相当于后台，改数据=改前台寄语朋友说：你没有以前潇洒了，似乎眼中凌乱了沧桑我笑了笑，忽然红了一下眼眶成长两个字，连偏旁都没有书写代码JQ外链代码块<script src="https://code.jquery.com/jquery-3.6.1.js"></script>HTML代码块<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选项卡功能</title> <script src="js/jQuery3.6.1.js"></script> <script src="js/index.js"></script> <style type="text/css"> *{ margin: 0 auto; } img:hover{ transform: scale(1.1); } .overAll{ width: 950px; } .title{ height: 50px; background-color: cornflowerblue; } .title ul li{ list-style: none; float: left; font-size: 19px; padding: 10px 20px 10px 20px; cursor: pointer; } .title ul li:hover{ color: #fff; } .centent{ padding: 0px 20px 10px 20px; background-color: #ccc; } .tishibox{ padding-top: 10px; padding-bottom: 10px; } .tishi{ font-size: 20px; font-weight: bolder; } .tishibt{ width: 20px; height: 5px; background-color: #fff; margin-right: 5px; } .centent_img{ text-align: center; margin-bottom: 20px; } .centent_img img{ width: 440px; height: 250px; } .centent_p p{ text-indent: 2em; color: #ff007f; } .centent_lr{ height: 300px; } .centent_left{ float: left; margin-right: 10px; } .centent_right{ float: left; margin-left: 10px; } .centent_qt img{ width: 440px; height: 250px; } .footer{ height: 50px; background-color: aqua; text-align: center; } .footer p{ padding-top: 15px; } .checked{ background-color: #55aa7f; border-radius: 0px 20px 0px 20px; color: white; } </style> </head> <body> <!-- 全局div --> <div class="overAll"> <!-- 导航标题的div --> <div class="title"> <ul> </ul> </div> <!-- 内容的div --> <div class="centent"> <!-- 内容第一个div --> <div class="centent_centent"> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">人物图片</span> </div> <!-- 人物的图片 --> <div class="centent_img"> <!-- <img src="" alt=""> --> </div> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">人物介绍</span> </div> <!-- 人物的介绍 --> <div class="centent_p"> <!-- <p>这个是人物介绍</p> --> </div> </div> <!-- 内容第二个div --> <div class="centent_lr"> <!-- 第二个div里面的左边div --> <div class="centent_left"> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">梅利号</span> </div> <!-- 图片内容 --> <div class="centent_qt"> <img src="img/mlh.jpg"> </div> </div> <!-- 第二个div里面的右边div --> <div class="centent_right"> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">阳光号</span> </div> <!-- 图片内容 --> <div class="centent_qt"> <img src="img/ygh.jpg"> </div> </div> </div> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">草帽海贼旗</span> </div> <!-- 图片内容 --> <div class="centent_qt" style="text-align: center;"> <img src="img/caomaohzq.jpg" alt=""> </div> </div> <!-- 底部div --> <div class="footer"> <p>版权声明</p> </div> </div> </body> </html>JavaScript代码块//窗体加载完成事件 $(function(){ //数据源 let admin_nav = [{ title : "路飞", content : "蒙奇·D·路飞，“草帽一伙”的船长，绰号大船长·四皇·“草帽小子”。东海出身，悬赏金30亿贝里。 [83] 是食用了橡胶果实的橡胶人（五老星认为这是人人果实·幻兽种·尼卡形态）。“草帽一伙”的创立者。是被称作“极恶的世代”中登陆香波地群岛的11位超新星的其中一位。梦想成为“海贼王”，以此为目标在大海上航行。", images : "img/lufei.jpg" },{ title : "索隆", content : "罗罗诺亚·索隆，“草帽一伙”的战斗员，绰号剑豪“海贼猎人”。东海出身，悬赏金11亿1100万贝里。是使用三把刀战斗的三刀流剑士。“草帽一伙”第一位加入的成员。 [42] 与船长路飞一样是被称作“极恶的世代”中登陆香波地群岛的11位超新星的其中一位。梦想成为“世界第一大剑豪”，以此为目标在大海上航行。", images : "img/suolong.jpg" },{ title : "山治", content : "草帽团厨师，“草帽一伙”的航海士，绰号“小贼猫”。东海出身，悬赏金3亿6600万贝里。使用天候棒结合气象科学进行战斗。“草帽一伙”第二位加入的成员。 [41] 梦想绘制“全世界的地图”，以此为目标在大海上航行。", images : "img/shanzhi.jpg" },{ title : "甚平", content : "草帽团船舵手，“草帽一伙”的船匠，绰号“铁人·弗兰奇”。南海出身，悬赏金3亿9400万贝里。使用改造后的身体以及自制兵器进行战斗。“草帽一伙”第七位加入的成员。梦想“乘坐自己制作的梦想之船绕伟大航路一周”，以此为目标在大海上航行。 ", images : "img/shenping.jpg" },{ title : "娜美", content : "草帽团航海士，“草帽一伙”的航海士，绰号“小贼猫”。东海出身，悬赏金3亿6600万贝里。使用天候棒结合气象科学进行战斗。“草帽一伙”第二位加入的成员。 [41] 梦想绘制“全世界的地图”，以此为目标在大海上航行。", images : "img/namei.jpg" },{ title : "罗宾", content : "草帽团考古学家，“草帽一伙”的考古学家，绰号“恶魔之子”。西海出身，悬赏金9亿3000万贝里。食用了花花果实的能力者。“草帽一伙”第六位加入的成员。梦想“找到空白的100年历史”，以此为目标在大海上航行。", images : "img/luobin.jpg" },{ title : "布鲁克", content : "草帽团音乐家，“草帽一伙”的船匠，绰号“铁人·弗兰奇”。南海出身，悬赏金3亿9400万贝里。使用改造后的身体以及自制兵器进行战斗。“草帽一伙”第七位加入的成员。梦想“乘坐自己制作的梦想之船绕伟大航路一周”，以此为目标在大海上航行。 ", images : "img/buluke.jpg" },{ title : "乌索普", content : "草帽团狙击手，“草帽一伙”的航海士，绰号“小贼猫”。东海出身，悬赏金3亿6600万贝里。使用天候棒结合气象科学进行战斗。“草帽一伙”第二位加入的成员。 [41] 梦想绘制“全世界的地图”，以此为目标在大海上航行。", images : "img/wusuopu.jpg" },{ title : "乔巴", content : "草帽团船医，“草帽一伙”的船医，绰号“爱吃棉花糖的乔巴”。伟大航路出身，悬赏金1000贝里。是食用了人人果实的驯鹿。“草帽一伙”第五位加入的成员。梦想“成为万能药”，以此为目标在大海上航行。", images : "img/qiaoba.jpg" },{ title : "弗兰奇", content : "草帽团船匠，“草帽一伙”的船匠，绰号“铁人·弗兰奇”。南海出身，悬赏金3亿9400万贝里。使用改造后的身体以及自制兵器进行战斗。“草帽一伙”第七位加入的成员。梦想“乘坐自己制作的梦想之船绕伟大航路一周”，以此为目标在大海上航行。", images : "img/fulanqi.jpg" }] //渲染页面 把数据源的数据显示出来 for (var i = 0; i < admin_nav.length; i++) { var str = "<li>"+ admin_nav[i].title +"</li>"; $(".title>ul").append(str); } //默认的内容显示 var strP = "<p>"+ admin_nav[0].content +"</p>"; $(".centent_p").html(strP); //默认的图片显示 var strImg = "<img src="+ admin_nav[0].images +">"; $(".centent_img").html(strImg); $(".title>ul>li").eq(0).addClass("checked"); $(".title>ul>li").on("click",function(){ $(".title>ul>li").removeClass("checked"); $(this).addClass("checked"); var index = $(this).index(); //对应的内容显示 var strP = "<p>"+ admin_nav[index].content +"</p>"; $(".centent_p").html(strP); //对应的图片显示 var strImg = "<img src="+ admin_nav[index].images +">"; $(".centent_img").html(strImg); }) })页面效果
-
JQ实现鼠标移入img预览图片练习 效果演示图需求分析需求写一组有效果和没效果的对比分析当鼠标移进图片时变大进入预览图片当鼠标持续移动的时候预览图也要跟进注意复制的代码图片路径肯定不对路径务必更换成你自己的路径JS代码比较复杂 都有注释慢慢看没有JQ代码块 可以使用外链的方式引入<script src="https://code.jquery.com/jquery-3.6.1.js"></script>书写代码HTML代码块<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片显示</title> <script src="js/jQuery3.6.1.js"></script> <script src="js/index.js"></script> <style type="text/css"> body{ margin: 0; padding: 40px; background: #fff; font: 80% Arial,Helvetica,sans-serif; color: #555; line-height: 180%; } img{ border: none; } ul,li{ margin: 0; padding: 0; } li{ width: 140px; height: 140px; list-style: none; float: left; display: inline; margin-right: 10px; margin-top: 10px; border: 1px solid #AAAAAA; } #tooltip{ position: absolute; border: 1px solid #ccc; background-color: #333; padding: 2px; display: none; color: #fff; } .toolbox{ width: 100%; height: 300px; } .toolbox img{ width: 140px; height: 140px; } .nobox img{ width: 140px; height: 140px; } .nobox{ width: 100%; height: 300px; } </style> </head> <body> <div class="toolbox"> <h3>有效果</h3> <ul> <li> <a href="img/lufei.jpg" class="tooltip" title="路飞"> <img src="img/lufei.jpg" alt="路飞"> </a> </li> <li> <a href="img/suolong.jpg" class="tooltip" title="索隆"> <img src="img/suolong.jpg" alt="索隆"> </a> </li> <li> <a href="img/shanzhi.jpg" class="tooltip" title="山治"> <img src="img/shanzhi.jpg" alt="山治"> </a> </li> <li> <a href="img/namei.jpg" class="tooltip" title="娜美"> <img src="img/namei.jpg" alt="娜美"> </a> </li> <li> <a href="img/luobin.jpg" class="tooltip" title="罗宾"> <img src="img/luobin.jpg" alt="罗宾"> </a> </li> <li> <a href="img/qiaoba.jpg" class="tooltip" title="乔巴"> <img src="img/qiaoba.jpg" alt="乔巴"> </a> </li> <li> <a href="img/buluke.jpg" class="tooltip" title="布鲁克"> <img src="img/buluke.jpg" alt="布鲁克"> </a> </li> <li> <a href="img/shenping.jpg" class="tooltip" title="甚平"> <img src="img/shenping.jpg" alt="甚平"> </a> </li> <li> <a href="img/fulanqi.jpg" class="tooltip" title="弗兰奇"> <img src="img/fulanqi.jpg" alt="弗兰奇"> </a> </li> <li> <a href="img/wusuopu.jpg" class="tooltip" title="乌索普"> <img src="img/wusuopu.jpg" alt="乌索普"> </a> </li> </ul> </div> <div class="nobox"> <h3>无效果</h3> <ul> <li> <a href="img/lufei.jpg" title="路飞"> <img src="img/lufei.jpg" alt="路飞"> </a> </li> <li> <a href="img/suolong.jpg" title="索隆"> <img src="img/suolong.jpg" alt="索隆"> </a> </li> <li> <a href="img/shanzhi.jpg" title="山治"> <img src="img/shanzhi.jpg" alt="山治"> </a> </li> <li> <a href="img/namei.jpg" title="娜美"> <img src="img/namei.jpg" alt="娜美"> </a> </li> <li> <a href="img/luobin.jpg" title="罗宾"> <img src="img/luobin.jpg" alt="罗宾"> </a> </li> <li> <a href="img/qiaoba.jpg" title="乔巴"> <img src="img/qiaoba.jpg" alt="乔巴"> </a> </li> <li> <a href="img/buluke.jpg" title="布鲁克"> <img src="img/buluke.jpg" alt="布鲁克"> </a> </li> <li> <a href="img/shenping.jpg" title="甚平"> <img src="img/shenping.jpg" alt="甚平"> </a> </li> <li> <a href="img/fulanqi.jpg" title="弗兰奇"> <img src="img/fulanqi.jpg" alt="弗兰奇"> </a> </li> <li> <a href="img/wusuopu.jpg" title="乌索普"> <img src="img/wusuopu.jpg" alt="乌索普"> </a> </li> </ul> </div> </body> </html>JavaScript代码块$(function(){ var x = 10; var y = 20; //鼠标移入图片的事件绑定 $("a.tooltip").mouseover(function(e){ //鼠标进入元素 //获取标签的title属性 this.myTitle = this.title; //设为空 this.title = ""; //拼接图片标题，一会放于底部 var imgTitle = this.myTitle ? "<br/>" + this.myTitle : ""; //创建div元素 包含img标签 var tooltip = `<div id = 'tooltip'> <img src='`+this.href+`' alt='产品预览图'/>`+imgTitle+`<\/div>`; //把拼接好的字符串追加到文档中 $("body").append(tooltip); //设置x坐标和y坐标并且显示 $("#tooltip").css({ "top":(e.pageY + y) + "px", "left":(e.pageX + x) + "px" }).show("fast"); }).mouseout(function(){ //鼠标离开元素 //鼠标离开的时候把a标签的title属性设置回来 this.title = this.myTitle; //移除样式 $("#tooltip").remove(); }).mousemove(function(e){ //鼠标在元素上持续移动的事件 持续触发 //持续修改，设置div坐标 $("#tooltip").css({ "top":(e.pageY + y) + "px", "left":(e.pageX + x) + "px" }); }); });寄语小孩子一出生就会哭，可见忧伤是人类的本能，笑只是一种能力！ 祝您在代码的路上坚持下去！
-
JQ实现添加和删除元素示例 效果图认识一下append() ：是向每个匹配的元素末尾内部追加内容appendTo() ：操作对象相反，可以理解为新元素被追加到元素的末尾prepend() ：方法是在元素的前面加，只是前后有不同prependTo() 方法和appendTo()的关系也如此书写代码HTMl代码块<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.6.1.js"></script> </head> <body> <div id="centent"> </div> <button id="add">添加</button> <button id="del">删除</button> </body> <script src="js/index.js""></script> </html>javascript代码块//添加按钮单击事件 $("#add").click(function(){ //获取div全部的子集元素 var pList = $("#centent").children(); //拼接新增的p标签 var str = "<p>这是第"+(pList.length+1)+"个p标签"; //把拼接的p标签添加到div里末尾的位置变成div的最后一个子元素 $("#centent").append(str); //把什么元素添加到谁的末尾 //$(str).appendTo($("#centent")); }) //添加删除按钮的单击事件 $("#del").click(function(){ //获取div全部的子集元素 var pList = $("#centent").children(); //根据子元素的最大索引删除子元素节点 pList.eq(pList.length - 1).remove(); })
-
JQ实现简易的显示和隐藏分类练习 效果演示默认情况下点击了简化之后练习要求默认的情况下显示全部的分类内容，当点击简化了之后，隐藏中间的分类以及保留分类的最后一个让其显示，当又点击更多的时候又将隐藏的分类将其全部显示出来。通过外链式链接JQ代码块<script src="https://code.jquery.com/jquery-3.6.1.js"></script>书写代码HTML的代码块 直接复制粘贴即可<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .Movie{ width: 500px; /* height: 250px; */ padding: 0; border: solid 1px #787878; } .Mheader{ height: 40px; margin: 0; background-color: #ccc; text-align: center; } .Mcontent{ height: 150px; margin: 0; } .Mfooter{ height: 40px; margin: 0; text-align: end; } .Mfooter a{ margin-right: 10px; } .Mheader p{ font-size: 16px; font-weight: bold; padding-top: 5px; margin: 0; } .Mcontent ul{ padding: auto; } .Mcontent ul li{ list-style-type: none; padding: 10px 10px; float: left; } </style> <script src="https://code.jquery.com/jquery-3.6.1.js"></script> </head> <body> <!-- HTML的代码 --> <div class="Movie"> <div class="Mheader"> <p>电影分类</p> </div> <div class="Mcontent"> <ul> <li><a href="#">动漫</a>(1001)</li> <li><a href="#">爱情</a>(1002)</li> <li><a href="#">动作</a>(1003)</li> <li><a href="#">科幻</a>(1004)</li> <li><a href="#">NBA</a>(1005)</li> <li><a href="#">CBA</a>(1006)</li> <li><a href="#">KPL</a>(1007)</li> <li><a href="#">LPL</a>(1008)</li> <li><a href="#">修真</a>(1009)</li> <li><a href="#">恐怖</a>(1010)</li> <li><a href="#">都市</a>(1011)</li> <li><a href="#">其他</a>(1012)</li> </ul> </div> <div class="Mfooter"> <a href="#" class="aBot">简化</a> </div> </div> </body> <script src="js/index.js"></script> </html>JS的代码块 直接复制粘贴即可//电影分类 //获取简化绑定单击事件 $(".aBot").click(function(){ //获取a标签的文本内容 var text = $(this).text(); //判断简化是不是简化 if(text == "简化"){ //隐藏索引从6开始的分类且保留最后一个 $(".Mcontent ul li:gt(6):not(:last)").hide(1000); //修改div盒子的高度 $(".Mcontent").css("height","100px"); //简化修改为更多 $(this).text("更多"); } else{ //将隐藏的分类将其显示 $(".Mcontent ul li:gt(6)").show(1000); //修改div盒子的高度 $(".Mcontent").css("height","150px"); //更多修改为简化 $(this).text("简化"); } })
-
JQ实现标题简略和详细显示的练习 演示图练习要求当鼠标单击标题栏的时候，内容显示出来，单击后又把下方的内容进行隐藏！单击标题栏显示JQ的特点是什么书写代码HTML的代码块 直接复制粘贴即可<!-- HTML代码 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jQuery3.6.1.js"></script> <style> .box{ width: 800px; border: solid 1px #000; } .title{ text-align: center; border-bottom: solid 1px #000; } .title h2{ margin: 0; padding: 10px; background-color: aquamarine; } .content{ padding-left: 10px; padding-right: 10px; padding-bottom: 10px; } </style> </head> <body> <div class="box"> <div class="title"> <h2>jQuery 有什么特点？</h2> </div> <div class="content"> <p> 快速获取文档元素：jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。 <br><br> 提供漂亮的页面动态效果：jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。 <br><br> 创建AJAX无刷新网页：AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。 <br><br> 提供对JavaScript语言的增强：jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。 <br><br> 增强的事件处理：jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。 <br><br> 更改网页内容：jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。 </p> </div> </div> <p>这是第一个段落1111111</p> <p>这是第二个段落2222222</p> <p>这是第三个段落3333333</p> </body> <script src="js/index.js"></script> </html>JS的代码块 直接复制粘贴即可前提是你必须得引入JQ代码块我这里引入的是本地路径//绑定按钮单击事件 $(".title").click(function(){ $(".title").css("borderBottom","solid 1px #000"); $(".content").slideToggle(1000,function(){ if($(".content").css("display") == "none"){ $(".title").css("border","0px"); } }) })//绑定鼠标悬浮时进行的操作 $(".title").hover(function(){ $(".title").css("border-bottom","solid 1px #000"); $(".content").slideToggle(1000,function(){ if($(".content").css("display") == "none"){ $(".title").css("border","0px"); } }) })然后再给p标签的文本内容进行单击一次就进行加大字体的效果//one单次执行事件 //p绑定一个一次性的one事件 $("p").one("click",function(){ //编写一个自定义的动画 点击时fontSize属性+=6px $(this).animate( { "fontSize":"+=6px", },500,function(){ console.log("完成") }) })
-
JQ简易实现模糊查询表格内容练习 演示图需求分析在搜索框输入内容然后点击查询给查询到的内容行添加背景颜色如果查询的结果为空则弹窗提示用户输入内容时回车也可以执行查询书写代码<!-- HTML的代码 --> <div> <input type="text" placeholder="请输入要搜索的内容"> <button class="Search">搜索</button> </div> <table> <thead> <tr> <th>编号</th> <th>用户名</th> <th>性别</th> <th>电子邮件</th> </tr> </thead> <tbody> <tr> <td>20220301</td> <td>小宝</td> <td>男</td> <td>58535045@qq.com</td> </tr> <tr> <td>20220302</td> <td>小静</td> <td>女</td> <td>2643522704@qq.com</td> </tr> <tr> <td>20220303</td> <td>耀世</td> <td>男</td> <td>927463078@qq.com</td> </tr> <tr> <td>20220301</td> <td>小周</td> <td>男</td> <td>2972532486@qq.com</td> </tr> <tr> <td>20220302</td> <td>小李</td> <td>女</td> <td>2643522704@qq.com</td> </tr> </tbody> </table>//JS代码 //获取表格 var table = $("table"); table.css("margin-top","10px"); // table.css("width","500px") //获取标题行 var th = $("table>thead>tr"); //修改样式 th.css({ "background":"#00aaff", "color":"whitesmoke", }) //获取标题的单元格 var thh = $("table>thead>tr>th"); thh.eq(0).css("width","100px") thh.eq(1).css("width","80px") thh.eq(2).css("width","50px") thh.eq(3).css("width","250px") //获取内容行 var tr1 = $("tbody>tr:even"); var tr2 = $("tbody>tr:odd"); tr1.css("background","#ccc") tr2.css("background","#fff") //var td = $("td"); //获取样式为.Search的按钮绑定点击事件 $(".Search").click(function(){ //获取tr行 赋予默认背景 $("tbody>tr:even").css("background","#ccc"); $("tbody>tr:odd").css("background","#fff"); //获取搜索框的内容 var content = $("input").val(); //判断内容输入的字符是否小于0 if(content.length <= 0){ alert("请输入搜索内容再提交"); return; //直接往回滚 } //搜索内容是否在单元行里面 $("tr:contains("+ content +")").css({ //背景颜色设置为红色 "background" : "red", }) }) //获取键盘事件 $(document).keydown(function(e){ //判断按下的按钮是否为回车键 13=回车键 if(e.keyCode == 13){ //执行搜索按钮的单击代码 $(".Search").click(); } })
-
JQ简易购物车多选计算价格案例练习 案例演示书写代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{ border: solid 1px; border-collapse: collapse; } th{ width: 80px; background-color: #00aaff; color: #000; } table,th,td{ text-align: center; border: 1px solid #787878; } input{ width: 50px; } button { background-color: #00aaff; border: none; color: white; padding: 10px 40px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> <script src="js/jQuery3.6.1.js"></script> </head> <body> <div> <table> <thead> <tr> <th>选择</th> <th>名称</th> <th>分类</th> <th>价格</th> <th>数量</th> </tr> </thead> <tbody> <!--后台执行--> </tbody> </table> <h1>合计：</h1> <button>提交</button> </div> </body> <script src="js/index.js"></script> </html>//数据源 var fruit = [{ name : "苹果", type : "水果", price : "4" },{ name : "西瓜", type : "水果", price : "2.5" },{ name : "香蕉", type : "水果", price : "1.5" },{ name : "雪梨", type : "水果", price : "2.5" },{ name : "草莓", type : "水果", price : "5" },{ name : "白菜", type : "蔬菜", price : "1" },{ name : "青瓜", type : "蔬菜", price : "1.5" },{ name : "西红柿", type : "蔬菜", price : "1" },{ name : "茄子", type : "蔬菜", price : "2" }] //渲染数据源在页面 var str; for (var i = 0; i < fruit.length; i++) { str += `<tr> <td><input type="checkbox"></td> <td>`+fruit[i].name+`</td> <td>`+fruit[i].type+`</td> <td><a>`+fruit[i].price+`</a>/斤</td> <td><input type="number" name="price" value="1"></td> </tr>` } //输出数据在表格的内容中 $("tbody").html(str); //提交 $("button").click(function(){ var checkList = $(":checked"); var sum = 0; for (var i = 0; i < checkList.length; i++) { var parenList = checkList.eq(i).parent().nextAll(); //价格 获取a标签中的文本内容 var price = parenList.eq(2).children().text(); //数量 获取input标签中的值 var number = parenList.eq(3).children().val(); //计算和 sum = sum + (number * price) } //输出内容在页面 替换h1标签的内容 $("h1").text("合计：" + sum); })
-
认识了解JQuery页面交互 认识JQueryjQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。快速获取文档元素 jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。提供漂亮的页面动态效果 jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。创建AJAX无刷新网页 AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。提供对JavaScript语言的增强 jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。增强的事件处理 jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。更改网页内容 jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。只需要少量的代码，即可将它们集成到网站上，并且能够帮助访问者分享网站上的内容。JS与JQ之间的获取//原生js获取元素 var div = document.getElementsByClassName("header"); console.log(div); //jq通过类选择器获取元素并输出控制台 console.log($(".header")); //等待页面DOM结构加载完成后执行，事件处理的程序 //详写 $(document).ready(function(){ console.log($(".header")); }) //简写 $(function(){ console.log($(".header")); })盒子动画示例这个例子在页面上定义了2个层，单击层会让层消失，选择元素使用了JQuery选择器。例子中消失的动画效果是JQuery提供的默认动画效果。hide隐藏 在操作之前先获取jq3.6.1版本的代码 可通过外链或者本地方式引入 外链引入必须要有网络的情况下才能正常使用jquery-3.6.1.js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .header{ width: 300px; height: 100px; text-align: center; background-color: #ccc; } </style> <script src="https://code.jquery.com/jquery-3.6.1.js"></script> </head> <body> <!-- HTML的代码 --> <div class="header"> <h1>Hello World</h1> </div> <div class="header"> <h1>Hello XingYiGe</h1> </div> <br /> <br /> <br /> <button class="butGo">点我点我点我</button> </body> <script src="js/index.js"></script> </html>//JS代码 //等待页面DOM结构加载完成后执行，事件处理的程序 $(function(){ $(".header").click(function(){ //hide(隐藏时间) 用于隐藏 $(this).hide(3000); }) })给按钮也加上单击事件 多种写法//写法一 $(document).ready(function(){ $(".butGo").click(function(){ alert("你点我干嘛 有种再点一次"); $(".butGo").hide(3000); }) }) //写法二 $().ready(function(){ $(".butGo").click(function(){ alert("你点我干嘛 有种再点一次"); $(".butGo").hide(3000); }) }) //写法三 $(function(){ $(".butGo").click(function(){ alert("你点我干嘛 有种再点一次"); $(".butGo").hide(3000); }) }) 解决JQuery与其他库冲突var $="其他库"; //解决冲突并重新创建一个快捷方式 var jq = jQuery.noConflict(); console.log(jq("div"));选择器//基本选择器 $("#id") //ID选择器 $("div") //元素选择器 $(".classname") //类选择器 $(".classname,.classname1,#id1") //组合选择器 //层次选择器 $("#id>.classname ") //子元素选择器 $("#id .classname ") //后代元素选择器 $("#id + .classname ") //紧邻下一个元素选择器 $("#id ~ .classname ") //兄弟元素选择器 //过滤选择器(重点) $("li:first") //第一个li $("li:last") //最后一个li $("li:even") //挑选下标为偶数的li $("li:odd") //挑选下标为奇数的li $("li:eq(4)") //下标等于 4 的li(第五个 li 元素) $("li:gt(2)") //下标大于 2 的li $("li:lt(2)") //下标小于 2 的li $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li //内容过滤选择器 $("div:contains('Runob')") // 包含 Runob文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(selector)") //含有选择器所匹配的元素 $("td:parent") //含有子元素或者文本的元素 //可见性过滤选择器 $("li:hidden") //匹配所有不可见元素，或type为hidden的元素 $("li:visible") //匹配所有可见元素 //属性过滤选择器 $("div[id]") //所有含有 id 属性的 div 元素 $("div[id='123']") // id属性值为123的div 元素 $("div[id!='123']") // id属性值不等于123的div 元素 $("div[id^='qq']") // id属性值以qq开头的div 元素 $("div[id$='zz']") // id属性值以zz结尾的div 元素 $("div[id*='bb']") // id属性值包含bb的div 元素 $("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素 //状态过滤选择器 $("input:enabled") // 匹配可用的 input $("input:disabled") // 匹配不可用的 input $("input:checked") // 匹配选中的 input $("option:selected") // 匹配选中的 option //表单选择器 $(":input") //匹配所有 input, textarea, select 和 button 元素 $(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同 $(":password") //所有密码框 $(":radio") //所有单选按钮 $(":checkbox") //所有复选框 $(":submit") //所有提交按钮 $(":reset") //所有重置按钮 $(":button") //所有button按钮 $(":file") //所有文件域
-
JS编写一个简易的留言板 案例需求利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击“发布”按钮动态创建一个li元素，添加到ul里面。步骤分析编写HTML结构，完成页面布局添加留言功能：获取元素添加留言功能：注册事件，添加留言删除留言功能：首先在添加li时，给li中增加一个a链接，给所有的a链接注册单击事件，找到a的父节点li，进行删除即可。删除留言功能：注册事件，删除留言运行结果书写代码<!--HTML代码--> <div> <textarea id="textBox"></textarea> <button>留言</button> <ul> </ul> </div>//获取元素 var textBox = document.getElementById("textBox"); var but = document.querySelector("button"); var ul = document.querySelector("ul"); //绑定按钮的单击事件 but.onclick = function() { //判断文本框内容是否为空 if(textBox.value == "") { return alert("内容不能为空") } var li = document.createElement("li"); li.innerHTML=textBox.value;//赋值 //拼接a标签删除按钮 li.innerHTML+="<a href='#' type='javaScript'>删除</a>" /* //把（新旧）的子节点换成新的子节点 ul.replaceChild(li,ul.children[0]); //把li添加到指定的额子节点后面 ul.appendChild(li,ul.children[0]); */ //把li添加到指定的额子节点前面 ul.insertBefore(li,ul.children[0]); //文本框内容清空 textBox.value=""; //a标签的单击事件 var as = document.querySelectorAll("a"); for (var i = 0; i < as.length; i++) { as[i].onclick=function() { ul.removeChild(this.parentNode); } } }
-
JS实现鼠标移动展示下拉菜单 案例要求鼠标指针经过菜单时，显示当前下拉框中的内容同时隐藏其他下拉菜单内容编写HTML结构代码鼠标经过，展示当前下拉列表内容运行结果书写代码<!--HTML 放body里面--> <ul class="nav"> <li> <a>微博<span>⇓</span></a> <ul> <li><a>私信</a></li> <li><a>评论</a></li> <li><a>@我</a></li> </ul> </li> <li> <a>留言板<span>⇓</span></a> <ul> <li><a>私信</a></li> <li><a>评论</a></li> <li><a>@我</a></li> </ul> </li> <li> <a>表白墙<span>⇓</span></a> <ul> <li><a>私信</a></li> <li><a>评论</a></li> <li><a>@我</a></li> </ul> </li> </ul>/*CSS文件*/ * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; } .nav>li { position: relative; float: left; width: 80px; height: 41px; text-align: center; border: solid 1px; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; cursor: pointer; } .nav>li>a:hover { background-color: #eee; } .nav ul { display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1px solid #FECC5B; border-right: 1px solid #FECC5B; } .nav ul li { border-bottom: 1px solid #FECC5B; } .nav ul li a:hover { background-color: #FFF5DA; } //显示标签栏 var ul = document.querySelector("ul"); var Listul = ul.children; //循环所有的li绑定鼠标移入、移除事件 for(var i = 0; i < Listul.length; i++) { Listul[i].onmouseover=function() { //this是指向最近的对象，所以this现在就是li this.children[1].style.display="block"; this.children[0].children[0].innerHTML="⇑"; } //鼠标移出的事件 Listul[i].onmouseout=function() { this.children[1].style.display="none"; this.children[0].children[0].innerHTML="⇓"; } }
-
JS获取父级以及子节点 什么是节点HTML文档可以看作是一个节点树，网页中的所有内容都是节点，一般来说，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这3个基本属性。下面列举常见的节点类型：元素节点，nodeType为1属性节点，nodeType为2文本节点，nodeType为3，文本节点包含文字、空格、换行等节点层次一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。节点基础DOM根据HTML中各节点的不同作用可将其分别划分为标签节点（元素节点）文本节点和属性节点 节点之间的层级关系如下：根节点：标签是整个文档的根节点，有且仅有一个父节点：指的是某一个节点的上级节点子节点：指的是某一个节点的下级节点兄弟节点：两个节点同属于一个父级节点子节点兄弟节点可以使用nextElementSibling返回当前元素的下一个兄弟元素节点，previousElementSibling属性返回当前元素的上一个兄弟元素节点，如果找不到则返回null。需要注意的是，这两个属性有兼容性问题，IE9以上才支持。实际开发中，nextSibling和previousSibling属性返回值都包含其他节点，操作不方便，而nextElementSibling和previousElementSibling又有兼容性问题。为了解决兼容性问题，在实际开发中通常使用封装函数来处理兼容性。书写代码//获取父级节点的属性 如： element.parentNode var li = document.querySelector("li"); console.log(li.parentNode); //获取父级节点的属性 //获取子节点的属性 //childNodes 属性:该属性获取全部子节点 无论类型 //children 属性:该属性获取全部子元素节点 值包含元素节点 var ul=document.querySelector("ul"); console.log(ul.childNodes); //获取全部类型的子节点 console.log(ul.children); //只获取 子元素节点 //获取单个子节点 var ul = document.querySelector("ul"); console.log(ul.firstChild); //获取全部类型的第一个子节点 console.log(ul.lastChild); //获取全部类型的最后一个子节点 console.log(ul.firstElementChild); //获取子元素的第一个子节点 console.log(ul.lastElementChild); //获取子元素的最后一个子节点 //获取兄弟节点 //element.nextSibling 该属性获取下一个兄弟节点 //element.previousSibling 该属性获取上一个兄弟节点 var li = document.querySelector("li") console.log(li.nextSibling); console.log(li.previousSibling); //获取兄弟节点的子元素 console.log(li.nextElementSibling); //下一个兄弟节点的子元素 console.log(li.previousElementSibling); //上一个兄弟节点的子元素 运行结果
-
JS实现改变HTML属性样式 演示图 通过JS实现点击修改div盒子以及偶数的li列表的背景颜色书写代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box" style="border-style: solid;width: 100px;height: 100px;"> 盒子 </div> <div> <ul id="ulone"> <li>第一个li</li> <li>第二个li</li> <li>第三个li</li> <li>第四个li</li> </ul> <button onclick="changcolor()">点击换色</button> </div> <script src="js/index.js"></script> </body> </html>//点击变色代码 function changcolor() { //获取div盒子的属性 var box = document.getElementById("box"); box.style.background = getRandom(0,9); //获取li列表的属性 var lilist = document.getElementsByTagName("li"); for(var i = 0; i < lilist.length; i++) { //判断是否基数 if(i % 2 != 0) { //不是基数时 偶数进行变色 lilist[i].style.background = getRandom(0,9); } } } //随机颜色代码函数 function getRandom(min,max){ var str = "#"; for(var i = 0; i < 6; i++) { str += Math.round(Math.random() * (max - min) + min) } return str; }
-
JS用定时器实现页面滚动当前时间 逻辑思路先实例化日期对象Date()通过时间对象获取 时、分、秒if判断小时，当前时间是早上还是下午使用三元表达式调整时、分、秒的格式时、分、秒小于10时在前面拼接一个字符串的0，并重新赋值文档对象的class标签选择器box的数组第一个的覆盖原有值运行图示书写代码function comtime() { //先实例化日期对象Date() var time = new Date(); //通过时间对象获取 时、分、秒 var hh = time.getHours();//时 var mm = time.getMinutes();//分 var ss = time.getSeconds();//秒 //if判断小时，当前时间是早上还是下午 var Greet; if(hh>0 && hh<12) { Greet = "早上好" } else { Greet = "下午好" } //使用三元表达式调整时、分、秒的格式 //时、分、秒小于10时在前面拼接一个字符串的0，并重新赋值 hh = hh >= 10? hh:"0" + hh mm = mm >= 10? mm:"0" + mm ss = ss >= 10? ss:"0" + ss //document.write(Greet+"当前时间为"+hh+"时"+mm+"分"+ss+"秒<br>"); //文档对象的class标签选择器box的数组第一个的覆盖原有值 document.getElementsByClassName("box")[0].innerHTML="尊敬的用户，"+Greet+"<br>当前时间为"+hh+"时"+mm+"分"+ss+"秒<br>"; //定时器 setTimeout(comtime,1000); } //调用函数 comtime();
