用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 相关文章推荐
Javascript中Eval函数的使用
Mar 23 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
JS实现一个简单的日历
Feb 22 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
JavaScript中CreateTextFile函数
Aug 30 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/11/16 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
护理专业大学生自我推荐信
2014/01/25 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
考博导师推荐信范文
2015/03/27 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL