JQuery学习笔记（一）--选择器

最新推荐文章于 2025-02-25 09:51:17 发布

原创最新推荐文章于 2025-02-25 09:51:17 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

JQuery是啥？

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

如何通过使用 jQuery 应用 JavaScript 效果。

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

基本上，您将学习到如何选取 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 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。

美$猴王孙悟空之七十二变：火影这隐身术：

“隐身” 变！

hide()

文档就绪函数

$(document).ready(function(){

--- jQuery functions go here ----

});

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

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

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

jQuery 选择器

<html>
<head>
<--使用 Google 的 CDN-->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
 <script type="text/javascript">
	$(document).ready(function(){
		$("button").click(function(){
			$("p").css("background-color","red");
		});
	})
 </script>
</head>

<body>
	<h2>This is a heading</h2>
	<p>This is a paragram.</p>
	<p>This is a another paragram</p>
	<button type = "button">Click on</button>

</body>
</html>