分类：jQuery

2020
12-22

jQuery+ajax实现文件上传功能

jQuery+ajax实现文件上传功能 jQuery+ajax实现文件上传功能(显示文件上传进度)，供大家参考，具体内容如下具体实现步骤1、定义UI结构,引入bootstrap的CSS文件和jQuery文件2、给上传按钮绑定点击事件3、验证是否选择了文件4、向FormData中追加文件5、使用ajax发起上传文件的请求6、设置文件的路径7、使用xhr获得文件上传的进度8、当文件上传完成让进度条显示绿色<style>#loading{width:20px;height:20px;}#img{display:block;width:200px;height:... 继续阅读 >
2020
12-14

jquery实现淡入淡出轮播图效果

本文实例为大家分享了jquery实现淡入淡出轮播图的具体代码，供大家参考，具体内容如下如题所述，直接上代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><style>*{padding:0px;margin:0px;}/*盒子*/.box{position:relative;}/*banner图*/.box,.banner{width:1000px;height... 继续阅读 >
2020
12-10

jQuery实现简单弹幕制作

jQuery实现简单弹幕制作 在现在的视频网站，我们在看视频的时候经常会有弹幕出现，那么怎么通过js实现这一效果呢，下面介绍一种简单的方法。首先，搭好结构：页面中先放一个视频，视频下部放一个input标签和button按钮，代码如下：<divclass="box"><divclass="top"><videosrc="./static/梦然-少年.mp4"controlsautoplaymuted></audio></div><divclass="foot"><inputtype="text"name=""id="text"><inputtype="button"value="发送"i... 继续阅读 >
2020
12-02

JQuery绑定事件四种实现方法解析

jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。在开始看他们之前一：bind(type,[data],function(eventObject))bind是使用频率较高的一种，作... 继续阅读 >
2020
12-02

jQuery实现可以扩展的日历

jQuery实现可以扩展的日历 新的产品需求需要，要写一个这样的日历插件。效果图如下：选择日期后，显示当前可以选择的时间，时间的列表是通过ajax从后台获取的一组数据。而且这个日期存在的情况，还是动态渲染的一个列表里面，再动态渲染的一个日历。例如：此时的步骤图渲染是根据后台给的一个list来渲染的，所以，里面的元素但凡要点击，要交互，就要注意事件冒泡。bootstrap的日历插件，运用起来也没法满足需求，所以被迫自己写了一个日历代码如下：vardat... 继续阅读 >
2020
12-02

jQuery实现查看图片功能

本文实例为大家分享了jQuery实现查看图片的具体代码，供大家参考，具体内容如下HTML<!--放缩略图的div--><divclass="sl"><imgsrc="images/1.jpg"/><imgsrc="images/2.jpg"/><imgsrc="images/3.jpg"/></div><!--实现关灯的div--><divclass="gd"></div><divclass="yt"><!--左翻按钮--><divclass="left"><imgsrc="images/left.png"alt=""width="100"></div><divclas... 继续阅读 >
2020
11-29

基于jQuery拖拽事件的封装

本文实例为大家分享了基于jQuery封装的拖拽事件，供大家参考，具体内容如下HTML代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="jquery-3.4.1.min.js"></script><scriptsrc="Drag.js"></script><title>Document</title><style>*{padding:... 继续阅读 >
2020
11-25

jQuery实现动态操作table行

jQuery实现动态操作table行 JQuery实现动态操作table行，供大家参考，具体内容如下实现效果：可动态实现table添加行和删除行，如下图。代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Html动态Table</title><scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><style>table{border:1pxsolid#e9e9e9;border-collapse:collapse;border-spacing:0;}tr,td{border:... 继续阅读 >
2020
11-19

jQuery-App输入框实现实时搜索

本文实例为大家分享了jQuery-App输入框实现实时搜索的具体代码，供大家参考，具体内容如下1、实现实时搜索其实原理就是很简单，实时获取输入框的值即可，并且对不同情况操作进行不同处理。2、这里只贴出主要事件语句代码，具体一些操作要视具体情况而定//监听搜索框的内容变化实现实时搜索$(".searchContent").bind("inputpropertychangechange",function(){studentName=$(".searchContent").val();varsearchConten... 继续阅读 >
2020
11-19

JQuery+drag.js上传图片并且实现图片拖曳

外层的容器的id属性应为'container'容器中有多个队列，这些队列之间可以随意拖动，class属性应为'queue'队列中有多个拖动块，class属性应为'dragger'把拖动块拖到队列的尾部空白处会使这个拖动块加到队列尾部1.html部分：<tr><td><spanclass="colorred">*</span>商品展示图片：</td><tdstyle="padding:20px20px20px0"><divid="container11"style="padding:20px0;border:1p... 继续阅读 >
2020
11-17

JavaScript枚举选择jquery插件代码实例

JavaScript枚举选择jquery插件代码实例 某次做项目要实现一个功能：按星期选择一个连续的时间范围比如：周一到周五，周六到周日或周六到周三聪明的朋友马上想出办法：用两个选项为周一到周日的下拉列表实现，对那样可以，但是我觉得不够友好，所以利用业余时间写下了这个jQuery小插件。源码用法:鼠标点击开始/结束项（红色部分，可自定义）进行选择和取消选择效果图：周一到周五周六到周日周日到周三<html><head><title>daybox测试</title><scripttype='text/ja... 继续阅读 >
2020
11-06

Jquery Fade用法详解

Jquery Fade用法详解 query淡入淡出演示感觉用法都差不多，目前看来还比较简单。fadeInfadeOutfadeTogglefadeTo一共4种用法CSS代码<style>div{background-color:#eaeaea;border:solid1px#999999;width:100px;height:100px;text-align:center;line-height:100px;font-size:16px;display:none;margin:10px;}</style>JS代码<scripttype="text/javascript"src="jquery.min.js"></script><scripttype="text/javascript">$(document).ready(functi... 继续阅读 >
2020
10-28

jQuery实现简单评论区功能

jQuery实现简单评论区功能 本文实例为大家分享了jQuery实现简单评论区的具体代码，供大家参考，具体内容如下直接看代码吧<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="css/weibo.css"></head><body><divclass="w"><!--操作的界面--><divcl... 继续阅读 >