用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实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
javascript实现放大镜功能
Dec 09 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正确配置mysql(apache环境)
2011/08/28 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
JavaScript小技巧 2.5 则
2010/09/12 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
python名片管理系统开发
2020/06/18 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
给校长的建议书500字
2014/05/15 职场文书
支部书记四风对照材料
2014/08/28 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
纪律委员竞选稿
2015/11/19 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
大学军训心得体会800字
2016/01/11 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书