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来实现.

        效果如下:
         JQuery无废话系列教程(三) 实战篇中

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

        方式一

                   单选框为 cbType1CreditDesc

                   复选框为 cbType1PriceAsc

                   复选框后的标签   labType1PriceAsc

        方式二

                   单选框为 cbType2PriceAsc

                   复选框为 cbType2CreditDesc

                   复选框后的标签   labType2CreditDesc

        方式三

                   单选框为 cbType3PriceDesc

                   复选框为 cbType3CreditDesc

                   复选框后的标签   labType3CreditDesc

        JS代码

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

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

function load(){

         var controlShow = function(){
           if ($("#cbType1CreditDesc").attr("checked") == true) {
               $("#cbType1PriceAsc").css("display", "inline-block");
               $("#labType1PriceAsc").css("display", "inline-block");
           }
           else {
               $("#cbType1PriceAsc").css("display", "none");
               $("#labType1PriceAsc").css("display", "none");
           }

           if ($("#cbType2PriceAsc").attr("checked") == true) {
               $("#cbType2CreditDesc").css("display", "inline-block");
               $("#labType2CreditDesc").css("display", "inline-block");
           }
           else {
               $("#cbType2CreditDesc").css("display", "none");
               $("#labType2CreditDesc").css("display", "none");
           }

           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事件,另一种是以参数的方式来绑定

相关知识, 解除事件绑定

$("#cbType1CreditDesc").bind(' click '); 这样我们就解除了id为cbType1CreditDesc元素的click事件的绑定了.

桔红色代码的分析

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

              if ($("#cbType1CreditDesc").attr("checked") == true) {
               $("#cbType1PriceAsc").css("display", "inline-block");
               $("#labType1PriceAsc").css("display", "inline-block");
           }
           else {
               $("#cbType1PriceAsc").css("display", "none");
               $("#labType1PriceAsc").css("display", "none");
           }
该段的代码有二个新的 知识点, JQuery的元素属性.
$().attr("属性名") 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。

$().css("样式属性","属性值")  在所有匹配的元素中，设置一个样式属性的值

那第一小段代码的意思就是

      当ID为cbType1CreditDesc的元素的属性checked 为true(也就是说被选定了)时为ID为cbType1PriceAsc的元素设置名为display样式属性的值为"inline-block"( 显示),如果该元素未被选择则设置该元素的display样式属性的值为"none"( 不显示 )

      好,今天就到这儿吧.

   作者信息：万思杰，网名贝壳，快购利众 http://www.kuigood.com 创始人。
　版权声明：欢迎免费转载，转载时请保留原作者信息，谢谢合作！

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/wansijie/archive/2009/06/27/4302195.aspx

74 个解决方案

#1

只能自己顶顶了...
大家可以去我的博客
http://blog.csdn.net/wansijie

#2

支持楼主的精神

#3

支持

#4

学习！！！！！！

#5

up up up

#6

友情帮顶

#7

真好学习一下

#8

强烈支持！

#9

好东西呀！

#10

ding

#11

谢谢楼主，支持一下

#12

#13

学习

#14

认真学习，感谢楼主

#15

感谢楼主，一直在看。

#16

楼主，好精神
顶

#17

mark

#18

好帖子,MARK

#19

支持楼主！！！讲得很清楚！

#20

#21

好贴，继续学习

#22

mark

#23

学习了，顶一下！

#24

学习

#25

顶

#26

帮顶！！

#27

学习，但是有个问题点击方式三rad时候怎么不是预期的效果

#28

顶楼主啊。有空了去博客上瞅瞅。

#29

学习了，谢谢！

#30

引用 27 楼 jenny0810 的回复:

学习，但是有个问题点击方式三rad时候怎么不是预期的效果

不好意思,我这儿测试了,一切是正常的.
要不你把你的代码粘上来?? 我们一起分析一下?

#31

《JavaScript高级程序设计》(Professional JavaScript for Web Developers)中文版&英文版&英文第二版[PDF]
http://www.verycd.com/topics/2754841/

自己去下载吧..

#32

引用 30 楼 wansijie 的回复:

引用 27 楼 jenny0810 的回复:
学习，但是有个问题点击方式三rad时候怎么不是预期的效果

不好意思,我这儿测试了,一切是正常的.
要不你把你的代码粘上来?? 我们一起分析一下?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){ load(); });
        function load()
        {
              var controlShow = function(){
                  if ($("#cbType1CreditDesc").attr("checked") == true) {
                      $("#cbType1PriceAsc").css("display", "inline-block");
                      $("#labType1PriceAsc").css("display", "inline-block");
                  }
                  else {
                      $("#cbType1PriceAsc").css("display", "none");
                      $("#labType1PriceAsc").css("display", "none");
                  }
                  if ($("#cbType2PriceAsc").attr("checked") == true) {
                      $("#cbType2CreditDesc").css("display", "inline-block");
                      $("#labType2CreditDesc").css("display", "inline-block");
                  }
                  else {
                      $("#cbType2CreditDesc").css("display", "none");
                      $("#labType2CreditDesc").css("display", "none");
                  }
                  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(); });
              $("#cbType3PriceDesc").click(function(){ controlShow(); });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align: center">
        <table border="0" cellpadding="0" cellspacing="0" style="width: 760px">
            <tr>
                <td colspan="2" style="height: 18px; text-align: left">
                    <span style="color: #ff00ff">排序方式</span></td>
            </tr>
            <tr>
                <td style=" height: 20px">
                    <span style="color: #009900">方式一</span></td>
                <td style=" color: #000000; height: 20px; text-align: left">
                    <asp:RadioButton ID="cbType1CreditDesc" runat="server" Text="卖家信用从高到低" GroupName="fang" />
                    <input id="cbType1PriceAsc" type="checkbox"  style="display:none;"/>
                    <asp:Label ID="labType1PriceAsc" runat="server" Text="并且商品价格由低到高"></asp:Label></td>
            </tr>
            <tr style="color: #000000">
                <td>
                    <span style="color: #009900">方式二</span></td>
                <td style=" text-align: left">
                    <asp:RadioButton ID="cbType2PriceAsc" runat="server" Text="商品价格从低到高" GroupName="fang" />
                    <input id="cbType2CreditDesc" type="checkbox"  style="display:none;"/>
                    <asp:Label ID="labType2CreditDesc" runat="server" Text="并且卖家信用从高到低"></asp:Label></td>
            </tr>
            <tr style="color: #000000">
                <td style=" height: 19px">
                    <span style="color: #009900">方式三</span></td>
                <td style=" height: 19px; text-align: left">
                    <asp:RadioButton ID="cbType3PriceDesc" runat="server" Text="商品价格从高到低" GroupName="fang" />
                    <input id="cbType3CreditDesc " type="checkbox" style="display:none;" />
                    <asp:Label ID="labType3CreditDesc" runat="server" Text="并且卖家信用从高到低"></asp:Label></td>
            </tr>
        </table>

    </div>
    </form>
