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

JQuery学习笔记选择器 - 代码练习

2015-09-13 17:47 519 查看

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample HTML</title>
<link href="./style.css" rel="stylesheet" type="text/css">
<script src="../scripts/jquery.js"></script>
<script src="./myjs.js"></script>

</head>
<body>

<h3>基本选择器</h3>
<!-- 控制基本选择器按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1"/>
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
<input type="button" value="选择 所有的元素." id="btn4"/>
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/><br/><br/>
<h3>层次选择器</h3>
<!--控制层次选择器按钮-->
<input type="button" value="选择 body内的所有div元素." id="btna1"/>
<input type="button" value="在body内,选择子元素是div的。" id="btna2"/>
<input type="button" value="选择 所有class为one 的下一个div元素." id="btna3"/>
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btna4"/><br/><br/>
<h3>基本过滤选择器</h3>
<!--控制基本过滤选择器-->
<input type="button" value="选择第一个div元素." id="btnb1"/>
<input type="button" value="选择最后一个div元素." id="btnb2"/>
<input type="button" value="选择class不为one的 所有div元素." id="btnb3"/>
<input type="button" value="选择索引值为偶数 的div元素." id="btnb4"/>
<input type="button" value="选择索引值为奇数 的div元素." id="btnb5"/>
<input type="button" value="选择索引值等于3的元素." id="btnb6"/>
<input type="button" value="选择索引值大于3的元素." id="btnb7"/>
<input type="button" value="选择索引值小于3的元素." id="btnb8"/>
<input type="button" value="选择所有的标题元素." id="btnb9"/>
<input type="button" value="选择当前正在执行动画的所有元素." id="btnb10"/>
<input type="button" value="选择当前获取焦点的所有元素." id="btnb11"/><br/><br/>

<h3>内容过滤选择器</h3>
<input type="button" value="选取含有文本“di”的div元素." id="btnc1"/>
<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btnc2"/>
<input type="button" value="选取含有class为mini元素 的div元素." id="btnc3"/>
<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btnc4"/><br/><br/>
<h3>可见性过滤选择器</h3>
<input type="button" value="选取所有可见的div元素." id="btnd1"/>
<input type="button" value="选取所有不可见的元素.包括&lt;input type='hidden'/&gt;和&lt;div style='display:none;'&gt;以及br." id="btnd2"/><br/><br/>

<h3> 属性选择器.</h3>
<input type="button" value="选取含有 属性title 的div元素." id="btne1"/>
<input type="button" value="选取 属性title值等于“test”的div元素." id="btne2"/>
<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btne3"/>
<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btne4"/>
<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btne5"/>
<input type="button" value="选取 属性title值 含有“es”的div元素." id="btne6"/>
<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btne7"/><br/><br/>

<h3> 属性选择器(加强).</h3>
<input type="button" value="选取 属性title值 以 en 开始 的div元素" id="btne1-1"/>
<input type="button" value="选取 属性title值 含有 en  的div元素" id="btne2-1"/>
<input type="button" value="选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素" id="btne3-1"/>
<input type="button" value="选取 属性title用空格分隔的值中包含字符uk的元素." id="btne4-1"/><br/><br/>

<h3>子元素过滤选择器.</h3>
<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btnf1"/>
<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btnf2"/>
<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btnf3"/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btnf4"/><br/><br/>

<!--测试元素-->

<br/>
<div title="en">title为en的div元素 属性选择器(加强)</div>
<div title="en-UK">title为en-UK的div元素 属性选择器(加强)</div>
<div title="english">title为english的div元素 属性选择器(加强)</div>
<div title="en uk">title为en uk的div元素 属性选择器(加强)</div>
<div title="uken">title为uken的div元素 属性选择器(加强)</div>

<div class="one" id="one">
id为one，class为one的div
<div class="mini">class为mini的div</div>
</div>
<div class="one" id="two" title="test">
id为two，class为one，title为test的div
<div class="mini" title="other">class为mini,title为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为mini,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>

</body>
</html>

style.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;
}

myjs.js

