jQuery 练习[一] 学习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 的, 也可以.

PS:下面的运行代码，因为加入了jquery，运行后，刷新下，即可看到效果。

使用前应先在页面中调用; 测试页:

...

$(function() {
alert("Hello jQuery");
});

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

应该把 jQuery 代码写在哪呢? 这和普通的 JavaScript 没有区别, 如下面代码:

function myLoad() {
alert("Hello");
}
window.onload = myLoad;

...

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

用 jQuery 的方式, 上面代码可以改为:

$(document).ready(function() {
alert("Hello");
});

...

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

简写方式:

//完整的写法
jQuery(document).ready(function() { alert("Hello"); });
//jQuery 可简写为 $
$(document).ready(function() { alert("Hello"); });
//$(document) 可以简写为 $()
$().ready(function() { alert("Hello"); });
//$(document).ready() 也可以简写为 $()
$(function() { alert("Hello"); });

...

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

$(document) 是 jQuery 的对象, 类似又不同于 window.document;
jQuery 有着自己的一套体系(对象、方法、事件等).
$(document).ready() 类似又不同于(早于) window.onload(), 且前者可重复使用:

$(function() { alert("Hello jQuery 1") });
window.onload = function() { alert("Hello JavaScript 1") }; //这会被覆盖
window.onload = function() { alert("Hello JavaScript 2") };
$(function() { alert("Hello jQuery 2") });

...

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

window.onload() 发生在页面载入完成时,
$(document).ready() 发生在页面主体框架载入完成时(或许某个图片还没下载完);
当需要这个时机时, 我更喜欢把代码放在页尾:

window.onload = function() { alert("Hello 4") };
$(function() { alert("Hello 3") });

页面内容

alert("Hello 1");

function fun() { alert("Hello 2") };
fun();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

JavaScriptTest2.rar

赞 (0)

相关推荐

  • jQuery 获取对象 基本选择与层级

    jQuery 获取对象 基本选择与层级

    根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2") <div id="div1">AAA</div> <div id="div2">BBB</div> <div id="div3">CCC</div> 根据标签选择, 如: $("span") <div><span>AAA</sp

  • jQuery 练习[二] jquery 对象选择器(1)

    jQuery 练习[二] jquery 对象选择器(1)

    根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2") 复制代码 代码如下: <div id="div1">AAA</div> <div id="div2">BBB</div> <div id="div3">CCC</div> 根据标签选择, 如: $("span") 复制代码 代码如下: <div>

  • jQuery 获取对象 定位子对象

    选择中的特殊符号: # 指示 id . 指示 class * 全选 , 多选 空格 后代 > 子 ~ 兄弟 + 下一个 : 子(多功能) () 函数式的过滤与查找 获取 div 下的所有标题对象: $("div :header") 复制代码 代码如下: <body> <h3>AAA</h3> <p>BBB</p> <h4>CCC</h4> <div> <h3>DDD<

  • jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配

    指定元素中包含 id 属性的, 如: $("span[id]") 复制代码 代码如下: <span id="span1" name="S1">AAA</span><br/> <span id="span2" name="S2">BBB</span><br/> <span name="Sx3">CCC<

  • jQuery 练习[一] 学习jquery的准备工作

    jQuery 练习[一] 学习jquery的准备工作

    使用 jQuery 写 JavaScript 脚本就像是用 Delphi 写 Windows 程序一样, 它不是更强大, 只是更易用. 计划先全面浏览.测试一遍 jQuery 的语法, 同时洞察其逻辑与思想; 最后尝试在 Delphi 中使用 jQuery, 估计要比使用 MSHTML.pas 方便得多. 官方站点: http://jquery.com/中文文档: http://jquery-api-zh-cn.googlecode.com/下载地址: http://docs.jquery.co

  • 从零开始学习jQuery (五) jquery事件与事件对象

    从零开始学习jQuery (五) jquery事件与事件对象

    一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言 本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性.  大家反映要多列举示例. 我会在时间允许的情况下尽量多列举示例. 真正的投入生产使用的实例暂时还无法加入到文章中, 但是可能最后我会列举一些作品供大家借鉴. 另外本人水平有限, 因为我不是UI设计师. 文章可能有错误的地方, 希望大家帮忙指出, 一起学习一起进步. 在技术的世界里我们是没有

  • 从零开始学习jQuery (二) 万能的选择器

    从零开始学习jQuery (二) 万能的选择器

    一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 二.前言 编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含test的<a>元素", 完成这些工作只需要编写一个jQuery选择器字符串. 学习jQuery选择器是学习jQuery最重要的一步.

  • 轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

    轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

    一.EasyUI创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGrid),可以用在树形网格(TreeGrid)中.为了使用树形网格(TreeGrid),用户必须定义 'treeField' 属性,指明哪个字段作为树节点. 本文将向您展示如何使用树形网格(TreeGrid)组件设置一个文件夹浏览. 创建树形网格(TreeGrid) <table id="test" title

  • 深入学习jQuery Validate表单验证

    深入学习jQuery Validate表单验证

    本文实例介绍了jQuery Validate表单验证,主要是利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示,分享给大家供大家参考,具体内容如下 1.添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 2.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 3.详细代码如下: <html> <hea

  • 学习jquery之一

    <script src=/jslib/jquery/jquery-latest.pack.js></script>  <p height=100>1学习jquery</p> <span>val()可以取值;val(s)可以赋值</span><br/> <div><input type="text" id="mm" value="mm">&l

  • 查看源码的工具 学习jQuery源码不错的工具

    查看源码的工具 学习jQuery源码不错的工具

    使用jQuery还可以让我们从各大浏览器不兼容的噩梦中解脱出来,最新版的jQuery还增强的对HTML5的支持,使得我们更加应该使用它.但是jQuery的源码很长,有些地方的实现还很巧妙,使得我们仅仅会javascript也未必能很好的理解每个函数是怎么运行的.下面就让我分享我学习jQuery源码的时候使用的几个工具和应该了解的问题. 这个jquery源代码查看器,还不是很强大,只是能够简单的查看函数引用,但是不能返回. 我上这个网上下载下来了,准备改进一下,你们可以先下载来用一用,有什么意见和

  • 轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作（2）

    轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作（2）

    一.EasyUI树形网格动态加载 动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待.本教程将向您展示如何创建带有动态加载特性的树形网格(TreeGrid). 创建树形网格(TreeGrid) <table title="Products" class="easyui-treegrid" style="width:700px;height:300px" url="treegrid3_getdata.ph

  • 从零开始学习jQuery (一) 开天辟地入门篇

    从零开始学习jQuery (一) 开天辟地入门篇

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery. 转载请注明子秋出品!博客园首发! 二.前言 首先道个歉! "从零开始学习ASP.NET MVC"系列文章在即将介绍Filter时就没有更新了, 原因就是

  • jquery原理以及学习技巧介绍

    对于JQuery,想必大家都很熟悉.目前,很多web项目,在实施的过程中,考虑到各浏览器原生JS API的兼容性,大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发.JQuery上手简单,也很容易学,即使是刚接触JQuery的开发人员,借助JQuery手册,也很快能在项目中使用开发. 虽然JQuery相对简单,但要全面掌握,且快速灵活的使用它也并不那么容易,它提供了很多方法,包含了网页开发的各个知识面,所以要全面掌握这些知识点,个人认为还是需要对jquery有深入的理解,对这

随机推荐