选择器是是jQuery的基础，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。熟悉地使用选择器，不但能简化代码，而且能够事半功倍。

jQuery选择器的类型

1. 通过CSS选择器选取元素

基本选择器

层次选择器

属性选择器

2. 通过过滤选择器选择元素

基本过滤选择器

可见性过滤选择器

基本选择器

jQuery的基本选择器与CSS基本选择器相同，主要由元素标签选择器、class(类选择器)id选择器和多个选择器组成。jQuery基本选择器的详细说明如下表：

image.png

例：

image.png

代码：

图书简介

$(document).ready(function(e) {

$("#mybtn1").click(function(){

$("h1").css("color","blue");

});

$("#mybtn2").click(function(){

$(".price").css({

"background":"green","padding":"5px"

}) ;

});

$("#mybtn3").click(function(){

$("#author").css("color","red")

});

$("#mybtn4").click(function(){

$("#author,h1,.price").css("color","yellow")

});

$("#mybtn5").click(function(){

$("*").css("font-weight","bold");

});

});

层次选择器

image.png

siblings()

用于选取每个匹配元素的所有同辈元素(不包括自己)，并以jQuery对象的形式返回，此处即是选择除当前单击菜单项之外的其他同级菜单项。

可以使用this来调用，而"~"不能使用this

toggle()

toggle()方法则用于切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

例：当在浏览器中显示该页面时，全部菜单展开后的效果如下图：

单击“上海市”菜单，则“上海市”菜单下的所有子菜单全部折叠；再次单击折叠之后的“上海市”菜单，则“上海市”菜单下的所有子菜单全部展开。

image.png

代码：

无标题文档

$(document).ready(function(e) {

$("dt").click(function(){

$(this).siblings("dd").toggle();

});

});

北京市

昌平区

房山区

海淀区

大兴区

上海市

黄浦区

长宁区

宝山区

闸北区

闵行区

重庆市

江北区

渡中区

大渡口区

南岸区

属性选择器

属性选择器通过HTML元素的属性来选择元素

image.png

例：

image.png

代码：

京东快报

$(document).ready(function(){

$("#mybtn").click(function(){

window.location.reload();//刷新页面

});

$("#mybtn1").click(function(){

$("#news a[class]").css("background","#ccc")

});

$("#mybtn2").click(function(){

$("#news a[class='hot']").css("background","#ccc")

});

$("#mybtn3").click(function(){

$("#news a[class!='hot']").css("background","#ccc")

});

$("#mybtn4").click(function(){

$("#news a[href^='www']").css("background","#ccc")

});

$("#mybtn5").click(function(){

$("#news a[href$='html']").css("background","#ccc")

});

$("#mybtn6").click(function(){

$("#news a[href*='news']").css("background","#ccc")

});

});

根据值设置select下拉框的默认值

attr

attr():设置或返回被选元素的属性值。

例：

image.png

代码：

任务5：根据值设置select下拉框的默认值

$(document).ready(function(){

$("#btn1").click(function(){

$("#myselect option[value='上海市']").attr("selected","selected")

});

$("#btn2").click(function(){

$("#myselect option[value='重庆市']").attr("selected","selected")

});

});