jQuery 代码片段积累1( 9 + 15 +26 )

最新推荐文章于 2019-09-06 21:07:22 发布

__NULL

最新推荐文章于 2019-09-06 21:07:22 发布

阅读量1.2k

点赞数

分类专栏： jQuery入门

jQuery入门专栏收录该内容

10 篇文章

订阅专栏

三:July21

1. 禁止右键点击

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        returnfalse;
    });
});

2. 隐藏搜索文本框文字

Hide when clicked in the search field, the value.(example can be found below in the comment fields)

$(document).ready(function() {
$("input.text1").val("Enter your search text here");
   textFill($('input.text1'));
});
  
    functiontextFill(input){//input focus text function
    varoriginalvalue = input.val();
    input.focus(function(){
        if( $.trim(input.val()) == originalvalue ){ input.val(''); }
    });
    input.blur(function(){
        if( $.trim(input.val()) == ''){ input.val(originalvalue); }
    });
}

3. 在新窗口中打开链接

XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.

$(document).ready(function() {
   //Example 1: Every link will open in a new window
   $('a[href^="http://"]').attr("target","_blank");
  
   //Example 2: Links with the rel="external" attribute will only open in a new window
   $('a[@rel$='external']').click(function(){
      this.target = "_blank";
   });
});
// how to use
<A href="http://www.opensourcehunter.com" rel=external>open link</A>

4. 检测浏览器

注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量

$(document).ready(function() {
// Target Firefox 2 and above
if($.browser.mozilla && $.browser.version >= "1.8"){
    // do something
}
 
// Target Safari
if( $.browser.safari ){
    // do something
}
 
// Target Chrome
if( $.browser.chrome){
    // do something
}
 
// Target Camino
if( $.browser.camino){
    // do something
}
 
// Target Opera
if( $.browser.opera){
    // do something
}
 
// Target IE6 and below
if($.browser.msie && $.browser.version <= 6 ){
    // do something
}
 
// Target anything above IE6
if($.browser.msie && $.browser.version > 6){
    // do something
}
});

5. 预加载图片

This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$(document).ready(function() {
	jQuery.preloadImages = function()
	{
	  for(vari = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { i++)>").attr("src", arguments[i]);
	  }
	}
});
// how to use
$.preloadImages("image1.jpg");

6. 页面样式切换

$(document).ready(function() {
    $("a.Styleswitcher").click(function() {
        //swicth the LINK REL attribute with the value in A REL attribute
        $('link[rel=stylesheet]').attr('href', $(this).attr('rel'));
    });
});
// how to use
// place this in your header
<LINK rel=stylesheet type=text/css href="default.css">
// the links
<A class=Styleswitcher href="#"rel=default.css>Default Theme</A>
<A class=Styleswitcher href="#"rel=red.css>Red Theme</A>
<A class=Styleswitcher href="#"rel=blue.css>Blue Theme</A>

7. 列高度相同

如果使用了两个CSS列，使用此种方式可以是两列的高度相同。

$(document).ready(function() {
functionequalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
});
// how to use
$(document).ready(function() {
    equalHeight($(".left"));
    equalHeight($(".right"));
});

8. 动态控制页面字体大小

用户可以改变页面字体大小

