一.常用的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!')}。
不过还是有所区别。
三.jQuery的代码风格
1.链式操作
【例1.1】导航栏
项目需求：做一个导航栏，单击不同的商品链接，显示相应内容，同时高亮显示当前选择的商品。
分析：这是结合了css的效果
html
|
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>h4{ 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);}.level2{ 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('可以继续操作！'); } })}) |
posted on
