我知道大家的想法, 放心好了,有些东西是不需要太多的理论知道做为基础, 其实在我们已经掌握JavaScript时,就已经掌握了JQuery的理论知识. 还是入门篇所说的那样,其实JQuery很简单. : )
在我们开始学习之前建议大家先去下载[url=http://www.1sucai.cn/books/17812.html]JQuery1.3中文参考[/url]. 下载地址
[url=http://www.1sucai.cn/books/17812.html]http://www.1sucai.cn/books/17812.html[/url]
好了,进入正题. 再次申明[b]JQuery很简单,take easy! [/b]
[b] [/b]从那开始呢? 最好的切入地方就从 ready 函数开始!
[b]
定义[/b]
ready(fn);
[b]
功能 [/b]
这是事件模块中[b]最重要[/b]的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向[b]window.load事件[/b]注册事件[b]的替代方法[/b]。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。
[b]请确保在 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。[/b]
可以在同一个页面中无限次地使用$(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>
<style type="text/css">
.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[b]>[/b]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 class="myPCss">快购利众网3</p>
<div id="myDiv">
<div id="myDivInner">
<p>快购利众网4</p>
</div>
<div id="myDivTemp">
</div>
<p>快购利众网5</p>
<p>快购利众网6</p>
</div>
<p>快购利众网7</p>
</body>
</thml>
[b]代码解析:[/b]
$("p").addClass("p1");
$("p").removeClass("p1");
$("
#myP").addClass("p2");
$("
.myPCss").addClass("p3");
$("#myDiv p").addClass("p3");
$("#myDiv[b]>[/b]p").addClass("p3");
$("div+p").addClass("p3");
$("div~p").addClass("p3");
var aP = document.getElementById("myP");
$(aP).addClass("p2");
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
[b]$("p").addClass("p1"); [/b]
[b]$("p").removeClass("p1");[/b]
选择文档里[b]全部[/b]的<p>元素对象,[b]不论[/b]<p>[b]在文档中所处的层次结构如何[/b], 最后选到了[b]7[/b]个<p> 元素对象 "<p>快购利众网1</p><p id="myP">快购利众网2</p><p class="myPCss">快购利众网3</p><p>快购利众网4</p><p>快购利众网5</p><p>快购利众网6</p><p>快购利众网7</p>"
addClass("css name")函数很简单,就是为前面$()选择到的元素对象增加CSS样式.
removeClass("css name")函数也很简单,就是去掉前面$()选择到的元素对象的指定的样式.
在这儿,这两段代码功能抵消,相当什么也没做.
[b]$("
#myP").addClass("p2");[/b]
[b] [/b]选择文档里[b]id[/b]为"myP"的[b]指定[/b]元素对象,并为该元素对象增加名称为"p2"的样式. 最后选到了[b]1[/b]个<p>元素对象 "<p id="myP">快购利众网2</p>"
知识点: 如果要选择指定ID号的元素对象,记得前面用"[b]
#[/b]"
[b]$("
.myPCss").addClass("p3");[/b]
[b] [/b]选择文档里[b]样式名[/b]为"myPCss"的[b]指定[/b]元素对象,并为该元素对象增加名称为"p3"的样式. 最后选到了[b]1[/b]个<p>元素对象 "<p class="myPCss">快购利众网3</p>"
[b]知识点[/b]: 如果要选择指定样式的元素对象,记得前面用"
[b].[/b]"
[b] [/b]现在可以为大家正式介绍[b]$(),[/b]在JQuery里,我们称她为"[b]选择器函数[/b]",里面的内容称为"[b]选择器[/b]".
现在大家自己试试,[b]记住选择器选择出的对象有可能是多个哟.[/b]
[b][/b]
[b] [/b]上面的内容是不是挺简单的!! 嗯,革命才刚刚开始,下面的内容稍稍复杂些因为牵涉到层次的概念,但大家别急,[b]只要记住"选择器"选择出的元素对象可能是多个这点就不用怕了.[/b]
[b] [/b]
[b]$("
#myDiv p").addClass("p3");[/b][b] [/b]
功能:在给定的祖先元素下匹配所有的后代元素
[b] [/b]分成两部分来分析
[b] 一,[/b]$("
#myDiv") 根据上面所学的知识,选择出[b]1[/b]个<div>元素对象, "<div id="myDiv">"
二,$("
#myDiv p") 在上面2个<div>元素对象中的
[b]任意层[/b]中选择<p>元素对象. 几个?
[b]3[/b]个 "<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的下层(可以为任意层)之中
最后为这[b]3[/b]个<p>元素对象增加名为"p3"的样式
[b]
知识点[/b]:[b]对于这类有层次的选择表达式$("A B"),A选择器和B选择器可以是"标签名","
#id","
.css"三种中的任意一种,中间用
空格分开,空格表示任意次.[/b]
[b] 右边的B选择器是在左边A选择器选择的结果上进行内部
任意层中选择, 记住是在左边选择出的元素对象(可能是多个)的内部进行再次选择(可能是多个). <-
这个知识点一定要理解透![/b]
[b]$("#myDiv>p").addClass("p3");[/b]
功能:在给定的父元素下匹配所有的子元素
[b] [/b]>代表#myDiv下的子元素对象(多个并只是下一层),最后选择出2个<p>元素对象,""<p>快购利众网5</p><p>快购利众网6</p>",并为该<p>对象增加名为"p3"的样式
[b]$("div+p").addClass("p3");[/b]
功能:匹配所有[b]紧接在[/b][b]div[/b] 元素后的 [b]第一个同辈p[/b] 元素
+代表[b]紧接着[/b]div[b]同层[/b]的第一个子元素对象.
id为"myDivInner"同层后面第一个因为是"<div>",所以后没有紧接着的"<p>"
id为"myDiv"同层后面正好是一个"<p>"
最后选择出1个<p>元素对象,""<p>快购利众网7</p>",并为该<p>对象增加名为"p3"的样式
[b] 知识点: [/b]是紧接着,如果A与B之间有其它元素都无法匹配.
[b] $("[/b]d[b]iv~p").addClass("p3");[/b]
功能:匹配[b]
#myDiv[/b] 元素之后的[b]所有同辈p[/b] 元素
该功能与[b]
+[/b] 类似,不同的有两处.
一,
[b]+[/b]为同辈并且紧跟,
[b]~[/b]为同辈不需要一定紧跟
二,
[b]+[/b]为同辈并且第一个,
[b]~[/b]为同辈多个.
[b]var aP = document.getElementById("myP");[/b]
[b] $(aP).addClass("p2");[/b]
[b] [/b]$(aP).addClass("p2") 其实就是$("#myP").addClass("p2") 的另一种形式.
$()中处了可以用字符串的表达式选择器,还可以使用DOM对象
[b][/b]
[b] [/b]
[b] 当你能看到这句话,我想对你说"辛苦了."[/b]
[b] 学习的过程本来就是艰辛难耐的,唯为坚持才能战胜一切.[/b]
[b][/b]
到现在我们应该明白之前的"$(document)"代表什么意思了吧.
好了, 今天先讲到这儿. 要快速熟悉选择器的用法只有多加练习.更多的高级应用我相信大家都能自己学会,掌握.
作者信息:万思杰
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
