jQuery是一个广泛使用的JavaScript库,它的选择器和访问DOM元素的方法是非常强大和灵活的,能够应付常见的各种类型的DOM对象。下面是关于使用jQuery获取对象的详细攻略:
选择器
使用选择器可以在HTML文档中查找并选择DOM元素,jQuery支持大部分CSS选择器。
基本选择器
$("element")
选择所有的element元素,比如$("div")
选择所有的div元素。$("#id")
选择id元素,比如$("#myDiv")
选择元素id为“myDiv”的元素。$(".class")
选择class元素,比如$(".myClass")
选择所有的类名为“myClass”的元素。
层次选择器
$("parent > child")
选择匹配parent元素下的所有直接子元素child。$("ancestor descendant")
选择祖先元素下的所有后代元素。
筛选选择器
$("selector:first")
选取选择器匹配的第一个元素,比如$("div:first")
选取第一个div元素。$("selector:last")
选取选择器匹配的最后一个元素。$("selector:odd")
选取选择器匹配的奇数元素,比如选择某个ul下的所有奇数li元素,$("ul li:odd")
。$("selector:eq(index)")
选取选择器匹配的指定索引的元素,index从0开始,比如选择某个ul下的第三个li元素,$("ul li:eq(2)")
。
过滤选择器
$("selector:not(filter)")
选择不匹配filter的选择器。$("selector:has(filter)")
选择匹配filter的选择器。$("selector:first-child")
选择第一个出现在父元素中的子元素。$("selector:last-child")
选择最后一个出现在父元素中的子元素。
获取DOM元素
jQuery提供的方法可以获取DOM元素,比如元素的属性、文本和HTML内容。
获取属性
$("selector").attr("attributeName")
获取属性的值,比如元素的id、class、href等属性。$("selector").prop("propertyName")
获取DOM元素的属性,比如元素的checked属性。$("selector").val()
获取元素的值,比如输入框的值。
获取内容
$("selector").html()
获取元素的HTML内容。$("selector").text()
获取元素的文本内容。
下面是两个示例:
- 通过选择器获取一个元素,并修改它的属性值:
<div id="myDiv" class="myClass">Hello World!</div>
<script>
$(document).ready(function(){
$("#myDiv").attr("class", "newClass");
});
</script>
执行上面的代码后,元素的class属性将会变为“newClass”。
- 通过选择器获取一个元素,并获取它的值:
<input id="myInput" type="text" value="Hello World!">
<script>
$(document).ready(function(){
var inputValue = $("#myInput").val();
console.log(inputValue);
});
</script>
执行上面的代码后,控制台将输出“Hello World!”,即输入框中的值。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jquery获取对象的方法足以应付常见的各种类型的对象 - Python技术站