可以直接拿来用的15个jQuery代码片段
jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画、特效,还会提高网站的用户体验。
本文收集了15段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。
1.预加载图片
1
2
3
4
5
6
7
8
9
10
11
12
|
( function ($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function () { var args_len = arguments.length; for ( var i = args_len; i--;) { var cacheImage = document.createElement( 'img' ); cacheImage.src = arguments[i]; cache.push(cacheImage); } } jQuery.preLoadImages( "image1.gif" , "/path/to/image2.png" ); |
2. 让页面中的每个元素都适合在移动设备上展示
1
2
3
4
5
6
7
8
9
10
11
|
var scr = document.createElement( 'script' ); document.body.appendChild(scr); scr.onload = function (){ $( 'div' ).attr( 'class' , '' ).attr( 'id' , '' ).css({ 'margin' : 0, 'padding' : 0, 'width' : '100%' , 'clear' : 'both' }); }; |
3.图像等比例缩放
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
$(window).bind( "load" , function () { // IMAGE RESIZE $( '#product_cat_list img' ).each( function () { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $( this ).width(); var height = $( this ).height(); if (width > maxWidth){ ratio = maxWidth / width; $( this ).css( "width" , maxWidth); $( this ).css( "height" , height * ratio); height = height * ratio; } var width = $( this ).width(); var height = $( this ).height(); if (height > maxHeight){ ratio = maxHeight / height; $( this ).css( "height" , maxHeight); $( this ).css( "width" , width * ratio); width = width * ratio; } }); //$("#contentpage img").show(); // IMAGE RESIZE }); |
4.返回页面顶部
1
2
3
4
5
6
7
8
|
// Back To Top $(document).ready( function (){ $( '.top' ).click( function () { $(document).scrollTo(0,500); }); }); //Create a link defined with the class .top <a href= "#" class= "top" >Back To Top</a> |
5.使用jQuery打造手风琴式的折叠效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var accordion = { init: function (){ var $container = $( '#accordion' ); $container.find( 'li:not(:first) .details' ).hide(); $container.find( 'li:first' ).addClass( 'active' ); $container.on( 'click' , 'li a' , function (e){ e.preventDefault(); var $ this = $( this ).parents( 'li' ); if ($ this .hasClass( 'active' )){ if ($( '.details' ).is( ':visible' )) { $ this .find( '.details' ).slideUp(); } else { $ this .find( '.details' ).slideDown(); } } else { $container.find( 'li.active .details' ).slideUp(); $container.find( 'li' ).removeClass( 'active' ); $ this .addClass( 'active' ); $ this .find( '.details' ).slideDown(); } }); } }; |
6.通过预加载图片廊中的上一幅下一幅图片来模仿Facebook的图片展示方式
1
2
3
4
5
6
7
8
|
var nextimage = "/images/some-image.jpg" ; $(document).ready( function (){ window.setTimeout( function (){ var img = $( "" ).attr( "src" , nextimage).load( function (){ //all done }); }, 100); }); |
7.使用jQuery和Ajax自动填充选择框
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$( function (){ $( "select#ctlJob" ).change( function (){ $.getJSON( "/select.php" ,{id: $( this ).val(), ajax: 'true' }, function (j){ var options = '' ; for ( var i = 0; i < j.length; i++) { options += ' ' + j[i].optionDisplay + ' ' ; } $( "select#ctlPerson" ).html(options); }) }) }) |
8.自动替换丢失的图片
1
2
3
4
5
6
7
8
|
// Safe Snippet $( "img" ).error( function () { $( this ).unbind( "error" ).attr( "src" , "missing_image.gif" ); }); // Persistent Snipper $( "img" ).error( function () { $( this ).attr( "src" , "missing_image.gif" ); }); |
9.在鼠标悬停时显示淡入/淡出特效
1
2
3
4
5
6
7
8
|
$(document).ready( function (){ $( ".thumbs img" ).fadeTo( "slow" , 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads $( ".thumbs img" ).hover( function (){ $( this ).fadeTo( "slow" , 1.0); // This should set the opacity to 100% on hover }, function (){ $( this ).fadeTo( "slow" , 0.6); // This should set the opacity back to 60% on mouseout }); }); |
10.清空表单数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function clearForm(form) { // iterate over all of the inputs for the form // element that was passed in $( ':input' , form).each( function () { var type = this .type; var tag = this .tagName.toLowerCase(); // normalize case // it's ok to reset the value attr of text inputs, // password inputs, and textareas if (type == 'text ' || type == ' password ' || tag == ' textarea ') this.value = ""; // checkboxes and radios need to have their checked state cleared // but should *not* have their ' value ' changed else if (type == ' checkbox ' || type == ' radio ') this.checked = false; // select elements need to have their ' selectedIndex ' property set to -1 // (this works for both single and multiple select elements) else if (tag == ' select') this .selectedIndex = -1; }); }; |
11.预防对表单进行多次提交
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$(document).ready( function () { $( 'form' ).submit( function () { if ( typeof jQuery.data( this , "disabledOnSubmit" ) == 'undefined' ) { jQuery.data( this , "disabledOnSubmit" , { submited: true }); $( 'input[type=submit], input[type=button]' , this ).each( function () { $( this ).attr( "disabled" , "disabled" ); }); return true ; } else { return false ; } }); }); |
12.动态添加表单元素
1
2
3
4
5
|
//change event on password1 field to prompt new input $( '#password1' ).change( function () { //dynamically create new input and insert after password1 $( "#password1" ).append( "" ); }); |
13.让整个Div可点击
1
2
|
blah blah blah. link The following lines of jQuery will make the entire div clickable: $( ".myBox" ).click( function (){ window.location=$( this ).find( "a" ).attr( "href" ); return false ; }); |
14.平衡高度或Div元素
1
2
3
4
5
|
var maxHeight = 0; $( "div" ).each( function (){ if ($( this ).height() > maxHeight) { maxHeight = $( this ).height(); } }); $( "div" ).height(maxHeight); |
15. 在窗口滚动时自动加载内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var loading = false ; $(window).scroll( function (){ if ((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if (loading == false ){ loading = true ; $( '#loadingbar' ).css( "display" , "block" ); $.get( "load.php?start=" +$( '#loaded_max' ).val(), function (loaded){ $( 'body' ).append(loaded); $( '#loaded_max' ).val(parseInt($( '#loaded_max' ).val())+50); $( '#loadingbar' ).css( "display" , "none" ); loading = false ; }); } } }); $(document).ready( function () { $( '#loaded_max' ).val(50); }); |
可以直接拿来用的15个jQuery代码片段的更多相关文章
- 50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段
50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段 本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从j ...
- 直接拿来用的15个jQuery代码片段
1.预加载图片 1 2 3 4 5 6 7 8 9 10 11 12 (function($) { var cache = []; // Arguments are image paths r ...
- 15个jQuery小技巧
1.返回顶部按钮通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画:// Back to top $('.top').click(funct ...
- 必知的 15 个jQuery小技巧(干货)
jQuery小技巧(干活) 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top').click(function(){ ...
- 15行python代码,帮你理解令牌桶算法
本文转载自: http://www.tuicool.com/articles/aEBNRnU 在网络中传输数据时,为了防止网络拥塞,需限制流出网络的流量,使流量以比较均匀的速度向外发送,令牌桶算法 ...
- 用SUMIF对超15位的代码进行条件求和,出错了,原因是....
用SUMIF对超15位的代码进行条件求和,出错了,原因是.... 2017-10-29 23:01 一.问题 有读者朋友问: 用SUMIF进行条件求和时,如果统计的条件是超15位的代码,就会出错,比如 ...
- 全屏背景:15个jQuery插件实现全屏背景图像或媒体
动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...
- [英] 推荐 15 个 jQuery 选择框插件
jQuery Selectbox Plugins let you create beautiful and eye catching select box for your websites inst ...
- 移动开发必备!15款jQuery Mobile插件
移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...
随机推荐
- jx3dps开发日记
2014.11.13 子级过滤 关于optgroup这个东西,一开始以为是个包裹元素,但是一般来说,包裹元素给一个class,那么让这个class show()应该它包裹的元素也跟随show,可结果是 ...
- BlockingQueue队列学习
今天看了下BlockingQueue的几种实现,记录下以便以后复习. 首先来看一下BlockingQueue的家族成员: BlockingQueue除了先进先出外,还有两个操作:在队列为空时,获取元素 ...
- wcf客户端捕获异常
直接使用Exception进行捕获,然后在监视器中查看具体是哪一个异常 System.Exception {System.ServiceModel.Security.MessageSecurityEx ...
- bzoj3437
练一下斜率优化 ..] of int64; q,a,b:..] of longint; i,n,h,t,j:longint; function g(j,k:longint):double; var a ...
- 【转】Android:Bluetooth 的打开和关闭--不错
原文网址:http://www.ifeegoo.com/android-turn-on-and-turn-off-bluetooth.html 摘要:Android 中打开和关闭 Bluetooth ...
- HDOJ/HDU 2566 统计硬币(公式~遍历~)
Problem Description 假设一堆由1分.2分.5分组成的n个硬币总面值为m分,求一共有多少种可能的组合方式(某种面值的硬币可以数量可以为0). Input 输入数据第一行有一个正整数T ...
- mysql使用mysqldump导出数据出错
mysqldump -hlocalhost -uroot -p123456 student_info jssypk > c:/databackup.sql 导出表结构 mysqldump - ...
- .net 4中的pInvokeStackImbalance MDA默认是开启的
今天把我之前发的一个小工具FreeEverything(基于everything的一个简易磁盘清理工具)升级到了.net framework 4.5,并且去掉了对mvvmlight的依赖.结果在测试运 ...
- CBO学习----03--选择率(Selectivity)
第3章 单表选择率(Single Table Selectivity) Selectivity是优化器估算Rows(Cards)的重要依据. /**************************** ...
- Nunit Test 项目模块
下载地址:http://visualstudiogallery.msdn.microsoft.com/97bd5118-0c29-41b4-9477-d34192c183c3?SRC=VSIDE