jquery入门教程|jquery简单教程深入浅出。

前言

贝壳(就是本文作者了)也属于刚刚会用点JQuery的那一类型, 在学习过程中也遇到挺多问题,特别是在开始入门的时候.一直准备写些有关JQuery的文章,但又恐自己文笔及表达能力有限而”误人子弟”,最终还是鼓起勇气. 如在文章中有错误或者不合适的理解望广大朋友直接指出批评.

本文的宗旨, 授人鱼不如授人渔. 我只会讲关键部分,不可能JQuery的每个函数我都讲,因为有很多函数贝壳自己在实际应用中都从未使用过. 但当我们已经会渔了还用担心鱼吗!?

BTW:贝壳假设你已经掌了基本的JavaScript运用能力及基础的CSS知识.

JQuery是什么

JQuery只是一个JS文件

人对新鲜事业总是报着好奇与排斥的情感,贝壳刚开始学的时候也一样. 想掌握又怕自己学不会. 其实JQuery很简单.

JQuery其实就是一个工具包,很多常用的功能已经被好心人封装好,我们真要直接调用就可以了(有点类似SDK),具体内部原理和实现我们现在不去讨论. 记住JQuery很简单,很方便.

目前jQuery最新Release版本为1.32,官方下载地址为:http://docs.jquery.com/Downloading_jQuery

本系列教程基于1.32版进行讲解.

JQuery有两种版本:

一种为uncompressed版(未压缩版)主要用在开发中.

另一种为Minified(迷您版)当开发完毕了,就可以改用这个版本.

两种版本的区别

文件大小不一样, 最终用户在浏览时可以减少下载JS时的等待时间.

Uncompressed版文件大小为118KB

Minified版文件大小为56KB

JQuery能带给我们什么

一, 站在巨人的肩上

别人已经发明了轮子,我们没必要自己再去造一个.

二, 强大的BOM,DOM,CSS,事件的操作能力

我最常用的是CSS及DOM的操作,真的太方便了.

三, 更加简洁的代码

自己的亲身经历,比如表格(Table)中的TR奇偶为两种颜色的代码如果自己用JavaScript去编号得用几十行代码,JQuery只需要2行就可以了.

四, 与浏览器无关性

做过JavaScript开发的就知道JavaScript在不同的浏览器下行为表现有时不一样,我们不得不为不同的浏览器编写相应的代码. JQuery在这方法已经内部处理,我们只管去用就是了.

五, 不错的性能

我自己有自知之明, 至少我写的JavaScript代码的运行效率不如JQuery的高.

如何使用JQuery

万年开头难,我在第一次使用JQuery时被吓到过,不知道怎么使用,其实很简单,下面我们用一个例子来说明. : )

建立一个html文件,比如index.html 并与JQuery库文件jquery-1.3.2.js放到同目录下(其实放那都可以)

首先我们解决JQuery的引用. 代码如下:

<html>

<head>

<title>JQuery测试</title>

</head>

<body>

</body>

</thml>

红色的那一行代码就完成了JQuery的引用,简单吧!

现在我们再扩充一个功能,使 index.html显示一个表格,并且表格内各行的颜色奇偶不同.也就是奇数行是一种颜色,偶数行又是另一种颜色.

index.html代码结构:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>JQuery测试</title>
<style type=”text/css”>

/*table中偶数行*/

.tabEven {
background: #ff0000;
}

/*table中奇数行*/

.tabOdd {
background: #00ff00;
}
</style>
<script language=”javascript” src=”jquery-1.3.2.js”>
</script>
<script language = “JavaScript” type=”text/javascript”>
//<![CDATA[
$(document).ready(function(){
$("#tabTest tr:even").addClass("tabEven");
$("#tabTest tr:odd").addClass("tabOdd");
});
//]]>
</script>
</head>
<body>
<table id=”tabTest”>
<tbody>
<tr>
<td>快购利众网_1</td>
<td>1</td>
</tr>
<tr>
<td>快购利众网_2</td>
<td>1</td>
</tr>
<tr>
<td>快购利众网_3</td>
<td>1</td>
</tr>
<tr>
<td>快购利众网_4</td>
<td>1</td>
</tr>
<tr>
<td>快购利众网_5</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</thml>
效果如下:

效果图

代码解析:

