用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 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
js动态引入的四种方法
May 05 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
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将向Java靠拢
2006/10/09 PHP
php 删除记录实现代码
2009/03/12 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
js树形控件脚本代码
2008/07/24 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
python实现对输入的密文加密
2019/03/20 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python实现处理mysql结果输出方式
2020/04/09 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
项目建议书模板
2014/05/12 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
基于Python实现nc批量转tif格式
2022/08/14 Python