Web开发技术——JQuery2(事件)

jQuery 事件函数

jQuery 是为事件处理特别设计的。

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。

通常会把 jQuery 代码放到 <head>部分的事件处理方法中:

实例
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () { $("button").click(function () { $("p").hide(); }); });
    </script>
</head>
    <body>
        <h2>This is a heading</h2>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
        <button>Click me</button>
    </body>
</html>

在上面的例子中,当按钮的点击事件被触发时会调用一个函数:

$("button").click(function() {..some code... } )

该方法隐藏所有 <p> 元素:

$("p").hide();

单独文件中的函数

如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。

当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):

实例
<head><script type="text/javascript" src="jquery.js">
</script>
    <script type="text/javascript" src="my_jquery_functions.js">
</script>
</head>

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

结论

由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:

· 把所有 jQuery 代码置于事件处理函数中

· 把所有事件处理函数置于文档就绪事件处理器中

· 把 jQuery 代码置于单独的 .js 文件中

· 如果存在名称冲突,则重命名 jQuery 库

jQuery 事件

下面是 jQuery 中事件方法的一些例子:


Event 函数


绑定函数至


$(document).ready(function)


将函数绑定到文档的就绪事件(当文档完成加载时)


$(selector).click(function)


触发或将函数绑定到被选元素的点击事件


$(selector).dblclick(function)


触发或将函数绑定到被选元素的双击事件


$(selector).focus(function)


触发或将函数绑定到被选元素的获得焦点事件


$(selector).mouseover(function)


触发或将函数绑定到被选元素的鼠标悬停事件

时间: 2024-08-02 18:38:48

Web开发技术——JQuery2(事件)的相关文章

Web开发技术&mdash;&mdash;JQuery2(语法和选择器)

通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素. $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素. $("p").hide() 演示 jQuery hide() 函数,隐藏所有 <

Web开发技术发展历史

Web开发技术发展历史 来自:天码营 原文:http://www.tianmaying.com/tutorial/web-history Web的诞生 提到Web,不得不提一个词就是"互联网".Web是World Wide Web的简称,中文译为万维网."万维网"和我们经常说的"互联网"是两个联系极其紧密但却不尽相同的概念.今天"互联网"三个字已经承载了太多的内涵,提到互联网,我们通常想到的一种战略思维,或者是一种颠覆传统的商

转Web开发的发展史---Web开发技术的演变

转自:http://blog.csdn.net/zzzkk2009/article/details/9849431 在接下来的几个月时间里,我打算写一系列关于完整web开发的文章.这第一篇文章虽然有所粗略,但也能够充分概括了在之前15年或者更久的时间里web应用程序如何进行演变.并且最后我会囊括下这段时间内所写的相关技术. 在过去的美好日子里,我们使用的是简单的web页面(包括动态gif图片!).作为精美设计的典范,苹果有着这样的一个网站: 在那时,Web开发还比较简单,开发者经常会去操作web

谷歌 Web 开发技术变迁史与踩坑史

文章的作者 CJ 是 Google 八年的资深工程师,现回国创办了在线协作文档「一起写」,这篇文章也是他与 geek 范的同事们在「一起写」协作完成的.点击 NEXT 产品集「Google 开源项目」,完整查看文中提到的技术与开源项目. 过去十几年来, Web 开发技术从最初的纯 HTML 到 CGI.PHP / JSP / ASP.Ajax.Rails.Node.js,已经发展到了一个非常成熟的阶段.去年的 Google I/O,谷歌开发者中心推出了关于 Web 开发的最佳实践手册:而今年的

《Tomcat与Java Web开发技术详解》思维导图

越想构建上层建筑,就越觉得底层基础很重要.补课系列. 书是良心书,就是太基础了,正适合补课. [纯文字版] Tomcat与Java Web开发技术详解 Servlet Servlet的生命周期 初始化 1Servlet容器加载Servlet类 2Servlet容器创建ServletConfig,初始化配置信息 3Servlet容器创建Servlet对象 4Servlet容器调用Servlet对象的init(ServletConfig) 时机:首次被请求或配置了<load-on-startup>

ASP.NET Web开发技术的深入总结

[IT168技术]在国内.Net开发这个环境里, 中小型公司.或者大公司但主营业务不是软件开发里面的软件小团队.针对.Net开发者的要求都是十项全能型的全才, 能做的了从前台页面展现到最后数据存储的全套开发流程,甚至有些还须要程序公布,打包部署等知识, 以及还有其它方面的要求, 这个不说那么多. 招人难: 在招人的时候.我们碰到的大部分都是有多年工作经验,懂的东西也一大堆.也许有些懂的东西也没多少.问起基础性的概念问题,原理问题,大都没法准确的回答出来, 为何会出现这样的情况? 这个时候我们那么

WEB开发技术框架利器之一 -- Spring MVC

A.介绍: Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请求-响应模型,框架的目的就是帮助我们简化开发,Spring Web MVC也是要简化我们日常Web开发的. Spring Web MVC也是服务到工作者模式的实现,但进行可优化.前端控制器是DispatcherServlet:应用控制器其实拆为处理器映射器(Handler Mapping)进行处理

Web开发技术的演变

1. 静态页面时代 大学时候,上机还得换卡穿拖鞋,Novell的网络是很神奇的,然而更神奇的是通讯原理老师半神秘的讲他上 Internet,“Cernet(教育网)有条64K的出口,半年前还很快,现在已经比较卡了”.就这样,我们用Netscape指向Yahoo.那是一个HTML加图片的世界,充斥着各种花哨闪耀的字体和鞠躬的小人,蓝色连接点击后会奇幻的变色. 我们开始用不熟练的HTML和简陋的设计来设计网页,并且知道这边有个浏览器,那边有个叫WebServer的东西,但管理Sun工作站的机房老师总

[转载].NET Web开发技术(补充)

大家在工作应该养成善于总结的习惯,总结你所学习.使用的技术,总结你所工作事项的比较好的地方,善于总结不断的沉淀优化自己.适时停下来总结下过去走过的路,才能让我们的未来走的更坚定.文章转自JamesLi,没有全部转载,简单摘录,文章如下: 因为马云说了,今天很残酷,明天很美好,很多人都会跌倒在迎接明天的路上.朋友,请坚持,再坚持.无论你是否可以得到一个笑到最后的光环,这不重要的,真的,重要的是你的家人因为有了你的努力,你的付出,他们可以高兴,可以快乐,可以无忧虑的生活着. 1.经过多年积累的通用类