jQuery笔记

jQuery在线手册：http://jquery.bootcss.com/  http://www.css119.com/book/jQuery/

jQuery代码规范：http://bbs.html5cn.org/thread-86001-1-1.html

jQuery教程学习网：http://jqfundamentals.com/chapter/jquery-basics

jQuery学习网站：http://learn.jquery.com/

jQuery性能改善：http://bbs.html5cn.org/thread-84143-1-1.html

jQuery50个必备代码段：http://jingyan.baidu.com/article/d5a880eb4f0c5d13f147cc2e.html      

可以直接拿来用的jQuery代码片段：http://www.html5cn.org/article-5355-4.html       http://bbs.html5cn.org/thread-85030-1-1.html

jQuery中鲜为人知的几个方法：http://bbs.html5cn.org/thread-83804-1-1.html

jQuery最佳实践性能优化：http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html

jQuery各种操作表单元素方法：http://bbs.html5cn.org/thread-85045-1-1.html

jQuery完美判断图片是否加载完毕：http://www.w3cfuns.com/blog-5462379-5405821.html

使用向jQuery的时候，尽量使用原生的CSS3选择器。可能会让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器，而不是选择器自己的。

jQuery新技术详解：

Deferred对象：http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

HTML5 FormData对象：http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

选择器性能自上而下一次下降：id选择器$("#id")/$("#cont").find("div")→标签选择器$("div")/$("input")→类选择器$(".class")→属性选择器$("[attribute=value]")→伪选择器$(":hidden")

 

1.addClass()只是设置样式而已，attr()可以设置更多的属性，当然包括class。attr()是设置属性，原有的属性会被替换。addClass()方法向被选元素添加一个或多个类，该方法不会移除已存在的class属性，仅仅添加一个或多个class属性。

2.不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave

这样的话，mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生。



3.每次调用$(function(){})方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。  

4.如果CDN加载失败时，我们需要加载自己本地的jQuery文件，只需要在头部加上下面的代码就可以：

(1) <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>



(2) <script >window.jQuery || document.write('< script src="js/jquery-1.11.1.min.js" type="text/javascript"><\/script')</script>



5.$.each()用法：http://www.cnblogs.com/mabelstyle/archive/2013/02/19/2917260.html



$.map()用法：http://www.css88.com/jqapi-1.9/jQuery.map/



$.grep()用法：此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。



$.each()和$.map()的区别是：each返回的是原来的数组，并不会新创建一个数组。而map方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。each迭代数组时，可以通过访问this关键字得到，而map，在函数内部，this指的是window对象。

 

6.预加载图片

这个图片预加载片段让你能够快速的预先载入图片，不需要等待。代码如下：

jQuery.preloadImagesInWebPage = function() { 

    for(var ctr = 0; ctr< argument s.length; ctr++){ 

        jQuery("").attr("src", argument s[ctr]); 

    } 

} 

调用方法：

$.preloadImages("image1.gif", "image2.gif", "image3.gif"); 

判断图片是否已加载：

$('#imageObject').attr('src', 'image1.gif').load(function() { 

    alert('The image has been loaded…'); 

});  

7.在jQuery里，可以使用mouseenter和mouseleave事件来避免事件冒泡的副作用。

8.js和jq左偏移量的区别和共同点（上偏移量同理）：

相同数值（都指的是元素的left样式，而且都带单位px）：

$("#id").css("left")；

documentElementById("id").style.left；//获取行间样式

getComputedStyle(documentElementById("id"),null).left；//chrome，FF

documentElementById("id").getCurrentStyle.left；//IE

不同数值（都不带单位px）：

$("#id").offset().left //相对于当前文档的左偏移量，此方法只对可见元素有效。

$("#id").position().left //返回匹配元素相对于父元素的位置（偏移）

documentElementById("id").offsetLeft //相对于父对象的左边距，包括左外、内边距

9.$(this)和this的区别：$(this)指的是jQuery对象，使用它只能调用jQuery的方法和属性，而this指的是HTML对象，并且js DOM对象$(this)[0]等价于this，两者都可以调用原生js方法和属性。(1)var $cr = $("#cr"); ar cr = $cr[0] //jQuery对象转换为DOM对象；(2)var cr = document.getElementById("cr"); var $cr = $(cr);//DOM对象转换为jQuery对象。

10.具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。

11.jQuery实现水平和垂直居中（窗口大小改变也适用）：

$(window).resize(function(){ 

    $(".mydiv").css({ 

        position: "absolute", 

        left: ($(window).width() - $(".mydiv").outerWidth())/2, 

        top: ($(window).height() - $(".mydiv").outerHeight())/2 

    });        

}); 

此外在页面载入时，就需要调用resize()。

$(function(){ 

    $(window).resize(); 

});

12.<input type="text" id="results">

var content = $('#results').val(); 

if($.trim(content) === "") {

    alert('空');

 }

如果写成if(content.trim() === "")在IE下则会报错。一般用$.trim(this.value).length < 1来判断是否为空

13.jQuery实现下拉提示及自动填充邮箱：http://bbs.html5cn.org/thread-84263-1-1.html

14.innerWidth()：内宽度包括元素的内边距(padding)，但不包括外边距(margin)、边框(border)等部分的高度。

outerWidth()：外宽度默认包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。

15.不要操作空缺对象，更多信息。

// BAD： $("#nosuchthing").slideUp();     

// GOOD：var $mySelection = $("#nosuchthing"); 

 if ($mySelection.length) { $mySelection.slideUp();  }  

16.写一个能够进行方法链式调用的自定义jQuery函数也很容易。你所做的就是要写个能修改元素并返回元素的函数。代码如下（可重复利用的函数或方法）:

$.fn.makeRed = function() { 

　　return $(this).css('background', 'red'); 

} 

$('#myTable').find('.firstColumn').makeRed().append('hello'); 

17.jQuery(function($) {

  // 你可以在这里继续使用$作为别名

});

18.创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。

jQuery 代码:

// 在 IE 中无效:

$("<input>").attr("type", "checkbox");//IE不允许修改input元素的type或name特性

// 在 IE 中有效:

$("<input type ='checkbox'>");

19.add()方法可以将多个选择器链接起来，创建满足任何一个选择器的元素组合。而且它不会扩充原始的包装集，而是创建一个新的包装集来保存结果。

20.$("img").index($("img#box")[0]); //获取id为box的图片在所有图片集合中的下标，这种方法比$("img#box")的下标要准确。因为前者返回的是javascript数组，序号始终相对应，而后者则会根据同级位置发生变化。

 21.(function($){...})(jQuery)是一个“立即执行的匿名函数”，构成了一个闭包，可以防止命名冲突。在匿名函数内部，$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。注意，使用on方法做事件委托时，脚本必须是在页面的head元素中链接和(或)执行的，即$(document).on("click","#id",function(){...})。之所以选择这个时机，因为这时候刚好document元素可用，而整个DOM还远未生成；如果把脚本放在结束的body标签前面，就没有意义了，因为那时候DOM已经完全可用了。