标签:
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://bbs.html5cn.org/thread-84143-1-1.html
jQuery50个必备代码段:http://jingyan.baidu.com/article/d5a880eb4f0c5d13f147cc2e.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的时候,尽量使用原生的CSS3选择器。可能会让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器,而不是选择器自己的。
选择器性能自上而下一次下降: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 //设置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_x_x_x_x_x_x_x_x_x_x_x_x_x_x("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 t ype =‘checkbox‘ >");
19.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
jQuery笔记
标签:
原文地址:http://www.cnblogs.com/gyx19930120/p/4419856.html