用jQuery简化JavaScript开发分析

2016-02-19 16:04 5 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享用jQuery简化JavaScript开发分析,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

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类。
代码如下:
htmlhead
titleTest/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
h1Test/h1
test
h1Test2/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 + "rn本篇文章

来源:http://www.tulaoshi.com/n/20160219/1610993.html

延伸阅读
标签: Web开发
简化后的插件: SimplePlugin.htm: 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head title简化后的插件/title script type="text/ecmascript" src="../js/jquery-1.2.6.js"/script script ty...
标签: Web开发
今天重点一个toggle(fn,fn,….)函数,主要是用来切换某个事件的轮换操作。 比如:对一个按钮的点击事件和一个DIV的背景,点击一次按钮,将DIV的背景显示为蓝色,点击第二次的时候要将DIV的 背景色改为黑色。 我们定义的HTML代码如下: body input type="button" id="btnShow" value="Toggle"/ div id="DivToggle"此处显示 id "DivToggle" ...
标签: Web开发
jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 type (String) : ...
标签: Web开发
1. 保持无侵入性,标记不想知道你的JavaScript代码;2. 严禁修改和扩展Object.prototype!;3. 对JavaScript内建对象的扩展越少越好;4. 跟随标准;5. 或着跟随主导 ;6. 保持灵活;7. 管理内存;8. 淘汰浏览器嗅探;9. 小巧更佳 1. 保持无侵入性 我的HTML标记不想知道你的JavaScript代码。 2. 严禁修改和扩展Object.prototype! 这条...
标签: Web开发
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 fn 是什么东西呢。查看jQuery代码,就不难发现。 代码如下: jQuery.fn = jQuery.prototype = { init: function(...

经验教程

256

收藏

84
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部