搜索到
91
篇与
的结果
-
简源APP_V1.2.3 - 分享IAPP源码资源的聚集地 软件介绍一款由iApp编程语言所写的Android应用程序，里面包含了源码空间、应用商店、鱼塘板块、实用的工具等一系列围绕为主题的社区软件。收集网络上有关IAPP和其他技术的资源，每天都为大家更新源码、应用、文章。软件展示软件特色源码空间 一个分享IAPP各种类型的功能源码空间，用户可以上传自己开源的项目源码，介绍自己的源码功能，从而让大家下载学习，还可以设置是否通过余额购买源码，也可以选择源码的类型，用户可以下载免费的源码，会员用户可以下载全部类型的源码资源.应用市场 一个分享优秀成品软件展示的应用市场，用户可以上传自己用IAPP或者其他开发工具所发布的成品应用，为自己的软件增加曝光度，增加人气，让自己写的应用程序展示给所需要的用户.鱼塘互动 一个分享快乐的文章资源集结地，在这里你将收获到朋友和知识与资源，大家一起交流互动学习，共同进步才是真的一起进步，千篇一律的文章唯独你写的让我独自沉沦.扩展功能 IAPP手册，历史上的今天，MD配色，文件直链。目前就这几个，后续再为大家慢慢扩展一些实用快捷方便的小工具.{cloud title="简源_V1.2.3下载" type="lz" url="https://janes.lanzoup.com/i5SJx0ynhl9a" password=""/} -
-
SQLServer 创建存储过程 创建存储过程--存储过程 Create proc dbo.UpdateStu @StuID int, --学生ID @StuName varchar(200), --学生姓名 @Age int --学生年龄 As Begin --更新语句 update Students Set StuName=@StuName,Age=@Age where StuID=@StuID; end go调用存储过程--调用存储过程 exec dbo.UpdateStu 2,'猪八戒--天蓬元帅',50 -- 传参方法① exec dbo.UpdateStu @StuID=3,@StuName='沙悟净--傻傻双',@Age=50 --传参方法② 删除存储过程--删除存储过程 drop proc dbo.UpdateStu
-
SQLServer 创建触发器 创建数据库create database Demo230607 --连数据库 use Demo230607 go --创建记录表 Create table StudenLog ( ID int primary key identity, StuID int, --学生ID StuName varchar(200), --学生姓名 StuClassID int, --学生班级 Datetype varchar(200), --触发操作类型 CreateTime dateTime --触发时间 ) go创建触发器--触发器 create Trigger [Student_tri_add_data] --在添加学生表数据时触发 on students --属于哪个表的触发器 for insert --执行什么操作的时候触发 as Begin --触发器要执行的代码 Declare @StuID int ,@StuName varchar(200),@StuClassID int; --声明变量用于存储数据 --把新增的数据保存到变量中 Select @StuID=StuID,@StuName=StuName,@StuClassID=ClassID from inserted; --inserted表存储的是上一次添加的数据 --把数据添加到StudentLog insert into StudenLog(StuID,StuName,StuClassID,DateType,CreateTime) values(@StuID,@StuName,@StuClassID,'添加数据',getDate()); end go删除触发器--触发器删除 Create Trigger [Student_tri_del_data] --在添加学生表数据时触发 on Students --属于哪个表的触发器 for delete --执行什么操作的时候触发 as Begin --触发器要执行的代码 Declare @StuID int ,@StuName varchar(200),@StuClassID int; --声明变量用于存储数据 --把新增的数据保存到变量中 Select @StuID=StuID,@StuName=StuName,@StuClassID=ClassID from deleted; --inserted表存储的是上一次添加的数据 select * from deleted --把数据添加到StudentLog insert into StudenLog(StuID,StuName,StuClassID,DateType,CreateTime) values(@StuID,@StuName,@StuClassID,'删除数据',getDate()); end go --测试删除触发器 delete Students where StuName='杨戬' go
-
php封装调用数据库的方法 方法文件class MyDB { private $host = "localhost"; // 主机名 private $user = "username"; // 数据库用户名 private $password = "password"; // 数据库密码 private $dbname = "dbname"; // 数据库名 private $conn = null; // 数据库连接变量 // 连接数据库 public function connect() { try { $dsn = "mysql:host=" . $this->host . ";dbname=" . $this->dbname; $this->conn = new PDO($dsn, $this->user, $this->password); $this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); } } // 查询数据库 public function query($sql) { $stmt = $this->conn->query($sql); return $stmt->fetchAll(PDO::FETCH_ASSOC); } // 关闭数据库连接 public function close() { $this->conn = null; } }调用方法$db = new MyDB(); $db->connect(); // 连接数据库 $result = $db->query("SELECT * FROM users"); // 查询数据库 // 结果处理 $db->close(); // 关闭数据库连接用了 PDO 扩展库连接数据库并执行查询，使用时需要配置正确的主机名、用户名、密码和数据库名。查询方法简单地执行 SQL 语句并获取查询结果，可以根据自己的需求修改该方法的实现。
-
简源App上传源码操作教程 前言由于安卓文件访问权限的缘故，所以对于上传源码和应用这个问题挺让我头疼的，所以下面为大家演示一下自己想要上传源码时应该怎么操作更换路径首先我们先把iapp的备份路径改成以前备份的路径，这个样子简源就可以访问到您的源码文件了/storage/emulated/0/iApp/iAppDir/*.iApp1.我们先打开IAPP应用程序，然后点击底部的管理，翻到底部点击备份路径设置2.然后我们把它原本的备份路径修改成我上面发出来的那个路径，复制替换点击保存即可3.修改源码备份保存路径后，我们就打开想要上传的源码，翻到底部点击备份源码4.备份成功后，我们可以看到这个源码文件已经成功的备份到了我们设置的这个路径地址5.打开简源APP，底部的加号点击上传源码6.选择我们刚刚备份的源码文件7.填写源码的信息内容，并且上传源码的截图后点击下一步8.选择符合你源码的类型，设置免费则不可填写源码价格，填写源码价格则不能选择免费类型，然后给这个源码简单的描述一下，最好就是多写一点源码的介绍，这个样子可以吸引更多的用户下载
-
PHP日期转时间戳 date_default_timezone_set('PRC'); /把时间调到北京时间,php5默认为格林威治标准时间/echo time();/ 获取d当前时间戳 // 输出：1598963507 /echo date("Y-m-d H:i:s",time());/ 获取当前年月日 // 输出：2020-9-1 20:32:50 /// 获得今天零点的时间戳echo strtotime('today');echo strtotime(date("Y-m-d"),time());echo mktime(0,0,0,date("m"),date("d"),date("Y"));/ 输出：1598889600 /// 指定日期转时间戳echo date('Y-m-d H:i:s', 1598967828);echo mktime ( 0 , 0 , 0 , 9 , 1 , 2020 );mktime(hour,minute,second,month,day,year,is_dst);/ 输出：2020-09-01 21:43:48 /// 指定时间戳转日期echo strtotime('2020-09-01 08:15:42');/ 输出：1598919342 /// 获取一年后的时间echo date("Y-m-d H:i:s",strtotime("+1years",time()));/输出：2021-09-01 22:07:37 /// 一年前的时间echo date("Y-m-d H:i:s",strtotime("-1years",time()));// 获取一个月后的时间echo date("Y-m-d H:i:s",strtotime("+1months",time()));/ 输出：2020-10-01 22:06:25 /// 一个月前的时间echo date("Y-m-d H:i:s",strtotime("-1months",time()));// 获取7天后的时间echo date("Y-m-d H:i:s",strtotime("+7days",time()));/ 输出：2020-09-08 22:08:21 /// 7天前的时间echo date("Y-m-d H:i:s",strtotime("-7days",time()));// 获取1周后的时间echo date("Y-m-d H:i:s",strtotime("+1weeks",time()));/ 输出：2020-09-08 22:08:21 /// 获取1小时后的时间echo date("Y-m-d H:i:s",strtotime("+1hours",time()));/ 输出：2020-09-01 23:11:27 /// 获取15分钟后的时间echo date("Y-m-d H:i:s",strtotime("+15minutes",time()));/ 输出：2020-09-01 22:27:54 /
-
php笔记 参考学习菜鸟教程局部和全局作用域在所有函数外部定义的变量，拥有全局作用域。除了函数外，全局变量可以被脚本中的任何部分访问，要在一个函数中访问一个全局变量，需要使用 global 关键字。在 PHP 函数内部声明的变量是局部变量，仅能在函数内部访问：<?php $x=5; // 全局变量 function myTest() { $y=10; // 局部变量 echo "<p>测试函数内变量:<p>"; echo "变量 x 为: $x"; echo "<br>"; echo "变量 y 为: $y"; } myTest(); echo "<p>测试函数外变量:<p>"; echo "变量 x 为: $x"; echo "<br>"; echo "变量 y 为: $y"; ?>global 关键字global 关键字用于函数内访问全局变量。在函数内调用函数外定义的全局变量，我们需要在函数中的变量前加上 global 关键字：<?php $x=5; $y=10; function myTest() { global $x,$y; $y=$x+$y; } myTest(); echo $y; // 输出 15 ?>Static 作用域当一个函数完成时，它的所有变量通常都会被删除。然而，有时候您希望某个局部变量不要被删除。要做到这一点，请在您第一次声明变量时使用 static 关键字：<?php function myTest() { static $x=0; echo $x; $x++; echo PHP_EOL; // 换行符 } myTest(); myTest(); myTest(); ?>参数作用域参数是通过调用代码将值传递给函数的局部变量。参数是在参数列表中声明的，作为函数声明的一部分：<?php function myTest($x) { echo $x; } myTest(5); ?>
-
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("简化"); } })
