用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 相关文章推荐
基于JQuery的日期联动实现代码
Feb 24 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
详解javascript事件冒泡
Jan 09 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 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
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
phpfpm的作用和用法
2019/10/10 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
python 判断网络连通的实现方法
2018/04/22 Python
Python中反射和描述器总结
2018/09/23 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python小白学习包管理器pip安装
2020/06/09 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
给女朋友道歉的话大全
2015/01/20 职场文书
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python