WEB前端开发

在jQ1.4以前我们创建DOM并且添加到DOM树大致是这样的：

var oNewp = $("<p>我测试成功了</p>");
oNewp.addClass("red").appendTo("#target");

或者，稍微复杂一点：

$("<div></div>")
.attr("id","css")
.height(90)
.css("border","1px solid #000")
.html("fuck world!")
.appendTo(document.body);

jQuery1.4带来了一个全新的便捷地清晰的DOM对象创建方法，在 jQuery 1.4中，我们可以传递一个对象作为第二个参数。 这个参数接受一个属性的集合，这些可以传递给.attr() 方法。此外，一些event type（事件类型）能通过， 而且后面的jQuery方法能够调用： val, css, html, text, data, width, height, or offset。详见：http://www.css88.com/jqapi/#p=jQuery

例如，我们创建一个文本框：

$("<input />",{
	"class":"bg-yellow",
	"id":"fuck",
	css:{
		"border":"1px solid #000",
		"font-size":"25px"
	},
	value:"fuck world!",
	focusin:function(){
		$(this).css("border","5px solid #FF3300");
	},
	focusout:function(){
		$(this).css("border","1px solid #000");
	}
}).appendTo(document.body);

例如，我们创建一个容器：

$("<div></div>",{
"class":"bg-yellow",
	"id":"fuckie",
	css:{
		"border":"1px solid #CDCDCD",
		"font-size":"25px"
	},
	html:$("<a>",{
		href: '#',
		html:"hello world!",
	click: function(event) {
			$("#fuckie").css("background-color","#FF3300");
			alert("fuck world!!!!!!!!!!");
			event.preventDefault();
		}
	})
})

}).appendTo(document.body);

参看非常简陋的demo：http://www.css88.com/demo/jqueryCreatDom/

请记住 – jQuery只是JavaScript。不要以为它有能力来补偿你糟糕的代码。

// jQuery's each method source
	each: function( object, callback, args ) {
		var name, i = 0,
			length = object.length,
			isObj = length === undefined || jQuery.isFunction(object);

		if ( args ) {
			if ( isObj ) {
				for ( name in object ) {
					if ( callback.apply( object[ name ], args ) === false ) {
						break;
					}
				}
			} else {
				for ( ; i < length; ) {
					if ( callback.apply( object[ i++ ], args ) === false ) {
						break;
					}
				}
			}

		// A special, fast, case for the most common use of each
		} else {
			if ( isObj ) {
				for ( name in object ) {
					if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
						break;
					}
				}
			} else {
				for ( var value = object[0];
					i < length &amp;amp;amp;amp;&amp;amp;amp;amp; callback.call( value, i, value ) !== false; value = object[++i] ) {}
			}
		}

		return object;
	}

糟糕的代码：

someDivs.each(function() {
      $('#anotherDiv')[0].innerHTML += $(this).text();
});

1. 在每一次遍历循环中都会搜寻anotherDiv 这个ID的元素
2. 两次获取innerHTML属性
3. 创建了一个jQuery对象，只是为了获取元素的text属性

优化的代码：

var someDivs = $('#container').find('.someDivs'),
contents = [];

someDivs.each(function() {
contents.push( this.innerHTML );
});
$('#anotherDiv').html( contents.join('') );

这样，在

1

each

(for)方法，我们唯一要执行任务的关键是增加一个新的到一个数组…而不是查询DOM中，取代了元素两次获取innerHTML属性等。

在多人合作开发中一定要确保变量，对象，函数等命名不要冲突：
方法一：当别人使用了其他的js库，并该库使用了”$”变量，那么我们可以使用noConflict()方法：

<br />
var j = jQuery.noConflict();<br />
// Now, instead of $, we use j.<br />
j('#someDiv').hide();</p>
<p>// The line below will reference some other library's $ function.<br />
$('someDiv').style.display = 'none';<br />

方法二，把你的代码放在一个匿名函数里面，然后把jQuery作为参数传递给它，那么在这个函数体中的$是不会影响外面或者被外面影响的。

