jQuery 实用代码片段集合

"jQuery精简例子收集" 这篇内容包含了一系列实用的jQuery代码片段，展示了如何高效地操作DOM元素、处理事件、以及实现各种效果。以下是这些示例中的关键知识点： 1. 表格交替行样式：使用`:nth-child(odd)`选择器给奇数行添加类名"altrow"，实现表格行的交替颜色效果。 2. 去除字符串首尾空格：`$.trim(sString)`方法用于移除字符串sString的开头和结尾的空白字符。 3. 文档加载事件：`.ready()`函数在文档加载完成后执行，`$(document).ready(function(){...})`或`$(function(){...})`是两种等价的写法，用于在页面元素可操作时执行代码。 4. 创建并插入DOM元素：`$("<p>...</p>")`创建一个新的`<p>`元素，`insertAfter("#myTarget")`将其插入到ID为"myTarget"的元素之后。 5. 选择前n个元素：`$("p:lt(2)")`选取前两个`<p>`元素，并使用`.addClass("myClass")`为它们添加类名"myClass"。 6. 禁用按钮：`$("button:gt(0)").attr("disabled","disabled")`选取所有除了第一个之外的`<button>`元素，并禁用它们。 7. 切换类名：`.toggleClass("highlight")`在点击`<p>`元素时，切换其类名"highlight"，实现高亮/取消高亮的效果。 8. 获取与设置文本内容：`$("P:first").text()`获取第一个`<p>`元素的文本内容，`$("P:last").html(sString)`将最后一个`<p>`元素的HTML内容设置为变量sString的值。 9. 克隆并插入元素：`clone().appendTo()`方法用于克隆指定元素并将其追加到其他位置。例如，第一张图片被克隆并追加到每个`<p>`元素，第二张图片被克隆并追加到第一个`<p>`元素。 10. 显示与隐藏元素： - `$("img").hide(3000)`在3秒内渐隐所有图片。 - `$("img").show(3000)`在3秒内渐显所有图片。 以上例子展示了jQuery库的灵活性和强大功能，包括选择器的使用、DOM操作、事件处理、动画效果等。学习和掌握这些基础概念将有助于提高前端开发效率。