jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。选择器是jQuery的核心功能之一,它允许开发者使用CSS样式的语法来选择和操作DOM元素。
$("#id") // ID选择器
$(".class") // 类选择器
$("element") // 元素选择器
$("*") // 全选选择器
$("selector1, selector2") // 多选选择器
$("parent > child") // 子元素选择器
$("ancestor descendant") // 后代选择器
$("prev + next") // 相邻兄弟选择器
$("prev ~ siblings") // 一般兄弟选择器
$("li:first") // 第一个元素
$("li:last") // 最后一个元素
$("li:even") // 偶数索引元素
$("li:odd") // 奇数索引元素
$("li:eq(2)") // 索引等于2的元素
$("li:gt(2)") // 索引大于2的元素
$("li:lt(2)") // 索引小于2的元素
$("li:not(.class)") // 不包含指定类的元素
$("div:contains('text')") // 包含指定文本的元素
$("div:empty") // 空元素
$("div:has(p)") // 包含p元素的div
$("div:parent") // 非空元素
$("div:hidden") // 隐藏的元素
$("div:visible") // 可见的元素
$("[attribute]") // 拥有指定属性的元素
$("[attribute=value]") // 属性值等于指定值的元素
$("[attribute!=value]") // 属性值不等于指定值的元素
$("[attribute^=value]") // 属性值以指定值开头的元素
$("[attribute$=value]") // 属性值以指定值结尾的元素
$("[attribute*=value]") // 属性值包含指定值的元素
$(":input") // 所有input元素
$(":text") // 所有type="text"的input元素
$(":password") // 所有type="password"的input元素
$(":radio") // 所有type="radio"的input元素
$(":checkbox") // 所有type="checkbox"的input元素
$(":submit") // 所有type="submit"的input元素
$(":image") // 所有type="image"的input元素
$(":reset") // 所有type="reset"的input元素
$(":button") // 所有type="button"的input元素
$(":file") // 所有type="file"的input元素
$(":enabled") // 所有启用的表单元素
$(":disabled") // 所有禁用的表单元素
$(":selected") // 所有选中的option元素
$(":checked") // 所有选中的checkbox或radio元素
原因:复杂的选择器或频繁的DOM查询会导致性能下降
解决方案:
var $elements = $(".class");
$("#container").find(".class")
原因:
解决方案:
$(document).ready(function() {...})
原因:选择器只在页面加载时执行一次
解决方案:
$(document).on("click", ".dynamic-element", function() {...})
原因:对选择器优先级理解不足
解决方案:
.filter()
方法进一步筛选结果// 基本用法示例
$(document).ready(function() {
// ID选择器
$("#header").css("background-color", "#f0f0f0");
// 类选择器
$(".menu-item").hover(
function() { $(this).addClass("hover"); },
function() { $(this).removeClass("hover"); }
);
// 属性选择器
$("input[type='text']").addClass("text-input");
// 表单选择器
$(":submit").click(function() {
alert("表单已提交");
return false;
});
// 链式操作
$("li")
.filter(":odd")
.css("background-color", "#f0f0f0")
.end()
.filter(":even")
.css("background-color", "#ffffff");
});
jQuery选择器提供了强大而灵活的方式来操作DOM元素,虽然现代前端开发中直接使用原生JavaScript或框架如React/Vue更为常见,但在维护旧项目或需要快速开发时,jQuery仍然是一个有价值的选择。
没有搜到相关的沙龙