一.常用的JavaScript库对比

Prototype、Dojo、YUI、Mootools

jQuery是一个轻量级的JavaScript库，大型开发必备——由John Resig于2006年创建。

jQuery的理念是：写得少做得多。

优势：简化了Js的复杂操作，不再关心兼容性，大量的实用方法。

怎样学习：看api文档

但是jq只是辅助工具——要正确面对。

二.使用jQ

代码导入和js一样。

$的意义：是jQuery的简写形式

$('#btn1')等价于jQuery('#btn1')

引入jq之后，编写

                            
$(document).ready(
function
(){ 
    
alert(
'hello world!'
);
})
         
       

基本等价于window.οnlοad=function(){alert('hello world!')}。

不过还是有所区别。

三.jQuery的代码风格

1.链式操作

【例1.1】导航栏

项目需求：做一个导航栏，单击不同的商品链接，显示相应内容，同时高亮显示当前选择的商品。

分析：这是结合了css的效果

html

                            
<
ul
 id="nav">
    
<
li
 class="level1">
        
<
h4
 style="border-top:none">罗大佑</h4>
        
<
ul
 class="level2">
            
<
li
>恋曲1980</
li
>
            
<
li
>鹿港小镇</
li
>
            
<
li
>东方之珠</
li
>
        
</
ul
>
    
</
li
>
     
<
li
 class="level1">
        
<
h4
>周华健</
h4
>
        
<
ul
 class="level2">
            
<
li
>怕黑</
li
>
            
<
li
>雨人</
li
>
            
<
li
>最近比较烦</
li
>
            
<
li
>花海</
li
>
        
</
ul
>
    
</
li
>
     
<
li
 class="level1">
        
<
h4
>李宗盛</
h4
>
        
<
ul
 class="level2">
            
<
li
>凡人歌</
li
>
            
<
li
>寂寞难耐</
li
>
            
<
li
>明明白白我的心</
li
>
            
<
li
>我终于失去了你</
li
>
        
</
ul
>
    
</
li
>
</
ul
>
         
       

css

                            
*{ 
    
margin
:
0
;
    
padding
:
0
;
}
ul li{ 
    
list-style
: 
none
;
}
a{ 
    
text-decoration
: 
none
;
}
#nav{ 
    
width
: 
300px
;
    
border
: 
1px
 solid rgb(196,213,223);
    
margin
: 
100px
 auto;
}
#nav>li>h
4
{ 
    
background
: 
rgb
(
235
,
243
,
248
);
    
border-top
: 
1px
 solid rgb(196,213,223);
    
    
line-height
: 
40px
;
text-align
: 
center
;
    
font-size
: 
20px
;
color
: 
rgb
(
88
,
147
,
183
);
    
cursor
: 
pointer
;
}
#nav>li>ul>li{ 
    
background
: 
#fff
;
    
    
line-height
: 
40px
;
text-align
: 
center
;
    
font-size
: 
20px
;
color
: 
rgb
(
88
,
147
,
183
);
    
cursor
: 
pointer
;
}
#nav>li>ul>li:hover{ 
    
color
:
rgb
(
255
,
102
,
0
);
}
.level
2
{ 
    
display
: 
none
;
}
#nav .current{ 
    
background
: 
rgb
(
177
,
215
,
239
);
    
border-top
: 
1px
 solid rgb(196,213,223);
    
border-bottom
: 
1px
 solid rgb(196,213,223);
}
         
       

                            
$(document).ready(
function
(){ 
    
$(
".level1 > h4"
).click(
function
(){ 
        
$(
this
).addClass(
"current"
)
//当标题被点击时，给被点击的对象加上currentclass
        
.next().show()
//标题的下一个元素,也就是level2——展现出来。
        
.parent().siblings().children(
"h4"
).removeClass(
"current"
).next().hide();
        
//标题的父元素——的兄弟元素——的子元素——中的h4——移出current的class，同时——下一个level2隐藏。
        
return
 false;
    
});
});
         
       

2.良好的代码风格即是一切

一般而言，jQuery可以用一行完成很多行才能完成的东西。但是太长了也不是都看得懂的。

首先

a.同一对象不超过3次操作的，可写成1行，

b.同一对象多个操作，每个操作一行

c.多个对象少量操作，可以每个对象1行。如果涉及子元素，可适当缩进。

其次，加上注释！

三. 区别jQuery对象和DOM对象

1. 特点

jQuery对象是DOM对象通过jQuery.js包装后产生的。可以使用jQuery方法，但不能使用任何DOM对象的方法。以下列出相关方法对比

DOM对象方法	JQ对象方法
document.getElemntById('OBJ').innerHTML	$('#OBJ').html()
document.getElemntById('OBJ').checked	$('#OBJ').attr('checked')

2. 转换

jQuery对象：在前面加一个$以示和Dom变量的区别

(1)jQuery对象转dom对象

jQuery对象类似一个数组，假设存在一个jQuery对象$('#cr')，以下两种方法都是可以的：

                            
var
 $oCr=$('#cr');
var
 oCr=$oCr[0];
var
 oCr=$oCr.get(0)
         
       

(2)DOM转jQuery对象

只需要把dom对象用$()包起来。

                            
var
 oCr=document.getElementById('cr');
var
 $oCr=$(oCr);

$()函数就是jQuery对象的制造工厂。

【例1.2】做一个注册页面。点击阅读并同意，反馈可以继续操作

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

（1）DOM方式

                            
window.onload=
function
(){ 
    
var
 oCr=document.getElementById('cr');
    
oCr.onclick=
function
(){ 
        
if
(oCr.checked){ 
            
alert(
'可以继续操作！'
);
        
}
    
}
}
         
       

（2）jQuery方式

                            
$(document).ready(
function
(){ 
    
var
 $oCr=$('#cr');
    
$oCr.click(
function
(){ 
        
if
($oCr.is(
':checked'
)){ 
            
alert(
'可以继续操作！'
);
        
}
    
})
})
         
       