用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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
原生js实现验证码功能
Mar 16 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
vue实现节点增删改功能
Sep 26 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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学习之整理字符串
2011/04/17 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
详解Django的CSRF认证实现
2018/10/09 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
.net面试题
2016/09/17 面试题
毕业生的求职信范文分享
2013/12/04 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
户籍证明格式
2014/09/15 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
人才市场接收函
2015/01/30 职场文书
公司介绍信范文
2015/01/31 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2016年公司新年寄语
2015/08/17 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
SQL Server中锁的用法
2022/05/20 SQL Server