这套教程在我博客以及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来实现.
效果如下:
三种方式的界面上的排版在这儿不多说,我把三种排序单选框以及对应的可选子排序复选框的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"(不显示)
好,今天就到这儿吧.
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
