用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的面向对象(一)
Nov 09 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
canvas绘制七巧板
Feb 03 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 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
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
Python中文竖排显示的方法
2015/07/28 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
python程序需要编译吗
2020/06/19 Python
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
个人作风剖析材料
2014/02/02 职场文书
大学校运会广播稿
2014/02/03 职场文书
终止劳动合同协议书
2014/04/14 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
买卖合同协议书范本
2014/10/18 职场文书
二胎满月酒致辞
2015/07/29 职场文书
礼貌问候语大全
2015/11/10 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书