能夠直接拿來用的15個jQuery代碼片斷

時間  2019-11-19
標籤 能夠 直接 拿來 用的 jquery 代碼 片斷 欄目 JQuery 简体版
原文   原文鏈接

本文轉自網絡  地址： http://www.csdn.net/article/2013-07-16/2816238-15-jQuery-Code-Snippets-for-Developersjavascript

摘要：開發人員利用jQuery代碼不只能給網站帶來各類動畫、特效，還會提升網站的用戶體驗。本文總結了開發者常用的15個jQuery代碼片斷，你們能夠直接拿來用。php

jQuery裏提供了許多建立交互式網站的方法，在開發Web項目時，開發人員應該好好利用jQuery代碼，它們不只能給網站帶來各類動畫、特效，還會提升網站的用戶體驗。css

本文收集了15段很是實用的jQuery代碼片斷，你能夠直接複製黏貼到代碼裏，但請開發者注意了，要理解代碼再使用哦。下面就讓咱們一塊兒來享受jQuery代碼的魅力之處吧。html

1.預加載圖片java

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" );

源碼jquery

2. 讓頁面中的每一個元素都適合在移動設備上展現ios

1
2
3
4
5
6
7
8
9
10
11
var scr = document.createElement( 'script' );
scr.setAttribute( 'src' , 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' );
document.body.appendChild(scr);
scr.onload = function (){
     $( 'div' ).attr( 'class' , '' ).attr( 'id' , '' ).css({
         'margin' : 0,
         'padding' : 0,
         'width' : '100%' ,
         'clear' : 'both'
     });
};

源碼web

3.圖像等比例縮放ajax

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
});

源碼api

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);
})
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程