- 浏览: 75710 次
- 性别:
- 来自: 济南
最新评论
-
疯狂的草儿:
刚开始读这篇文章 我以为lz 招了个美女呢 呵呵
踏实与成功 -
binoruv:
bucuo
学习jQuery笔记(三)包装集 -
jy00314996:
若是人间 写道刚开始学接触PV3D,跟你学习学习,呵呵,交个朋 ...
Papervision3D(PV3D)笔记&教程(1)-四个基础元素 -
若是人间:
刚开始学接触PV3D,跟你学习学习,呵呵,交个朋友哈
Papervision3D(PV3D)笔记&教程(1)-四个基础元素 -
jy00314996:
martri 写道呵呵,不错,谢谢!
谢谢~~~一起进步!
Freemarker网站静态化的实现
首先什么是jQuery?
jQuery是一套Javascript脚本库. Javascript脚本库类似于.jar的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户使用.
注意jQuery是脚本库, 而不是脚本框架. "库"不等于"框架", 比如"System程序集"是类库,而"Struts MVC"是框架. jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事.
脚本库能够帮助我们完成编码逻辑,实现业务功能. 使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮. 同时网络上丰富的jQuery插件也让我们的工作变成了"有了jQuery,天天喝茶水"--因为我们已经站在巨人的肩膀上了.
jQuery有如下特点:
1.提供了强大的功能函数
使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁.
2.解决浏览器兼容性问题
javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦, 常常一个页面在IE7,Firefox下运行正常, 在IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情. 有了jQuery我们将从这个噩梦中醒来, 比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的, 从前要根据event获取事件触发者, 在ie下是event.srcElements 而ff等标准浏览器下下是event.target. jQuery则通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象.
3.实现丰富的UI
jQuery可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变效果为例, 从前我自己写了一个可以兼容ie和ff的渐变动画, 使用大量javascript代码实现, 费心费力不说, 写完后没有太多帮助过一段时间就忘记了. 再开发类似的功能还要再次费心费力. 如今使用jQuery就可以帮助我们快速完成此类应用.
4.纠正错误的脚本知识
大部分开发人员对于javascript存在错误的认识. 比如在页面中编写加载时即执行的操作DOM的语句, 在HTML元素或者document对象上直接添加"onclick"属性, 不知道onclick其实是一个匿名函数等等. 拥有这些错误脚本知识的技术人员也能完成所有的开发工作, 但是这样的程序是不健壮的. 比如"在页面中编写加载时即执行的操作DOM的语句", 当页面代码很小用户加载很快时没有问题, 当页面加载稍慢时就会出现浏览器"终止操作"的错误.jQuery提供了很多简便的方法帮助我们解决这些问题, 一旦使用jQuery你就将纠正这些错误的知识--因为我们都是用标准的正确的jQuery脚本编写方法!
5.太多了! 等待我们一一去发现.
...........
开始 Hello World jQuery
按照惯例, 我们来编写jQuery的Hello World程序, 来迈出使用jQuery的第一步.
在本文最后可以下本章的完整源代码.
1.下载jQuery类库
jQuery的项目下载放在了Google Code上, 下载地址:
http://code.google.com/p/jqueryjs/downloads/list
上面的地址是总下载列表, 里面有很多版本和类型的jQuery库, 主要分为如下几类:
min: 压缩后的jQuery类库, 在正式环境上使用.如:jquery-1.3.2.min.js
vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如:jquery-1.3.2-vsdoc2.js
release包: 里面有没有压缩的jquery代码, 以及文档和示例程序. 如:jquery-1.3.2-release.zip
2.编写程序
创建一个HTML页面, 引入jQuery类库并且编写如下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello World jQuery!</title> <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script> </head> <body> <div id="divMsg">Hello World!</div> <input id="btnShow" type="button" value="显示" /> <input id="btnHide" type="button" value="隐藏" /><br /> <input id="btnChange" type="button" value="修改内容为 Hello World, too!" /> <script type="text/javascript" > $("#btnShow").bind("click", function(event) { $("#divMsg").show(); }); $("#btnHide").bind("click", function(event) { $("#divMsg").hide(); }); $("#btnChange").bind("click", function(event) { $("#divMsg").html("Hello World, too!"); }); </script> </body> </html>
效果如下:
页面上有三个按钮, 分别用来控制Hello World的显示,隐藏和修改其内容.
此示例使用了:
(1) jQuery的Id选择器: $("#btnShow")
(2) 事件绑定函数 bind()
(3) 显示和隐藏函数. show()和hide()
(4) 修改元素内部html的函数html()
在接下来的学习中我们将深入这些内容.
总结
这里简单介绍了jQuery. 示例程序没有复杂的功能, 可能还无法让没有接触过jQuery的人认识到它的强大.但是仅凭借"多浏览器支持"这一特性, 就足以让我们学习并使用jQuery, 因为如今想编写跨浏览器的脚本真的是一件困难的事情!
在后续文章中我们将深入学习jQuery选择器, 事件, 工具函数, 动画, 以及插件等.
本文实例源码下载
- Code-jQueryStudy-1.rar (133 KB)
- 下载次数: 26
发表评论
-
使用JQuery+Struts1.3实现JSON的post传递
2009-02-20 15:28 816json格式的数据传递已经红遍全球,JQuery的 ... -
学习jQuery笔记(十)jQuery表单验证与自动完成提示插件
2009-07-01 09:20 3581一.摘要 本文是介绍两个最常用的jQuery插件. 分别用于 ... -
学习jQuery笔记(九)jQueryUI常用功能实战
2009-06-26 15:11 1537一.摘要 本文是实战篇. 使用jQueryUI完成制作网站的 ... -
学习jQuery笔记(八)jQuery工具函数
2009-06-26 10:10 981一.摘要 我们经常要使用脚本处理各种业务逻辑, 最常见的就是 ... -
学习jQuery笔记(七)jQuery动画-让页面动起来!
2009-06-25 14:46 1733一.摘要 本系列文章将 ... -
学习jQuery笔记(六)jQuery中的Ajax
2009-06-25 14:36 1531一.摘要 本篇文章讲解如何使用jQuery方便快捷的实现Aj ... -
学习jQuery笔记(五)事件与事件对象
2009-06-24 15:01 1153一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuer ... -
学习jQuery笔记(四)操作元素的属性与样式
2009-06-24 14:28 1550一.摘要 本篇文章讲解 ... -
学习jQuery笔记(三)包装集
2009-06-23 17:34 1073一.摘要 在使用jQuery选择器获取到jQuery包装集后 ... -
学习jQuery笔记(二)选择器
2009-06-23 15:22 1162一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有 ... -
学习jQuery笔记 前篇 开发环境配置
2009-06-23 14:34 951一.摘要 本系列文章将带您进入jQuery的精彩世界 ... -
jQuery日常使用技巧总结
2009-06-19 14:40 8081、关于页面元素的引用 ... -
jQuery使用JSON的例子
2009-06-12 15:53 11481、在HTML中,有这样一个表单: <form met ... -
用JQuery解析Json
2009-06-12 15:36 1963JSON的数据格式现在挺热门的!这里不解释了。主要讲下Jque ... -
jQuery的动态效果效果演示
2009-06-12 15:24 1222Jquery做动态效果,可以使用animate函数, ... -
jquery 插件corner实现圆角边框
2009-06-12 15:11 1381<!DOCTYPE html PUBLIC &qu ... -
各种效果的jquery ui(接口)介绍
2009-06-11 10:21 1561基本的鼠标互动: 拖拽(drag and dropping) ... -
在jQuery中利用AJAX加载XML数据并解析
2009-06-11 10:03 8221,Content-Type很多时候无法解析就是Con ... -
jQuery & CSS制作折页效果
2009-06-09 13:21 2011不多说先看效果图 demo地址:http://www.s ... -
网页设计趋势:Out Of The Box
2009-06-04 16:39 752这是一个创造性的流行趋势。 这很简单了,但增加了一个额外的要素 ...
相关推荐
**jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分,旨在帮助开发者从初级到高级...
jQuery笔记(上)涵盖了jQuery的基本用法,包括引入jQuery库、选择器的使用、事件监听与处理,以及简单的动态效果实现。这些基础知识为后续深入学习jQuery提供了坚实的基础。通过学习和实践,开发者可以更加高效地...
3. **jQuery学习笔记**:JQuery学习笔记.doc包含了作者在学习过程中的心得和实践案例,是理论与实际相结合的学习材料,有助于加深理解和记忆。 4. **jQuery技巧大放送**:jQuery技巧大放送.doc收录了一系列实用的...
最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下; 一、JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察。 不使用...
对于希望入门或加深对jQuery控制页面实现理解的读者来说,本篇笔记提供了丰富且详细的参考资料。需要注意的是,代码示例应当与实际的学习目标和项目需求相结合,在编写具体实现时加以灵活运用。
### XMPP学习入门笔记知识点详解 #### 一、XMPP简介 XMPP(Extensible Messaging and Presence Protocol)是一种基于XML的即时通讯协议。它最初由Jabber发展而来,并于2004年成为国际标准(RFC 3920 和 RFC 3921)...
该教程不仅仅是一份学习笔记,而是希望能够系统地、深入浅出地教授JQuery的知识,并且尽量做到全面。大部分知识点来自图灵出版社出版的《JQuery实战》一书,这本书被推荐给读者作为深入学习的参考。 ##### 什么是...
《jQuery学习笔记——15天快速入门指南》 jQuery,作为一个强大的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。它以其简洁的API和高效的性能,成为了前端开发者的首选工具之一...
这篇"JavaScript入门新手学习笔记"提供了全面的学习资源,适合初学者系统性地掌握这一技术。 笔记可能包含了以下关键知识点: 1. **基础语法**:JS的基础包括变量(var、let、const)、数据类型(如字符串、数字、...
疯狂Jquery第一天的学习笔记主要涵盖了Jquery的入门知识,包括了Jquery的引用方式、链式操作的介绍和实际应用。下面是根据提供的内容,详细解释的一些知识点。 ### Jquery的引用 Jquery作为一个JavaScript库,其...
下面是一个简单的Bootstrap入门示例,展示如何在网页中引入Bootstrap,并输出一个简单的“Hello, world!”。 ```html <!DOCTYPE html> <title>Bootstrap示例 , initial-scale=1.0"> <!-- 引入Bootstrap的CSS...
标题《jQuery学习笔记之基础中的基础》表明本文是关于jQuery的入门指导,针对的是刚开始接触jQuery的初学者,旨在传授jQuery的核心概念和基础用法。内容围绕jQuery的核心功能和优势展开,通过实例操作和对比,介绍...
【描述】:“NULL”说明没有提供具体的笔记内容,但通常一个JavaScript入门笔记会逐步引导初学者理解JavaScript语言的基础,以便他们能够开始编写简单的网页脚本。 【标签】:“源码”、“工具” “源码”标签暗示...
### Web前端学习笔记知识点概述 #### 一、Web基础知识 ##### 1.1 Web与Internet - **Internet**: 是一个全球性的计算机互联网络,提供多种服务如Telnet、Email、WWW、BBS、FTP等。它基于分组交换原理及TCP/IP协议...
Javascript入门学习第一篇 js基础Javascript入门学习第二篇 js类型...js dom实例操作Javascript入门学习第八篇 js dom节点属性说明Javascript入门学习第九篇 Javascript DOM 总结jQuery基础教程笔记适合js新手
首先,MongoDB学习笔记(一)介绍了MongoDB的基本概念和安装过程。在这个阶段,读者会了解到MongoDB的特性,如它的JSON格式数据存储(BSON)和灵活性。安装部分包括在不同操作系统上下载、安装和启动MongoDB服务器的...
本篇PHP笔记涵盖了从基础到进阶的知识点,适合初学者和有一定基础的开发者参考学习。主要内容包括简单的“Hello World”示例、网页内容抓取技巧、编码转换方法、缓存逻辑设计、数据解析方式、Ajax与PHP之间的交互、...
在本篇【读书笔记: JavaWeb从入门到精通 第13章: Ajax 技术】中,我们将深入探讨Ajax(Asynchronous JavaScript and XML)技术,它是现代Web开发中不可或缺的一部分,用于实现页面的异步更新,提升用户体验。...