通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。
————————————————————
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery action() 执行对元素的操作
实例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。
————————————————————
jQuery 语法实例
$(this).hide()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button type="button">Click me</button>
</body>
</html>
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
$("#test").hide()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
演示 jQuery hide() 函数,隐藏 id="test" 的元素。
$("p").hide()
<html>
<head>
<script type="text/javascript" src="/jquery/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 type="button">Click me</button>
</body>
</html>
演示 jQuery hide() 函数,隐藏所有 <p> 元素。
$(".test").hide()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。
————————————————————
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
下面是两种假如文档完全加载之前运行函数的话,操作失败的情况:
- 试图隐藏一个不存在的元素。
- 获得未完全加载的图像的大小。
分享到:
相关推荐
在"一天搞定jQuery(一)——使用jQuery完成定时弹出广告"的主题中,我们将深入探讨如何利用jQuery来实现一个定时弹出的广告功能。 首先,我们需要了解jQuery的核心概念。jQuery通过选择器(Selectors)获取DOM元素,...
jQuery的语法以"$"开头,如`$(selector)`表示选择元素。例如,选择所有`<p>`元素: ```javascript $('p').css('color', 'red'); // 设置所有段落字体颜色为红色 ``` jQuery还提供了许多方法,如`.append()`...
"图片文件上传回显jQuery插件——插件四"正是针对这一需求设计的工具,它简化了开发者实现这一功能的复杂度,使得图片预览和上传变得更加便捷。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、...
jq语法
【标题】"基于jQuery/JS的简易网页计算器"揭示了这个项目的核心——使用JavaScript和jQuery技术来实现一个基本的在线计算功能。JavaScript是一种在客户端浏览器上运行的脚本语言,常用于网页交互和动态效果的实现,...
在描述中提到的“Dreamweaver中的jQuery语法提示插件”是为了增强Dreamweaver在处理jQuery代码时的智能提示和代码补全功能,帮助开发者更高效地编写jQuery代码。 jQuery是一个广泛使用的JavaScript库,简化了...
在标题“学习资源——JavaScript”与描述“点点滴滴,记录JavaScript的开头引用的应用”中,我们可以理解到这份文档旨在分享JavaScript的一些基本应用实例,特别是关于如何引入(import)或链接(link)外部资源。...
《众妙之门——JavaScript与jQuery技术精粹》是一本由Smashing Magazine出版的高端IT图书,它汇聚了全球顶尖网站设计专家的经验与智慧,旨在深入解析JavaScript和jQuery的关键技术,帮助读者提升在网页设计与开发中...
- **简洁性**:jQuery通过简洁的语法使得原本复杂的JavaScript代码变得更加简单易懂。 - **跨浏览器兼容性**:解决了不同浏览器之间的兼容问题,使得开发者可以专注于业务逻辑而非浏览器差异。 - **强大的社区支持**...
《Web编程基础——CSS、JavaScript、jQuery》是一本旨在教授Web前端开发基础知识的教程,涵盖了网页样式设计、动态脚本语言以及广泛使用的JavaScript库。在Web开发领域,这三者是构建交互式和响应式网站不可或缺的...
### 从零开始学习jQuery——综合知识点解析 #### 一、引言 随着Web技术的发展,JavaScript已经成为前端开发中不可或缺的一部分。为了简化JavaScript的使用,提高开发效率,jQuery应运而生。本文将从零开始,详细...
1. **选择器**:jQuery引入了一种简洁的CSS样式选择器语法,使得选择页面上的元素变得极其简单,例如`$("#id")`用于选取ID为"id"的元素,`$(".class")`用于选取所有class为"class"的元素。 2. **DOM操作**:jQuery...
- jQuery处理事件与原生JavaScript类似,但语法更简洁。例如,点击事件处理用`.click()`方法。 - 本例中绑定点击事件到全选按钮(`btn`)、各个复选框(`checkboxes`)以及反选链接(`btn2`)上。 5. jQuery方法 - `....
在前端开发中,图片轮播插件是一种非常常见的功能,它能够在有限的空间中循环展示图片或内容。...虽然jQuery已经不再是前端开发的唯一选择,但其简洁的语法和丰富的插件库,依然让很多开发者在特定场景下选择使用它。
【jQuery实战视频教程——弹出层效果】 在Web开发中,弹出层(Modal)是一种常见且实用的设计元素,用于显示重要信息、用户确认或提供附加功能。本篇教程将聚焦于使用jQuery实现弹出层效果,这在交互式网页设计中是...
而我们今天要探讨的是jQuery的一个特定版本——1.8.3。 jQuery 1.8.3是该库的一个稳定版本,发布于2012年。它在前一版本的基础上进行了多项优化和修复,为开发者提供了更加可靠和稳定的API。这一版本的jQuery保留了...
- **简洁性**:jQuery语法设计得十分简洁明了,易于理解与学习。 - **轻量级**:尽管功能强大,但其核心文件大小仅为30KB左右,对网页加载速度影响极小。 - **兼容性**:支持多种浏览器,包括IE6.0+、Firefox1.5+、...
该压缩包文件“网页模板——基于jQuery Bootstrap3的文本编辑器特效源码.zip”提供了一个网页模板,这个模板特别设计用于实现基于jQuery和Bootstrap3的文本编辑器特效。jQuery是JavaScript库,它简化了HTML文档遍历...
**jQuery实现的Ajax函数在ASP...总的来说,jQuery为ASP环境下的Ajax开发提供了极大的便利,使得前端和后端的交互变得更加简单和高效。通过熟练掌握jQuery的Ajax函数,开发者可以构建出更加动态和响应式的Web应用程序。