一.常用的JavaScript库对比
Prototype、Dojo、YUI、Mootools
jQuery是一个轻量级的JavaScript库,大型开发必备——由John Resig于2006年创建。
jQuery的理念是:写得少做得多。
优势:简化了Js的复杂操作,不再关心兼容性,大量的实用方法。
怎样学习:看api文档
但是jq只是辅助工具——要正确面对。
二.使用jQ
代码导入和js一样。
$的意义:是jQuery的简写形式
$('#btn1')等价于jQuery('#btn1')
引入jq之后,编写
1 2 3
| $(document).ready( function (){
alert( 'hello world!' );
})
|
基本等价于window.onload=function(){alert('hello world!')}。
不过还是有所区别。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| < 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| *{
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 );
}
|
js
1 2 3 4 5 6 7 8 9
| $(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'),以下两种方法都是可以的:
1 2 3
| var $oCr=$( '#cr' );
var oCr=$oCr[0];
var oCr=$oCr.get(0)
|
(2)DOM转jQuery对象
只需要把dom对象用$()包起来。
1 2
| var oCr=document.getElementById( 'cr' );
var $oCr=$(oCr);
|
$()函数就是jQuery对象的制造工厂。
【例1.2】做一个注册页面。点击阅读并同意,反馈可以继续操作
1 2
| < input type = "checkbox" id = "cr" />
< label for = "cr" >我已经阅读了上面制度.</ label >
|
(1)DOM方式
1 2 3 4 5 6 7 8 9
| window.onload= function (){
var oCr=document.getElementById( 'cr' );
oCr.onclick= function (){
if (oCr.checked){
alert( '可以继续操作!' );
}
}
}
|
(2)jQuery方式
1 2 3 4 5 6 7 8 9
| $(document).ready( function (){
var $oCr=$( '#cr' );
$oCr.click( function (){
if ($oCr.is( ':checked' )){
alert( '可以继续操作!' );
}
})
})
|
原标题:第1章 认识jQuery
关键词:jquery