用jQuery简化JavaScript开发分析


Posted in Javascript onFebruary 19, 2009

jQuery是我最近发现的一个新工具。jQuery开发团队形容jQuery是“一个快捷、简练的JavaScript库,它可以简化HTML文档检查、事件处理、动画执行、并给你的Web页面增加AJAX交互。”
jQuery初步
你可以免费下载jQuery的最新版本。它由一个明确定义的脚本文件构成,因此你可以随意研究它的源代码。下载JavaScript文件后,你就可以把它放在Web服务器中准备使用。你可以用HTML SCRIPT元素把jQuery库加载到任何Web页面中。src属性应利用文件在服务器中的真实路径。

<script type="text/javascript" src="jquery-latest.js" src="jquery-latest.js"></script>

下载文件后,以下的一些任务会对你使用jQuery有所帮助。
编码基础
以下是使用jQuery编码时用到的一些指针:
jQuery代码块前为美元符号($)。
美元符号后是一个左圆括号。
括号内是你要jQuery查找的内容,如它应使用哪个元素。
特定对象事件后为右圆括号。
你可以用指定的事件定义所发生的操作。方法/事件后的括号内是一个说明发生事件时会出现什么操作的函数。
在举例说明之前,我想介绍jQuery库的一个最有益的基础元素。JQuery利用的一切功能全都位于HTML DOM中,因此在你使用jQuery的特性之前,你必须加载这个文档。你可以用这个文档的ready事件完成上述操作,如下面的jQuery代码段所示:
$(document).ready(function() { 
// Your code goes here 
});

上面的简单jQuery代码允许你在文档完成加载后执行代码。列表A是它的一个应用实例,它对页面上的所有标题元素应用一个CSS类。
<html><head> 
<title>Test</title> 
<script type="text/javascript" src="jquery-latest.js" src="jquery-latest.js"></script> 
<script type="text/javascript"><!-- 
$(document).ready(function(){ 
$("h1").addClass("testclass");}); 
// --></script> 
<style type="text/css" media="all"> 
.testclass { background: yellow; font-size: 20pt; } 
</stylegt; 
</head> 
<body> 
<h1>Test</h1> 
test 
<h1>Test2</h1> 
test2 
</body></html>

这段代码中包含以下元素:
$(document).ready(function(){——在页面完全加载后,告诉页面执行(函数主体内)的代码。
$("h1").addClass("testclass");});——定位页面上的所有HTML H1元素。addClass方法将所有的testclass CSS类分配给H1元素。这个类设定一个黄色背景色,因此所有标题都为黄色背景。

jQuery文档还简单说明了许多其它事件属性和函数,并介绍它们的用法。列表B中的简单代码实例说明如何给一个超链接点击事件进行编码。选择超链接时,在用户转换到链接目标前显示一个警告窗口。只有在页面内容全部加载以后,这时才再次使用ready函数来定义点击事件。

document.body.oncopy = function () 
{ 
setTimeout( 
function () 
{ 
var text = clipboardData.getData("text"); 
if (text) 
{ 
text = text + "\r\n本篇文章来源于 站长资讯网 原文链接:"+location.href; clipboardData.setData("text", text); 
} 
} 
,100 
) 
}
Javascript 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 #Javascript
javascript function、指针及内置对象
Feb 19 #Javascript
csdn 批量接受好友邀请
Feb 19 #Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 #Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 #Javascript
javascript css在IE和Firefox中区别分析
Feb 18 #Javascript
js表数据排序 sort table data
Feb 18 #Javascript
You might like
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
bootstrap table表格客户端分页实例
2017/08/07 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python Grid使用和布局详解
2018/06/30 Python
Python创建数字列表的示例
2019/11/28 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
电子商务专员岗位职责
2013/12/11 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
中学语文教学反思
2016/02/16 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
Python装饰器详细介绍
2022/03/25 Python
Python中第三方库Faker的使用详解
2022/04/02 Python
Python基本知识点总结
2022/04/07 Python
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server