试着写一些实例.开始之前需要了解如何通过jQuery获取文档中的标签.在jQuery中,获取文档对象中的标签很简单.

1
2
3
4

$("p")   //获取p标签
$(".nav")   //获取class为nav的对象
$("#footer")   //获取id为footer的对象
$(".order tr")   //获取class为order的table中所有tr标签

在获取标签之后,比较常用的是增加鼠标点击事件(click)、鼠标移入事件(mouseover)、鼠标移出事件(mouseout)、添加类事件(addClass)、删除类事件(removeClass)等.

尝试写几个简单的实例:

1:我希望鼠标点击P标签内的文字时弹出提示信息.

2:我希望在鼠标点击p标签后.赋予它一个class.将文字变成白色,背景为黑色.

3:我希望鼠标移入P标签时.增加class将文字显示成红色.鼠标移出时删除class还原文字颜色.

所有实例在点击运行弹出新页面后.需要刷新一次.才能加载jQuery.

因为之前多次在项目中应用了jQuery库,所以对jQuery的应用表现出越来越浓厚的兴趣.但之前都是建立在套用别人代码的基础之上,所以那毕竟是别人的东西.对个人来说并无本质上的提升.现在打算静下心来,认真学习jQuery的丰富的内置函数.为将来自己独立编写属于自己的WEB前端应用打基础.

在学习jQuery之前,有必要了解什么是文档对象模型(DOM).简单的讲:文档对象模型是 HTML 和 XML 文档的一个应用程序接口 (API) .它提供了一种结构化的文档表示方式,从而使你可以修改它的内容以及最终的表达方式.总而言之,它把网页和脚本或编程语言连接了起来.

在我的理解中.文档对象模型是将曾经杂乱无章的WEB页面构建成一种富有结构化.层次化的模型结构.在传统的Table布局中,很难用单纯的Table标签来让JS或者编程语言准确的寻找到合适的节点.那么在推行WEB标准的年代,我们前端开发编写出的代码具有更强的结构性和语义化.比如导航通常就是<div id=”MainNav”></div>,正文主体部分是<div id=”Content”></div>,边栏通常是<div id=”Sidebar”></div>等等.

1
2
3
4
5

<div id="Header"></div>   /* 页眉 */
<div id="MainNav"></div>   /* 导航菜单 */
<div id="Content"></div>   /* 页面主体部分 */
<div id="Sidebar"></div>   /* 侧边栏 */
<div id="Footer"></div>   /* 页脚 */

在页面中,虽然class类是可以重复出现多次,但id是唯一的.在清晰的文档结构之下,通过JS来遍历文档中的某一节点就变得可行并更加简便.

下面正式接触jQuery部分.

1:首先必须的操作就是在页面中调用jQuery库.在页面head部分中插入:

1

<script type="text/javascript" src="jquery-1.1.3"></script> /* 注意jQuery的路径 */

2:获取整个文档对象:

1
2

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

$(document)意思是说,获取整个网页文档对象(类似于window.document),$(document).ready意思就是说,获取文档对象就绪的时候.在以往的JS应用中,往往是用window.onload = function(){ … } 来获取网页文档对象.但onload函数的缺点是必须等页面中所有元素全部加载完成才可以.如果页面中包含一张很大的图片,在图片没有全部加载完前,JS就是失效的状态.而jQuery的ready(function)则完全避免了这种情况.使jQuery的使用效率更高.

 从MSN中文官网到现在的腾讯官网,以及越来越多的个人网站都开始提供无刷新切换CSS的功能.从用户体验来讲.这是非常不错的功能.假如网站默认是很艳丽的颜色,而我却偏爱黑色,那么我就可以设置成自己喜欢的网站界面配色.

核心代码如下：

1
2
3
4

<link rel="stylesheet" href="green.css" type="text/css" title="green" media="screen, projection"/>
<link rel="alternate stylesheet" href="red.css" type="text/css" title="red" media="screen, projection"/>  
<link rel="alternate stylesheet" href="yellow.css" type="text/css" title="yellow" media="screen, projection"/>
<SCRIPT src="styleswitcher.js" type=text/javascript></SCRIPT>

Read the rest of this entry »

sz-ican

这是一个深圳朋友介绍的私单.该公司主要生产高档橱柜和门拉手等锌铝合金制品.由于是进出口贸易.所以面向的客户绝大部分来自国外.

在设计之初考虑到国外用户的审美习惯.所以放弃了走传统中文企业网站的设计思路.尽可能的追求简洁和易用性.网站多处使用了jquery的JS框架.实现了简单的平滑滚动产品展示效果.大量的PNG图片使用,考虑到IE6的兼容性问题,也通过JS来实现IE6下的PNG图片透明.

URL:     www.sz-ican.com

我想我应该记录点什么.在无聊的工作之余.

太多的时间浪费在聊天和毫无意义的事情之上.我的CSS,我的PHP,我的AJAX都还停留在原地未曾进步.

技术并不应该被当作是我一生的追求.我也曾试图转型做个体户去学经商.

但最终对技术的痴迷让我又回到了原地.

这里将被当成是我的学习笔记.偶尔也会像以前那样胡乱的码些文字.

不管怎样.我希望随着博客一天天的充实.也伴随着我能力的一步步提升.直到我觉得自己该去做些什么的时候….