您的位置：首页 > Web前端 > JQuery

jQuery---强大的选择器

2017-11-25 22:36 246 查看

在jQuey中一个强大的利器就是选择器（selcetor）。多样的选择器可以说是jQuery超越原生javascript备受人们推崇的一大重要原因。

下面，我将以一个简单的例子来讲解一下在jQuery中选择器都有哪些。而掌握jQuery的选择器最好的途径就是将下面的例子一行一行的实现出来。

first.html

<html>
<head>
<title>firstjquery</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="first.css">
</head>
<body>
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
id为two，class为one，title为test的div
<div class="mini" title="other">class为mini,tittle为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为min,title为tesst</div>
</div>

<div  style="display: none;" class="none">style的display为none的div</div>
<div class="hide">class为hide的div</div>

<div>
包含input的type为hidden的div
<input type="hidden" size="8">
</div>

<span id="mover">正在执行动画的span元素</span>

<form id="form1" action="#">
可用元素：<input value="可用文本框" name="add">
不可用元素：<input value="不可用文本框" name="email" disabled="disabled">
多选框：<br/>
<input type="checkbox" name="newsletter" checked="checked">test1
<input type="checkbox" name="newsletter" checked="checked">test2
<input type="checkbox" name="newsletter">test3
<input type="checkbox" name="newsletter" checked="checked">test4
<input type="checkbox" name="newsletter" checked="checked">test5
下拉列表：<br/>
<select name="test">
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
</select>
</form>

</body>
<script type="text/javascript" src="first.js"></script>
</html>

first.css

div,span,p{
width: 140px;
height: 140px;
margin:5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini{
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide{
display: none;
}

first.js

以下代码每一行都是一种类型的选择器，因此你需要一行一行的去观察它的效果，观察某一行的效果需要将其他行注释掉，这里为了方便，我就不一一展示效果了。

//基本选择器
$("#one").css("background","#bbffaa");
$(".mini").css("background","#bbffaa");
$("div").css("background","#bbffaa");
$("span,#two").css("background","#bbffaa");
//层次选择器
$("body div").css("background","#bbffaa")
$("body >div").css("background","#bbffaa")
$(".one + div").css("background","#bbffaa");
$("#two ~ div").css("background","#bbffaa");
//过滤选择器---基本过滤选择器
$("div:first").css("background","#bbffaa");
$("div:last").css("background","#bbffaa");
$("div:not(.one)").css("background","#bbffaa");
$("div:even").css("background","#bbffaa");
$("div:odd").css("background","#bbffaa");
$("div:eq(3)").css("background","#bbffa");
$("div:gt(3)").css("background","#bbffaa");
$("div:lt(3)").css("background","#bbffaa");
//过滤选择器---内容过滤选择器
$("div:contains('di')").css("background","#bbffaa");
$("div:empty").css("background","#bbffaa");
$("div:has('.mini')").css("background","#bbffaa");
$("div:parent").css("background","#bbffaa");
//过滤选择器--可见性过滤选择器
$("div:visible").css("background","#ffbbaa")
$("div:hidden").show(3000);
//过滤选择器---属性过滤选择器
$("div[title='test']").css("background","#bbffaa")
$("div[title！='test']").css("background","#bbffaa")
$("div[title^='test']").css("background","#bbffaa")
$("div[title$='test']").css("background","#bbffaa")
$("div[title*='test']").css("background","#bbffaa")
$("div[title|='test']").css("background","#bbffaa")
$("div[title~='test']").css("background","#bbffaa")
$("div[id][title*='test']").css("background","#bbffaa")
//过滤选择器---子元素过滤选择器
$("div.one :nth-child(2)").css("background","#bbffaa");
$("div.one :first-child").css("background","#bbffaa");
$("div.one :last-child").css("background","#bbffaa");
$("div.one :only-child").css("background","#bbffaa");
//过滤选择器--表单过滤选择器
$("#form1 input:enabled").val("it's changes!");
$("#form1 input:disabled").val("it's changes!");
$("input:checked").length;
$("input:selected").text();
//表单选择器
$("#form1 :input").length;
/*注意与$("#form1:input").length的区别,
一个小小的空格带来的区别很大*/
$("#form1 :text").length;
$("#form1 :password")

以上列出了jQuery所有的选择器的种类，但每个种类下的选择器我列出了绝大多数，还有少数我并未列出来。如果想要了解全部的话，可用看一下《锋利的jQuery》这本书，对想要入门jQuey的同学来说极有帮助。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery jquey的选择器锋利的jquery

相关文章推荐

新的分享

章节导航