jquery选择器

分享于 

5分钟阅读

jquery

  繁體

使用jquery选择元素

JavaScript最常用于获取或修改页面上HTML元素的内容或值,以及应用一些效果,例如,show,hide,animations等,但是,在执行操作之前,需要查找或选择目标HTML元素。

通过原生的JavaScript方法选择元素很痛苦,但是用jQuery,就像魔术一样工作,让dom元素选择简单易行的能力是jquery最强大的特性之一。

提示: jquery几乎支持所有选择器,这些定制选择器极大地增强了在页面上选择html元素的能力。

在下面几节中,你将看到一些在页面上选择元素的常用方法,并用它们做一些事情。

按id选择元素

可以使用id选择器在页面上选择唯一id的单个元素。

id="mark"

例子


<script>
$(document).ready(function(){
 // Highlight element with id mark
 $("#mark").css("background", "yellow");
});
</script>

在上面的示例中,$(document).ready() 是一个用jquery安全操作页面的事件,此事件中包含的代码只会在页面dom准备好后运行。

按类名选择元素

类选择器可用于选择具有特定类的元素。

例如,以下jquery代码将选择并突出显示具有class属性的元素,class="mark"

例子


<script>
$(document).ready(function(){
 // Highlight elements with class mark
 $(".mark").css("background", "yellow");
});
</script>

按名称选择元素

元素选择器可用于基于元素名称选择元素。

例子


<script>
$(document).ready(function(){
 // Highlight paragraph elements
 $("p").css("background", "yellow");
});
</script>

按属性选择元素

可以使用属性选择器通过元素的html属性之一来选择元素,例如,链接的targettype 属性等。

元素中 type="text"

例子


<script>
$(document).ready(function(){
 // Highlight paragraph elements
 $('input[type="text"]').css("background", "yellow");
});
</script>

使用复合css选择器选择元素

还可以组合css选择器,使选择更加精确。

例如,可以将类选择器与元素选择器组合在一起,以查找文档中具有特定类型。

例子


<script>
$(document).ready(function(){
 // Highlight only paragraph elements with class mark
 $("p.mark").css("background", "yellow");
 
 // Highlight only span elements inside the element with ID mark
 $("#mark span").css("background", "yellow");
 
 // Highlight li elements inside the ul elements
 $("ul li").css("background", "red");
 
 // Highlight li elements only inside the ul element with id mark
 $("ul#mark li").css("background", "yellow");
 
 // Highlight li elements inside all the ul element with class mark
 $("ul.mark li").css("background", "green");
 
 // Highlight all anchor elements with target blank
 $('a[target="_blank"]').css("background", "yellow");
});
</script>

jquery自定义选择器

除此之外


<script>
$(document).ready(function(){
 // Highlight table rows appearing at odd places
 $("tr:odd").css("background", "yellow");
 
 // Highlight table rows appearing at even places
 $("tr:even").css("background", "orange");
 
 // Highlight first paragraph element
 $("p:first").css("background", "red");
 
 // Highlight last paragraph element
 $("p:last").css("background", "green");
 
 // Highlight all input elements with type text inside a form
 $("form :text").css("background", "purple");
 
 // Highlight all input elements with type password inside a form
 $("form :password").css("background", "blue");
 
 // Highlight all input elements with type submit inside a form
 $("form :submit").css("background", "violet");
});
</script>


相关文章