第8章，用jQuery打造個(gè)性網(wǎng)站

網(wǎng)站結(jié)構(gòu)

文件結(jié)構(gòu)

images文件夾用于存放將要用到的圖片 styles文件夾用于存放CSS樣式表，個(gè)人更傾向于使用CSS文件夾 scripts文件夾用于存放jQuery腳本，個(gè)人更傾向于使用JS文件夾存放所有的js及jQuery腳本

編寫CSS樣式

推薦首先編寫全局樣式，接著編寫可大范圍內(nèi)重用的樣式，最后編寫細(xì)節(jié)樣式，這樣根據(jù)CSS最近優(yōu)先原則，可以較容易地對(duì)網(wǎng)站進(jìn)行從整體到細(xì)節(jié)樣式的定義

第9章，jQuery Mobile

jQuery Mobile主要特性

1、基于jQuery構(gòu)建 2、兼容絕大部分手機(jī)平臺(tái) 3、輕量級(jí)的庫(kù) 4、模塊化結(jié)構(gòu) 5、HTML5標(biāo)記驅(qū)動(dòng)的配置 6、漸進(jìn)增強(qiáng)原則 7、響應(yīng)設(shè)計(jì) 8、強(qiáng)大的Ajax導(dǎo)航系統(tǒng) 9、易用性 10、支持觸摸和鼠標(biāo)事件 11、統(tǒng)一的UI組件 12、強(qiáng)大的主題化框架

其他框架

1、jqMobi（http://jqmobi.com） 2、Sencha Touch（http://sencha.com） 3、Zepto.js（http://zeptojs.com/）

第10章，jQuery各個(gè)版本的變化

講解jQuery的發(fā)展史，了解了解

第11章，jQuery性能優(yōu)化和技巧

jQuery性能優(yōu)化

1、使用最新版的jQuery類庫(kù) 2、使用合適的選擇器（1、盡量使用id選擇器，2、盡量給選擇器指定上下文） 3、緩存對(duì)象（即使用一個(gè)變量將需要重復(fù)使用的jQuery對(duì)象存下來，以避免多次獲取） 4、循環(huán)時(shí)的DOM操作（減少DOM操作） 5、數(shù)組方式使用jQuery對(duì)象（盡量使用for或while循環(huán)來處理jQuery對(duì)象，而不是使用$.each()） 注：檢查jQuery對(duì)象是否存在的方式應(yīng)該使用length屬性 6、事件代理 7、將代碼轉(zhuǎn)化為jQuery插件 8、使用join()來拼接字符串，替代使用“+”來拼接 9、合理利用HTML5的Data屬性 10、盡量使用原生的JavaScript方法 11、壓縮JavaScript

jQuery技巧

1、禁用右鍵 $(document).ready(function() {$(document).bind("contextmenu",function(e) {return false;}); });

2、新窗口打開頁(yè)面

