分类：JQuery

2020
09-27

用jQuery实现抽奖程序

用jQuery实现抽奖程序 本文实例为大家分享了jQuery实现抽奖程序的具体代码，供大家参考，具体内容如下1.主要需求实现一个抽奖功能。点击开始按钮后，开始按钮禁用，停止按钮取消禁用，小图片实现快速切换显示。点击停止按钮后，停止按钮禁用，开始按钮取消禁用，小图片停止切换，将小图片在大图片位置显示。小图片实现快速切换显示。点击停止按钮后，淡入淡出选中图。2.素材页面<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF... 继续阅读 >
2020
09-25

jquery实现两个div中的元素相互拖动的方法分析

jquery实现两个div中的元素相互拖动的方法分析 本文实例讲述了jquery实现两个div中的元素相互拖动的方法。分享给大家供大家参考，具体如下：这里写了两个实例，两个都是基于jquery实现的。如果有更好的方法，欢迎分享。第一个效果图：拖动中：拖动完成后：代码实现：<!doctypehtml><html><head><metacharset="utf-8"><title></title><linkrel="stylesheet"href="jquery-ui-1.11.4/jquery-ui.css"rel="externalnofollow"><scriptsrc="js/jquery.js"></script>... 继续阅读 >
2020
09-25

jQuery 图片查看器插件 Viewer.js用法简单示例

本文实例讲述了jQuery图片查看器插件Viewer.js用法。分享给大家供大家参考，具体如下：html:<!--引入文件--><linkrel="stylesheet"href="/css/viewer.min.css"rel="externalnofollow"><scriptsrc="/js/viewer.min.js"></script><divid="viewPhotosDialog"title="查看图片"style="display:none"></div>js:html+="&nbsp;&nbsp;&nbsp;&nbsp;<imgtitle='查看图片'onclick='viewPhotos(\""+val.ot_id+"\")'src='... 继续阅读 >
2020
09-25

jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析

本文实例讲述了jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法。分享给大家供大家参考，具体如下：实现效果如上图，当鼠标放置到名字上时，则显示出内容详情。实现具体过程如下：1、需要加这句js<!--实现鼠标放置名字上显示气泡说明的js--><script>$(function(){$('[data-toggle="popover"]').popover()});</script>2、html代码如下：<td><ahref="#"rel="externalnofollow"rel="externalnofollow"data-trigg... 继续阅读 >
2020
09-24

js、jquery实现列表模糊搜索功能过程解析

实现的搜索功能：1.可以匹配输入的字符串找出列表中匹配的项，列表框的高度跟随搜索出的列表项的多少改变2.可以点击某一项进行选中列表项3.可以按下上、下、回车键来控制列表项4.按下回车键时则会选中列表项5.点击文本框中的下拉键头时会切换下拉框的显示/隐藏6.点击文本框外部时自动隐藏下拉框先来预览一下效果吧！列表中包含的列表项有：北京、上海、杭州、安庆、大兴安岭、安阳、广州、贵阳、哈尔滨、合肥、邯郸、呼伦贝... 继续阅读 >
2020
09-24

jquery css实现流程进度条

