jQuery学习笔记(一)简介、语法、HIDE实例

简介:

向您的页面添加 jQuery 库

jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。

可以通过下面的标记把 jQuery 添加到网页中:

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

请注意,<script> 标签应该位于页面的 <head> 部分。


下载 jQuery

共有两个版本的 jQuery 可供下载:一份是精简过的,另一份是未压缩的(供调试或阅读)。

这两个版本都可从 jQuery.com 下载。

库的替代

Google 和 Microsoft 对 jQuery 的支持都很好。

如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

使用 Google 的 CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

使用 Microsoft 的 CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

我的第一个jQuery程序

$(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素。

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("p").click(function() {
	$(this).hide();
	});
});
</script>
</head>
<body>
<p>如果你点击我,我就消失</p>
</body>
</html>


            

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.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>

$("p").hide()

演示 jQuery 的 hide() 函数,隐藏所有 <p> 元素。 

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("button").click(function() {
	$("p").hide();
	});
});
</script>
</head>
<body>
<h2>This is a heading (h)</h2>
<p>This is a paragraph. (p)</p>
<p>This is another paragraph. (p)</p>
<p>如果你点击我,我就消失</p>
<button type="button">Click me</button>
</body>
</html>

$("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("button").click(function() {
	$("#zzk").hide();
	});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="zzk">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>



$(".test").hide() 演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。 
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("button").click(function() {
	$(".zzk").hide();
	});
});
</script>
</head>
<body>
<h2 class="zzk">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p class="zzk">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>


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 函数位于一个 document ready 函数中:

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小 





目录
相关文章
|
23天前
|
JavaScript 前端开发 容器
使用 jQuery 中的 this 实例
使用 jQuery 中的 this 实例
9 1
|
14天前
|
JavaScript 前端开发 开发者
jQuery 语法
jQuery 是一种高效的 JavaScript 库,用于简化 HTML 文档中元素的选取与操作。其核心语法为 $(selector).action(),允许开发者轻松地对页面元素进行控制。例如,$(this).hide() 可以隐藏当前元素,而 $(&quot;p&quot;).hide() 则会隐藏所有段落。为了确保代码在文档完全加载后执行,通常将 jQuery 代码包裹在 $(document).ready(function(){...}) 或其简写形式 $(function(){...}) 中。这样可以避免因元素未加载而导致的操作失败问题。
|
2月前
|
JavaScript 前端开发
jQuery 实例
jQuery 实例
17 3
|
2月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
2月前
|
XML JSON 前端开发
jQuery - AJAX 简介
jQuery - AJAX 简介
14 0
|
3月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
57 13
|
2月前
|
XML JSON 前端开发
jQuery - AJAX 简介
jQuery - AJAX 简介
10 0
|
3月前
|
XML JSON JavaScript
jQuery简介
jQuery简介
33 1
|
3月前
|
Web App开发 XML 设计模式
jQuery简介
jQuery简介
37 0
|
3月前
|
JavaScript 前端开发 容器
使用 jQuery 中的 this 实例
使用 jQuery 中的 this 实例
34 0