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

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

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

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

5jquery实现双击table表格后可编辑内容的方法及在线实例演示
本文站长和大家分享一个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

6jquery图片或文字连续循环滚动特效[非常详细的教你如何自己动手写代码来实现]及在线实例演示
连续循环滚动是我们在网页开发中经常要用到的特效,在jquery里,我们要实现文字或图片的连续循环滚动是非常简单的,本文站长就和大家非常详细的来介绍如何在jquery里实现图片或文字的连续循环滚动,通过本文,可以让你掌握自己动手来写出连续循环滚动的特效代码。第一步:HTML结构和CSS样式:<styletype="text/css">#byculli{width:100px;height:80px}</style><divid="byc"class="mx-auto"style="width:40

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

8超详细讲解用jquery制作图片百叶窗轮播展示特效
本文和大家分享一个用jquery制作的一个图片百叶窗的特效,大家可以点下面的链接查看具体的在线实例演示:jquery图片百叶窗轮播展示特效在线演示下面是实例的截图:下面站长来具体和大家说下,如何来制作这个jquery图片百叶窗轮播展示的特效:第一步:布置相关的HTML代码,结构如下:<divclass="boxx"><ulclass="boxx_con"id="boxx_con"><li><ahref=""><imgsrc="/images/eg/ad

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

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

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

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

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

