jQuery基础选择器
2015-05-30 22:35
573 查看
#id选择器
jquery能使用CSS选择器来操作网页中的标签元素。如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器:$("#my_id")
其中#my_id表示根据id选择器获取页面中指定的标签元素,且返回唯一一个元素。
例如:
通过#id选择器的方式获取元素,并在元素中调用html()方法为id="divtest"的<div>元素设置了文字显示在页面中。
element 选择器
jQuery中可以根据元素名(包括<div>,<span>等)查找元素,格式如下:$(“element”)
根据元素的名称可以查找到该元素,并调用css()方法将设置该元素内容中文字显示的样式。
.class选择器
根据元素的某个特征进行查找,它的调用格式如下:$(“.class”) ,其中.class参数表示元素的CSS类别(类选择器)名称。
例如:使用class选择器的方式获取元素,将类名为“green”div元素中的文字内容设置为与类名为“red”元素一样。
* 选择器
有一个非常“牛”的选择器,“*”号选择器,它的功能是获取页面中的全部元素,“全部”啊!包括<head>、<body>、<script>这些元素,格式为:$(“*”)
例如:将<form>元素包含下的全部表单型元素都设为不可用。
实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也需要谨慎使用。
sele1,sele2,seleN选择器
有时需要精确的选择任意多个指定的元素,就需要调用sele1,sele2,seleN选择器,它的调用格式如下:$(“sele1,sele2,seleN”)
其中参数sele1、sele2到seleN为有效选择器,每个选择器之间用“,”号隔开,它们可以是之前提及的各种类型选择器,如$(“#id”)、$(“.class”)、$(“selector”)选择器等。
例如:通过选择器选出其中两个不同类别的<div>,并修改它们显示的内容。效果如图:
ance desc选择器
在实际应用开发中,常常是多个元素嵌套在一起,形成复杂的层次关系,通过层次选择器,可以快速定位某一层次的一个或多个元素,ance desc选择器就是其中之一,它的调用格式如下:$("ance desc")
其中ance desc是使用空格隔开的两个参数。ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)表示后代元素,即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。比如家族姓氏“div”,家族几代人里,都有名字里带“span”的,就可以用这个ance desc选择器把这几个人给定位出来。
parent > child选择器
与ance desc选择器相比,parent > child选择器的范围要小些,它所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈,它的调用格式如下:$(“parent > child”)
child参数获取的元素都是parent选择器的子元素,它们之间通过“>”符号来表示一种层次关系。
例如:在页面中,使用选择器获取<div>元素中的全部子<label>元素,并给它们设置红色边框。
prev + next选择器
俗话说“远亲不如近邻”,而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素,格式如下:$(“prev + next”)
其中参数prev为任何有效的选择器,参数“next”为另外一个有效选择器,它们之间的“+”表示一种上下的层次关系,也就是说,“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。
例子:使用prev + next选择器,获取<p>元素最近邻的下一个元素,并修改它的背景色。
prev ~ siblings选择器
与prev + next层次选择器相同,prev ~ siblings选择器也是查找prev 元素之后的相邻元素,但前者只获取第一个相邻的元素,而后者则获取prev 元素后面全部相邻的元素,它的调用格式如下:$(“prev ~ siblings”)
其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系,表明siblings选择器获取的元素都是prev元素之后的同辈元素。
例子:使用prev ~ next选择器,获取<p>元素下面全部的相邻元素,并修改它们的边框色和显示内容。
以上内容由慕课网整理得来!
jquery能使用CSS选择器来操作网页中的标签元素。如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器:$("#my_id")
其中#my_id表示根据id选择器获取页面中指定的标签元素,且返回唯一一个元素。
例如:
<body> <div id="divtest">div的内容</div> <div id="default"></div> <script type="text/javascript"> $("#default").html($("#divtest").html()); </script> </body> /* 浏览器显示的是:div的内容 div的内容 */
通过#id选择器的方式获取元素,并在元素中调用html()方法为id="divtest"的<div>元素设置了文字显示在页面中。
element 选择器
jQuery中可以根据元素名(包括<div>,<span>等)查找元素,格式如下:$(“element”)
<body> <button id="btntest">点我</button> <script type="text/javascript"> $("button").attr("disabled","true"); </script> </body> /* 发现图标不可用,变成灰色 */
根据元素的名称可以查找到该元素,并调用css()方法将设置该元素内容中文字显示的样式。
.class选择器
根据元素的某个特征进行查找,它的调用格式如下:$(“.class”) ,其中.class参数表示元素的CSS类别(类选择器)名称。
例如:使用class选择器的方式获取元素,将类名为“green”div元素中的文字内容设置为与类名为“red”元素一样。
<body> <div class="red">立正,向我这边看齐</div> <div class="green">我先歇歇脚</div> <script type="text/javascript"> var $redHTML = $(".red").html();//获取.red中的内容 $(".green").html($redHTML);//将.green的内容改成跟.red内容一致 </script> </body>
* 选择器
有一个非常“牛”的选择器,“*”号选择器,它的功能是获取页面中的全部元素,“全部”啊!包括<head>、<body>、<script>这些元素,格式为:$(“*”)
例如:将<form>元素包含下的全部表单型元素都设为不可用。
<body> <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");//这里换成$("input")照样可以 </script> </body>
实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也需要谨慎使用。
sele1,sele2,seleN选择器
有时需要精确的选择任意多个指定的元素,就需要调用sele1,sele2,seleN选择器,它的调用格式如下:$(“sele1,sele2,seleN”)
其中参数sele1、sele2到seleN为有效选择器,每个选择器之间用“,”号隔开,它们可以是之前提及的各种类型选择器,如$(“#id”)、$(“.class”)、$(“selector”)选择器等。
例如:通过选择器选出其中两个不同类别的<div>,并修改它们显示的内容。效果如图:
<body> <div class="red">选我吧!我是red</div> <div class="green">选我吧!我是green</div> <div class="blue">选我吧!我是blue</div> <script type="text/javascript"> $(".red,.green").html("hi,我们的样子很美哦!"); </script> </body>
ance desc选择器
在实际应用开发中,常常是多个元素嵌套在一起,形成复杂的层次关系,通过层次选择器,可以快速定位某一层次的一个或多个元素,ance desc选择器就是其中之一,它的调用格式如下:$("ance desc")
其中ance desc是使用空格隔开的两个参数。ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)表示后代元素,即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。比如家族姓氏“div”,家族几代人里,都有名字里带“span”的,就可以用这个ance desc选择器把这几个人给定位出来。
<body> <div>码农家族 <p> <label></label> </p> <label></label> </div> <script type="text/javascript"> $("div label").css("background-color","blue"); </script> </body>
parent > child选择器
与ance desc选择器相比,parent > child选择器的范围要小些,它所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈,它的调用格式如下:$(“parent > child”)
child参数获取的元素都是parent选择器的子元素,它们之间通过“>”符号来表示一种层次关系。
例如:在页面中,使用选择器获取<div>元素中的全部子<label>元素,并给它们设置红色边框。
<body> <div> 码农家族 <p> <label></label> </p> <label></label> <label></label> </div> <label></label> //这里的<label>没被控制到 <script type="text/javascript"> $("div>label").css("border", "solid 5px red"); </script> </body>
prev + next选择器
俗话说“远亲不如近邻”,而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素,格式如下:$(“prev + next”)
其中参数prev为任何有效的选择器,参数“next”为另外一个有效选择器,它们之间的“+”表示一种上下的层次关系,也就是说,“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。
例子:使用prev + next选择器,获取<p>元素最近邻的下一个元素,并修改它的背景色。
<body> <div> 码农家族 <label></label> <p></p> <label></label> <label></label> </div> <label></label> <script type="text/javascript"> $("p+label").css("background-color","red"); </script> </body> /*CSS代码*/ div, p, label { float: left; border: solid 1px #ccc; margin: 5px; padding: 5px; } p,label { width:230px; height:30px; } p { border: solid 1px red; }
prev ~ siblings选择器
与prev + next层次选择器相同,prev ~ siblings选择器也是查找prev 元素之后的相邻元素,但前者只获取第一个相邻的元素,而后者则获取prev 元素后面全部相邻的元素,它的调用格式如下:$(“prev ~ siblings”)
其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系,表明siblings选择器获取的元素都是prev元素之后的同辈元素。
例子:使用prev ~ next选择器,获取<p>元素下面全部的相邻元素,并修改它们的边框色和显示内容。
<body> <div> 码农家族 <label></label> <p></p> <label></label> <label></label> </div> <label></label> <script type="text/javascript"> $("p~label").css("border", "solid 1px red"); $("p~label").html("我们都是p先生的粉丝"); </script> </body> /*CSS代码*/ div, p, label { float: left; border: solid 1px #ccc; margin: 5px; padding: 5px; } p,label { width:230px; height:30px; } p { border: solid 1px red; }
以上内容由慕课网整理得来!
相关文章推荐
- JQuery中操作Css样式的方法
- jQuery选择器总结
- jQuery实现table单元格行合并
- 【学习拾遗】Jquery(三)--ztree
- jquery加载解析XML文件
- jQuery改变元素属性(宽、高)
- 【学习拾遗】Jquery(二)--插件
- jQuery实现DIV层的收缩展开效果
- SCRIPT5009: “Math”未定义 jquery.min.js, 行2 字符1711
- jquery操作select(取值,设置选中)
- 解决jqueryUI的拖拽,如果元素中含有iframe,拖动卡的问题
- 前端代码+jquery实现类似于关键字添加的实例
- jquery-qrcode在线生成二维码
- jquery自定义控件拖拽框dragbox
- jquery自定义控件拖拽框dragbox
- JQuery初学
- Jquery.Page.js 分页插件的使用
- JQuery给网页更换皮肤的方法
- jQuery Validate (登录页面相关验证)
- jQuery实现给页面换肤的方法