$(document).ready(function() {
  // Reset the font size(back to default)
  varoriginalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase the font size(bigger font0
  $(".increaseFont").click(function(){
    varcurrentFontSize = $('html').css('font-size');
    varcurrentFontSizeNum = parseFloat(currentFontSize, 10);
    varnewFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    returnfalse;
  });
  // Decrease the font size(smaller font)
  $(".decreaseFont").click(function(){
    varcurrentFontSize = $('html').css('font-size');
    varcurrentFontSizeNum = parseFloat(currentFontSize, 10);
    varnewFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    returnfalse;
  });
});

9. 返回页面顶部功能

For a smooth(animated) ride back to the top(or any location).

$(document).ready(function() {
$('a[href*=#]').click(function() {
 if(location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
   var$target = $(this.hash);
   $target = $target.length && $target
   || $('[name='+this.hash.slice(1) +']');
   if($target.length) {
  vartargetOffset = $target.offset().top;
  $('html,body')
  .animate({scrollTop: targetOffset}, 900);
    returnfalse;
   }
  }
  });
});
// how to use
// place this where you want to scroll to
<A name=top></A>
// the link
<A href="#top">go to top</A>

11. 获得鼠标指针ＸＹ值

Want to know where your mouse cursor is?

$(document).ready(function() {
   $().mousemove(function(e){
     //display the x and y axis values inside the div with the id XY
    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  });
});
// how to use
<DIV id=XY></DIV>

12. 验证元素是否为空

This will allow you to check if an element is empty.

$(document).ready(function() {
  if($('#id').html()) {
   // do something
   }
});

13. 替换元素

Want to replace a div, or something else?

$(document).ready(function() {
   $('#id').replaceWith('
	<DIV>I have been replaced</DIV>
	');
});

14. jQuery延时加载功能

Want to delay something?

$(document).ready(function() {
   window.setTimeout(function() {
     // do something
   }, 1000);
});

15. 移除单词功能

Want to remove a certain word(s)?

$(document).ready(function() {
   varel = $('#id');
   el.html(el.html().replace(/word/ig,""));
});

16. 验证元素是否存在于jquery对象集合中

Simply test with the .length property if the element exists.

$(document).ready(function() {
   if($('#id').length) {
  // do something
  }
});

17. 使整个DIV可点击

Want to make the complete div clickable?

$(document).ready(function() {
    $("div").click(function(){
      //get the url from href attribute and launch the url
      window.location=$(this).find("a").attr("href");
	  return false;
    });
});
// how to use
<DIV><A href="index.html">home</A></DIV>

18. ID与Class之间转换.

当改变Window大小时，在ID与Class之间切换

$(document).ready(function() {
   functioncheckWindowSize() {
    if( $(window).width() > 1200 ) {
        $('body').addClass('large');
    }
    else{
        $('body').removeClass('large');
    }
   }
$(window).resize(checkWindowSize);
});

19. 克隆对象

Clone a div or an other element.

$(document).ready(function() {
   varcloned = $('#id').clone();
});
// how to use
<DIV id=id></DIV>

20. 使元素居屏幕中间位置

Center an element in the center of your screen.

$(document).ready(function() {
  jQuery.fn.center = function() {
      this.css("position","absolute");
      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
      returnthis;
  }
  $("#id").center();
});

21. 写自己的选择器

Write your own selectors.

$(document).ready(function() {
   $.extend($.expr[':'], {
       moreThen1000px:function(a) {
           return$(a).width() > 1000;
      }
   });
  $('.box:moreThen1000px').click(function() {
      // creating a simple js alert box
      alert('The element that you have clicked is over 1000 pixels wide');
  });
});

22. 统计元素个数

Count an element.

$(document).ready(function() {
   $("p").size();
});

23. 使用自己的 Bullets

Want to use your own bullets instead of using the standard or images bullets?

$(document).ready(function() {
   $("ul").addClass("Replaced");
   $("ul > li").prepend("‒ ");
 // how to use
 ul.Replaced { list-style : none; }
});

24. 引用Google主机上的Jquery类库

Let Google host the jQuery script for you. This can be done in 2 ways.

//Example 1
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT>
<SCRIPT type=text/javascript>
google.load("jquery","1.2.6");
google.setOnLoadCallback(function() {
    // do something
});
</SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>
 
 // Example 2:(the best and fastest way)
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

25. 禁用Jquery（动画）效果

Disable all jQuery effects

$(document).ready(function() {
    jQuery.fx.off = true;
});

26. 与其他Javascript类库冲突解决方案

To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.

$(document).ready(function() {
   var$jq = jQuery.noConflict();
   $jq('#id').show();
});

二:July16

http://www.youkuaiyun.com/article/2013-07-16/2816238-15-jQuery-Code-Snippets-for-Developers

1.预加载图片

 
        (
        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. 让页面中的每个元素都适合在移动设备上展示

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

源码

3.图像等比例缩放

 
        $(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.返回页面顶部

 
        // 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打造手风琴式的折叠效果

 
        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的图片展示方式

 
        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自动填充选择框

 
        $(
        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.自动替换丢失的图片

 
        // 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.在鼠标悬停时显示淡入/淡出特效

 
        $(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.清空表单数据

 
        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.预防对表单进行多次提交

 
        $(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.动态添加表单元素

 
        //change event on password1 field to prompt new input
       
        $(
        '#password1'
        ).change(
        function
        () {
       
        //dynamically create new input and insert after password1
       
        $(
        "#password1"
        ).append(
        ""
        );
       
        });

源码

13.让整个Div可点击

 
   
        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元素

 
        var 
        maxHeight = 0;
       
        $(
        "div"
        ).each(
        function
        (){
       
        if 
        ($(
        this
        ).height() > maxHeight) { maxHeight = $(
        this
        ).height(); }
       
        });
       
        $(
        "div"
        ).height(maxHeight);

源码

15. 在窗口滚动时自动加载内容

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

一:July12

转自:http://www.w3cfuns.com/article-5597822-1-1.html

1. jQuery平滑回到顶端效果

$(document).ready(function() {  
  
    $("a.topLink").click(function() {  
        $("html, body").animate({  
            scrollTop: $($(this).attr("href")).offset().top + "px"  
        }, {  
            duration: 500,  
            easing: "swing"  
        });  
        return false;  
    });  
  
});

2. jQuery处理图片尺寸

$(window).bind("load", function() {  
    // 图片修改大小  
    $('#imglist 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;  
        }  
        
        if(height > maxHeight){  
            ratio = maxHeight / height;  
            $(this).css("height", maxHeight);  
            $(this).css("width", width * ratio);  
            width = width * ratio;  
        }  
    });  
  
});

3. jQuery实现的滚动自动加载代码

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

4. jQuery测试密码强度

$('#pass').keyup(function(e) {  
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*[        DISCUZ_CODE_372        ]quot;, "g");  
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*[        DISCUZ_CODE_372        ]quot;, "g");  
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");  
     if (false == enoughRegex.test($(this).val())) {  
             $('#passstrength').html('More Characters');  
     } else if (strongRegex.test($(this).val())) {  
             $('#passstrength').className = 'ok';  
             $('#passstrength').html('Strong!');  
     } else if (mediumRegex.test($(this).val())) {  
             $('#passstrength').className = 'alert';  
             $('#passstrength').html('Medium!');  
     } else {  
             $('#passstrength').className = 'error';  
             $('#passstrength').html('Weak!');  
     }  
     return true;  
});

5. jQuery实现的DIv高度保持一致

var maxHeight = 0;  
  
$("div").each(function(){  
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }  
});  
  
$("div").height(maxHeight);

6. 简单处理IE6上PNG格式文件

$('.pngfix').each( function() {  
   $(this).attr('writing-mode', 'tb-rl');  
   $(this).css('background-image', 'none');  
   $(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")');  
});

将class=pngfix添加到需要处理的对象即可。

7. jQuery处理JSON

function parseJson(){  
    //Start by calling the json object, I will be using a   
        //file from my own site for the tutorial   
    //Then we declare a callback function to process the data  
    $.getJSON('hcj.json',getPosts);  
   
    //The process function, I am going to get the title,   
        //url and excerpt for 5 latest posts  
    function getPosts(data){  
   
        //Start a for loop with a limit of 5   
        for(var i = 0; i < 5; i++){  
            //Build a template string of   
                        //the post title, url and excerpt  
            var strPost = '<h2>'   
                      + data.posts[i].title  
                      + '</h2>'  
                      + '<p>'  
                      + data.posts[i].excerpt  
                      + '</p>'  
                      + '<a href="'  
                      + data.posts[i].url  
                      + '" title="Read '  
                      + data.posts[i].title  
                      + '">Read ></a>';  
   
            //Append the body with the string  
            $('body').append(strPost);  
   
        }  
    }  
   
}  
   
//Fire off the function in your document ready  
$(document).ready(function(){  
    parseJson();                     
});

8. jQuery实现让整个div可以被点击

$(".myBox").click(function(){      window.location=$(this).find("a").attr("href");       return false; });

9. jQuery实现的Facebook风格的图片预加载效果

var nextimage = "http://www.gbtags.com/gb/networks/uploadimgthumb/55d67b14-fb25-45e7-acc8-211a41047ef0.jpg";  
$(document).ready(function(){  
  window.setTimeout(function(){  
    var img = $("<img>").attr("src", nextimage).load(function(){  
     $('div').append(img);  
    });  
  }, 100);  
});