锋利的jQuery读书随笔

代码规范：
var $variable = jQuery对象；
var variable = DOM对象；

jQuery对象无法使用DOM对象的任何方法，同样DOM对象也无法使用jQuery对象的任何方法。
下面两个代码是等效的，获取id为foo的元素的html代码。
document.grtElementById("foo").innerHTML;
$("#foo").html();

DOM对象和Jquery对象的转换
JQuery->DOM
1) var $cr = $("#cr");
var cr = $cr[0];
alert(cr.checked); 检测这个checkbox是否被选中了
2) var $cr = $("#cr");
var cr = $cr.get(0);
alert(cr.checked); 检测这个checkbox是否被选中了
DOM->JQuery
var cr = document.getElementById("cr");
var $cr = $(cr);

<input type="checkbox" id="cr" /><label for="cr">我已经阅读了上面制度. </label>

用DOM方式来判断复选框是否被选中
$(document).ready(function(){
var $cr = $("$cr");
var cr = $cr[0];
$cr.click(function){
if(cr.checked){
alert("感谢你的支持！你可以继续操作");
}
}
})
用JQuery方式来判断复选框是否被选中
$(document).ready(function)(){
var $cr = $("#cr");
$cr.click(function(){
if ($cr.is(":checked")) {
alert("感谢你的支持！你可以继续操作");
}
})
}

JQuery.noConflict()函数可以将变量的控制权移交给其他JavaScript库
JQuery.noConflict()函数也可以自定义一个快捷方式
……省略其他代码
var $j = JQuery.noConflict();
$j(function(){
………
})

传统的js用getElementById()和getElemnetByTagName()函数获取标签必须要进行判断

<div>test</div>
<script type="text/javascript">
if (decoment.getElementById("tt") {
document.getElementById("tt").style.color="red";
}
</script>

<div>test</div>
<script type="text/javascript">
$('#tt').css("color","red"); 这里无需判断$('#tt')是否存在
</script>

$('#tt')获取的永远是对象，即使页面上没有这个元素，因此当要用jQuery检查某个元素在网页上是否存在是，不要用以下代码：
if ($('#tt')) { //do something }
而应该根据获取到的元素的长度来判断，代码如下
if ($('#tt').length>0) {//do something }
或者转化成dom对象来判断，代码如下：
if ($('#tt')[0]) { //do something }

给网页中的所有<p>元素添加onclick事件
js代码如下：
var items = document.getElementByTagName("p");
for(i=0;i<items.length;i++){
items[i].onclick = function(){
//do something
}
}

对多选框进行操作，输出选中的多选框的个数
var btn = document.getElementByName("btn");
tbn.onclick = function (){
var arrays = new Array();
var items = document.getElementByName("check");

for(i=0 ; i<items.length;i++){
if(items[i].checked){
arrays.push(items[i].value);
}
}
alert("选中的个数为"+arrays.length);

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

注意：load() 方法在 jQuery 版本 1.8 中已废弃。