第8章，用jQuery打造个性网站
网站结构
文件结构
images文件夹用于存放将要用到的图片
styles文件夹用于存放CSS样式表，个人更倾向于使用CSS文件夹
scripts文件夹用于存放jQuery脚本，个人更倾向于使用JS文件夹存放所有的js及jQuery脚本
编写CSS样式
推荐首先编写全局样式，接着编写可大范围内重用的样式，最后编写细节样式，这样根据CSS最近优先原则，可以较容易地对网站进行从整体到细节样式的定义
第9章，jQuery Mobile
jQuery Mobile主要特性
1、基于jQuery构建
2、兼容绝大部分手机平台
3、轻量级的库
4、模块化结构
5、HTML5标记驱动的配置
6、渐进增强原则
7、响应设计
8、强大的Ajax导航系统
9、易用性
10、支持触摸和鼠标事件
11、统一的UI组件
12、强大的主题化框架
其他框架
1、jqMobi（ ）
2、Sencha Touch（ ）
3、Zepto.js（ ）
第10章，jQuery各个版本的变化
讲解jQuery的发展史，了解了解
第11章，jQuery性能优化和技巧
jQuery性能优化
1、使用最新版的jQuery类库
2、使用合适的选择器（1、尽量使用id选择器，2、尽量给选择器指定上下文）
3、缓存对象（即使用一个变量将需要重复使用的jQuery对象存下来，以避免多次获取）
4、循环时的DOM操作（减少DOM操作）
5、数组方式使用jQuery对象（尽量使用for或while循环来处理jQuery对象，而不是使用$.each()）
注：检查jQuery对象是否存在的方式应该使用length属性
6、事件代理
7、将代码转化为jQuery插件
8、使用join()来拼接字符串，替代使用“+”来拼接
9、合理利用HTML5的Data属性
10、尽量使用原生的JavaScript方法
11、压缩JavaScript
jQuery技巧
1、禁用右键
$(document).ready(function() { $(document).bind("contextmenu",function(e) { return false; });}); 2、新窗口打开页面
$(document).ready(function() { // ex 1 : href = "http://" 的超链接将会在新窗口打开链接 $('a[href^="http://"]').attr('target',"_blank"); // ex 2 : rel = "external" 的超链接将会在新窗口打开链接 $('a[rel$="external"]').click(function() { this.target = "_blank"; });}); 使用：
3、判断浏览器类型
$(document).ready(function() { // Firefox2 and above if($.browser.mozilla && $.browser.version >= "1.8"){ // do something } // Safari if($.browser.safari){ // do something } // Chrome if($.browser.chrome){ // do something } // Opera if($.browser.opera){ // do something } // IE6 and below if($.browser.msie && $.browser.version <= 6){ // do something } //anything above IE 6 if($.browser.msie && $.browser.version > 6){ // do something }}); 4、输入框文字获取和失去焦点
$(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($('input.text1'));});function textFill(input){ // input focus text function var originalvalue = input.val(); input.focus(function() { if($.trim(input.val()) == originalvalue){ input.val(''); } }).blur(function() { if($.trim(input.val()) == ""){ input.val(originalvalue); } });} 5、返回头部滑动动画
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、获取鼠标位置
$(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、点击div也可跳转
$('div').click(function() { window.location = $(this).find("a").attr("href"); return false;}); 9、根据浏览器大小添加不同样式
$(document).ready(function() { function checkWindowSize() { if($(window).width() > 1200){ $('body').addClass('large'); }else{ $('body').removeClass('large'); } } $(window).resize(checkWindowSize);}); 10、设置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、创建自己的选择器
$(document).ready(function() { $.extend($.expr[':'],{ moreThen500px : function(a) { return $(a).width() > 500; } }); $('.box:moreThen500px').click(function() { // ... });}); 12、关闭所有动画效果
$(document).ready(function() { jQuery.fx.off = true;}); 13、检测鼠标右键和左键
$(document).ready(function() { $('#XY').mousedown(function(e) { alert(e.which); // 1 = 鼠标左键，2 = 鼠标中键，3 = 鼠标右键 });}); 14、回车提交表单
$(document).ready(function() { $("input").keyup(function(e) { if(e.which == 13){ alert("回车提交表单"); } });}); 15、设置全局Ajax参数
$('#load').ajaxStart(function() { showLoading(); // 显示loading disableButtons(); // 禁用按钮});$('#load').ajaxComplete(function() { hideLoading(); // 隐藏loading enableButtons(); // 启用按钮}); 16、获取选中的下拉框
$('#someElement').find('option:selected');$('#someElement option:selected'); 17、切换复选框
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、个性化链接
$(document).ready(function() { $("a[href$='pdf']").addClass("pdf"); $("a[href$='zip']").addClass("zip"); $("a[href$='psd']").addClass("psd");}); 20、在一段时间之后自动隐藏或关闭元素
// 这是1.3.2中我们使用setTimeout来实现的方式setTimeout(function() { $('div').fadeIn(400);},3000);// 而在1.4之后的版本可以使用delay()这一功能来实现的方式$('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元素是一直存在还是动态创建的// 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钩子
查看
24、$.proxy()的使用
使用回调方法的缺点之一就是当执行类库中的方法之后，上下文对象被设置到另外一个元素，如：
执行下列代码
$('#panel').fadeIn(function() { $('#panel button').click(function() { $(this).fadeOut(); });}); buton元素会消失，而不是panel元素消失，可以使用$.proxy()解决
$('#panel').fadeIn(function() { // Using $.proxy() $('#panel button').click($.proxy(function() { // this指向 #panel $(this).fadeOut(); },this));}); 25、限制Text-Area域中的字符个数
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"){ // 应用标准的maxLength this.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、本地存储
localStorage.someData = "This is going to be saved";
27、解析json数据时报parseError错误
jQuery1.4之后，采用了更严格的json解析方式，所有内容必须要有双引号
28、从元素中出去HTML
(function($) { $.fn.stripHtml = function() { var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi; this.each(function() { $(this).html($(this).html().replace(regexp,'')); }); return $(this); }})(jQuery);// use$('div').stripHtml();