$(document).ready(function() {// ex 1 : href = "http://" 的超鏈接將會(huì)在新窗口打開鏈接$('a[href^="http://"]').attr('target',"_blank");// ex 2 : rel = "external" 的超鏈接將會(huì)在新窗口打開鏈接$('a[rel$="external"]').click(function() {this.target = "_blank";}); }); 使用： <a href="http://www.cssrain.cn" rel="external">open link </a>

3、判斷瀏覽器類型

$(document).ready(function() {// Firefox2 and aboveif($.browser.mozilla && $.browser.version >= "1.8"){// do something }// Safariif($.browser.safari){// do something }// Chromeif($.browser.chrome){// do something }// Operaif($.browser.opera){// do something }// IE6 and belowif($.browser.msie && $.browser.version <= 6){// do something }//anything above IE 6if($.browser.msie && $.browser.version > 6){// do something } });

4、輸入框文字獲取和失去焦點(diǎn)

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

5、返回頭部滑動(dòng)動(dòng)畫

jQuery.fn.scrollTo = function(speed) {var targetOffset = $(this).offset().top;$('html.body').stop().animate({scrollTop : targetOffset},speed);return this; }; // use $("#goheader").click(function() {$("body").scrollTo(500);return false; });

?6、獲取鼠標(biāo)位置

$(document).ready(function() {$(document).mousemove(funtion(e) {$("#XY").html("X : " + e.pageX + " | Y : " + e.pageY);}); });

7、判斷元素是否存在

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

?8、點(diǎn)擊div也可跳轉(zhuǎn)

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

9、根據(jù)瀏覽器大小添加不同樣式

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

?10、設(shè)置div在屏幕中央

$(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");return this;}// use$("#XY").center(); });

11、創(chuàng)建自己的選擇器

$(document).ready(function() {$.extend($.expr[':'],{moreThen500px : function(a) {return $(a).width() > 500;}});$('.box:moreThen500px').click(function() {// ... }); });

?12、關(guān)閉所有動(dòng)畫效果

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

13、檢測(cè)鼠標(biāo)右鍵和左鍵

$(document).ready(function() {$('#XY').mousedown(function(e) {alert(e.which); // 1 = 鼠標(biāo)左鍵，2 = 鼠標(biāo)中鍵，3 = 鼠標(biāo)右鍵 }); });

?14、回車提交表單

$(document).ready(function() {$("input").keyup(function(e) {if(e.which == 13){alert("回車提交表單");}}); });

15、設(shè)置全局Ajax參數(shù)

$('#load').ajaxStart(function() {showLoading(); // 顯示loadingdisableButtons(); // 禁用按鈕 }); $('#load').ajaxComplete(function() {hideLoading(); // 隱藏loadingenableButtons(); // 啟用按鈕 });

16、獲取選中的下拉框

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

17、切換復(fù)選框

var tog = false; $('button').click(function() {$('input[type=checkbox]').attr('checked',!tog);tog = !tog; });

18、使用siblings()選擇同輩元素

// 不這樣做 $('#nav li').click(function() {$('#nav li').removeClass('active');$(this).addClass('active'); }); // 替代做法 $('#nav li').click(function() {$(this).addClass('active').siblings().removeClass('active'); });

19、個(gè)性化鏈接

$(document).ready(function() {$("a[href$='pdf']").addClass("pdf");$("a[href$='zip']").addClass("zip");$("a[href$='psd']").addClass("psd"); });

20、在一段時(shí)間之后自動(dòng)隱藏或關(guān)閉元素

// 這是1.3.2中我們使用setTimeout來實(shí)現(xiàn)的方式 setTimeout(function() {$('div').fadeIn(400); },3000); // 而在1.4之后的版本可以使用delay()這一功能來實(shí)現(xiàn)的方式 $('div').slideUp(300).delay(3000).fadeIn(400);

?21、使用Firefox或Firebug來記錄事件日志

// $('#someDiv').log('div') jQuery.log = jQuery.fn.log = function(msg) {if(console){console.log("%s : %o",msg,this);}return this; };

22、為任何與選擇器相匹配的元素綁定事件

// 為table里面的td元素綁定click事件，不管td元素是一直存在還是動(dòng)態(tài)創(chuàng)建的 // jQuery 1.4.2之前使用的方式 $('table').each(function() {$('td',this).live('click',function() {$(this).toggleClass("hover");}); }); // jQuery 1.4.2 使用方式 $('table').delegate('td','click',function() {$(this).toggleClass('hover'); }); // jQuery 1.7.1使用方式 $('table').on('click','td',function() {$(this).toggleClass('hover'); });

23、使用CSS鉤子

查看http://github.com/brandonaaron/jquery-cssHooks 24、$.proxy()的使用 使用回調(diào)方法的缺點(diǎn)之一就是當(dāng)執(zhí)行類庫(kù)中的方法之后，上下文對(duì)象被設(shè)置到另外一個(gè)元素，如： <div id="panel" style="display:none"><button>Colse</button> </div>

執(zhí)行下列代碼

$('#panel').fadeIn(function() {$('#panel button').click(function() {$(this).fadeOut();}); });

?buton元素會(huì)消失，而不是panel元素消失，可以使用$.proxy()解決

$('#panel').fadeIn(function() {// Using $.proxy()$('#panel button').click($.proxy(function() {// this指向 #panel$(this).fadeOut();},this)); });

?25、限制Text-Area域中的字符個(gè)數(shù)

jQuery.fn.maxLength = function(max) {this.each(function() {var type = this.tagName.toLowerCase();var inputType = this.type ? this.type.toLowerCase() : null;if(type == "input" && inputType == "text" || inputType == "password"){// 應(yīng)用標(biāo)準(zhǔn)的maxLengththis.maxLength = max;}else if(type == "textarea"){this.onkeypress = function(e) {var ob = e || event;var keyCode = ob.keyCode;var hasSelection = document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) &&!ob.ctrlKey && !ob.altKey && !hasSelection);};this.onkeyup = function() {if(this.value.length > max){this.value = this.value.substring(0,max);}};}}); }; // use $('#mytextarea').maxLength(10);

26、本地存儲(chǔ)

localStorage.someData = "This is going to be saved";

?27、解析json數(shù)據(jù)時(shí)報(bào)parseError錯(cuò)誤

jQuery1.4之后，采用了更嚴(yán)格的json解析方式，所有內(nèi)容必須要有雙引號(hào) 28、從元素中出去HTML (function($) {$.fn.stripHtml = function() {var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;this.each(function() {$(this).html($(this).html().replace(regexp,''));});return $(this);} })(jQuery); // use $('div').stripHtml();

轉(zhuǎn)載于:https://www.cnblogs.com/TwinklingZ/p/5353294.html

總結(jié)

以上是生活随笔為你收集整理的锋利的jQuery第2版学习笔记8~11章的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。