用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 相关文章推荐
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
Javascript动画效果(3)
Oct 11 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 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 APC缓存配置、使用详解
2014/03/06 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python自定义类并使用的方法
2015/05/07 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
药学专业毕业生求职信
2013/10/20 职场文书
数据员岗位职责
2013/11/19 职场文书
环保公益广告语
2014/03/13 职场文书
2014年清明节寄语
2014/04/03 职场文书
电钳工人个人求职信
2014/05/10 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
群众路线表态发言材料
2014/10/17 职场文书
好好学习保证书
2015/02/26 职场文书
清洁工个人工作总结
2015/03/05 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android