jQuery基础教程:快速掌握选择器与操作DOM

需积分: 9 0 下载量 97 浏览量 更新于2024-09-12 收藏 173KB PDF 举报
"jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这份简明教程涵盖了jQuery的基础用法,包括选择器、DOM操作、样式与属性修改、内容操纵以及元素操作。" 在jQuery中,选择元素是其核心功能之一。例如,`$(”p”)`会选择页面上所有的`<p>`元素。通过`.addClass()`方法,可以方便地向这些元素添加CSS类,如`$(”p”).addClass('css样式')`。这有助于应用预定义的样式规则。 属性操作是jQuery的另一个关键特性。`$(”img”).attr()`方法允许我们设置或获取元素的属性。例如,`$(”img”).attr({src:”test.jpg”, alt:”testImage”})`会将图片的`src`和`alt`属性同时设置。如果只需要修改一个属性,如`src`,则可以写成`$(”img”).attr("src", "test.jpg")`。此外,还可以使用函数来动态设置属性值,如`$(”img”).attr("title", function(){ return this.src; })`。 内容操纵是jQuery中的重要部分。`.html()`用于获取或设置元素的HTML内容。`$(”元素名称”).html()`读取元素的HTML,而`$(”元素名称”).html(”<b>stuff</b>”)`则替换其内容。`.text()`则用于处理纯文本内容,如获取或设置元素的文本。 jQuery还提供了方便的样式操作。`.addClass()`、`.removeClass()`和`.toggleClass()`分别用于添加、删除和切换CSS类。`.removeAttr()`则用来移除元素的特定属性。 对于DOM操作,jQuery提供了一系列方法。`.after()`、`.append()`和它们的反向版本`.before()`、`.prepend()`用于在元素前后插入内容。`.insertAfter()`和`.insertBefore()`则将元素插入到指定位置。`.clone()`用于复制元素,可选参数决定是否复制关联事件。`.empty()`清空元素内容。 `$(”input元素名称”).val()`用于处理`<input>`元素的值,无论是获取还是设置。`$(”input元素名称”).val(value)`将输入元素的值设为`value`,而`$(”input元素名称”).val()`则返回当前值。 jQuery通过简洁的API极大地方便了JavaScript开发者,使得网页动态效果的实现变得更为简单和高效。