文档章节

jQuery 练习[一]: 准备工作

涂孟超
 涂孟超
发布于 2014/09/26 15:34
字数 638
阅读 15
收藏 0

初次尝试 jQuery, 近乎震撼! 简洁、高效、优雅、平易, 太有思想了.

使用 jQuery 写 JavaScript 脚本就像是用 Delphi 写 Windows 程序一样, 它不是更强大, 只是更易用.

计划先全面浏览、测试一遍 jQuery 的语法, 同时洞察其逻辑与思想; 最后尝试在 Delphi 中使用 jQuery, 估计要比使用 MSHTML.pas 方便得多.

官方站点: http://jquery.com/
中文文档: http://jquery-api-zh-cn.googlecode.com/
下载地址: http://docs.jquery.com/Downloading_jQuery

jQuery 库就是一个 js 文件, 有不同规格的版本:
要查看源码应该用: 标准版(如: jquery-1.4.2.js)
实际应用应该使用: min 版(如: jquery-1.4.2.min.js);
在 VS 编辑时可以使用有代码提示的 vsdoc 版本, 不过暂能找到的 vsdoc 最新版本是 1.4.1 的, 也可以.

使用前应先在页面中调用; 测试页:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
...
</body>
</html>

<script type="text/javascript">
    $(function() {
        alert("Hello jQuery");
    });
</script>

应该把 jQuery 代码写在哪呢? 这和普通的 JavaScript 没有区别, 如下面代码:
<!doctype html>
<html>
<head>
<script type="text/javascript">
    function myLoad() {
        alert("Hello");
    }
    window.onload = myLoad;
</script>
</head>
<body>
...
</body>
</html>

用 jQuery 的方式, 上面代码可以改为:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        alert("Hello");
    });
</script>
</head>
<body>
...
</body>
</html>

简写方式:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
    // 完整的写法
    jQuery(document).ready(function() { alert("Hello"); });

    //jQuery 可简写为 $
    $(document).ready(function() { alert("Hello"); });

    //$(document) 可以简写为 $()
    $().ready(function() { alert("Hello"); });

    //$(document).ready() 也可以简写为 $()
    $(function() { alert("Hello"); });
</script>
</head>
<body>
...
</body>
</html>

$(document) 是 jQuery 的对象, 类似又不同于 window.document;
jQuery 有着自己的一套体系(对象、方法、事件等).
$(document).ready() 类似又不同于(早于) window.onload(), 且前者可重复使用:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
    $(function() { alert("Hello jQuery 1") });
    window.onload = function() { alert("Hello JavaScript 1") }; // 这会被覆盖
    window.onload = function() { alert("Hello JavaScript 2") };
    $(function() { alert("Hello jQuery 2") });
</script>
</head>
<body>
...
</body>
</html>

window.onload() 发生在页面载入完成时,
$(document).ready() 发生在页面主体框架载入完成时(或许某个图片还没下载完);
当需要这个时机时, 我更喜欢把代码放在页尾:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
    window.onload = function() { alert("Hello 4") };
    $(function() { alert("Hello 3") });
</script>
</head>
<body>

页面内容

<script>
    alert("Hello 1");
</script>
</body>
</html>
<script>
    function fun() { alert("Hello 2") };
    fun();
</script>



用什么工具呢? 听说有很多, 我觉得 VS 就不错, 还有代码提示, 就是太慢了, 不如自己写一个:
http://files.cnblogs.com/del/JavaScriptTest2.rar

工具界面:



本文转载自:http://www.cnblogs.com/del/archive/2010/05/27/1745118.html

共有 人打赏支持
涂孟超
粉丝 12
博文 2011
码字总数 14107
作品 0
深圳
程序员
jQuery学习笔记180924

jQuery - AJAX 简介 什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示...

颖伙虫
09/24
0
0
前端(jQuery样式操作、特殊效果、动画......)

1、jQuery选择器 2、选择器转移 prev()是同级的上一个元素,prevAll()是同级的上面所有的元素 next()是同级的下一个元素,nextAll()是同级的下面所有的元素 3、样式操作 <...

埃菲尔上的铁塔梦i
08/27
0
0
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu
06/18
0
0
Web前端开发必备:《Jquery实战》第3版 介绍

目标读者 本书适合想深入学习jQuery的Web开发人员、全栈工程师、架构师。jQuery是互联网上最流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了...

frankxulei
06/26
0
0
jQuery基础与JavaScript与CSS交互-第五章

目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Flex 什么是框架? 框架是程序员将一个又...

达叔小生
08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

五大云原生技术

云原生(Cloud-Native)是一种文化,更是一种潮流,它是云计算的一个必然导向,是让云成为云化战略成功的基石。云计算时代,云原生技术注定将对现代化应用的建设、交付与运维产生颠覆性的影响...

问题终结者
23分钟前
3
0
Android JNI开发系列(十二) JNI局部引用、全局引用和弱全局引用

JNI 局部引用、全局引用和弱全局引用 在JNI规范中定义了三种引用:局部引用(Local Reference)、全局引用(Global Reference)、弱全局引用(Weak Global Reference)。区别如下: 局部引用...

蔡小鹏
24分钟前
2
0
Android 实现类似考试座号表效果

类似于这种效果 1,新建一个Student类,用户添加学生信息 private int icon; private String name; private int age; private String sex ; private int id; publ...

lanyu96
30分钟前
1
0
聊聊storm的CustomStreamGrouping

序 本文主要研究一下storm的CustomStreamGrouping CustomStreamGrouping storm-2.0.0/storm-client/src/jvm/org/apache/storm/grouping/CustomStreamGrouping.java public interface CustomS......

go4it
39分钟前
2
0
编程中的各种闲谈

service 是否一定要定义 interface 在学习ssh(spring, struts2, hibernate)时,老师教在 service 层要定义接口,再去实现此接口,方便解耦。 在 spring 框架中,自身定义了很多接口,并且有不...

seal_90
40分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部