jquery入门教程

jQuery 是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。本篇jQuery入门教程旨在帮助初学者理解并掌握jQuery的基本用法和核心概念。 jQuery的核心语法是通过选择器选取HTML元素，然后对这些元素进行操作。基本语法结构如下： ```javascript $(selector).action() ``` 例如，`$(this).hide()` 会隐藏当前元素，而 `$("p").hide()` 则会隐藏所有段落。选择器的选择范围广泛，包括CSS选择器和XPath表达式，如： ```javascript $(".test").hide() // 隐藏所有class="test"的元素 $("#test").hide() // 隐藏所有id="test"的元素 ``` jQuery提供了丰富的元素选择器，例如： - `"p"` 选择所有的`<p>`元素 - `"p.intro"` 选择所有class为"intro"的`<p>`元素 - `"p#demo"` 选择所有id为"demo"的`<p>`元素 对于属性选择器，可以用来选取具有特定属性的元素，如： ```javascript $("[href]") // 选取所有具有href属性的元素 $("[href='#']") // 选取所有href值为"#" $("[href!='#']") // 选取所有href值不等于"#"的元素 $("[href$='.jpg']") // 选取所有href值以".jpg"结尾的元素 ``` jQuery CSS选择器允许我们修改HTML元素的样式。例如，要将所有`<p>`元素的背景颜色改为红色，可以写成： ```javascript $("p").css("background-color", "red"); ``` 在使用jQuery时，可能会遇到与其它JavaScript库的名称冲突，如Prototype库中也使用了`$`符号。这时，可以使用`noConflict()`方法避免冲突，例如： ```javascript var jq = jQuery.noConflict(); // 现在可以用jq代替$进行jQuery操作 ``` jQuery提供了丰富的事件处理功能，常见的事件方法有： - `$(document).ready(function)` 用于在文档加载完成时执行函数 - `$(selector).click(function)` 用于绑定点击事件 - `$(selector).dblclick(function)` 用于绑定双击事件 - `$(selector).focus(function)` 用于绑定获取焦点事件 - `$(selector).mouseover(function)` 用于绑定鼠标悬停事件 例如，下面的代码演示了如何在按钮点击后隐藏其父元素： ```html <script> $(document).ready(function(){ $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); }); </script> <div class="ex"> <button class="hide" type="button">隐藏</button> <p>内容...</p> </div> ``` 此外，jQuery还提供了`hide()`、`show()`和`toggle()`等方法来控制元素的可见性。例如： ```javascript $(selector).hide(speed, callback); $(selector).show(speed, callback); ``` 其中，`speed`参数可以设置动画速度，如"slow"、"fast"或毫秒，`callback`参数是在隐藏或显示完成后执行的函数。 jQuery简化了JavaScript的许多复杂任务，使得开发者能够更高效地处理DOM操作、事件处理和动画效果。通过深入学习和实践，你可以快速掌握这个强大的工具，提升网页开发的效率和质量。