用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实现根据CSS的class选择DOM
Mar 22 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
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 autoload机制的详解
2013/06/09 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
smarty实现多级分类的方法
2014/12/05 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
css配合jquery美化 select
2013/11/29 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
简单谈谈JS中的正则表达式
2017/09/11 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
go和python变量赋值遇到的一个问题
2017/08/31 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
python不同系统中打开方法
2020/06/23 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
30岁生日感言
2014/01/25 职场文书
地球一小时倡议书
2014/04/15 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
第一节英语课开场白
2015/06/01 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python