在 jQuery 中,$("input:checked") 返回的是一个包含所有被选中 input 元素的 jQuery 对象。其常见的属性和方法有:
1、.length 属性
这里的 length 是一个属性,它直接内置于jQuery对象中,用于返回该jQuery对象所包含的DOM元素的数量。
这个属性是jQuery库自身规定的,是其核心API的一部分,用于快速获取匹配元素集合的大小。
2、.size()方法
除了 length,jQuery对象还有一个与之等效的方法叫做 .size(),它同样返回匹配元素的数量。
不过,从jQuery 1.8版本开始,.length 属性因其性能更优而被推荐使用。
在实际应用中,这个属性常与选择器配合,用于完成一些状态判断。
例如,通过比较 $("input[type='checkbox']").length 和 $("input:checked").length 是否相等,可以判断页面上所有的复选框是否处于全选状态
3、.each() 方法
.each() 方法允许遍历每个被选中的元素,并对它们执行自定义操作。
例如:
$("input:checked").each(function(index) {
console.log("第" + index + "个被选中的元素值是:" + $(this).val());4、.val() 方法
.val() 方法可以获取第一个被选中元素的值,或者设置所有被选中元素的值。
例如获取值:let firstValue = $("input:checked").val();
5、.prop() 方法
.prop() 方法用于获取或设置元素的属性值,特别适用于处理布尔属性如 checked、disabled 等。
例如检查是否选中:let isChecked = $("input:checked").prop("checked");
6、.map() 方法
.map() 方法可以将被选中的元素集合转换为新的 jQuery 对象或数组。
例如:
let values = $("input:checked").map(function() {
return $(this).val();
}).get();7、.filter() 方法
.filter() 方法可以从已选中的元素中进一步筛选出符合条件的元素。
例如:
let filtered = $("input:checked").filter(function() {
return $(this).val().length > 3;
});8、.attr() 方法
.attr() 方法用于获取或设置元素的 HTML 属性值。
例如获取自定义属性:let dataId = $("input:checked").attr("data-id");
9、其他方法
.addClass()、.removeClass()、.toggleClass() 方法用于操作元素的 CSS 类。
例如:$("input:checked").addClass("highlight");
.hide() 和 .show() 方法可以控制被选中元素的显示与隐藏。
.parent()、.closest()、.find() 等方法可以用于 DOM 遍历,查找相关的父元素或子元素。
.on() 方法可以为被选中的元素绑定事件处理函数。
例如:
$("input:checked").on("click", function() {
console.log("被选中的元素被点击了");
});实际应用场景
在处理表单时,这些方法特别有用。
例如,可以使用 .each() 遍历所有被选中的复选框,收集它们的值;
或者使用 .val() 直接获取单选按钮组中被选中的值。
对于需要动态更新界面的情况,.addClass() 和 .removeClass() 可以改变被选中元素的视觉状态,
而 .hide() 和 .show() 可以根据选择状态来控制相关内容的显示。
这些方法的灵活组合使得 jQuery 在处理表单选择和用户交互时非常强大和便捷。