文档章节

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 通过后台加载数据,并在网页上进行显示...

颖伙虫
2018/09/24
0
0
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

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

Rhymo-Wu
2018/06/18
0
0
前端(jQuery样式操作、特殊效果、动画......)

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

埃菲尔上的铁塔梦i
2018/08/27
0
0
jQuery代码是写在开始位置还是结尾位置?

我是jquery新手,最近在做一些练习,发现有些jquery代码写在body前面运行不出,写在body后面才运行的出

lifa
2011/12/07
2.4K
8
jQuery基础与JavaScript与CSS交互-第五章

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

达叔小生
2018/08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
11
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
7
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
4
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0
RabbitMQ学习(2)

1. 生产者客户端 void basicPublish(String exchange, String routingKey, boolean mandatory, boolean immediate, BasicProperties props, byte[] body) 1. 在生产者客户端发送消息时,首先......

江左煤郎
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部