JQuery笔记(-)-前言

来源：互联网发布：股指期货数据接口编辑：程序博客网时间：2024/04/29 03:39

坦率的说，我本人并不擅长客户端的编程。只是在从事程序员行业的初期做过一些前端的编码工作，而后大部分时间都是在做后端编码。很长时间里，我也并不太重视前端的模块。我认为只要后端模块足够健壮、灵活就足够了。但是由于最近我立志于向架构师的方向发展，所以渐渐的习惯于从整体来观察和把握整个项目。我发现其实前端模块和后端模块同样重要，甚至从某种意义上来说，前端模块对整个项目的成败起着决定性的作用。其实这里可以打个比喻：如果整个项目比做一个人的话，后端项目就可以看作是一个人的内脏和血肉；前端模块可以看成是一个人的外貌。其实我们的客户也都是往往“以貌取人”的，如果发现用户体验非常的舒适，那么打动用户的可能性就会大大增加。可以说，前端模块是项目成功的基础，后端项目是项目成功的保障。

基于此种认识，我也慢慢开始有意识的接触前端具体说就是UI层面的开发。在我不多的UI开发经验里，我发现当前UI层的开发存在以下几个缺点

代码组织松散（相对于java，javascript的组织结构相对松散）
代码重复率高（某些代码，比如dom节点的操作具有相当程度的重复率）
页面布局代码和展现代码耦合紧密（简单来说，就是样式代码在html布局代码中随处可见）
需要考虑多种容器（比如同样的代码在IE、FireFox下的表现会截然不同）
很多时候html代码中嵌入了脚本代码，使可读性大幅下降

以上几种导致了UI层开发效率低下，到了后期，可读性直线下降，使得维护成本直线上升。那么，到底有没有办法可以解决以上问题或者缓解以上问题给项目带来的负面影响呢？带着这个问题，我去网络上寻找答案。我发现有一些javascript的类库可以满足我们的全部或者部分要求。这些javascript类库以dojo和JQuery为代表。

在此，我想就JQuery写写我的学习心得，供大家讨论。

首先，先写一个Hello World的例子，大家先有个印象：

<html>
    <head>
          <script type="text/javascript" src="jquery-1.3.1.js"></script>
        <script type="text/javascript">
                $(document).ready(function(){
                    alert("Hello World");
                })
        </script>
    </head>
</html>

如上，非常简单的代码，页面加载完成后，弹出对话框“Hello World”

$(document).ready(function(){})表示在页面的dom树加载完毕回调某个函数

JQuery有两种加载事件可以注册，第一种为ready,第二种为load，ready表示DOM树加载完毕，load则与我们传统的onLoad事件相同，要等页面所有资源（图片等）加载完毕才被触发。

$符号是JQuery用来标识JQuery变量的符号

比如 $("div#test")即表示页面中id为“test”的div标签

JQuery提供了方便的途径可以将JQuery变量转为javascript变量，或进行逆向操作

例如 var test = $("div#test")[0] 这里 test就表示页面中id为“test”的div标签

$(test) 则将javascript变量转换为JQuery变量

好了，这里里例子的形式简单介绍了JQuery,下面会详细介绍页面开发会用到的一些JQuery的功能