</body>
</html>
我拷贝你的，不知道为什么不行？

#33

好东西，顶了

#34

不是怀疑你，而是有些不是原创的东东让我看到了而已，我当然支持你了，呵呵，我也要学jQuery嘛

#35

准备暑假用一个月好好的学习一下js，再去找工作！

#36

太好了，期待下期

#37

引用 34 楼 fly_to_the_winds 的回复:

不是怀疑你，而是有些不是原创的东东让我看到了而已，我当然支持你了，呵呵，我也要学jQuery嘛

不是原创，这里几乎每一个字都是我打的。
可能有些话气与某些文章类似，这就好比“我要去吃饭”，不可能你说了我就不能这么说啊。
不管怎么说，还是多谢你的支持。

#38

LZ：

我需要用到解除事件绑定，onclick。就是网页上类似有用、没用的，我希望点击过后，至少刷新页面之前，点击不再激发事件了，

$('#div').bind('click'); 无效unbind()也没用，jq版本是1.32的

#39

引用 38 楼 amani11 的回复:

LZ：

我需要用到解除事件绑定，onclick。就是网页上类似有用、没用的，我希望点击过后，至少刷新页面之前，点击不再激发事件了，

$('#div').bind('click'); 无效unbind()也没用，jq版本是1.32的

不好意思啊，我一下没看懂你的意思
要保证代码的正确首先要确认你的选择器是否选择好。
就是$('#div') 是否选择到你要的元素（节点）。

