第1章 认识jQuery

一.常用的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('可以继续操作！');         }     }) })