14教你如何用jquery做网页“百叶窗”特效,即同一个区域内,根据点击不同的按钮或链接显示不同的内容的特效
使用jquery可以大大的缩减我们编写代码的时间,就好比本章要说的网页“百叶窗”特效,如果要用js来做的话,可能需要几十行的代码,但是用jquery来做的话,只需要两三行代码就OK了!大家可以先点击下面的链接查看站长做的一个在线实例演示:jquery做的最简单的百叶窗效果展示下面是上面在线实例的截图:下面站长来和大家讲解一下其中的核心代码:<scriptlanguage="JavaScript">$("button").click(function(){ varid=$(this).attr("id"); $(this).

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

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

17jquery在iframe子框架里获取和操作父框架主页面的元素标签的方法及实例
本文,站长整理一下使用jquery在iframe子页面里,获取父页面里的元素标签的方法。最常用的方法:$("#ID",parent.document);//实例:获取父框架页面里ID为aijquery的div的高度varw=$("div#aijquery",parent.document).width();还有一种方法:$(parent.document).find("#ID");//实例:点击父框架页面里ID为aijquery的按钮$(parent.document).find("button#aijquery"

18通过具体的实例来解释jquery里offset()和position()的区别含义和用法
jquery里内置的offset函数是用来获取元素在当前窗口的相对偏移。这句是官方文档里的解释,让站长自己用“自己的话”来解释的话就是:把document对象(即整个网页主体)当成一个长方形,在这个“长方形”里放着各个容器(如div,p,table等)和元素(如buttonimgfont等),而$.offset()获取的就是元素的左上角距离“长方形”,即document对象的左上角的水平距离(left),和垂直距离(top)。如:$("div#aijquery").offset().top,我们获取到的就是页面里ID为aijquery的div标签,距离整个页面(docume

19获取元素位置、坐标、距离和宽高时,所有相关属性的含义及用法
本文站长来整理一下,在jquery里,我们获取一个元素的坐标位置,或宽高距离时,所有相关的属性和方法://jquery里相关的属性和方法:offset();position();scrollTop()/scrollLeft();width()/height();innerWidth()/innerHeight();outerWidth()/outerHeight();//js里相关的属性:scrollHeight/scrollWidth;scrollTop/scrollLeft;这些都是我们经常会用到的和坐标,位置,距离,宽高等相关的jquery或js属性,下面站长来具体讲解每个属性的含意及用

20jquery获取当前点击的标签节点名称的方法
jquery里,我们在为元素绑定单击事件时,因为“冒泡”的原因,所以我们在要操作被点击的标签节点时,使用e.target获取到的,不一定就是我们想要操作的那个标签节点,这时,我们就要通过获取标签节点的名称,来判断用e.target获取到的标签节点,是否不是我们要操作的那个标签节点。比如下面这个实例:<div><ahref="http://www.aijquery.cn"><b>爱jQuery</b></a></div>我们要实现这样一个效果:当点击页面里的链接时,给链接添加一个“on”的CSS样式,代

21jquery里判断一个标签元素是否包含另一个标签元素,即一个标签元素是否为另一个标签元素的子标签的方法
jquery里,我们要判断一个标签是否包含另一个标签,是非常简单的,jquery里有一个内置的函数,可以轻易的实现:$.contains(父元素,子元素)一个DOM节点是否包含另一个DOM节点来看一个具体的实例:<Divid="aijquery"><divid="sundiv">这是子元素</div></Div>假设我们有上面这样一段HTML,那么如果我们要判断#sundiv是否被#aijquery所包含,也就是#sundiv是否为#aijquery的子元素标签,那么直接这样写就可以:if($.conta

22clearTimeout与mouseover/mouseout 或mouseenter/mouseleave结合使用时无效或闪烁的解决方法
站长要实现这样一个效果:在程序中弹出显示一个提示警告框,如果没有其它操作,会在3秒后消失,但当鼠标放上面后,会一直显示,但当鼠标移开后,就会重新计时,在3秒后消失。这不是一个多复杂的效果,站长直接就开始动手写代码了:var$info=$("#info");//这是弹出的提示警告框varhiding;$info.slideDown(200);//显示提示框//下面这句是设置一个定时,三秒后收起提示框hiding=setTimeout(function(){$info.slideUp(200);},3000);//下面开始为提示框绑定鼠标mouseover和mouseout事件

23通过实例来演示mouseouver(mouseout)与mouseenter(mouseleave)的区别
本文站长通过一个实例来给大家讲解mouseover/mouseout事件与mouseenter/mouseleave事件的区别。下面是具体的实例演示,不想看文字的,可以直接点下面的链接看具体的实例演示:mouseouver与mouseenter的具体区别的在线演示下面是上面实例的截图:mouseover/mouseout事件与mouseenter/mouseleave事件都是“鼠标进入/移出标签”的事件,它们之间具体的区别就是:mouseover/mouseout事件支持冒泡,绑定的事件会冒泡到子标签上。mouseenter/mouseleave事件则只针对所绑定的标签,不会冒泡到子标签上。P

24用requirejs来加载jquery图片验证码插件的方法及实例演示
本文站长来介绍下用requirejs来加载jquery.code这个图片验证码插件的方法,通过本文,你可以更快的掌握和学习用requirejs来加载jquery其它插件的方法。下面来看具体的代码:<scriptlanguage="javascript">require.config({paths:{"jquery":"//apps.bdimg.com/libs/jquery/1.9.1/jquery.min","jquery.code":"/Html/aijquery/jquery.Code&

25用html5的Canvas开发的jquery图片验证码插件
和大家分享一个用jquery+html5Canvas开发的图片验证码插件,插件的效果如下:下面是完整的在线实例演示:用html5的canvas制作的jquery验证码在线演示如果是用requirejs来加载的话,看下面这个实例:requirejs加载jquery.code图片验证码插件的在线演示这款jquery图片验证码的源码如下:(function(){varconfig={canvas:"canvas", changeCode:"changeCode", len:4 }; $.GetCode=function(option){ $.extend

26通过全面了解jquery插件来学习如何自己动手编写jquery插件
本文站长带大家了解一下jquery插件的类型和结构,从而来学习如何自己动手进行编写jquery插件,或进行jquery插件的开发。jquery插件分两类:1:类级别插件,比较少;2:对象级别插件,比较多,常见的插件都是对象级别的插件。一,类级别插件:类级别插件就是给jquery添加静态方法,有三种方式:1.直接给jquery添加全局函数:$.doAdd=function(a,b){returna+b;};$.doJian=function(a,b){returna-b;}//页面中调用:varhe=$.doAdd(3,2);2.用extend()方法:$.extend({doAdd:funct

27jquery里使用ajax设置或更改cookie后,使cookie失效变成undefined
站长今天在做一个小web程序时,需要完成这样一个目的:载入页面时,先通过cookie来判断是否是第一次访问,如果不是,发送ajax请求,更新数据库,成功后再更改cookie。看上去很简单,就和统计一个网页的浏览次数一样,所以脑子里顿时就有了下面这样的写代码的结构和思路:读取cookie,if(判断成功){$.get(url,function(d){//修改网站全局的cookie})}从上面的结构和思路上,是没有问题的,如果正确的话,那么当我们第一次载入页面时,会发送ajax请求,ajax成功后,会更改网站全局的cookie,这样在刷新页面后,就不会再进行第二次的ajax请求。但是,站长自己试了

28jquery里用正则判断是否包含中文和是否全为中文的方法及实例演示
jquery里,我们如果要判断一个变量,或者用户在文本框里输入的内容是否包含有中文,或者是否全是中文的方法是非常简易的,大家可以先看下面这个在线实例演示:jquery用正则检测是否包含中文和是否全为中文的在线演示下面,站长通过一步一步的讲解,来向你演示如何自己动手写出我们在实际当中所需要表达式:首先,用来匹配中文的正则表达式为:\u4E00-\u9FA5其次,在正则表达式里,我们要验证判断或匹配字符串时,可以用test或match:test:用于检测一个字符串是否与正则相匹配,返回true或false;语法结构:正则.test(字符串)match:用于字符串内检索和正则相匹配的值,如果未找到

29jquery选中tr中除指定ID的td外所有td的方法
假如我们有下面这样一个表格:<table><trid="tr1"><td>1</td><tdid="name1">张大峰</td><td>9</td><tdid="time1">1985-10-24</td><td>zhangdafeng</td><td>中国人</td></tr>…</table>那么,我们如何用jquery来选取tr1下除了i

30jquery删除数组中的重复值或元素
jquery里,其实内置有一个函数用来删除数组中重复的值或元素的:$.unique:PS:站长以前总结过jquery里和数组相关的几个函数:http://www.aijquery.cn/Html/jqueryhanshu/99.html只是因为用的少,所以我们在需要给数组去重的时候,往往会想不起来~~-_-!!!下面站长来具体的用几个实例来说下$.unique函数来删除数组中重复元素的方法:实例1:普通的数值型的一维数组:vararr=[2,1,3,2,4,5,1,2];vararrt=$.unique(arr);document.write(arrt.join(",")

热点文章
热点图文
最近更新