$(document).ready(function(){

//给id为mover的元素添加动画.
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
//控制基本选择器
$("#btn1").click(function(){
$("#one").css("background","#bbffaa");
});
$("#btn2").click(function(){
$(".mini").css("background","#bbffaa");
});
$("#btn3").click(function(){
$("div").css("background","#bbffaa");
});
$("#btn4").click(function(){
$("*").css("backgroundColor","#bbffaa");
});
$("#btn5").click(function(){
$("span,#two").css("background","#bbffaa");
});
//控制层次选择器
$("#btna1").click(function(){
$("body div").css("background","#bbffaa");
});
$("#btna2").click(function(){
$("body>div").css("background","#bbffaa");
});
$("#btna3").click(function(){
$(".one+div").css("background","#bbffaa");
});
$("#btna4").click(function(){
$("#two~div").css("background","#bbffaa");
});
//控制基本过滤选择器
$("#btnb1").click(function(){
$("div:first").css("background","#bbffaa");
});
$("#btnb2").click(function(){
$("div:last").css("background","#bbffaa");
});
$("#btnb3").click(function(){
$("div:not(.one)").css("background","#bbffaa");
});
$("#btnb4").click(function(){
$("div:even").css("background","#bbffaa");
});
$("#btnb5").click(function(){
$("div:odd").css("background","#bbffaa");
});
$("#btnb6").click(function(){
$("div:eq(3)").css("background","#bbffaa");
});
$("#btnb7").click(function(){
$("div:gt(3)").css("background","#bbffaa");
});
$("#btnb8").click(function(){
$("div:lt(3)").css("background","#bbffaa");
});
$("#btnb9").click(function(){
$(":header").css("background","#bbffaa");
});
$("#btnb10").click(function(){
$(":animated").css("background","#bbffaa");
});
$("#btnb11").click(function(){
$(":focus").css("background","#bbffaa");
});
//控制内容过滤选择器
$("#btnc1").click(function(){
$("div:contains('di')").css("background","#bbffaa");
});
$("#btnc2").click(function(){
$("div:empty").css("background","#bbffaa");
});
$("#btnc3").click(function(){
$("div:has('.mini')").css("background","#bbffaa");
});
$("#btnc4").click(function(){
$("div:parent").css("background","#bbffaa");
});
//可见性过滤选择器
$("#btnd1").click(function(){
$("div:visible").css("background","#bbffaa");
});
$("#btnd2").click(function(){
alert( "不可见的元素有："+$('body :hidden').length +"个!\n"+
"其中不可见的div元素有:"+$('div:hidden').length+"个!\n"+
"其中文本隐藏域有:"+$('input:hidden').length+"个!");
$('div:hidden').show(3000).css("background","#bbffaa");
$("div:hidden").show(3000).css("background","#bbffaa");
});
//控制属性选择器
$("#btne1").click(function(){
$("div[title]").css("background","#bbffaa");
});
$("#btne2").click(function(){
$("div[title='test']").css("background","#bbffaa");
});
$("#btne3").click(function(){
$("div[title!='test']").css("background","#bbffaa");
});
$("#btne4").click(function(){
$("div[title^='te']").css("background","#bbffaa");
});
$("#btne5").click(function(){
$("div[title$='est']").css("background","#bbffaa");
});
$("#btne6").click(function(){
$("div[title*='es']").css("background","#bbffaa");
});
$("#btne7").click(function(){
$("div[id][title*='es']").css("background","#bbffaa");
});
//控制属性选择器 加强
$("#btne1-1").click(function(){
$("div[title^='en']").css("background","#bbffaa");
});
$("#btne2-1").click(function(){
$("div[title*='en']").css("background","#bbffaa");
});
$("#btne3-1").click(function(){
$("div[title|='en']").css("background","#bbffaa");
});
$("#btne4-1").click(function(){
$("div[title~='uk']").css("background","#bbffaa");
});
//控制子元素过滤选择器
$("#btnf1").click(function(){
$("div.one :nth-child(2)").css("background","#bbffaa");
});
$("#btnf2").click(function(){
$("div.one :first-child").css("background","#bbffaa");
});
$("#btnf3").click(function(){
$("div.one :last-child").css("background","#bbffaa");
});
$("#btnf4").click(function(){
$("div.one :only-child").css("background","#bbffaa");
});
});

jquery 用的是v1.7.1。

-----总结自《Jquery（第二版）》

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

标签：

相关文章推荐

新的分享

章节导航

JQuery学习笔记 选择器 - 代码练习

JQuery学习笔记选择器 - 代码练习