1
jquery里用拖拽的方式来排序表格及在线实例

CDes今天和大家分享一个用jquery做的,可以对table表格拖拽排序的特效。代码是站长自己写的,站长打算用两种方法来实现对表格的拖拽排序。先来看方法一:(function($){$.fn.dragSort=function(){var$dtr,$ntr; $(this).find("tr").on("mousedown",function(e){ $dtr=$(this); $(this).addClass("alert-success");}).on("mousemove",function(e){returnfa


2
html5拖拽时,event的DataTransfer对象的详细说明

CDes在使用HTML5的拖拽功能时,在获取拖拽的文件的相关信息时,要用到event对象的DataTransfer,下面站长来整理一下DataTransfer的相关属性和方法:1.dataTransfer.dropEffect :设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败。该属性值只允许为“none”、“copy”、“link”和“move”四值之一。none :禁止放置(禁止任何操作)copy :复制到新的位置link : 建立一个源位置到新位置的链接move :移动到新的位置2.dataTransfer.


3
jquery里,把一段文字“拖拽”到DIV里的特效

CDes本文站长和大家分享一个jquery做的一个“拖拽”相关的实例,把一段文本播放到一个DIV窗器里:假设我们有这样一段HTML:可拖拽,请把该段落拖入上面的DIV里。drop是容器,drag是要拖拽的对象,下面是具体的实现拖拽效果的jquery代码:$("#drag").on("dragstart",function(e){ e.originalEvent.dataTransfer.setData("Text",e.target.id);});$("#drop").on("dragover",fun


4
jquery倒计时—计算显示距离某天还剩下多少天多少小时多少分多少秒【附在线演示】

CDes和大家分享一个非常实用的jquery实例特效,在网页里显示距离某一天还剩下多少天多少小时多少分多少秒的倒计时物资,下面是完整的在线实例演示:jquery倒计时—在线演示下面是完整的实例源码:functioncountDown(d){vardateFinal=newDate(d);//设置倒计时到达时间vardateNow=newDate();//获取系统当前时间vardateSub=dateFinal-dateNow;//计算差值,单位毫秒//初始化各个数值varday=hour=minute=second=dayBase=hourBase=minuteBase=secondBase=0;va


5
jquery实现点击表格后,使当前行变色的特效【非常详细】

CDes在网页开发中,我们经常会用到这样的一个特效:当点击网页中的表格时,被点击的当前行会变色突出显示。其实我们要实现这个功能,用jquery是非常简单的,只用一句代码就能实现:$("table#aijquery").on("click",function(e){ $(e.target).parent("tr").addClass("bg-primary");});上面这句代码解释起来就是:当ID为aijquery的表格被点击时,获取当前被点击的元素的tr父标签,然后为它添加一个"bg-primary"


6
jquery动态下滑展示与折叠的下拉菜单特效,一句代码就能实现

CDes我们都见过网上那种点击后,缓缓下拉展开显示的子菜单的特效吧,其实这个效果用jquery来作,是非常简单的!下面这句就是核心的代码:$("#ID").slideToggle();slideToggle:通过高度变化来切换所有匹配元素的可见性,它的语法结构如下:slideToggle([speed],[easing],[fn]):参数:speed:速度,值为"slow","normal","fast"或具体的毫秒数值,如:1000easing:用来指定切换效果,默认是"swing",可用参数&quo


7
jquery里使用数组随机排序的原理来实现网页中html标签随机排序的特效及实例

CDes假设我们的网页中有n个A标签,那么我们有什么方法,可以使这些A标签重新随机混乱排序呢?其实是很简单的,我们只需要明白数组随机排序的原理就能实现了!!下面是具体的代码:functionrandomsort(){returnMath.random()>.5-1:1;}//把要重新排序的a标签放到数组内vararr=$.makeArray($("#aijquerya"));//利用数组的sort函数结合一个随机数来给数组随机排序arr.sort(randomsort);好了,就是这么简单!通过上面的代码,我们就已经实现了把A标签重新随机排序的功能了,下面要做的就是把这些A标


8
jquery实现双击table表格后可编辑内容的方法及在线实例演示

CDes本文站长和大家分享一个jquery里操作table表格的特效实例,在鼠标双击表格里的td单元格后,可以进行编辑的方法特效。下面是具体的juqery代码:$('table#aijquery').on("dblclick","td",function(){var$td=$(this);//获取被双击的td单元格var_t=$td.text();//被双击的td单元格里的文本内容var_w=$td.width();//被双击的td单元格的宽度var_h=$td.height();//被双击的td单元格的高度$td.html("&quo


9
jquery图片或文字连续循环滚动特效[非常详细的教你如何自己动手写代码来实现]及在线实例演示

CDes连续循环滚动是我们在网页开发中经常要用到的特效,在jquery里,我们要实现文字或图片的连续循环滚动是非常简单的,本文站长就和大家非常详细的来介绍如何在jquery里实现图片或文字的连续循环滚动,通过本文,可以让你掌握自己动手来写出连续循环滚动的特效代码。第一步:HTML结构和CSS样式:#byculli{width:100px;height:80px}LoremipsumPhasellusiaculisNullavolutpatNullavolutpat结构很简单,div是展示的框架界面,根据自己的网页,设置好宽高,超出的部分隐藏,图片或文字信息全放在ul列表里,CSS样式的话,让li浮动,


10
新浪里抠出来的图片来回切换的新闻展示效果

CDes站长从新浪网里抠出来的一个图片切换轮播展示效果,使用起来非常简单的,可以先看下面的在线实例演示:新浪里抠出来的图片新闻展示—在线演示下面站长来教大家如何把这个图片切换展示的特效引入到自己的网页里:第一步:把flash框架下载保存到自己的网站里:http://www.aijquery.cn/html/aijquery/inc/flashimg.swf第二步:定义要展示的图片,及相关的标题、简介等信息://定义大图的路径,varbigPic0="1.jpg";varbigPic1="2.jpg";varbigPic2=3.jpg";varbigPi


11
超详细讲解用jquery制作图片百叶窗轮播展示特效

CDes本文和大家分享一个用jquery制作的一个图片百叶窗的特效,大家可以点下面的链接查看具体的在线实例演示:jquery图片百叶窗轮播展示特效在线演示下面是实例的截图:下面站长来具体和大家说下,如何来制作这个jquery图片百叶窗轮播展示的特效:第一步:布置相关的HTML代码,结构如下:1234第二步:添加所需的CSS样式:.boxx{width:549px;height:289px;margin:0auto;position:relative;border:1px#cccsolid}.boxx_con{width:100%;position:absolute;z-index:10}.boxx_t


12
不用插件,教你如何用jquery来制作随滚动条滚动时延迟加载图片的特效

CDes网上有很多延迟加载图片的插件,但如果我们的网页比较简单,那么我们需要延迟加载图片的功能时,不需要因为这么小的一个功能,就去加载一个特别“大”的插件,因为在jquery里,我们制作一个随滚动条的滚动来动态加载图片的功能是非常简单的。本篇,站长就来教大家如何用jquery来写出“随滚动条延迟加载图片”的特效。不喜欢看站长啰嗦的朋友,可以点下面的链接直接查看和拷贝站长做的一个在线实例演示:jquery随滚动条延迟加载图片在线演示首先,在刚加载页面时,要把网页里所有需要“延迟加载”的图片隐藏起来,让它们不要自动加载:$("#aijqueryimg").each(function()


13
jquery html5本地头像图片裁剪上传特效[附完整实例下载和在线演示]

CDes这是站长在网上找到的一个jquery特效实例,那个网站需要注册,还要积分,站长费了番功夫,下载了下来,在这里直接分享给大家。本文和你分享的是一个jquery+html5开发制作的本地图片裁剪上传的特效,各大网站或论坛的修改头像图片里用的就是这个特效,下面是在线实例演示地址:jquery html5本地头像裁剪上传特效在线演示站长把完整的代码放在百度云里,无密码,大家可以直接下载:链接:https://pan.baidu.com/s/1Q191O_nvoCmoptukF5jCUg密码:h72h下面来看这个实例的核心代码,站长因为不暂时用不到这个特效,所以没有深入去研究,-_-!$('#a


14
点击后出现下拉菜单,在其它任意地方单击后就会消失隐藏的下拉菜单的制作方法及原理[附在线实例]

CDes我们经常在网上会看到这样的一个特效,就是当点击一个按钮或菜单时,会出现它的子菜单,而再次点击时就会消失隐藏,并且在网页的其它任意地方点击都会消失和隐藏。在jquery里,我们要实现这样的一个效果其实是非常简单的:我们都知道在jquery里,如果制作一个点击后消失或隐藏的下拉菜单是非常简单的,难点就是要实现点击网页里任意一个地方都会隐藏下拉菜单,而要实现这个效果就要用到jquery里的以下几个函数和方法了:one:为元素绑定一个一次性的事件,如:$("#aijquery").one("click",function(){alert("欢迎来到爱j


15
一句jquery代码就能实现的点击后DIV显示或隐藏的网页特效[附在线实例演示]

CDes本文比较适合jquery初学者!!!在jquery里,如果我们要实现一个这样的特效,点击按钮后,指定的DIV显示或隐藏起来,是非常简单的,大家可以点下面的链接查看站长写的一个在线实例演示:jquery用toggle制作的显示/隐藏特效在线演示只需要用到jquery的一个内置函数toggle就能实现了,是不是非常简单?$("#aijquery").click(function(){ $("#div1").toggle();});jquery内置函数toggle的作用就是转换元素的可见状态!


16
siblings-jquery中用来获取同辈标签元素的内置函数详解及常用写法实例

CDes之前,站长写过一篇用jquery来制作网页“百叶窗”特效的文章,在这篇文章里,用到的核心函数就是jquery的siblings函数,大家可以点下面的链接查看这篇文章,文章里还附带有在线实例演示:教你如何用jquery做网页“百叶窗”特效,即同一个区域内,根据点击不同的按钮或链接显示不同的内容的特效siblings为jquery内置的,用来获取同辈元素标签的函数,使用起来是非常简单的,看下面的这些常用的几种写法和用法,大家就能明白如何使用了:$("DIV#aijquery").siblings();//获取ID为aijquery的DIV的所有同辈元素$("div#a


17
教你如何用jquery做网页“百叶窗”特效,即同一个区域内,根据点击不同的按钮或链接显示不同的内容的特效

CDes使用jquery可以大大的缩减我们编写代码的时间,就好比本章要说的网页“百叶窗”特效,如果要用js来做的话,可能需要几十行的代码,但是用jquery来做的话,只需要两三行代码就OK了!大家可以先点击下面的链接查看站长做的一个在线实例演示:jquery做的最简单的百叶窗效果展示下面是上面在线实例的截图:下面站长来和大家讲解一下其中的核心代码:$("button").click(function(){ varid=$(this).attr("id"); $(this).addClass("on").siblings("butto


18
jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

CDes 这一章,站长总结一下jquery里对下拉框select的各种操作,如两个或三个select下拉框的联动效果,读取select下拉框里选中项的值和文本,根据指定的值或文本来选中select下拉框的指定项等操作,先来看具体的在线实例演示:jquery操作下拉框select的各种方法在线实例演示下面是上面在线实例的截图:1.先说select下拉框联动效果的实现,大家可以点下面的链接查看,里面有很完整的代码及讲解:jquery三级联动select下拉菜单特效的实现方法和在线实例展示2.根据指定的文本来选中select下拉框指定的optilon选项,在网上搜索,基本上说的都是用下面的方法:$(&quo


19
jquery三级联动select下拉菜单特效的实现方法和在线实例展示

CDes 这一篇站长教大家如何用jquery来实现网页中的三级下拉菜单联动的效果,先来看在线实例展示:jquery操作下拉框select的各种方法在线实例演示 下面站长开始一步一步的教大家如何来做这个三级联动效果:第一步,因为第一级菜单是不动的,所以要把除了第一级菜单外的第二级和第三级菜单放到JS数组里,方便动态读取和调用:varTypeInfo=newArray();TypeInfo[0]=newArray("1","4","T11");//父类别ID,本类别ID,本类别名称TypeInfo[1]=newArray("1&quo


20
jquery+正则判断输入不能为空及完整实例演示

CDes本文是一个非常基础的入门实例,高手可以飘过。在jquery里用正则来判断和验证用户输入的内容,或我们指定的内容是否为空。先来看用正则验证内容是否为空的方法:/^\s*$/g.test(要验证判断的值);下面是上面这个正则的各个符号的详细解释:^ 表示“开头”;$ 表示“结尾”;\s 表示空白,如换行符,空格等其它空白符号;* 表示零或多个;整个解释起来就是,判断“值”从开头到结尾是否为0或多个的空白符号,即输入的内容是否为空!下面是一个完整的实例代码:var$text=$("#text");var$res=$("#res");$("#btn1&


21
ASP里eval和execute的区别(通过具体的实例来了解)

CDesASP里有两个用处非常“大”的函数:eval 和 execute 。本文站长通过具体的实例来和大家一起认识和学习ASP里eval 和execute的用法。一:eval : 用来“计算”, 并且返回结果:来看一个具体的实例:<%a=1b=2response.write"a+b"'会直接输出a+bresponse.writeeval("a+b")'会计算具体的结果输出3'在使用eval的时候,eval会尽可的把内容里的换成程序里出现的变量,然后计算出结果并返回%>二:execute : 用来执行一句或多句的代码,不一定有返


22
jquery里url转json和json转url的方法

CDes本文和大家分享一下在jquery里,json和url相互转换的方法:一:JSON转URL:jquery里有一个$.param()的函数,可以用来把JSON转成url格式的字符串:varobj={aa:"fda",bb:["bb1","bb2"]};console.log($.param(obj));//aa=fda&bb%5B%5D=bb1&bb%5B%5D=bb2//值是经过url编码的,解码看下:console.log(decodeURIComponent($.param(obj)));//aa=fda&b


23
bootstrap里popover实现点击区域外关闭隐藏的方法[原创]

CDes站长在做的web项目里,用到了bootstrap的popover组件,要求:鼠标放上去,或点击时显示popover;鼠标移开后,popover不会关闭和隐藏;当点击网页的其它地方时,要关闭popover;功能很简单,站长很快就写好了,但抱着学习和优化的目的,就到网上找了下类似的文章,竟然发现,(不要笑)网上的方法好像还不如我的方法,-_-!!!看了好几个网站,内容都一样,方法也都是这个:$('body').on('click',function(event){vartarget=$(event.target);if(!target.hasClass('p


24
bootstrap里popover的相关属性、方法和事件

CDesbootstrap里一款非常流行的css框架,站长现在做web都是用的这个,所以在使用bootstrap的时候,把会用到的一些内容做记录和整理是很有必要的,一是加深自己更深的了解,二也能帮助到其他的人。本文站长就来整理一下bootstrap里popover组件的相关内容。一:让自己的网页里可以使用popover组件的方法:第一步:引入相应的JS文件,两种方案:引入bootstrap.css 、bootstrap.js 及 Popover.js;引入bootstrap.css 和bootstrap.bundle.js;站长一般用的是第二方案,一是因为CDN加速,二是只引入一个bootstrap.


25
jquery.lazyload图片延迟加载插件—源码下载及使用方法和实例

CDes当我们网站里的图片特别多的时候,打开网页的时候,会出现“卡顿”的现象,这就是因为有太多图片正在加载而造成的,但我们的网页,在打开的时候,并不需要把所有的图片都一起加载的,只需要加载在我们“视野”之内的图片就行,其它的图片可以延迟加载,这样就加快了我们网页打打开速度,让别人访问我们网页的时候体验更好。今天就和大家分享一个jquery开发的,可以用来延迟加载我们网页里图片的插件:jquery.lazyload。一:jquery.lazyload插件的下载与CDN加速://站长提供的百度云下载:有1.9.1、1.9.2和1.9.3三个版本链接:https://pan.baidu.com/s/1X-3


26
jquery+bootstrap做的下拉菜单(不使用bootstrap的js插件)

CDesbootstrap是一款非常流行的CSS框架,使用bootstrap可以让我们web前端开发变得非常简单。但站长在使用的时候,只喜欢使用CSS框架代码,不喜欢同时使用它自带的JS框架,因为web项目里本身就已经使用了好多JS,不想让web变得太“臃肿”。这一篇,站长要说的就是如何自己写代码来实现bootstrap的下拉菜单特效,下面是在线演示地址:bootstrap下拉菜单在线演示下面站长来说下如何实现:第一步:HTML代码,完全照着bootstap的结构来写:菜单一子菜单1子菜单2因为我们要使用bootstap里的CSS样式,所以在做下拉菜单的时候,要按照bootstrap里的格式来。第二步


27
requirejs使用时,如果require发生错误时,处理error的方法

CDesrequirejs插件可以让我们的web里的js文件的引用变得非常简单,大大优化了我们的web加载速度和体验。最近站长在做一个web项目的时候,需要使用rquirejs来加载一个第三方的JS文件,但需要在加载出错的时候,加载另一个JS文件。在网上找了好久的资料,最后才在官网找到,这里直接把方法分享给大家:一般我们在引用模块或js文件的时候都是这样来用:require(["jquery"],function($){//dosomething});其实 require还能添加第三个参数的,这第三个参数就是在require加载出错时,对错误的处理:require(["j


28
jquery里获取最后一个或几个元素的方法[最全整理]

CDes本文站长和大家整理分享一个在jquery里和获取“最后一个”或“后几个”元素的方法:一:获取最后一个(jquery对象):在jquery里和“最后一个”相关的属性或方法有::last : 获取最后的那个元素:last-child : 获取每个父元素的最后一个子元素:last-of-type ::nth-last-child ::nth-last-of-type:1》:last 这是我们用的最多的,常用的方法和写法有:$("trtd:last"):返回单一记录,获取到的是最后一个tr里最后的一个td,并不是每一个tr里的最后一个td;$("tr").fin


29
jquery里Deferred(延迟)对象的常用实例

CDes以前站长写过一篇文章来介绍jquery里的延迟对象,也就是Deferred对象:《jquery延迟(deferred)对象和回调函数详解》,不过站长相信肯定还有很多人和站长一样,对jquery里的延迟deferred对象还是会感觉点那么迷惑。没关系,站长会经常整理一些和deferred相关的具体实例,通过这些实例,相信,即使你还是不太了解deferred,但也能在这些具体实例的基础上,拿去自己应用。实例1:点击按钮后,发送ajax请求,获取到数据后,执行指定的函数://下面是通过ajax获取数据的函数functionGetData(){vardefer=$.Deferred();$.ajax(


30
jquery上传视频,并截取视频第一帧做封面主图同步上传(附完整在线实例)

CDes本文,站长和大家分享一个我们日常web开发中会用到的实例:jquery做的视频上传,并获取视频的第一帧当作视频的主图同步上传。文章的最后会有完整的在线实例演示提供给大家,不想看站长啰嗦的可以直接拉到文章的最后,去看在线实例。我们要做的视频,及封面同步上传,需要实现以下几点:可以拖拽上传;上传之前可以预览视频,及截取到的封面;要使用jquery里的ajax来上传;下面,站长和大家来一步步的说,要如何完成:为了方便你阅读,在这里展示的只有核心的代码,其它的,如CSS样式的控制,上传前所选文件的类型及大小的判断等,都不再显示!第一步:部署相关的HTML代码:可把图片直接拖拽到这里上传html代码很简