首页 > 代码库 > 实用jQuery代码片段
实用jQuery代码片段
maco精选的一些jQuery代码，也许你从中可以举一反三
[代码] [JavaScript]代码
001<p>
002 <h3><span >★ 使用jQuery来切换样式表</h3>
003 <pre class="brush:js">$("link[media=‘screen‘]").attr("href", "Alternative.css");</pre>
004</p>
005
006<p>
007 <h3><span >★ jQuery检测浏览器类型</h3>
008 <pre class="brush:js">
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 </pre>
014</p>
015
016<p>
017 <h3><span >★ jQuery验证某个元素是否为空</h3>
018 <pre class="brush:js">
019 if ($("#Demo").html()) { //null;}
020 </pre>
021</p>
022
023<p>
024 <h3><span >★ jQuery从集合中获得索引值</h3>
025 <pre class="brush:js">
026 $("ul > li").click(function () {
027 var index = $(this).prevAll().length;
028 });
029 </pre>
030</p>
031
032<p>
033 <h3><span >★ jQuery选择被选中的option元素</h3>
034 <pre class="brush:js">
035 $("#someElement").find("option:selected");
036 </pre>
037</p>
038
039<p>
040 <h3><span >★ jQuery为选择器绑定方法</h3>
041 <pre class="brush:js">
042 $("table").delegate("td", "hover", function(){
043 $(this).toggleClass("hover");
044 }); //1.42版后,delegate替代live,因为它们提供了更好的上下文支持
045 </pre>
046</p>
047
048<p>
049 <h3><span >★ jQuery自动滚动到页面中的某区域(可以看做一个小插件)</h3>
050 <pre class="brush:js">
051 jQuery.fn.Autoscroll = function(sel) {
052 $(‘html,body‘).animate(
053 {scrollTop: $(sel).offset().top},500
054 );
055 } //调用：$("#area_name").Autoscroll();
056 </pre>
057</p>
058
059<p>
060 <h3><span >★ jQuery限制"TextArea"域中的字符数(可以看做一个小插件)</h3>
061 <pre class="brush:js">
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 = http://www.mamicode.com/this.value.substring(0, max);
082 }
083 };
084 }
085 });
086 })(jQuery); //调用：$(‘#macoArea").maxLength(500);
087 </pre>
088</p>
089
090<p>
091 <h3><span >★ jQuery判断某个元素是否可见</h3>
092 <pre class="brush:js">
093 if($("#macoArea").is(":visible") == "true") { //少年,别跑 }
094 </pre>
095</p>
096
097<p>
098 <h3><span >★ jQuery元素居中显示(可以看做一个小插件)</h3>
099 <pre class="brush:js">
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 </pre>
109</p>
110
111<p>
112 <h3><span >★ jQuery使用.siblings()选择同辈元素</h3>
113 <pre class="brush:js">
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 </pre>
124</p>
125
126<p>
127 <h3><span >★ jQuery操作复选框全选反选</h3>
128 <pre class="brush:js">
129 var sta = false; //你懂,全局东东
130 $(‘a‘).click(function() {
131 $("input[type=checkbox]").attr("checked",!sta);
132 sta = !sta;
133 });
134 </pre>
135</p>
136
137<p>
138 <h3><span >★ jQuery获得鼠标光标位置x和y</h3>
139 <pre class="brush:js">http://www.huiyi8.com/jiaoben/
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 </pre>
147</p>
148
149<p>
150 <h3><span >★ jQuery解析XML</h3>
151 <pre class="brush:js">
152 function ParseXml(xml) {
153 $(xml).find("Node").each(function(){
154 $("#macoArea").append($(this).attr("Author") + "");
155 );
156 }
157 </pre>
158</p>
159
160<p>
161 <h3><span >★ jQuery判断图像是否被完全加载进来</h3>
162 <pre class="brush:js">
163 $(‘#demoImg‘).attr("src", "demo.jpg").load(function() {
164 alert("是的,你看到的是真的");
165 });
166 </pre>
167</p>
168
169<p>
170 <h3><span >★ jQuery让Cookie过期</h3>
171 <pre class="brush:js">
172 var date = new Date();
173 date.setTime(date.getTime() + (x * 60 * 1000));
174 $.cookie("example", "foo", { expires: date });;
175 </pre>
176</p>
177
178<p>
179 <h3><span >★ jQuery禁止鼠标右键</h3>
180 <pre class="brush:js">
181 $(function(){
182 $(document).bind("contextmenu",function(e){
183 return false;
184 });
185 });
186 </pre>
187</p>