jQuery基础教程摘录- Hello world

Hello jQuery

=======

空白HTML页面代码, 仅仅加载了jquery.js库.

<html>
<head><script type="text/javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript">                                         // we will add our javascript code here                                     </script></head>
<body><!-- we will add our HTML content here -->
</body>
</html>

下面这段代码为document对象的ready事件注册了一段事件处理代码.

$(document).ready(function() {// do stuff when DOM is ready
});

下面这段代码的所作的事情是在document对象准备好了, 调用了ready事件的时候, 选择当前document中所有的a对象(超链接对象), 并在a对象被点击的时候弹出alert, 在其中输出hello world.

$(document).ready(function() {$("a").click(function() {alert("Hello world!");});
});

注意这里的$("a"), 这是一个jquery的选择器(selector).

符号'$'本身是jQuery里"class"的别名, 所以$()会构造一个新的jQuery对象.

click()是jQuery对象的一个函数.

上面的一段代码实际上是把click()事件绑定到了所有选择了的元素(在这个例子里仅是一个超链接元素)上, 并且在事件发生的时候执行我们提供的函数代码.

上面的代码相当于:

<a href="" onclick="alert('Hello world')">Link</a>

这二者的区别很明显:

我们不需要在每一个元素上写onclick了.
我们清晰地把结构(HTML)与行为(JS)分开了, 跟我们把结构(HTML)与展现(CSS)分开一样.

来源:

Tutorials:Getting Started with jQuery

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

jQuery基础教程摘录- Hello world相关推荐

（转）jquery基础教程八 load方法及小技巧
首先我们看看手册上的描述 load(url, params, callback) 装入一个远程HTML内容到一个DOM结点. 注意:避免用装入的scripts脚本,装入脚本改用$.getScript. ...
jQuery基础教程
调试环境:webstorm 版本11.0.1 Chrome 版本54.0.2840.99 声明:本博客借鉴了w3school在线教程,如果需要详细的教程可以访问http://www.w3school. ...
JQuery基础教程：入门
JQuery能做什么 JQuery在线手册 1.取得文档中的元素如果不使用JavaScript库,遍历DOM(Document Object Model,文档对象模型)树,以及查找HTML文档结构中 ...
jQuery 基础教程（四）之jQuery中的DOM操作
一.jQuery 中的 DOM 操作 (1)DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组 ...
jQuery 基础教程（五）之使用jQuery创建动画效果
一.jQuery 中的动画: 隐藏和显示 (1)hide() 在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功能同 css(&qu ...
jQuery 基础教程（一）之jQuery的由来及简介
一.RIA技术 (1)RIA(Rich Internet Applications) 富互联网应用,具有高度互动性.丰富用户体验以及功能强大的客户端. (2)常见的RIA技术 Ajax Flex Sl ...
jQuery 基础教程（二）之jQuery对象与DOM对象
一.jQuery 对象 (1)jQuery 对象就是通过 jQuery 包装DOM对象后产生的对象 (2)Query 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以 ...
jQuery 基础教程（三）之jQuery的选择器
一.jQuery 选择器 (1)选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 (2)jQuery 选择器的优点: 简洁的写法 ...
jQuery基础教程之如何注册以及触发自定义事件
在不知道jquery中可以注册自定义事件之前,经常看到很多牛人写的插件中,有用到: bind("originevent",function(){-}); 由于当时不知道jquery ...

jQuery基础教程摘录- Hello world

jQuery基础教程摘录- Hello world相关推荐

最新文章

热门文章