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>

    <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>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>

代码解析:
    $("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 class="myPCss">快购利众网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 class="myPCss">快购利众网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博客，转载请标明出处：http://blog.csdn.net/wansijie/archive/2009/06/22/4289531.aspx

120 个解决方案

#1

今天的教程有些复杂,但过了这一关,JQuery的学习可谓是一马平川.所以坚持一下.. JQuery不难.呵.

#2

自己顶顶....

#3

顶，jquery确实好用

#4

自己再顶顶..先的文章即将发布..

#5

顶，不错的教程。

#6

推荐给予作者鼓励

#7

jquery真的简单!!!

#8

hao a hao a hao a hao a hao a hao a hao a hao a hao a hao a hao a

#9

草喜欢JQ....信息

#10

拿个板凳过来学习

#11

p.class
这个类型的楼主好像没有提到

#12

mark

#13

js主要解决的是页面程序与低层程序的交互,jquery也一样,希望LZ在下来的文章中多写点jquery在项目中的运用,比如:jquery在java的SSH框架下如何调用action,或者如何使用jquery写个分页什么的.
我刚学着用的时候,基本的东西2天就搞懂了,但把这些东西用到项目中去还是比较麻烦,网上找点资料也不好找,幸好有个懂的同事教了我一周,现在会用了,不过还是个皮毛,希望LZ能把自己使用的一些经验分享下,谢谢!

#14

表达的还是挺清楚的，一遍看下来都能明白呵。

#15

建议楼主既然讲了，就有特色的讲吧，
其他很多老师讲都是随便拉一个例子讲，而不是讲应用，比如上学的时候老师讲C，天天都是用数字1，2，3，4弄过来弄过去的
希望你能讲如何在项目中应用。
很多老师讲“。。。实战”，其实都是模拟例子，不是真正应用中的东西，所以对于我们初学者来说，学会了模拟，真正项目中还是很幼稚的使用。
比如：有人讲jquery的ajax是url就写：aaa.aspx?id=bbb
而实际项目中在服务端都是用aspx吗？还有用ashx的，webservice的。。。
希望楼主能讲应用

#16

辛苦

#17

好像喜欢用 jquery 的多过 prototype,不知道为什么

#18

希望楼主坚持更新。一直在关注。

#19

好好学习天天向上

#20

用过不错。

#21

那个。。为了证明这是你写的，能不能请你写一个例子？
就是查询pubs数据库的jobs表显示出来，并可以上下无刷新分页，简单吧？给写一个？

#22

好东西！

#23

you gan!hao yong!

#24

mark

#25

向版主学习吧,会收益的!

#26

现在也在使用，学习

#27

好～

#28

引用 21 楼 fly_to_the_winds 的回复:

那个。。为了证明这是你写的，能不能请你写一个例子？
就是查询pubs数据库的jobs表显示出来，并可以上下无刷新分页，简单吧？给写一个？

我发现你老是在找我的碴。
如果对我的帖子有怀疑请拿出证据。

最后还是多谢你的回帖。

#29

引用 15 楼 poiuy1363 的回复:

建议楼主既然讲了，就有特色的讲吧，
其他很多老师讲都是随便拉一个例子讲，而不是讲应用，比如上学的时候老师讲C，天天都是用数字1，2，3，4弄过来弄过去的
希望你能讲如何在项目中应用。
很多老师讲“。。。实战”，其实都是模拟例子，不是真正应用中的东西，所以对于我们初学者来说，学会了模拟，真正项目中还是很幼稚的使用。
比如：有人讲jquery的ajax是url就写：aaa.aspx?id=bbb
而实际项目中在服务端都是用aspx…

呵。。我以前是做C/S开发的，就今年开始学习B/S的开发。
我对JQurey也是刚刚开始学，对于你说的“ashx”，“webServeice”没有接触过。
但你的建议很好，我会把我自己项目中的一些例子放上来讲。
当然不是什么高深的东西。大家一同交流。：）

#30

菜鸟的问题。感觉就是把CSS里面的东西写到javascript脚本里面去。为什么不直接写在css里面呢？不太明白！
教程到是看懂了。挺好的。楼主指教。

#31

顶一个

#32

学习

#33

哭~~好复杂的理解过程，好绕口

#34

呵呵。。顶

#35

引用 30 楼 lijing3333 的回复:

菜鸟的问题。感觉就是把CSS里面的东西写到javascript脚本里面去。为什么不直接写在css里面呢？不太明白！
教程到是看懂了。挺好的。楼主指教。

JQuery在CSS部分的操作我个人的看法是

如果写到CSS中表现层基本上是静态的. (当然CSS也有动作,比如a:hover {color:#ff0000},但不是每个浏览器都支持 hover 这个动作)
用JQuery就可以动态的进行操作.

#36

好东西，有点长～，期待lz更多教程～～

#37

嗯。很快就有新的文章推出来。

快购利众
htpp://www.kuigood.com

#38

楼主辛苦了，期待下文...

#39

#40

好，破云见日的感觉，谢谢！

#41

多谢新的文章已经发表.

#42

好东西，今天正好决定要学个js框架。呵呵，发的正好，期待连载！

#43

引用 42 楼 greymouseyu 的回复:

好东西，今天正好决定要学个js框架。呵呵，发的正好，期待连载！

实战篇中已经发布
http://topic.csdn.net/u/20090629/22/d8171579-b34a-4ca3-b92d-83b92c0c29b3.html?492

期待指点.

#44

有点不明白
<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>
$(div+b)你不是说是紧接在 div 元素后的第一个同辈p 元素吗？
那<p>快购利众网5 </p>不是紧接在<div id="myDivTemp"> </div>后吗？
怎么没有选上？

#45

学习了。

#46

$("div+p").addClass("p3");
    功能:匹配所有紧接在 div 元素后的第一个同辈p 元素
    +代表紧接着div同层的第一个子元素对象.
    id为"myDivInner"同层后面第一个因为是" <div>",所以后没有紧接着的" <p>"
    id为"myDiv"同层后面正好是一个" <p>"
    最后选择出1个 <p>元素对象,"" <p>快购利众网7 </p>",并为该 <p>对象增加名为"p3"的样式
    知识点: 是紧接着,如果A与B之间有其它元素都无法匹配.
========================
我按照楼主的来学习，这个应该选出了2个吧myDivTemp后面的<p>5,也应该被选中吧，感谢楼主。

#47

引用 44 楼 kuroro85 的回复:

有点不明白
<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>
$(div+b)你不是说是紧接在 div 元素后的…

$(div+p)一共能找到2个符合要求的元素
<div di="myDivTemp">后面的 <p>快购利众网5</p>
<div id="myDiv"> 后面的 <p>快购利众网7 </p>

对比
$(div~p)

$(div~p)一共能找到3个符合要求的元素
<div di="myDivTemp">后面的<p>快购利众网5</p><p>快购利众网6 </p>
<div id="myDiv"> 后面的 <p>快购利众网7 </p>

刚我再次测试了,没发现问题.

#48

引用 46 楼 galford0628 的回复:

$("div+p").addClass("p3");
    功能:匹配所有紧接在 div 元素后的第一个同辈p 元素
    +代表紧接着div同层的第一个子元素对象.
    id为"myDivInner"同层后面第一个因为是" <div>",所以后没有紧接着的" <p>"
    id为"myDiv"同层后面正好是一个" <p>"
    最后选择出1个 <p>元素对象,"" <p>快购利众网7 </p>",并为该 <p>对象增加名为"p3"的样式
    知识点: 是紧接着,如果A与B之间有其它元素都无法匹配.
=====…
========================
我按照楼主的来学习，这个应该选出了2个吧myDivTemp后面的 <p>5,也应该被选中吧，感谢楼主

对对,不好意思. 写的时候一下晕了脑袋. 谢谢

#49

自己顶一下。。。

#50

mark

#1

今天的教程有些复杂,但过了这一关,JQuery的学习可谓是一马平川.所以坚持一下.. JQuery不难.呵.

#2

自己顶顶....

#3

顶，jquery确实好用

#4

自己再顶顶..先的文章即将发布..

#5

顶，不错的教程。

#6

推荐给予作者鼓励

#7

jquery真的简单!!!

#8

hao a hao a hao a hao a hao a hao a hao a hao a hao a hao a hao a

#9

草喜欢JQ....信息

#10

拿个板凳过来学习

#11

p.class
这个类型的楼主好像没有提到

#12

mark

#13

#14

表达的还是挺清楚的，一遍看下来都能明白呵。

#15

#16

辛苦

#17

好像喜欢用 jquery 的多过 prototype,不知道为什么

#18

希望楼主坚持更新。一直在关注。

#19

好好学习天天向上

#20

用过不错。

#21

那个。。为了证明这是你写的，能不能请你写一个例子？
就是查询pubs数据库的jobs表显示出来，并可以上下无刷新分页，简单吧？给写一个？

#22

好东西！

#23

you gan!hao yong!

#24

mark

#25

向版主学习吧,会收益的!

#26

现在也在使用，学习

#27

好～

#28

引用 21 楼 fly_to_the_winds 的回复:

那个。。为了证明这是你写的，能不能请你写一个例子？
就是查询pubs数据库的jobs表显示出来，并可以上下无刷新分页，简单吧？给写一个？

我发现你老是在找我的碴。
如果对我的帖子有怀疑请拿出证据。

最后还是多谢你的回帖。

#29

引用 15 楼 poiuy1363 的回复:

建议楼主既然讲了，就有特色的讲吧，
其他很多老师讲都是随便拉一个例子讲，而不是讲应用，比如上学的时候老师讲C，天天都是用数字1，2，3，4弄过来弄过去的
希望你能讲如何在项目中应用。
很多老师讲“。。。实战”，其实都是模拟例子，不是真正应用中的东西，所以对于我们初学者来说，学会了模拟，真正项目中还是很幼稚的使用。
比如：有人讲jquery的ajax是url就写：aaa.aspx?id=bbb
而实际项目中在服务端都是用aspx…

#30

菜鸟的问题。感觉就是把CSS里面的东西写到javascript脚本里面去。为什么不直接写在css里面呢？不太明白！
教程到是看懂了。挺好的。楼主指教。

#31

顶一个

#32

学习

#33

哭~~好复杂的理解过程，好绕口

#34

呵呵。。顶

#35

引用 30 楼 lijing3333 的回复:

菜鸟的问题。感觉就是把CSS里面的东西写到javascript脚本里面去。为什么不直接写在css里面呢？不太明白！
教程到是看懂了。挺好的。楼主指教。

#36

好东西，有点长～，期待lz更多教程～～

#37

嗯。很快就有新的文章推出来。

快购利众
htpp://www.kuigood.com

#38

楼主辛苦了，期待下文...

#39

#40

好，破云见日的感觉，谢谢！

#41

多谢新的文章已经发表.

#42

好东西，今天正好决定要学个js框架。呵呵，发的正好，期待连载！

#43

引用 42 楼 greymouseyu 的回复:

好东西，今天正好决定要学个js框架。呵呵，发的正好，期待连载！

实战篇中已经发布
http://topic.csdn.net/u/20090629/22/d8171579-b34a-4ca3-b92d-83b92c0c29b3.html?492

期待指点.

#44

#45

学习了。

#46

#47

引用 44 楼 kuroro85 的回复:

有点不明白
<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>
$(div+b)你不是说是紧接在 div 元素后的…

#48

引用 46 楼 galford0628 的回复:

$("div+p").addClass("p3");
    功能:匹配所有紧接在 div 元素后的第一个同辈p 元素
    +代表紧接着div同层的第一个子元素对象.
    id为"myDivInner"同层后面第一个因为是" <div>",所以后没有紧接着的" <p>"
    id为"myDiv"同层后面正好是一个" <p>"
    最后选择出1个 <p>元素对象,"" <p>快购利众网7 </p>",并为该 <p>对象增加名为"p3"的样式
    知识点: 是紧接着,如果A与B之间有其它元素都无法匹配.
=====…
========================
我按照楼主的来学习，这个应该选出了2个吧myDivTemp后面的 <p>5,也应该被选中吧，感谢楼主

对对,不好意思. 写的时候一下晕了脑袋. 谢谢

#49

自己顶一下。。。

#50

mark