#40

#41

解除事件绑定 unbind([type],[data])

#42

自己顶一下。。。

#43

mark

#44

学习中。。。楼主辛苦了

#45

支持,讲得很清楚！

#46

楼主好人啊……呜呜

#47

该回复于2009-11-16 09:00:38被版主删除

#48

自己顶顶...
下一篇很快就会推出来.

#49

引用 32 楼 jenny0810 的回复:

引用 30 楼 wansijie 的回复:
引用 27 楼 jenny0810 的回复:
学习，但是有个问题点击方式三rad时候怎么不是预期的效果

不好意思,我这儿测试了,一切是正常的.
要不你把你的代码粘上来?? 我们一起分析一下?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww…

jquery.js <- 这个你肯定是JQuery的js文件吗?

#50

自己顶顶...好久没来了.

#1

只能自己顶顶了...
大家可以去我的博客
http://blog.csdn.net/wansijie

#2

支持楼主的精神

#3

支持

#4

学习！！！！！！

#5

up up up

#6

友情帮顶

#7

真好学习一下

#8

强烈支持！

#9

好东西呀！

#10

ding

#11

谢谢楼主，支持一下

#12

#13

学习

#14

认真学习，感谢楼主

#15

感谢楼主，一直在看。

#16

楼主，好精神
顶

#17

mark

#18

好帖子,MARK

#19

支持楼主！！！讲得很清楚！

#20

#21

好贴，继续学习

#22

mark

#23

学习了，顶一下！

#24

学习

#25

顶

#26

帮顶！！

#27

学习，但是有个问题点击方式三rad时候怎么不是预期的效果

#28

顶楼主啊。有空了去博客上瞅瞅。

#29

学习了，谢谢！

#30

引用 27 楼 jenny0810 的回复:

学习，但是有个问题点击方式三rad时候怎么不是预期的效果

不好意思,我这儿测试了,一切是正常的.
要不你把你的代码粘上来?? 我们一起分析一下?

#31

《JavaScript高级程序设计》(Professional JavaScript for Web Developers)中文版&英文版&英文第二版[PDF]
http://www.verycd.com/topics/2754841/

自己去下载吧..

#32

引用 30 楼 wansijie 的回复:

引用 27 楼 jenny0810 的回复:
学习，但是有个问题点击方式三rad时候怎么不是预期的效果

不好意思,我这儿测试了,一切是正常的.
要不你把你的代码粘上来?? 我们一起分析一下?

#33

好东西，顶了

#34

不是怀疑你，而是有些不是原创的东东让我看到了而已，我当然支持你了，呵呵，我也要学jQuery嘛

#35

准备暑假用一个月好好的学习一下js，再去找工作！

#36

太好了，期待下期

#37

引用 34 楼 fly_to_the_winds 的回复:

不是怀疑你，而是有些不是原创的东东让我看到了而已，我当然支持你了，呵呵，我也要学jQuery嘛

#38

#39

引用 38 楼 amani11 的回复:

LZ：

我需要用到解除事件绑定，onclick。就是网页上类似有用、没用的，我希望点击过后，至少刷新页面之前，点击不再激发事件了，

$('#div').bind('click'); 无效unbind()也没用，jq版本是1.32的

不好意思啊，我一下没看懂你的意思
要保证代码的正确首先要确认你的选择器是否选择好。
就是$('#div') 是否选择到你要的元素（节点）。

#40

#41

解除事件绑定 unbind([type],[data])

#42

自己顶一下。。。

#43

mark

#44

学习中。。。楼主辛苦了

#45

支持,讲得很清楚！

#46

楼主好人啊……呜呜

#47

该回复于2009-11-16 09:00:38被版主删除

#48

自己顶顶...
下一篇很快就会推出来.

#49

引用 32 楼 jenny0810 的回复:

引用 30 楼 wansijie 的回复:
引用 27 楼 jenny0810 的回复:
学习，但是有个问题点击方式三rad时候怎么不是预期的效果

不好意思,我这儿测试了,一切是正常的.
要不你把你的代码粘上来?? 我们一起分析一下?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww…

jquery.js <- 这个你肯定是JQuery的js文件吗?

#50

自己顶顶...好久没来了.