jQuery操作DOM属性与值的实用技巧

需积分: 19 3 下载量 94 浏览量 更新于2024-09-11 收藏 7KB TXT 举报
"jQuery是JavaScript库,提供了丰富的API用于操作DOM、处理事件、执行动画和Ajax交互。这篇总结主要涵盖了jQuery中一些基本的操作,包括获取和设置页面元素的值、选择器的使用、以及对复选框、单选按钮和下拉列表的操作。" 在jQuery中,`$("#text_id")`是一个基础的选择器,它通过ID选取页面上的特定元素。`.attr("value")`用于获取或设置该元素的属性值。例如,`$("#text_id").attr("value", 'test')`将文本框的值设置为'test'。而`.val()`则是获取元素的值,如`$("#text_id").val()`获取文本框的当前值。 对于单选按钮,你可以使用类似的选择器来获取选中的值。`$("input[@type=radio][@checked]").val()`会获取所有已选中单选按钮的值。如果需要指定某个组的单选按钮,可以使用`$('input[@name=items][@checked]').val()`,这里`items`是单选按钮组的名称。 对于复选框,`$("#checkbox_id").attr("checked", true)`将复选框设为选中状态,`$("#checkbox_id").attr("checked", '')`则取消选中。检查复选框是否被选中,可以使用`$("#chk_id").attr('checked')==true`。 下拉列表的操作包括获取和设置选中项的值。`$('#select_id').val()`返回下拉列表的当前选中值,`$("#select_id").attr("value", 'test')`则将选中项的值设为'test'。要添加新的选项,可以使用`$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")`。若要清空下拉列表,可以调用`$("#select_id").empty()`。 对于获取选中的下拉列表项,可以使用`$("select[@name=items] option[@selected]").text()`,这将返回选中项的文本。要改变选中项,可以设置下拉列表的`selectedIndex`,例如`$('#select_id')[0].selectedIndex=1`将选中索引为1的项。 在处理多选的单选按钮时,没有提供明确的示例,但原理与单个单选按钮相似,可以遍历该组的单选按钮并检查`@checked`属性来获取选中项的值。 这些基本操作构成了jQuery日常开发中的核心部分,它们极大地简化了JavaScript中常见的DOM操作,使得代码更加简洁易读。熟悉这些API能够有效提高开发效率,同时使代码更具有可维护性。