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

Jquery - JQuery 选择器大全

2016-09-20 19:38 232 查看
问题导读：

1. jQuery选择器大全

解决方案：

基本选择器

$(document).ready(function(){
//id选择器返回的是一个元素(特殊)
$("#one").css("background","red");
//类选择器返回的一个集合
$(".one").css("background","yellow");
//element 选择器
$("p").css("font-size","22px");
// * 选择器
// 将所有字体颜色设置成蓝色
$("*").css("color","blue");
//并列选择器
$("p, div").css("margin","0px");
})


层次选择器

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>层次选择器</title>
</head>

<body>
<div>
<span>第一代 1 </span>
<span>第一代 2</span>
<p>
<span>第二代 1</span>
</p>
</div>
<div class="item"></div>
<div>+兄弟元素 1</div>
<div>+兄弟元素 2</div>

<div id="item"></div>
<div>~ 所有兄弟元素 1</div>
<div>~ 所有兄弟元素 2</div>
<div>~ 所有兄弟元素 3</div>
<div class="inside"></div>
<p> nextAll() 1 </p>
<span> nextAll() 2</span>
<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="levelSelector.js"></script>
</body>
</html>

$(document).ready(function(){
// 将div下的第一代span字体设置为红色
// >
$("div > span").css("color","red");
// 选取class 为 item 的下一个 div兄弟元素
// +
$(".item + div").css("color","red")
$(".item + div").next("div").css("color","green");
// 选取...之后所有兄弟元素
// ~
$("#item ~ div").css("color","blue");
//nextAll()
$(".inside").nextAll().css("color","red");
})


过滤选择器

1. 基本过滤选择器

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>过滤选择器 - 1</title>
</head>

<body>
<span>过滤选择器 first </span>
<span>过滤选择器 2 </span>
<span>过滤器 last</span>
<div class="wrap">not 1</div>
<!-- 这个div会被选择器得到 -->
<div>
not 2
<div class="wrap">not 3</div>
</div>

<table>
<tr><td>0</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<H6>h6</H6>

<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="filterSelector.js"></script>
</body>
</html>

$(document).ready(function(){
// 取第一个和最后一个选择器
$("span:first").css("color","red");
$("span:last").css("color","blue");
// 非元素
// not
$("div:not(.wrap)").css("color","green");
// even -> 偶数
// odd -> 奇数
$("tr:even").css("background","yellow");
$("tr:odd").css("background","blue");
// 取指定索引
$("tr:eq(0)").css("color","red");
// 大于或小于 索引
$("ul li:gt(2)").css("color","blue");
$("ul li:lt(2)").css("color","yellow");
// header
$(":header").css("background","green");
})


2. 内容过滤选择器

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>
<dl>
<dt>技术</dt>
<dd>Jquery,Jsp,sql</dd>
<dt>游戏</dt>
<dd>LoL,CF</dd>
<dt>电影</dt>
<dd>av,gv</dd>
<dt>其他</dt>
<dd></dd>
</dl>

<div>
<h2>
A
<span>B</span>
</h2>
</div>

<ul>
<ol></ol>
<ol>A</ol>
<ol></ol>
<ol>B</ol>
</ul>
<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="filterSelector_2.js"></script>
</body>
</html>

$(document).ready(function(){
// dd元素中包含'Jquery'字符串的文本会变色
$("dd:contains('Jquery')").css("color","blue");
$("dd:empty").html("没有内容");
// 拥有匹配选择器的元素
$("div:has(span)").css("border","1px solid red");
// 选取为其他元素的父元素或包含文本的元素
$("ul ol:parent").css("border","1px solid blue");

//可见性选择器
})


3. 可见性过滤选择器

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>可见性选择器</title>
<style type="text/css">
div {
margin: 10px;
width: 200px;
height: 40px;
border: 1px solid #ff0000;
display: block;
}
.hid-1 {
display: nome;
}
.hid-2 {
visibility: hidden;
}
</style>
</head>

<body>
<div class="hid-1">display:none</div>
<div class="hid-2">visibility:hidden</div>
<input type="hidden" value="Hello Jquery!"/>
<div>
jquery选择器大全
</div>
<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Jquery 1.3.2之后 :hidden 选择器仅匹配display:none 或 <input type='hidden'/>元素（隐藏并且不占空间）
// visibility: hidden;（隐藏占用空间）元素则不能被隐藏
$("div:hidden").show();
alert($("input:hidden").val());
$("div:visible").css("background","red");
});
</script>
</body>
</html>


