jQuery简介、语法及事件处理

jQuery 是一个跨浏览器的免费开源 ">JavaScript 库。其核心设计思想是“写更少的代码,做更多的事情”(Write Less Do More)。jQuery 提供了一套易于使用的 API。这些 API 极大地简化了客户端(浏览器)编程过程中的许多方面,包括:

HTML DOM 的遍历与操作 浏览器事件处理 AJAX(Asynchronous JavaScript And XML)编程 特效(如动画效果)

在直接使用 JavaScropt+DHTML 的传统客户端编程方式下,开发人员不得不编写冗长的代码。并且,为了使这些代码能够兼容不同的浏览器,我们还得编写额外的代码来处理这些跨浏览器问题。jQuery 的设计目标正是在于简化客户端编程。让我们能够编写简练的代码,节约开发时间,而这些代码却一样可以功能强大,并且兼容多种浏览器。

获取 jQuery:开始使用 jQuery

jQuery 网站上提供了两种方式的发布文件。一种是内容经过压缩的文件;另一种是原始文件。前者文件中不包含代码注释以及代码运行过程中不需要的空白字符,它适合于生产环境(正式使用的环境)中使用,可以减少文件加载所需时间。后者文件中包含详细的代码注释,适合于开发和测试环境中使用。

jQuery 的下载地址:http://jquery.com/download/

下载 jQuery 之后,在相应的网页中通过 script 元素引用 jQuery 代码即可使用它。如清单 1 所示:

清单 1. 从本地站点引用 jQuery

<html><head><title>使用 jQuery</title><script src="../js/lib/jQuery/1.9.1/jQuery.js"></script></head><body></body></html>

我们还可以通过 Google、Microsoft 等公司提供的 CDN 服务直接获取 jQuery。其方法是在需要使用 jQuery 的网页中直接引用 CDN 服务的 URL。比如,使用 Google 的 CDN 的一个网页清单 2 所示:

清单 2. 从 CDN 引用 jQuery

<html><head><title>使用 jQuery</title><scriptsrc='//ajax.googleapis.com/ajax/libs/jQuery/1.9.1/jQuery.min.js'></script></head><body> </body></html>

Microsoft 提供的 CDN 的 URL 为: http://ajax.aspnetcdn.com/ajax/jQuery/jQuery-1.9.1.js

Hello World:jQuery 第一个实例

下面的例子中,我们使用 jQuery 实现在页面上显示当前时间的功能。

清单 3. Hello World

<html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><script src="../js/lib/jQuery/1.9.1/jQuery.js"></script><script>
function init
Page(){//jQuery 代码:调用 jQuery 的核心函数---$函数$("#message").html("Hello World, it is now:"+new Date().toLocaleString());}</script></head><body onload="initPage()"><span id="message"></span></body></html>

从上面例子(在线例子:http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=HelloWorld.htm)

的代码中我们可以看到, initPage 这个函数会在页面加载完毕后被调用。而该函数在执行后会在 ID 为 message 的 HTML 结点内添加表示客户端当前时间的字符串。您可以不必急着去理解上面代码的具体意思。下一节将介绍 jQuery 的语法。另外,这个例子中我们使用 body 元素的 onload 属性来绑定事件处理器(initPage)只是为了方便讨论。在本章的后面内容中会介绍 jQuery 中用于处理页面 load 事件绑定的简便 API。

时间: 2024-09-20 12:46:41

jQuery简介、语法及事件处理的相关文章

jQuery基础语法实例入门_jquery

本文实例讲述了jQuery基础语法.分享给大家供大家参考.具体分析如下: 此语法规则有两个部分组成:获取jQuery对象和对jQuery对象执行的操作. 复制代码 代码如下: $(selector).action() 下面就对以上语法规则进行详细的阐述: 1.$定义jQuery,将被选的DOM对象转换成jQuery对象. 2.selector是选择器,类似于CSS选择器. 3.action()是要对jQuery对象行的操作. 注: $是jQuery的简写.例如: 复制代码 代码如下: $("di

JQuery基础语法小结

 在日常开发中JQuery是我们使用最频繁的JS库.使用JQuery进行开发,你需要先了解JQuery的基本语法.下面是在学习JQuery时总结的一些简单语法.     1.$(document)将document对象转换为jquery   代码如下: $(document).ready(function(){ alert("hello world"); });   2.获取所有的超链接对象,并且增加onclick事件:其实在底层jquery对象获得的每个标签的数组,因此我们不需要进行

jquery连缀语法如何实现_jquery

我想熟悉javascript的没有不知道jquery的吧,作为首屈一指的javascript框架,他的许多特性都让人兴奋不已,其中不得不提的就是特有的连缀书写语法了,那他到底只怎么实现的呢,我们也来实现一个吧. 复制代码 代码如下: sx.$=function(id){ var t=(typeof(id)=="string"?document.getElementById(id):id); t.text=function(){ return this.innerText?this.in

jQuery使用手册之事件处理(7)

jQuery的事件处理,有方法:hover(Function, Function) 当鼠标move over时触发第一个function,当鼠标move out时触发第二个function 样式: <style>.red{color:#FF0000}</style> Html代码: <div id="a">sdf</div> jQuery代码及效果 $(function(){   $("#a").hover(funct

JQuery基础语法小结_jquery

1.$(document)将document对象转换为jquery 复制代码 代码如下: $(document).ready(function(){     alert("hello world"); }); 2.获取所有的超链接对象,并且增加onclick事件:其实在底层jquery对象获得的每个标签的数组,因此我们不需要进行循环了 复制代码 代码如下: $(document).ready(function(){     $("a").click(function

jQuery使用手册之 事件处理_jquery

hover(Function, Function)    当鼠标move over时触发第一个function,当鼠标move out时触发第二个function样式:<style>.red{color:#FF0000}</style>Html代码: <div id="a">sdf</div>jQuery代码及效果 $(function(){  $("#a").hover(function(){$(this).addC

很容易学习的JQuery库 : (一) 简介

jQuery 是一个 JavaScript 库: jQuery 极大地简化了 JavaScript 编程: jQuery 很容易学习. 上面的三句话是结合最近的学习整理后的心得,个人感觉可以很好地解释JQuery. 是什么      jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库.      jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多).      jQu

jQuery入门(2) 基本语法

学习jQuery之前需要你有下面几个方面的基本知识 HTML CSS JavaScript jQuery 的基本语法 $(selector).action() $ 符合定义这是一个jQuery语句 (selector) 用 来选择某个HTML元素,其语法和CSS的selector语法一样. action() 定义操作该HTML元素的方法. 比如: $(this).hide() – 隐藏当前元素. $("p").hide() – 隐藏所以 <p> 元素. $(".t

jQuery基础

jQuery 简介 jQuery的使用 jQuery的导入 本地导入 网络导入 jQuery 语法 基础语法 jQuery 选择器 jQuery ID选择器 jQuery CLASS选择器 jQuery 元素选择器 jQuery 属性选择器 jQuery CSS 选择器 jQuery查询其他节点 祖先 后代 兄弟 过滤缩写搜索元素的范围 jQuery 事件 jQuery 事件函数 jQuery HTML 获得内容和属性 获得内容 获取属性 设置内容和属性 设置内容 设置属性 - attr att