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
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律