几道简单的jquery练习题附加答案

小渣渣 · 发表于 2015-8-15 10:42:50

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div,span,p {
width:160px;
height:160px;
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;
}
fieldset
{
border-style:none;
}
</style>
<scrip去掉t type="text/javascrip去掉t" src="jquery-1.4.1-vsdoc.js"></scrip去掉t>
<scrip去掉t type="text/javascrip去掉t">
function a1()
{
$("#one").css("background-color","red");
}
function a2()
{
$(".mini").css("background-color","red");
}
function a3()
{
$("div").css("background-color","red");
}
function a4()
{
$("*").css("background-color","red");
}
function a5()
{
$("span,#two").css("background-color","red");
}
function b6()
{
$("body div").css("background-color","red");
}
function b7()
{
$("body>div").css("background-color","red");
}
function b8()
{
$(".one+div").css("background-color","red");
}
function b9()
{
$("#two~div").css("background-color","red");
}
function b8_a()
{
$(".one+div[class!=one]").css("background-color","red");
}
function c10()
{
$("div:first").css("background-color","red");
}
function c11()
{
$("div:last").css("background-color","red");
}
function c12()
{
$("div:not(.one)").css("background-color","red");
}
function c13()
{
$("div:even").css("background-color","red");
}
function c14()
{
$("div:odd").css("background-color","red");
}
function c15()
{
$("div:eq(3)").css("background-color","red");
}
function c16()
{
$("div:gt(3)").css("background-color","red");
}
function c17()
{
$("div:lt(3)").css("background-color","red");
}
function c18()
{
$(":header").css("background-color","red");
}
function d21()
{
$("div:contains('di')").css("background-color","red");
}
function d22()
{
$("div:empty").css("background-color","red");
}
function d23()
{
$("div:has(.mini)").css("background-color","red");
}
function d24()
{
$("div:parent").css("background-color","red");
}
function e25()
{
$("div[title]").css("background-color","red");
}
function e26()
{
$("div[title='test']").css("background-color","red");
}
function e27()
{
$("div[title!='test']").css("background-color","red");
}
function e28()
{
$("div[title^='te']").css("background-color","red");
}
function e29()
{
$("div[title$='est']").css("background-color","red");
}
function e30()
{
$("div[title*='es']").css("background-color","red");
}
function e31()
{
$("div[id][title*='es']").css("background-color","red");
}
function f32()
{
$("div[class='one'] :nth-child(2)").css("background-color","red");
}
function f33()
{
$("div[class='one'] :first-child").css("background-color","red");
}
function f34()
{
$("div[class='one'] :last-child").css("background-color","red");
}
function f35()
{
$("div[class='one'] :only-child").css("background-color","red");
}
</scrip去掉t>
</head>
<body>
<input type="radio" name="rdo" id="rdo1" target="f1" /><label for="rdo1">基本选择器</label>
<input type="radio" name="rdo" id="rdo2" target="f2" /><label for="rdo2">层次选择器</label>
<input type="radio" name="rdo" id="rdo3" target="f3" /><label for="rdo3">基本过滤选择器</label>
<input type="radio" name="rdo" id="rdo4" target="f4" /><label for="rdo4">内容过滤选择器</label>
<input type="radio" name="rdo" id="rdo5" target="f5" /><label for="rdo5">属性选择器</label>
<input type="radio" name="rdo" id="rdo6" target="f6" /><label for="rdo6">子元素过滤选择器</label>
<fieldset id="f1">
<h3>基本选择器.</h3>
<input type="button" value="选择 id为 one 的元素." id="btn1" onclick="a1();" />
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" onclick="a2();" />
<input type="button" value="选择元素名是 div 的所有元素." id="btn3" onclick="a3();" />
<input type="button" value="选择所有的元素." id="btn4" onclick="a4();" />
<input type="button" value="选择所有的span元素和id为two的元素." id="btn5" onclick="a5();" />
</fieldset>
<fieldset id="f2">
<h3>层次选择器.</h3>
<input type="button" value="选择 body内的所有div元素." id="btn6" onclick="b6();" />
<input type="button" value="在body内,选择子元素是div的。" id="btn7" onclick="b7();" />
<input type="button" value="选择所有class为one 的下一个div元素." id="btn8" onclick="b8();" />
<input type="button" value="选择所有class为one 的下一个class不为one的div元素." id="btn8_a" onclick="b8_a();" />
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn9" onclick="b9();" />
</fieldset>
<fieldset id="f3">
<h3>基本过滤选择器.</h3>
<input type="button" value="选择第一个div元素." id="btn10" onclick="c10();" />
<input type="button" value="选择最后一个div元素." id="btn11" onclick="c11();"/>
<input type="button" value="选择class不为one的所有div元素." id="btn12" onclick="c12();"/>
<input type="button" value="选择索引值为偶数的div元素." id="btn13" onclick="c13();"/>
<input type="button" value="选择索引值为奇数的div元素." id="btn14" onclick="c14();"/>
<input type="button" value="选择索引值等于3的元素." id="btn15" onclick="c15();"/>
<input type="button" value="选择索引值大于3的元素." id="btn16" onclick="c16();"/>
<input type="button" value="选择索引值小于3的元素." id="btn17" onclick="c17();"/>
<input type="button" value="选择所有的标题元素." id="btn18" onclick="c18();"/>
</fieldset>
<fieldset id="f4">
<h3>内容过滤选择器.</h3>
<input type="button" value="选取含有文本“di”的div元素." id="btn21" onclick="d21();"/>
<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn22" onclick="d22();"/>
<input type="button" value="选取含有class为mini元素的div元素." id="btn23" onclick="d23();"/>
<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn24" onclick="d24();"/>
</fieldset>
<fieldset id="f5">
<h3>属性选择器.</h3>
<input type="button" value="选取含有属性title 的div元素." id="btn25" onclick="e25();"/>
<input type="button" value="选取属性title值等于“test”的div元素." id="btn26" onclick="e26();"/>
<input type="button" value="选取属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn27" onclick="e27();"/>
<input type="button" value="选取属性title值以“te”开始的div元素." id="btn28" onclick="e28();"/>
<input type="button" value="选取属性title值以“est”结束的div元素." id="btn29" onclick="e29();"/>
<input type="button" value="选取属性title值含有“es”的div元素." id="btn30" onclick="e30();"/>
<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中选取属性title值含有“es”的元素." id="btn31" onclick="e31();"/>
</fieldset>
<fieldset id="f6">
<h3>子元素过滤选择器.</h3>
<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn32" onclick="f32();"/>
<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn33" onclick="f33();"/>
<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn34" onclick="f34();"/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn35" onclick="f35();"/>
</fieldset>
<br /><br />
<div class="one" id="one" >
div：id为one,class为one
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
div：id为two,class为one,title为test
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
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">
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>div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="sp1">我是span元素.</span>
</body>
</html>

复制代码

Demo.htm (9.12 KB, 下载次数: 0)

		自动登录	找回密码
密码			注册[Register]

[Jquery] 几道简单的jquery练习题附加答案

评分

相关帖子

浏览过的版块