4. 属性过滤选择器

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>属性过滤选择器</title>
</head>

<body>
<ul>
<li><a href="#" title="DOM对象和jquery对象" class="item">DOM对象和jquery对象</a></li>
<li><a href="#" title="jquery选择器大全" class="selected">jquery选择器大全</a></li>
<li><a href="#" title="jquery事件大全" class="item">jquery事件大全</a></li>
<li><a href="#" class="item">其他</a></li>
<a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a>
</ul>
<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 有title属性的 a标签会 消除下划线
$("a[title]").css("text-decoration","none");
// =
// !=
// ^= 以 value 开始
// $= 以 value 结束
// *= 包含 value
$("a[class=item]").css("color","pink");
$("a[class!=item]").css("color","orange");
$("a[title ^= DOM]").css("background","black");
$("a[title $= 事件大全]").css("background","green");
$("a[title *= jquery]").css("font-size","24px");
$("a[title ^= jQuery][class=item]").hide();
});
</script>
</body>
</html>


5. 子元素过滤选择器

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>子元素过滤选择器</title>
</head>

<body>
<div>123
<div>456
<div><div>!@#</div></div>
</div>
<div>adc</div>
<div>def</div>
</div>
<table>
<tr><td>1.2008北京奥运会</td></tr>
<tr><td>2.2012伦敦奥运会</td></tr>
<tr><td>3.2016巴西奥运会</td></tr>
<tr><td>4.2020东京奥运会</td></tr>
</table>
<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("div:first-child").length);
alert($("div:last-child").length);
// 父元素下的第一个子元素 并且是div 集合
$("div:first-child").each(function() {
alert($(this).html());
})
// 父元素下的最后一个元素 并且是div 集合
$("div:last-child").each(function() {
alert($(this).html());
})
// 当某个元素只有一个子元素 only-child
$("div:only-child").css("border","1px solid pink").css("width","200px");
// 从 1 开始， 偶数
$("tr:nth-child(even)").css("background","orange");
// 奇数
$("tr:nth-child(2n+1)").css("background","pink");
});
</script>
<div><div>1</div></div>
</body>
</html>


6. 表单对象属性过滤选择器

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>表单对象属性过滤选择器</title>
</head>

<body>
<div>
<input type="text" value="可用的文本框" />
</div>
<div>
<input type="text" disabled="disabled" value="不可用的文本框" />
</div>
<div>
<textarea disabled="disabled">不可用的文本域</textarea>
</div>
<div>
<select disabled="disabled">
<option>English</option>
<option>简体中文</option>
</select>
</div>
<div>
<input type="checkbox" checked value="xz" />选择
<input type="checkbox" value="wxz" />未选择
</div>
<div>
<input type="radio" checked value="wq" />外企
<input type="radio" checked value="gq" />国企
<input type="radio" value="mq" />民企
</div>
<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 可用不可用属性
$(":enabled").css("border","1px solid pink");
$(":disabled").css("border","1px solid orange");
// 选中的单选框或复选框元素或下拉框
$(":checked").css("background","green").each(function() {
alert($(this).val());
})
});
</script>
</body>
</html>


表单过滤选择器

1. :input（取input,textarea,select,button元素）

2. :text（取单行文本框元素）和:password（取密码框元素）

这两个选择器分别和属性选择器$('input[type=text]')、$('input[type=password]')等同。

3. :radio（取单选框元素）

:radio选择器和属性选择器$('input[type=radio]')等同

4. :checkbox（取复选框元素）

:checkbox选择器和属性选择器$('input[type=checkbox]')等同

5. :submit（取提交按钮元素）

:submit选择器和属性选择器$('input[type=submit]')等同

6. :reset（取重置按钮元素）

:reset选择器和属性选择器$('input[type=reset]')等同

7. :button（取按钮元素）

:button选择器和属性选择器$('input[type=button]')等同

8. :file（取上传域元素）

:file选择器和属性选择器$('input[type=file]')等同

9. :hidden（取不可见元素）

:hidden选择器和属性选择器$('input[type=hidden]')等同
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航