$(document).ready(function(){
$(“#tabTest tr:even”).addClass(“tabEven”);
$(“#tabTest tr:odd”).addClass(“tabOdd”);
});
$(document).ready 的作用很简单,就是等待网页全部内部载入后再执行JavaScript代码(别忘了JQuery也是JavaScript代码哟), 这个函数几乎在所有使用JQuery的代码中都用到. 因为如果我们的Javascript代码中如果有DOM操作,在网页还没完全读取完时整个DOM框架还没有真正建立起来,在这之前的DOM操作都是无效的.

$(“#tabTest tr:even”).addClass(“tabEven”); 为id为tabTest的表格的偶数行增加名为tabEven的CSS样式
$(“#tabTest tr:odd”).addClass(“tabOdd”); 为id为tabTest的表格的奇数行增加名为tabEven的CSS样式

最后, 初学者千万不要为陌生的代码而感到不知所措,记住JQuery很简单.

作者信息:万思杰,网名贝壳,快购利众创始人.想看作者更多文章请搜索快购利众或万思杰.
版权声明:欢迎免费转载,转载时请保留原作者信息,谢谢合作!

就进入实战?是不是太快了?我还不知道怎么用JQuery!! …

我知道大家的想法, 放心好了,有些东西是不需要太多的理论知道做为基础, 其实在我们已经掌握JavaScript时,就已经掌握了JQuery的理论知识. 还是入门篇所说的那样,其实JQuery很简单. : )

在我们开始学习之前建议大家先去下载JQuery1.3中文参考. 下载地址http://www.namipan.com/d/jQueryDocXML2CHM-090223.chm/9c4465cbe627f840573eb5c8046a5cba4b9bc7052ead0100

今天的教程有些复杂(只是概念多点而已),但过了这一关,JQuery的学习可谓是一马平川.

好了,进入正题. 再次申明JQuery很简单,take easy!

从那开始呢? 最好的切入地方就从JQuery的最基本的一个函数 ready 开始! 该函数的作用可以看做和onLoad,至少现在可以这么看待.

定义

ready(fn);

功能

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。

请确保在元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

通过上面所述,我们可以把ready看做onLoad的替代方法. 这时有的朋友就会问了,有onLoad方法我们干什么还要用ready方法?

我个人的体会及看法是 onLoad缺点是以后维护起来麻烦,到处都是JavaScript代码,很容易出问题的哟! 在<<ppk谈JavaScript>>中,ppk针对这个问题的看法也是如此,尽量不要在标签中直接编写JavaScript代码.

实例

两种编写方式

一

$(document).ready(function(){alert(“Hello World!”);});

二

var myFun = function(){alert(“Hello World!”);}

$(document).ready(myFun);

到这儿我想大家对ready的用法应该是明白了,但对前面的 $(document)应该很迷惑. 这是什么东东?别急… 现在只要记住这段代码的功能就是当整个文档载入完毕后再执行ready内的函数就够了.

看完下面的代码我们就明白了$()的用法.

index.html代码结构如下:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>JQuery测试</title>

.p1 {
background: #ff0000;
}

.p2 {
background: #00ff00;
}

.p3{

background: #0000ff;

}

.myPCss{

font-size:36px;

}
</style>
<script language=”javascript” src=”jquery-1.3.2.js”>
</script>
<script language = “JavaScript” type=”text/javascript”>
//<![CDATA[
$(document).ready(function(){
$("p").addClass("p1");
$("p").removeClass("p1");

$("#myP").addClass("p2");

$(".myPCss").addClass("p3");

$("#myDiv p").addClass("p3");

$("#myDiv>p").addClass("p3");

$("div+p").addClass("p3");

$("div~p").addClass("p3");

var aP = document.getElementById("myP");

$(aP).addClass("p2");
});
//]]>
</script>
</head>
<body>

<p>快购利众网1</p>

<p id=”myP”>快购利众网2</p>

<p>快购利众网3</p>

<p>快购利众网4</p>

</div>

</div>

<p>快购利众网5</p>

<p>快购利众网6</p>

</div>

<p>快购利众网7</p>
</body>
</thml>

代码解析:

$(“p”).addClass(“p1″);
$(“p”).removeClass(“p1″);

$(“#myP”).addClass(“p2″);

$(“.myPCss”).addClass(“p3″);

$(“#myDiv p”).addClass(“p3″);

$(“#myDiv>p”).addClass(“p3″);

$(“div+p”).addClass(“p3″);

$(“div~p”).addClass(“p3″);

var aP = document.getElementById(“myP”);

$(aP).addClass(“p2″);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

$(“p”).addClass(“p1″);

$(“p”).removeClass(“p1″);

选择文档里全部的<p>元素对象,不论<p>在文档中所处的层次结构如何, 最后选到了7个<p>元素对象 “<p>快购利众网1</p><p id=”myP”>快购利众网2</p><p>快购利众网3</p><p>快购利众网4</p><p>快购利众网5</p><p>快购利众网6</p><p>快购利众网7</p>”

addClass(“css name”)函数很简单,就是为前面$()选择到的元素对象增加CSS样式.

removeClass(“css name”)函数也很简单,就是去掉前面$()选择到的元素对象的指定的样式.

在这儿,这两段代码功能抵消,相当什么也没做.

$(“#myP”).addClass(“p2″);

选择文档里id为”myP”的指定元素对象,并为该元素对象增加名称为”p2″的样式. 最后选到了1个<p>元素对象 “<p id=”myP”>快购利众网2</p>”

知识点: 如果要选择指定ID号的元素对象,记得前面用”#”

$(“.myPCss”).addClass(“p3″);

选择文档里样式名为”myPCss”的指定元素对象,并为该元素对象增加名称为”p3″的样式. 最后选到了1个<p>元素对象 “<p>快购利众网3</p>”

知识点: 如果要选择指定样式的元素对象,记得前面用”.”

现在可以为大家正式介绍$(),在JQuery里,我们称她为”选择器函数“,里面的内容称为”选择器“.

现在大家自己试试,记住选择器选择出的对象有可能是多个哟.

上面的内容是不是挺简单的!! 嗯,革命才刚刚开始,下面的内容稍稍复杂些因为牵涉到层次的概念,但大家别急,只要记住”选择器”选择出的元素对象可能是多个这点就不用怕了.

$(“#myDiv p”).addClass(“p3″);

功能:在给定的祖先元素下匹配所有的后代元素

分成两部分来分析

一,$(“#myDiv”) 根据上面所学的知识,选择出1个<div>元素对象, “<div id=”myDiv”>”

二,$(“#myDiv p”) 在上面2个<div>元素对象中的任意层中选择<p>元素对象. 几个? 3个 “<p>快购利众网4</p><p>快购利众网5</p><p>快购利众网6</p>”

其中”<p>快购利众网4</p><p>快购利众网5</p><p>快购利众网6</p>”都是在”<div id=”myDiv”></div>”内部定义的

虽然”<p>快购利众网4</p>”是在id为”myDivInner的”div”内部定义的.但因为id为”myDivInner的”div” 也是id为”myDiv的下层,所以”<p>快购利众网5</p>”也属于id为”myDiv的下层. 有些绕口,记住一点就行. A,B操作器中如果是用空格连接,那么表示B属于A的下层(可以为任意层)之中

最后为这3个<p>元素对象增加名为”p3″的样式

知识点: 对于这类有层次的选择表达式$(“A B”),A选择器和B选择器可以是”标签名”,”#id”,”.css”三种中的任意一种,中间用空格分开,空格表示任意层次.

右边的B选择器是在左边A选择器选择的结果上进行内部任意层次中选择, 记住是在左边选择出的元素对象(可能是多个)的内部进行再次选择(可能是多个). <- 这个知识点一定要理解透!

$(“#myDiv>p”).addClass(“p3″);

功能:在给定的父元素下匹配所有的子元素

>代表#myDiv下的子元素对象(多个并只是下一层),最后选择出2个<p>元素对象,”"<p>快购利众网5</p><p>快购利众网6</p>”,并为该<p>对象增加名为”p3″的样式

$(“div+p”).addClass(“p3″);

功能:匹配所有紧接在 div 元素后的 第一个同辈p 元素

+代表紧接着div同层的第一个子元素对象.

id为”myDivInner”同层后面第一个因为是”<div>”,所以后没有紧接着的”<p>”

id为”myDiv”同层后面正好是一个”<p>”

最后选择出1个<p>元素对象,”"<p>快购利众网7</p>”,并为该<p>对象增加名为”p3″的样式

知识点: 是紧接着,如果A与B之间有其它元素都无法匹配.

$(“div~p”).addClass(“p3″);

功能:匹配 #myDiv 元素之后的所有同辈p 元素

该功能与 + 类似,不同的有两处.

一, +为同辈并且紧跟, ~为同辈不需要一定紧跟

二, +为同辈并且第一个, ~为同辈多个.

var aP = document.getElementById(“myP”);

$(aP).addClass(“p2″);

$(aP).addClass(“p2″) 其实就是$(“#myP”).addClass(“p2″) 的另一种形式.

$()中处了可以用字符串的表达式选择器,还可以使用DOM对象

当你能看到这句话,我想对你说”辛苦了.”

学习的过程本来就是艰辛难耐的,唯为坚持才能战胜一切.

到现在我们应该明白之前的”$(document)”代表什么意思了吧.

好了, 今天先讲到这儿. 要快速熟悉选择器的用法只有多加练习.更多的高级应用我相信大家都能自己学会,掌握.

作者信息:万思杰,网名贝壳,快购利众创始人.想看作者更多文章请搜索快购利众或万思杰.
版权声明:欢迎免费转载,转载时请保留原作者信息,谢谢合作!

这套教程在我博客以及CSDN论坛里发布后，个人感觉挺受大家欢迎的，对次我很开心，虽然有些怀疑是否原创的声音，但我想本来就是自己写的也就不去管了。

在实战篇上发布后很多朋友建议用真正的“实战”例子。好吧，我尽量用我自己的项目中的例子来讲解，但如果开篇说的那样，我自己也是刚刚开始学JQuery，所以自己项目中的例子也许是很简单的。我个人对技术的看法是：“用什么方法实现不重要，关键是实现”，

最后申明一下，这个教程名叫“教程”其实是大家共同学习的帖子。我不是老师。

这套教程在我博客以及CSDN论坛里发布后，个人感觉挺受大家欢迎的，对次我很开心，虽然有些怀疑是否原创的声音，但我想本来就是自己写的也不去管了。

在实战篇上发布后很多朋友建议用真正的“实战”例子。好吧，我尽量用我自己的项目中的例子来讲解，但如果开篇说的那样，我自己也是刚刚开始学JQuery，所以自己项目中的例子也许是很简单的。

有些朋友希望我讲解一些有关JavaScript,CSS方面的知识,说实话我本没有准备在本套教程里讨论与此有关的知识, 但挺多朋友们提出建议,那我准备粗略讨论一下,一带而过.,权当起个抛砖引玉的作用.

JavaScript方面

最基础的核心功能如运算符(+-*/等) 控制流程语句(if,for,while等) 等等我就不说了. 这是最最基本的知识.

BOM知识

BOM Browser Object Model 浏览器对象模型.

window对象是BOM最重要的对象. 我们可以简单的把一个IE窗口理解为一个window对象.

window.location

window.history

window.screen

window.document 这个是我们最常用的

事件

其实挺简单的,但要记住事件的驱动有两模式, “冒泡“与”捕获”

冒泡: 激活顺序是事件从它(事件)触发点开始向上层逐级冒泡(触活)直至document(上面所说的window.document)为止.

捕获: 激活顺序与冒泡相反,事伯从第一层(document)逐级向下直止找到最终的事件激活目标.

上面两个概念看过去是麻烦,我们只要记住一般都用”冒泡”就可以了.

DOM

DOM Document Object Model 文档对象模型.

我非常喜欢这个功能(模型), 因为她实现了WEB界面的千变万化.(个人想法)

window.document 就是DOM要操作的对象, DOM把document内的节点(<head><title><body><form><table><div>等等)分析成为一棵文档结构树.然后我们就可以对这棵树进行增加,修改,删除. 对这棵树里各节点的各种属性同样进行增加,修改,删除. 比如绑定CSS的class属性. 通过这些操作,一个HTML的展显就完全在我们控制当中. 我们可以动态的增加节点(比如<tr>,<div>等),也可以在运行中控制节点是否可见(display:none)等等..

CSS方面

CSS Cascading Style Sheet 层叠样式表单

如果说HTML是骨架和肉体,JavaScript是思想与行为的话,那CSS就是衣服.

定义CSS

三种

节点名 {各种样式属性} 如: p{} 作用范围:所有p节点, body{} 整个body节点, table{} 各所table节点

#节点ID名 {各种样式属性} 如: #myID{} 作用范围 ID为”newNode”的节点.(只要ID为”newNode”就符合要求)

.样式名 {各种样式属性} 如: .newStyle{} 作用范围所有元素(节点)的class属性包含了该样式名(“newStyle”)的节点.

总结:

以上是我对JS以及CSS的一些理解,更多知识还是有待自己进一步学习. JavaScript推荐书籍.<<JavaScript高级程序设计>> <<ppk谈JavaScript>>.

<<JavaScript高级程序设计>> 这本要注意,因为很多学习JavaScript的书都叫这个名字,因为我看的是电子版,没有有关作者的信息,所以就把目录结构说一下,以方面我们在选择时有个考虑.

目录结构第一章:JavaScript 是什么第二章 ECMAScript基础第三章对象基础,第四章继承.

CSS的书我真的没怎么看过,都是从网上找的资料.

好,现在进入我们今天的正题.

今天我从我自己的网站(http://www.kuigood.com)里拿了一个实例与大家一起分析.在此申明一下, 不讨论代码写的好不好,只讨论如何实现,代码优化是一件很漫长的事情.呵.

该实例的功能是我网站右上方排序方式的自适应显示是如何实现的. 记住今天说的是选择排序方式时的自适应显示,而不是排序.

目前我网站上对搜索出的淘宝商品的显示有三种排序方式,每种排序方式里又有一个可选的子排序. 我现在的讨论的功能是当一个主排序方式被选择,那么对应的可选子排序就会显示出来提供给用户选择,其它的两个不显示. 呵,很简单吧. 但我们今天是用JQuery来实现.

效果如下:

排序图片

效果2

三种方式的界面上的排版在这儿不多说,我把三种排序单选框以及对应的可选子排序复选框的ID在这儿说明一下.

方式一

单选框为 cbType1CreditDesc

复选框为 cbType1PriceAsc

复选框后的标签 labType1PriceAsc

方式二

单选框为 cbType2PriceAsc

复选框为 cbType2CreditDesc

复选框后的标签 labType2CreditDesc

方式三

单选框为 cbType3PriceDesc

复选框为 cbType3CreditDesc

复选框后的标签 labType3CreditDesc

JS代码

//当网页被完全LOAD后所执行函数 load;

$(document).ready(function(){
load();
});

function load(){

if ($(“#cbType3PriceDesc”).attr(“checked”) == true) {
$(“#cbType3CreditDesc”).css(“display”, “inline-block”);
$(“#labType3CreditDesc”).css(“display”, “inline-block”);
$(“#cbType3CreditDesc>lable”).css(“display”, “inline-block”);
}
else {
$(“#cbType3CreditDesc”).css(“display”, “none”);
$(“#labType3CreditDesc”).css(“display”, “none”);
}

}

//当方式一的卖家信用从高至低被选择后进行的操作
$(“#cbType1CreditDesc”).click(function(){
controlShow();

});

//当方式二的商品价格从低至高被选择后的操作
$(“#cbType2PriceAsc”).click(function(){
controlShow();

});

//当方式3的商品价格从高至代被选择后的操作
$(“#cbType3PriceDesc”).click(function(){
controlShow();

});

}

蓝色代码的分析

因为三小段代码的功能结构是一样的,所以我只拿第一小段的代码来分析说明

$(“#cbType1CreditDesc”).click(function(){
controlShow();

});

该段的代码有一个新的知识点, JQuery的事件绑定

$().click(执行函数) 在每一个匹配元素的click事件中绑定一个处理函数。

$(“#cbType1CreditDesc”) 该代码是选择ID为cbType1CreditDesc的元素(DOM里称为节点),最后结果是方式一的单选框.

那上面整段代码的意思是, 为ID为cbType1CreditDesc元素的click事件绑定一个函数function(){controlShow();}

这是是JQuery对click事件绑定的二种方法中的一种,另一种的实现为

$(“#cbType1CreditDesc”).bind(‘click’,function(){
controlShow();

}

第一种是以函数的方式现实click事件,另一种是以参数的方式来绑定

红颜丽人

追求技术就像追求#$！不抛弃，不放弃！

jquery入门教程|jquery简单教程深入浅出

前言

前言

相关文章