你的位置:首页 > Java教程

[Java教程]锋利的jQuery第2版学习笔记8~11章


第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(http://jqmobi.com)
2、Sencha Touch(http://sencha.com)
3、Zepto.js(http://zeptojs.com/)

第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";  });});


使用:
<a href="http://www.cssrain.cn" rel="external">open link </a>

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钩子


查看http://github.com/brandonaaron/jquery-cssHooks
24、$.proxy()的使用
使用回调方法的缺点之一就是当执行类库中的方法之后,上下文对象被设置到另外一个元素,如:
<div id="panel" style="display:none">  <button>Colse</button></div>

执行下列代码


$('#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();