必备的实用jQuery代码段（1）

1. 如何正确地使用toggleClass：

//切换（toggle）类允许你根据某个类的

//是否存在来添加或是删除该类。

//这种情况下有些开发者使用：

a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');

//toggleClass允许你使用下面的语句来很容易地做到这一点

a.toggleClass('blueButton');

2. 如何从一个未排序的集合中找出某个元素的索引号

$("ul > li").click(function () {　　

　　var index = $(this).prevAll().length;

　　//prevAll([expr]): 查找当前元素之前所有的同辈元素

});

3 如何把函数绑定到事件上：

//方法一

$('#foo').click(function(event) { 　　

     alert('User clicked on "foo."');

});

//方法二, 支持动态传参

$('#foo').bind('click', {test1:"abc", test2:"123"}, function(event) { 　　

     alert('User clicked on "foo."' + event.data.test1 + event.data.test2 );

});

4. 如何使用多个属性来进行过滤//在使用许多相类似的有着不同类型的input元素时，

//这种基于精确度的方法很有用  
var elements = $('#someid input[type=sometype][value=somevalue]').get();

5. 如何找到一个已经被选中的option元素：

$('#someElement').find('option:selected');

6 . 在jQuery中如何测试某个元素是否可见

if($(element).is(':visible')) { 　　
　　//该元素是可见的 
}

7. 在jQuery中如何使用.siblings()来选择同辈元素

// 不这样做

$('#nav li').click(function(){ 　　

    $('#nav li').removeClass('active'); 　　

    $(this).addClass('active');

});

//替代做法是

$('#nav li').click(function(){ 　　

    $(this).addClass('active').siblings().removeClass('active');

});

8. 如何切换页面上的所有复选框：

var tog = false; // 或者为true，如果它们在加载时为被选中状态的话

$('a').click(function() { 　　

    $("input[type=checkbox]").attr("checked",!tog); 　　

    tog = !tog;

});

9. 如何扩展String对象的方法

$.extend(String.prototype, {

        isPositiveInteger:function(){

            return (new RegExp(/^[1-9]\d*$/).test(this));

        },

        isInteger:function(){

            return (new RegExp(/^\d+$/).test(this));

        },

        isNumber: function(value, element) {

            return (new RegExp(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/).test(this));

        },

        trim:function(){

            return this.replace(/(^\s*)|(\s*$)|\r|\n/g, "");

        },

        trans:function() {

            return this.replace(/</g, '<').replace(/>/g,'>').replace(/"/g, '"');

        },

        replaceAll:function(os, ns) {

            return this.replace(new RegExp(os,"gm"),ns);

        },

        skipChar:function(ch) {

            if (!this || this.length===0) {return '';}

            if (this.charAt(0)===ch) {return this.substring(1).skipChar(ch);}

            return this;

        },

        isValidPwd:function() {

            return (new RegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this));

        },

        isValidMail:function(){

            return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim()));

        },

        isSpaces:function() {

            for(var i=0; i<this.length; i+=1) {

                var ch = this.charAt(i);

                if (ch!=' '&& ch!="\n" && ch!="\t" && ch!="\r") {return false;}

            }

            return true;

        },

        isPhone:function() {

            return (new RegExp(/(^([0-9]{3,4}[-])?\d{3,8}(-\d{1,6})?$)|(^\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\))?$)|(^\d{3,8}$)/).test(this));

        },

        isUrl:function(){

            return (new RegExp(/^[a-zA-z]+:\/\/([a-zA-Z0-9\-\.]+)([-\w .\/?%&=:]*)$/).test(this));

        },

        isExternalUrl:function(){

            return this.isUrl() && this.indexOf("://"+document.domain) == -1;

        }

    });

10. 如何规范化写jQuery插件：

(function($){

    $.fn.extend({

        pluginOne: function(){

            return this.each(function(){

                // my code

            });

        },

        pluginTwo: function(){

            return this.each(function(){

                // my code

            });

        }

    });

})(jQuery);

11 获取 URL 中传递的参数

$.urlParam = function(name){

　　var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);

　　if (!results) { return 0; }

　　return results[1] || 0;

}

巴特西

必备的实用jQuery代码段（1）

最新文章

热门文章