分类：jquery

2020
10-09

jQuery实现评论模块

jQuery实现评论模块 本文实例为大家分享了jQuery实现评论模块的具体代码，供大家参考，具体内容如下本模块可用于评论或留言，输入区模仿畅言，内容显示使用时间轴，以下是示例图。实现代码如下：index.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"><title>Document</title><linkrel="styles... 继续阅读 >
2020
10-09

jquery+ajax实现异步上传文件显示进度条

jquery+ajax实现异步上传文件显示进度条 前言：今天项目中加了一个上传文件加进度条的需求，我就搞了一下。时间宝贵不多说，直接进入正题。异步上传文件是要用到ajax里的一个小的知识点：xhr（XMLHttpRequest）一个对象，xhr对象也是ajax一个核心。关于使用它也很简单：就四步（下面这样写也可以向后端进行发送请求）varxhr=newXMLHttpRequest()//创建xhr对象xhr.open('请求方式','请求的地址')xhr.send()//发佛那个请求xhr.onreadystatechange=function(){... 继续阅读 >
2020
10-09

jQuery中event.target和this的区别详解

jQuery中event.target和this的区别详解 this和event.target的区别：1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远指向触发事件的DOM元素本身；2.this和event.target都是dom对象，使用jQuey中的方法可以将他们转换为jquery对象：$(this)和$(event.target).比如,一个很简单的例子.$(event.target)指向触发事件的元素.当点击蓝色小方框时,蓝色小方框会变成橙色,但其外围的大方框不会变色,即没有触发事件的冒泡行为.点击前:点... 继续阅读 >
2020
10-09

Jquery cookie插件实现原理代码解析

Cookie是由Web服务器保存在用户浏览器上的小文本文件，它包含有关用户的本地终端上的数据。jQuery提供了一个十分简单的插件（名称也是Cookie）来管理网站的Cookie。下载地址：http://github.com/carhartl/jquery-cookie例子：当在用户名字段填写用户名后，单击下面的“记住用户名”复选框后，再次打开这个页面，发现用户名字段上已经被自动赋值（之前所填写的用户名）<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transition... 继续阅读 >
2020
10-08

jQuery实现雪花飘落效果

jQuery实现雪花飘落效果 本文实例为大家分享了jQuery实现雪花飘落效果的具体代码，供大家参考，具体内容如下效果展示：源码展示：<!doctypehtml><html><head><metacharset="utf-8"><title>jquery实现雪花飘落</title><scriptsrc="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>*{margin:0px;padding:0px;}body{position:relative;height:1000px;width:100%;overflow... 继续阅读 >
2020
10-08

jQuery实现滑动开关效果

jQuery实现滑动开关效果 本文实例为大家分享了jQuery实现滑动开关效果的具体代码，供大家参考，具体内容如下Demo效果如下，点击绿色椭圆小块，实现可滑动和动画效果，不是图片切换。HTML结构代码：<divclass="ck-switch"><spanclass="ck-switch-on">是</span><spanclass="ck-switch-offck-switch-currentck-switch-current-40"></span></div>CSS代码：/**外部div式样*/ck-switch{width:75px;height:26px;margin:0pxauto;position:relati... 继续阅读 >
2020
10-08

jQuery实现开关灯效果

jQuery实现开关灯效果 本文实例为大家分享了jQuery实现开关灯效果的具体代码，供大家参考，具体内容如下效果展示点击界面上的开灯关灯按钮，可以实现背景的调暗。方便晚上阅读。开灯：关灯：分析这个功能很简单，其实就是利用jQuery实现把背景色更改为黑色和白色，可以在两者之间进行切换。代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>开关灯案例</title><styletype="text/css">#img1{display:block;margin:10pxauto;}... 继续阅读 >
2020
10-08

jQuery+PHP实现图片上传并提交功能

jQuery+PHP实现图片上传并提交功能 图片上传思路：通过ajax实现图片上传，然后把PHP返回的图片地址，加入到隐藏字段中，最后通过表单提交给后台PHP，代码如下HTML代码zimg.html文件：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>自定义上传图片</title></head><body><formaction="a.php?action=2"method="post"><span>上传图片</span><span><in... 继续阅读 >
2020
10-08

jQuery+ThinkPHP实现图片上传

本文实例为大家分享了jQuery+ThinkPHP实现图片上传的具体代码，供大家参考，具体内容如下一，利用js实现上传图片时，实时预览相关代码<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>预览选择的图片</title><scriptsrc="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script></head><body><inputtype="file"onchange="showSelectedImages(this.files)"id="uploadInput"><br/><divid="fileList... 继续阅读 >
2020
10-08

jquery实现简单拖拽效果

jquery实现简单拖拽效果 本文实例为大家分享了jquery实现简单拖拽的具体代码，供大家参考，具体内容如下基本思路：1.首先需要鼠标按下拖动区域，也就是需要调用mousedown方法2.鼠标移动，需要拖动的元素跟着鼠标移动，调用mousemove方法3.鼠标弹起拖动消失，调用mouseup方法 下面看一下代码：页面结构：样式：.drag{width:200px;height:200px;background-color:skyblue;position:absolute;}效果图：逻辑代码：//拖拽函数function... 继续阅读 >
2020
10-08

Jquery如何使用animation动画效果改变背景色的代码

Jquery如何使用animation动画效果改变背景色的代码  一、问题引入jquery的animate动画虽然强大，但是无法使用其进行背景色(background-color)的动画效果变化，因为animate动画效果只能动态改变数值型的参数，例如：top，left，width，height...等等好像网上也有说要装一个"jquery.ui"的插件之类的。但是博主我实在不想引入过多的插件，且恰好本人掌握的CSS比较好一点点，所以就想了下面这么个法子。但好在CSS它自带的animation动画效果更加强大，它可以为我们提供背景色... 继续阅读 >
2020
10-08

jquery实现有过渡效果的tab切换

jquery实现有过渡效果的tab切换 本文实例为大家分享了jquery实现tab切换的具体代码，供大家参考，具体内容如下效果：代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">ul,li{list-style:none;margin:0;padding:0;}.tabBox{width:400px;height:200px;border:1pxsolidpink;}.ul1{height:40px;border-bottom:1pxsolidpink;}.ul1li{width:25%;line-height:40px;text-align:... 继续阅读 >
2020
10-08

jQuery加PHP实现图片上传并提交的示例代码

图片上传思路：通过ajax实现图片上传，然后把PHP返回的图片地址，加入到隐藏字段中，最后通过表单提交给后台PHP，代码如下HTML代码zimg.html文件：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>自定义上传图片</title></head><body><formaction="a.php?action=2"method="post"><span>上传图片</span... 继续阅读 >
2020
10-08

jQuery 添加元素和删除元素的方法

添加新的HTML内容我们将学习用于添加新内容的四个jQuery方法：append()-在被选元素的结尾插入内容prepend()-在被选元素的开头插入内容after()-在被选元素之后插入内容before()-在被选元素之前插入内容jQueryappend()方法jQueryappend()方法在被选元素的结尾插入内容（仍然在该元素的内部）。$("p").append("追加文本");jQueryprepend()方法jQueryprepend()方法在被选元素的开头插入内容。$("p").pre... 继续阅读 >
2020
10-08

Jquery使用each函数实现遍历及数组处理

each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM,JSON等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量。下面提一下each的几种常用的用法each处理一维数组vararr=[['a','aa','aaa'],['b','bb','bbb'],['c','cc','ccc']]$.each(arr,function(i,item){$.each(item,function(j,val){... 继续阅读 >