首页 > 代码库 > jquery选择器
jquery选择器
Jquery 选择器
jquery是javascript封装的一个函数包，这里面有很多我们可以用到的函数，使用jq可以为我们 节省很多时间，空间并且还可以为我们解决浏览器的兼容性问题。使用jquery我们必须要注意的是要 在html文件中调用文件 今天我们就来认识一下jquery里面的一些基础的选择器。
1. 基础选择器 Basics
.ID选择器
<div id="imgDiv"></div><script type="text/javascript"> $(‘#imgDiv‘).html(‘这是一个通过id选择器获得的div！‘) .css({ ‘border‘:‘3px solid #008b8b‘, ‘position‘:‘absolute‘, ‘background‘:‘#ddd‘, ‘font-weight‘:‘bold‘, ‘width‘:‘150px‘, ‘height‘:‘150px‘})</script>
效果图如下：
.element元素选择器
<html> <body> <a href=http://www.mamicode.com/"">Homepage</a> <a href=http://www.mamicode.com/"">about</a> <a href=http://www.mamicode.com/"">news</a> <a href=http://www.mamicode.com/"">contact</a> </body> </html>$("a").css({ display:"block",lineHeight:40+"px", float:"left", width:120+"px",height:40+"px", backgroundColor:‘green‘,textAlign:"center", color:"white",textDecoration:"none", marginLeft:20+"px" })
效果图：
.class类选择器
<body><ul class="ul2"> <li class="bgGreen">bgGreen</li> <li class="bgGreen">bgGreen</li> <li id="bgBlue">bgBlue</li> <li class="bgGreen">bgGreen</li></ul><script type="text/javascript"> $(function(){$(".bgGreen").css({ background:‘green‘, color:‘white‘, fontWeight:‘bold‘, paddingLeft:‘15px‘}); });</script></body>
效果图：
.*所有元素选择器
<html> <body> <div> 我是div标签 <p> 我是P标签 </p> </div> <ul> 我是ul标签 <li>我是li标签</li> </ul> <a href=http://www.mamicode.com/"">我是A标签</a> </body> </html> <script type="text/javascript">$("*").css({ background:"#ccc", border:"2px solid green", color:"#B22222", padding:"10px", width:400+"px", margin:"10px",})
显示效果如下：
"selector1, selector2, selectorN"
selector1, selector2, selectorN 可以将几个选择器用","分隔开
然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.
<div id="div1">我是div</div><p>我是p</p><span class="sp">我是span</span><script type="text/javascript"> $("#div1,p,.sp").css({ width:‘200px‘, background:‘green‘, padding:‘10px‘, color:‘white‘, fontWeight:‘bold‘ });</script>
效果图如下：
2.层次选择器 Hierarchy
ancestor descendant层级选择器
使用"form input"的形式选中form中的所有input元素.即ancestor
(祖先)为from, descendant(子孙)为input.
<form action="" id="myform"> <span>姓名：</span><input type="text"><br> <span>地址：</span><input type="text"><br> <span>性别：</span> <input type="radio" value=http://www.mamicode.com/"man">man <input type="radio" value=http://www.mamicode.com/"woman">womang <br> <span>年龄：</span> <select name="" > <option value=http://www.mamicode.com/"19">19</option> <option value=http://www.mamicode.com/"20">20</option> <option value=http://www.mamicode.com/"21">21</option> </select> <br> 说明： <br> <textarea name="" cols="30" rows="10"></textarea></form><script type="text/javascript"> $("#myform input,textarea").css({ border:‘ 2px solid #008b8b‘, boxShadow:‘2px 2px 2px 2px #ccc‘ });</script>
效果图如下：
parent > child层级选择器
选择parent的直接子节点child. child必须包含在parent中并且父类是parent元素.
<ul class="function_wbe"> <li>javascript</li> <ul> <li>函数</li> <li>对象</li> <li>数组</li> <li>闭包</li> <li>prototype原型</li> </ul> <li>php</li> <li>html5</li> <li>jquery</li></ul><script type="text/javascript"> $(".function_wbe>li").css({ background:‘#008b8b‘, color:‘white‘, fontWeight:‘bold‘ });</script>
效果图如下：
prev + next
prev和next是两个同级别的元素. 选中在prev元素后面的next元素.
<div id="div1" style="background: #008b8b;width:300px;height:100px;margin-bottom: 5px">id="div1"</div> <div style="background: #008b8b;width:300px;height:100px;margin-bottom: 5px"></div> <div style="background: #008b8b;width:300px;height:100px"></div> <script type="text/javascript"> $("#div1+div").html(‘$("#div1+div")‘).css({ textAlign:‘center‘, lineHeight:‘100px‘, color:‘#fff‘, fontWeight:‘bold‘, background:"orange" })</script>
效果图如下：
prev ~ siblings选择器
选择prev后面的根据siblings过滤的元素 注:siblings是过滤器
<div title="div2" id="div3" style="background: green;width:300px;height:100px; margin-top:10px"></div><div id="div1" style="background: green;width:300px;height:100px;margin-top:10px"></div><div title="div1" id="div2" style="background: green;width:300px;height:100px;margin-top:10px"></div><div style="background: green;width:300px;height:100px;margin-top:10px"> <div id="xiaoDiv" style="width:100px;height:40px;border: 2px solid #CCC;">ddddddddd</div></div><script type="text/javascript"> $("#div1~[id]").css({ background:"orange" })</script>
效果图如下：
解释： $(“#div1~[id]”)选择id为div1的对象,这个对象后面（且与id为div1的对象属于同一层次的对象中)所有带有id属性的元素(~后面可以跟元素，也可以跟属性，如果跟的是元素，就是对应对象后面的与之同一层次的某种元素)
3.基本过滤器 Basic Filters
:first,:last
:first 匹配找到的第一个元素或者左后一个元素
<table class="tab_guolv" > <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>11</td> <td>22</td> <td>33</td> </tr> <tr> <td>111</td> <td>222</td> <td>333</td> </tr></table><script type="text/javascript"> $(".tab_guolv tr:first").css({ background:‘#008b8b‘ })$(".tab_guolv tr:last").css({ background:‘orange‘ })</script>
效果图如下：
:not(selector)/:selector
去除所有与给定选择器匹配的元素或则是找到与给定选择其匹配的元素；
<form action="" id="myform" style="border:2px #008b8b dashed;width:300px ;padding-left: 15px"> <h3 style="color: orange">学生信息</h3> <span>姓名：</span><input type="text" id="Text1"><br><span>性别：</span> <input type="radio" value=http://www.mamicode.com/"man" id="Radio1">man <input type="radio" value=http://www.mamicode.com/"woman">womang<br><span>年龄：</span><select name="" ><option value=http://www.mamicode.com/"19">19</option><option value=http://www.mamicode.com/"20">20</option><option value=http://www.mamicode.com/"21">21</option></select> <br> <span>学号:</span> <input type="checkbox" value=http://www.mamicode.com/"0">0 <input type="checkbox" value=http://www.mamicode.com/"1">1 <input type="checkbox" value=http://www.mamicode.com/"2">2 <input type="checkbox" value=http://www.mamicode.com/"3">3 <input type="checkbox" value=http://www.mamicode.com/"4">4<br> <input type="button" id="Button1" value=http://www.mamicode.com/"提交" class="btnCss" /></form><div id="divTip" class="divTip"></div><script type="text/javascript"> $("#Button1").click(function(){ var text = $("#Text1").val(); var sex=$("input[type=radio]:checked").val();// var sex = $("#Radio1").is(":checked")?"man":"woman"; var age=$("option:checked").val(); var number=""; $("input[type=checkbox]:checked").each(function(index,item){ number+=$(item).val() });// = $("input[type=checkbox]:checked").val();// alert(number); $("#divTip").css("display","block").html(text + "<br />" + sex + "<br />" + age + "<br />"+ number + "<br />"); })</script>
效果图如下：
解释： 将信息填写完整后，点击提交，将填写好的与选择好的选项的值显示在先隐藏的div中；
:even，:odd，:eq(index)
匹配所有索引值为偶数或是奇数 :eq(index)匹配一个给定索引值的元素
<ul class="ul_even"> <li><a href=http://www.mamicode.com/"">aaaaa</a></li> <li><a href=http://www.mamicode.com/"">bbbbb</a></li> <li><a href=http://www.mamicode.com/"">ccccc</a></li> <li><a href=http://www.mamicode.com/"">ddddd</a></li></ul><script type="text/javascript"> $(".ul_even li:even").css({ background:‘orange‘ }); $(".ul_even li:odd").css({ background:‘#008b8b‘, border:‘orange 2px solid‘ }); $(".ul_even li").each(function(index,item){ alert($(".ul_even li").eq(index).html()); })</script>
效果图如下：
解释： 对于(：eq())选择器举例的效果就是依次弹出
<a href="">aaaaa</a>，<a href="">bbbbb</a>......
:lg,:gt
gt:匹配所有大于给定索引值的元素 ,注:index从 0 开始计数,
lt:选择结果集中索引小于 N 的 elements ;
$(".ul_even li").each(function(index,item){ $(".ul_even li:gt(1)").html("ooooo");})$(".ul_even li").each(function(index,item){ $(".ul_even li:lt(1)").html("ggggg");})
效果图如下：
; 解释： 将li的索引大于1的html改为“ooooo”,li的索引小于1的改为“ggggg”,
header
选择所有h1,h2,h3一类的header标签.
<div style="border:2px #008b8b dashed;width: 350px;padding-left: 30px"> <h1>这是一个h1</h1> <h2>这是一个h2</h2> <h3>这是一个h3</h3> <h4>这是一个h4</h4> <h5>这是一个h5</h5> <h6>这是一个h6</h6></div><script type="text/javascript"> $(":header").css({ color:‘orange‘ });</script>
效果图如下：
:animated/not(:animated)
匹配所有正在执行(或则是没有在执行)动画效果的元素 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
<button id="run">Run</button><br><br><div style="position:relative;width: 150px;height:150px;background: orange;border: 2px solid #008b8b"></div><script type="text/javascript"> $("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=50" }, 1000); });</script>
效果图如图：
解释： 先有一个div距离左边的距离是0，点击run按钮之后，div就慢慢的向右边移动50px ;
4. 内容过滤器 Content Filters
:contains(text)
匹配包含给定文本的元素
查找所有包含 "John" 的 div 元素:
$("div:contains(‘John‘)")
:empty
匹配所有不包含子元素或者文本的空元素查找所有不包含子元素或者文本的空元素:$("td:empty")
:has(selector)
匹配含有选择器所匹配的元素的元素给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test");
:parent
匹配含有子元素或者文本的元素查找所有含有子元素或者文本的 td 元素:
$("td:parent")
5.可见性过滤器 Visibility Filters
:hidden
匹配所有的不可见元素注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS
visibility属性让其不显示但是占位,则不输入hidden.查找所有不可见的 tr 元素:$("tr:hidden")
:visible
匹配所有的可见元素查找所有可见的 tr 元素:$("tr:visible")
7.子元素过滤器 Child Filters
:nth-child(index/even/odd/equation)
匹配其父元素下的第N个子或奇偶元素‘:eq(index)‘ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)
在每个 ul 查找第 2 个li: $("ul li:nth-child(2)")
:first-child
匹配第一个子元素‘:first‘ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素在每个 ul 中查找第一个 li: $("ul li:first-child")
:last-child
匹配最后一个子元素‘:last‘只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 在每个 ul 中查找最后一个 li: $("ul li:last-child")
:only-child
如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹
配。在 ul 中查找是唯一子元素的 li: $("ul li:on
8.表单选择器 Forms
:input 匹配所有 input, textarea, select 和 button 元素 查找所有的input元素: $(":input")
:text 匹配所有的文本框 查找所有文本框: $(":text")
:password 匹配所有密码框 查找所有密码框: $(":password")
:radio 匹配所有单选按钮 查找所有单选按钮
:checkbox 匹配所有复选框 查找所有复选框: $(":checkbox")
:submit 匹配所有提交按钮 查找所有提交按钮: $(":submit")
:image 匹配所有图像域 匹配所有图像域: $(":image")
:reset 匹配所有重置按钮 查找所有重置按钮: $(":reset")
:button 匹配所有按钮 查找所有按钮: $(":button")
:file 匹配所有文件域 查找所有文件域: $(":file")
9.表单过滤器 Form Filters
:enabled 匹配所有可用元素 查找所有可用的input元素: $("input:enabled")
:disabled 匹配所有不可用元素 查找所有不可用的input元素: $("input:disabled")
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) 查找所有选中的复选框元素: $("input:checked")
:selected 匹配所有选中的option元素 查找所有选中的选项元素: $("select option:selected")
jquery选择器