jquery css实现流程进度条 本文实例为大家分享了jquerycss实现流程进度条的具体代码，供大家参考，具体内容如下方案1：方案2：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>流程进度条</title><styletype="text/css">.div_home{width:100%;height:720px;background:pink;}.div_button{width:100%;background:rgba(249,214,81,1);text-align:center;}:root{--progress_div-height:100px;--progress_div-width:100... 继续阅读 >
2020
09-24

jQuery实现中奖播报功能（让文本滚动起来） 简单设置数值即可

jQuery实现中奖播报功能（让文本滚动起来） 简单设置数值即可 在很多场景中，我们需要使用到中奖信息播报，或者一些文本信息循环滚动播报，在结合实际的开发中，然后也百度查询了相关的知识点，现在送上jQuery实现文本滚动。1：html代码文件   相关使用说明也在页面相关位置标注啦<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh"><he... 继续阅读 >
2020
09-24

jQuery实现点击滚动到指定元素上的方法分析

本文实例讲述了jQuery实现点击滚动到指定元素上的方法。分享给大家供大家参考，具体如下：jquery点击滚动到指定元素上，1.获取指定元素的offset()得到偏移位置，返回结果是top和left 获取offset().top,offset().left单位是像素只对可见元素有效2.body和html使用animate方法的scrollTop股东到指定位置3.id参数为滚动到指定元素的ID，p_top是指定元素的margin和padding值，这个值暂时没有意义functionscrollPositi... 继续阅读 >
2020
09-24

jQuery实现颜色打字机的完整代码

jQuery实现颜色打字机的完整代码 效果：每个字逐个显示出来，并且每个字都有随机颜色 $(function(){varstr="早起的鸟儿有虫吃，早起的虫儿被鸟吃！由此天赋+勤奋=成功;先天不足+同等勤奋=还是失败！天赋的重要性可见一斑！";//产生一个0-255的随机整数functions(){returnparseInt((Math.random()*255)+1);};varj=1,i=0;varp="";//打开一个每个100毫秒执行一次的定时器vark=setInterval(function(){if(j<=str.length){//从第... 继续阅读 >
2020
09-24

django实现将后台model对象转换成json对象并传递给前端jquery

1、django的model转json对象。1.1、单个modle转换，返回json对象：sqlOrder=get_object_or_404(SqlOrder,id=request.GET.get("id"))objJson=serialize('json',[sqlOrder])[1:-1]{"model":"sqlapply.sqlorder","pk":2,"fields":{"work_id":"{now}{_ran}","username":"admin","status":3,"type":0,"backup":0}}注意：objJson["fields"]["username"]才能获得想要属性值。objJson["pk"]获得主键值。1.2、querySet转... 继续阅读 >
2020
09-24

jQuery使用ajax传递json对象到服务端及contentType的用法示例

jQuery使用ajax传递json对象到服务端及contentType的用法示例 本文实例讲述了jQuery使用ajax传递json对象到服务端及contentType的用法。分享给大家供大家参考，具体如下：0、一般情况下，通过键值对的方式将参数传递到服务端0.1客户端代码：$.ajax({url:'TestHandler.ashx',type:'post',data:{name:"admin",age:10},dataType:'text',success:function(data){alert(data);}})0.2服务端代码：publicvoidProcessRequest(HttpContextcontext){stringbodyText=strin... 继续阅读 >
2020
09-24

jquery实现烟花效果(面向对象)

本文实例为大家分享了jquery实现烟花效果的具体代码，供大家参考，具体内容如下<!DOCTYPE><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>烟花效果(面向对象)</title><styletype="text/css">*{padding:0;margin:0}body{overflow:hidden;width:100%;height:100%;background:#000;}div{position:absolute;background:#000;color:#fff}</style><scriptsrc="jquery-1... 继续阅读 >
2020
09-23

js与jquery获取input输入框中的值实例讲解

js与jquery获取input输入框中的值实例讲解 如何用javascript获取input输入框中的值，js/jq通过name、id、class获取input输入框中的value先准备一段HTML<inputtype="text"name"username"id="user"placeholder="用户名"class="uusr"><br>一、jquery获取input文本框中的值通过name：$('input[name="username"]').val()通过id：$('#user').val()通过class：$('.uusr').val()二、javascript获取input输入框中的值通过namedocument.getElementsByName("username")[0].va... 继续阅读 >
2020
09-23

新手学习JQuery基本操作和使用案例解析

jQuery是一个快速、简洁的JavaScript框架，本质上就是一些js文件，封装了js的原生代码。一、jQuery的DOM操作1.内容操作1.html():获取/设置元素的标签体内容<a><font>内容</font></a>--><font>内容</font>2.text():获取/设置元素的标签体纯文本内容<a><font>内容</font></a>-->内容3.val()：获取/设置元素的value属性值2.属性操作1.通用属性操作1.attr():获取/设置元素的属性2.removeAttr():删除属性... 继续阅读 >
2020
09-23

基于jQuery获取table数据发送到后端

1.我做的是一个动态表格，就是在输入框里每输入一次数据并点击“添加”按钮，表格中就会新增一行记录。<tableid="stu_prize_tab"class="stu_prize_tab"border="1pxsolid"cellspacing="0"cellpadding="0"><captionclass="prize_title">获奖记录表</caption><tr><th>编号</th><th>奖项名称</th><th>获奖年份</th><th>操作</th... 继续阅读 >