用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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 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
数据库相关问题
2006/10/09 PHP
VFP与其他应用程序的集成
2006/10/09 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
python魔法方法-属性访问控制详解
2016/07/25 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
如何在python中写hive脚本
2019/11/08 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
财务管理专业推荐信
2013/11/19 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
求职个人评价范文
2014/04/09 职场文书
财务人员岗位职责
2015/02/03 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
党支部鉴定意见
2015/06/02 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python