实用jQuery代码片段

maco精选的一些jQuery代码，也许你从中可以举一反三
[代码] [JavaScript]代码
001

002   

★ 使用jQuery来切换样式表

003   

$("link[media='screen']").attr("href", "Alternative.css");

004

005 
006

007   

★ jQuery检测浏览器类型

008   

009        (if( $.browser.safari))

010        (if ($.browser.msie && $.browser.version > 6 ))

011        (if ($.browser.msie && $.browser.version <= 6 ))

012        (if ($.browser.mozilla && $.browser.version >= '1.8' ))

013    

014

015 
016

017   

★ jQuery验证某个元素是否为空

018   

019        if ($("#Demo").html()) { //null;}

020    

021

022 
023

024   

★ jQuery从集合中获得索引值

025   

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

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

028        });

029    

030

031 
032

033   

★ jQuery选择被选中的option元素

034   

035        $("#someElement").find("option:selected");

036    

037

038 
039

040   

★ jQuery为选择器绑定方法

041   

042        $("table").delegate("td", "hover", function(){

043            $(this).toggleClass("hover");

044        });    //1.42版后,delegate替代live,因为它们提供了更好的上下文支持

045    

046

047 
048

049   

★ jQuery自动滚动到页面中的某区域(可以看做一个小插件)

050   

051        jQuery.fn.Autoscroll = function(sel) {

052            $('html,body').animate(

053                {scrollTop: $(sel).offset().top},500

054            );

055        }      //调用：$("#area_name").Autoscroll();

056    

057

058 
059

060   

★ jQuery限制"TextArea"域中的字符数(可以看做一个小插件)

061   

062         (function($) {

063        jQuery.fn.maxLength = function(max){

064                this.each(function(){

065                var type = this.tagName.toLowerCase();

066                var inputType = this.type ? this.type.toLowerCase() : null;    

067                if (type == "input" && inputType == "text" || inputType == "password") {

068                    //应用标准的maxLength

069                    this.maxLength = max;

070                }

071                else

072                    if (type == "textarea") {

073                        this.onkeypress = function(e){

074                            var ob = e || event;

075                            var keyCode = ob.keyCode;

076                            var hasSelection = document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;

077                           return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);

078                        };

079                        this.onkeyup = function(){

080                            if (this.value.length > max) {

081                                this.value = this.value.substring(0, max);

082                            }

083                        };

084                    }

085            });

086        })(jQuery);  //调用：$('#macoArea").maxLength(500);

087    

088

089 
090

091   

★ jQuery判断某个元素是否可见

092   

093        if($("#macoArea").is(":visible") == "true") { //少年,别跑 }

094   

095

096 
097

098   

★ jQuery元素居中显示(可以看做一个小插件)

099   

100        (function($) {

101            jQuery.fn.center = function () {

102                this.css('position','absolute');

103                 this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');

104                 this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');

105                 return this;

106            }

107        })(jQuery);  //调用：$("#macoArea").center();

108    

109

110 
111

112   

★ jQuery使用.siblings()选择同辈元素

113   

114        // 少年,你是否这样操作过

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

116            $("#macoArea li").removeClass("current");

117            $(this).addClass("current");

118        });

119        //这样做是不是会更好呢

120        $("#nav li").click(function(){

121            $(this).addClass("current").siblings().removeClass("current");

122        });

123    

124

125 
126

127   

★ jQuery操作复选框全选反选

128   

129       var sta = false; //你懂,全局东东

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

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

132            sta = !sta;

133        });

134    

135

136 
137

138   

★ jQuery获得鼠标光标位置x和y

139   

140        $(document).mousemove(function(e)}

141            $(document).ready(function() {

142                $().mousemove(function(e){

143                $("#macoArea").html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);

144            });

145        });

146    

147

148 
149

150   

★ jQuery解析XML

151   

152        function ParseXml(xml) {

153            $(xml).find("Node").each(function(){

154                $("#macoArea").append($(this).attr("Author") + "");

155            );

156        }

157    

158

159 
160

161   

★ jQuery判断图像是否被完全加载进来

162   

163        $('#demoImg').attr("src", "demo.jpg").load(function() {

164            alert("是的,你看到的是真的");

165        });

166    

167

168 
169

170   

★ jQuery让Cookie过期

171   

172        var date = new Date();

173        date.setTime(date.getTime() + (x * 60 * 1000));

174        $.cookie("example", "foo", { expires: date });;

175    

176

177 
178

179   

★ jQuery禁止鼠标右键

180   

181        $(function(){

182            $(document).bind("contextmenu",function(e){

183                return false;

184            });

185        });

186    

187