用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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
浅谈document.write()输出样式
May 07 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 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
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
Python中super的用法实例
2015/05/28 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python里 super类的工作原理详解
2019/06/19 Python
Python3实现二叉树的最大深度
2019/09/30 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
数控技术专业推荐信
2013/11/01 职场文书
高三语文教学反思
2014/01/15 职场文书
预备党员承诺书
2014/03/25 职场文书
农村党员一句话承诺
2014/05/30 职场文书
求职自我推荐信
2014/06/25 职场文书
村班子对照检查材料
2014/08/18 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书