ホームページ >ウェブフロントエンド >jsチュートリアル >JQueryの真面目チュートリアルシリーズ(2) jquery実践編_jquery
JQueryの真面目チュートリアルシリーズ(2) jquery実践編_jquery
- WBOYオリジナル
- 2016-05-16 18:51:061110ブラウズ
我知道大家的想法, 放心好了,有些东西是不需要太多的理论知道做为基础, 其实在我们已经掌握JavaScript时,就已经掌握了JQuery的理论知识. 还是入门篇所说的那样,其实JQuery很简单. : )
在我们开始学习之前建议大家先去下载JQuery1.3中文参考. 下载地址
http://www.jb51.net/books/17812.html
好了,进入正题. 再次申明JQuery很简单,take easy!
从那开始呢? 最好的切入地方就从 ready 函数开始!
定义
ready(fn);
功能
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。
请确保在 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
通过上面所述,我们可以把ready看做onLoad的替代方法. 这时有的朋友就会问了,有onLoad方法我们干什么还要用ready方法?
我个人的体会及看法是 onLoad缺点是以后维护起来麻烦,到处都是JavaScript代码,很容易出问题的哟! 在<
实例
两种编写方式
一
$(document).ready(function(){alert("Hello World!");});
二
var myFun = function(){alert("Hello World!");}
$(document).ready(myFun);
到这儿我想大家对ready的用法应该是明白了,但对前面的 $(document)应该很迷惑. 这是什么东东?别急... 现在只要记住这段代码的功能就是当整个文档载入完毕后再执行ready内的函数就够了.
看完下面的代码我们就明白了$()的用法.
index.html代码结构如下:
快购利众网1
快购利众网2
快购利众网3
快购利众网4
快购利众网5
快购利众网6
快购利众网7
代码解析:
$("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");
选择文档里全部的
元素对象,不论
在文档中所处的层次结构如何, 最后选到了7个
元素对象 "
快购利众网1
快购利众网2
快购利众网3
快购利众网4
快购利众网5
快购利众网6
快购利众网7
"addClass("css name")函数很简单,就是为前面$()选择到的元素对象增加CSS样式.
removeClass("css name")函数也很简单,就是去掉前面$()选择到的元素对象的指定的样式.
在这儿,这两段代码功能抵消,相当什么也没做.
$("#myP").addClass("p2");
选择文档里id为"myP"的指定元素对象,并为该元素对象增加名称为"p2"的样式. 最后选到了1个
元素对象 "
快购利众网2
"知识点: 如果要选择指定ID号的元素对象,记得前面用"#"
$(".myPCss").addClass("p3");
选择文档里样式名为"myPCss"的指定元素对象,并为该元素对象增加名称为"p3"的样式. 最后选到了1个
元素对象 "
快购利众网3
"知识点: 如果要选择指定样式的元素对象,记得前面用"."
现在可以为大家正式介绍$(),在JQuery里,我们称她为"选择器函数",里面的内容称为"选择器".
现在大家自己试试,记住选择器选择出的对象有可能是多个哟.
上面的内容是不是挺简单的!! 嗯,革命才刚刚开始,下面的内容稍稍复杂些因为牵涉到层次的概念,但大家别急,只要记住"选择器"选择出的元素对象可能是多个这点就不用怕了.
$("#myDiv p").addClass("p3");
功能:在给定的祖先元素下匹配所有的后代元素
分成两部分来分析
一,$("#myDiv") 根据上面所学的知识,选择出1个
二,$("#myDiv p") 在上面2个
元素对象. 几个? 3个 "
快购利众网4
快购利众网5
快购利众网6
"其中"
快购利众网4
快购利众网5
快购利众网6< /p>"都是在"
"内部定义的虽然"
快购利众网4
"是在id为"myDivInner的"div"内部定义的.但因为id 为"myDivInner的"div" 也是id为"myDiv的下层,所以"快购利众网5
"也属于id为"myDiv的下层. 有些绕口,记住一点就行. A,B操作器中如果是用空格连接,那么表示B属于A的下层(可以为任意层)之中最后为这3个
元素对象增加名为"p3"的样式
知识点: 对于这类有层次的选择表达式$("A B"),A选择器和B选择器可以是"标签名","#id",".css"三种中的任意一种,中间用空格分开,空格表示任意次.
右边的B选择器是在左边A选择器选择的结果上进行内部任意层中选择, 记住是在左边选择出的元素对象(可能是多个)的内部进行再次选择(可能是多个). <- 这个知识点一定要理解透!
$("#myDiv>p").addClass("p3");
功能:在给定的父元素下匹配所有的子元素
>代表#myDiv下的子元素对象(多个并只是下一层),最后选择出2个 元素对象,"" 快购利众网5 快购利众网6 对象增加名为"p3"的样式
$("div+p").addClass("p3");
功能:匹配所有紧接在 div 元素后的 第一个同辈p 元素
+代表紧接着div同层的第一个子元素对象.
id为"myDivInner"同层后面第一个因为是" " id为"myDiv"同层后面正好是一个" " 最后选择出1个 元素对象,"" 快购利众网7 对象增加名为"p3"的样式 知识点: 是紧接着,如果A与B之间有其它元素都无法匹配. $("div~p").addClass("p3"); 功能:匹配 #myDiv 元素之后的所有同辈p 元素 该功能与 + 类似,不同的有两处. 一, +为同辈并且紧跟, ~为同辈不需要一定紧跟 2. はピアであり、最初の ~ は複数のピアです。 var aP = document.getElementById("myP"); $(aP).addClass("p2"); $(aP).addClass("p2") は、実際には $("#myP").addClass("p2") の別のバージョンです。 ) フォーム。 $() には文字列を使用できる式セレクターが含まれており、DOM オブジェクトも使用できます
この文を見てもらえたら、「お疲れ様です」と言いたいです。 学習のプロセスは本質的に困難ですが、粘り強く続けることですべてを克服できます。
ここまでで、前の "$(document)" の意味が理解できたはずです。 さて、今日はここで終わりにしましょう。セレクターの使用にすぐに慣れる唯一の方法は、より高度なアプリケーションを自分で学習して習得できると信じています。