用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 ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
angular实现form验证实例代码
Jan 17 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
Vue基于NUXT的SSR详解
Oct 24 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
在小程序中推送模板消息的实现方法
Jul 22 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 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
单位速度在实战中的运用
2020/03/04 星际争霸
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
php实现微信发红包
2015/12/05 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
python模仿网页版微信发送消息功能
2018/02/24 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
总经理司机岗位职责
2014/02/06 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
成绩单家长意见
2015/06/03 职场文书
事业单位岗位说明书
2015/10/08 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
深入理解go缓存库freecache的使用
2022/02/15 Golang