必备的实用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; }