jQuery基础选择器
2016-02-04 15:31
633 查看
#id 选择器
如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器:$("#my_id"),表示根据id选择器获取页面中指定的标签元素,且返回唯一一个元素。
<div id="divtest">div的内容</div> <script type="text/javascript"> $("#divtest").html("hello world."); </script>
html()方法的功能是设置或获取元素中显示的内容。通过#id选择器的方式获取元素,并在元素中调用
html()。
element 选择器
jQuery中可以根据元素名查找元素,格式如下:$("element")其中element就是元素的名称。
<button id="btntest">点我</button> <script type="text/javascript"> $("button").attr("disabled","true"); </script>
css()方法的功能是设置或获取元素的某项样式属性。根据元素的名称可以查找到该元素,并调用
css()方法将设置该元素内容中文字显示的样式。
.class 选择器
我们不但可以通过使用元素名称查询元素的方法,其实,还可以通过元素的类别属性查找元素。它的调用格式如下:$(".class"),其中.class参数表示元素的CSS类别(类选择器)名称。
<div class="red">立正,向我这边看齐</div> <p class="red">我先歇歇脚</p> <script type="text/javascript"> $(".red").html("hello class"); $("p.red").html("hello p.class") </script>
如例子所示,元素和class以及id选择器是可以同时使用的。
* 选择器
“*”号选择器,它的功能是获取全部元素,如下面例子所示,可以通过设置$("form *")对象,使得所有的表单元素失效。
<form action="#"> <input id="Button1" type="button" value="button" /> <input id="Text1" type="text" /> <input id="Radio1" type="radio" /> <input id="Checkbox1" type="checkbox" /> </form> <script type="text/javascript"> $("form *").attr("disabled", "true"); </script>
sele1,sele2,seleN 选择器
有时需要精确的选择任意多个指定的元素,就需要调用sele1,sele2,seleN选择器,它的调用格式如下:$(“sele1,sele2,seleN”)其中参数sele1、sele2到seleN为有效选择器,每个选择器之间用“,”号隔开,它们可以是之前提及的各种类型选择器,如
$(“#id”)、
$(“.class”)、
$(“selector”)选择器等。
<div class="red">选我吧!我是red</div> <div id="green">选我吧!我是green</div> <div class="blue">选我吧!我是blue</div> <script type="text/javascript"> $(".red,#green").html("hi,我们的样子很美哦!"); </script>
我们接下来继续学习层次性选择器
在实际应用开发中,常常是多个元素嵌套在一起,形成复杂的层次关系,通过层次选择器,可以快速定位某一层次的一个或多个元素。
ance desc 选择器
它的调用格式如下:$("ance desc"),其中ance desc是使用空格隔开的两个参数。ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)表示后代元素,即包括子元素、孙元素等等。
<div>码农家族 <p> <label></label> </p> <label></label> </div> <script type="text/javascript"> $("div label").css("background-color","blue"); </script>
parent > child 选择器
与前面介绍的ance desc选择器相比,parent > child选择器的范围要小些,它所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈,它的调用格式如下:$("parent > child"),child参数获取的元素都是parent选择器的子元素,它们之间通过“>”符号来表示一种层次关系。
<div> 码农家族 <p> <label></label> </p> <label></label> <!--只有这个label背景是蓝色--> </div> <label></label> <script type="text/javascript"> $("div>label").css("background-color","blue"); </script>
prev + next 选择器
俗话说“远亲不如近邻”,而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素,格式如下:$("prev + next"),其中参数prev为任何有效的选择器,参数“next”为另外一个有效选择器,它们之间的“+”表示一种上下的层次关系,也就是说,“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。
<div> 码农家族 <label></label> <p></p> <label></label><!--这个label背景是红色--> <label></label> </div> <label></label> <script type="text/javascript"> $("p+label").css("background-color","red"); </script>
prev ~ siblings选择器
与上一节中介绍的prev + next层次选择器相同,prev ~ siblings选择器也是查找prev 元素之后的相邻元素,但前者只获取第一个相邻的元素,而后者则获取prev 元素后面全部相邻的元素,它的调用格式如下:$("prev ~ siblings"),其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系,表明siblings选择器获取的元素都是prev元素之后的同辈元素。
<div> 码农家族 <label></label> <p></p> <label></label><!--这个label背景是红色--> <label></label><!--这个label背景也是红色--> </div> <label></label> <script type="text/javascript"> $("p+label").css("background-color","red"); </script>
小结
当$(” “)包含多个选择器时,他们之间的关系有如下几种:关系 | 符号 | 例子 | 说明 |
---|---|---|---|
并列关系 | , 逗号 | $("div ,p") | div和p之间不用考虑层次关系 |
后代关系 | 空格 | $("div p") | p是div的后代,子元素或者孙元素 |
孩子关系 | > 大于号 | $("div p") | p是div的孩子,即子元素 |
楼下邻居关系 | + 加号 | $("div + p") | p是div同级元素,紧挨在div的后面 |
楼下关系 | ~ 波浪号 | $("div ~ p") | p是div同级元素,在div的后面 |
相关文章推荐
- jquery easyui validatebox remote使用
- JQuery中添加/删除
- 实现jQuery扩展总结
- JQuery获取元素的值与属性
- Jquery 解码 json数据
- ASP.NET CheckBoxList Operations with jQuery
- JQuery Autocomplete实战
- JQuery学习笔记-JQuery的动画效果
- JQuery学习笔记-JQuery中的事件
- JQuery学习笔记-JQuery的CSS DOM操作
- JQuery学习笔记-JQuery的html()方法和val()方法
- JQuery学习笔记-JQuery的DOM操作
- JQuery学习笔记-表单选择器
- JQuery学习笔记-子元素选择器
- JQuery学习笔记-属性选择器
- JQuery学习笔记-可见性选择器
- JQuery学习笔记-内容选择器
- JQuery学习笔记-基本过滤选择器
- JQuery学习笔记-层次选择器
- JQuery学习笔记-基本选择器