<br />
(function($) {<br />
// Within this function, $ will always refer to jQuery<br />
})(jQuery);<br />

方法三，通过ready方法传递$

<br />
jQuery(document).ready(function($) {<br />
// $ refers to jQuery<br />
});<br />
// $ is either undefined, or refers to some other library's function.<br />

一不小心写错了，谢谢 birdstudio和QiQiBoY指出！
或者使用简写：

<br />
$(function() {<br />
// let's get up in heeya<br />
});<br />

在jQuery中监听document 是否 ready的操作：

$(document).ready(function() {
// let's get up in heeya
});

我们可以简化成：

$(function() {
// let's get up in heeya
});

我们可以看jQuery源码,可以看出上面两种写法是一样的：

// HANDLE: $(function)
// Shortcut for document ready
if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}

如果不了解javasrcipt中基本的DOM属性和方法的话，很容易滥用jQuery对象。比如：

$('#someAnchor').click(function() {

alert( $(this).attr('id') );

});

如果你只是通过jQ对象获取简单的dom元素的属性比如id，那么你完全可以使用js原生的方法：

$('#someAnchor').click(function() {

alert( this.id );

});

诸如“src,” “href,” 和“style.”等一些属性在老版本的ie中使用了getAttribute方法。

jQuery有非常强大的Sizzle引擎来实现选择器，jQuery做了优化，他们能很好的工作，你一般不必担心太多。然而，我们可以稍微做一些改进，将可以使你的脚本略有提高。

一般在jquery中能不要用Sizzle引擎就不要用，当然前面说了只要有可能，就尽量使用.find()方法。比如：

// Fine in modern browsers, though Sizzle does begin "running"

$('#someDiv p.someClass').hide();

// Better for all browsers, and Sizzle never inits.

$('#someDiv').find('p.someClass').hide();

上面两行代码执行的结果是完全一样的，但是下面一句的效率要比上面一句的执行效率高。
现代浏览器（除IE6，IE7）都有QuerySelectorAll支持，能允许你像CSS选择器一样获取对象，而不需要用到jQuery中的Sizzle引擎。jQuery会在使用自己的引擎之前检查是否存在这个函数。

对于IE6/IE7，就需要jQuery使用Sizzle引擎，jQuery会把你的选择器转化成一个数组，并且通过从右往左来迭代匹配。通过正则表达式匹配页面每一个元素，所以你的可以尽量减少选择器的层级，尽可能的使用最右边的选择器，比如使用ID选择器等；这个规则和我们的css的查找规则是一直的，如果你要优化css选择器也要知道这个规则：从右往左来迭代匹配！

尺度把握：

1.保持代码简单

2.尽可能的使用find()查找，使用浏览器的原生查找函数

3.尽可能使用最右边的选择器，比如ID等

前几天看到一篇文章《14 Helpful jQuery Tricks, Notes, and Best Practices》感觉很不错，非常时候我这种入门级的人员，所以看懂一条翻译一条，

jQuery方法总是返回jQuery对象：

所以我们可以这样写（链式调用）：

$someDiv.attr('class', 'someClass').hide().html('new stuff');

为了美观易读也可以这样写：

$someDiv

.attr('class', 'someClass')

.hide()

.html('new stuff');

再来看下面的例子：

var someDiv = $('#someDiv');

someDiv.hide();

我们定义的一个元素将隐藏掉，我们可以将代码简化成：

var someDiv = $('#someDiv').hide();

jquery这个特性可以减少我们遍历整个DOM的次数。我们就不用一次次的去遍历整个DOM。

当然还有一种写法，比如：

var elem = $('#elem');

elem.hide();

elem.html('bla');

elem.otherStuff();

虽然这种写法很难看，没使用点语法，但是从性能角度上说，他也是很优化的，因为他只遍历了一次dom，获取jq对象，并把值赋给了elem。在一些特殊的场合你也可以这么使用。

演示地址：http://www.css88.com/demo/goToTop/