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

秒客网

JQuery无废话系列教程(三) 实战篇中

相关文章