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

jQuery选择器的使用[直接上代码]

2015-07-07 23:22 741 查看
//基本选择器：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript"src="../js/jquery-1.4.2.js"></script>
<styletype="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999CC;
border:#0001pxsolid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#0001pxsolid;
font-size:12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<inputtype="button"value="保存"class="mini"name="ok"class="mini"/>
<inputtype="button"value="改变id为one的元素的背景色为#0000FF"id="b1"/>
<inputtype="button"value="改变元素名为<div>的所有元素的背景色为#00FFFF"id="b2"/>
<inputtype="button"value="改变class为mini的所有元素的背景色为#FF0033"id="b3"/>
<inputtype="button"value="改变所有元素的背景色为#00FF33"id="b4"/>
<inputtype="button"value="改变所有的<span>元素和id为two的元素的背景色为#3399FF"id="b5"/>
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<divid="one">
id为one
</div>
<divid="two"class="mini">
id为twoclass是mini
<divclass="mini">class是mini</div>
</div>
<divclass="one">
class是one
<divclass="mini">class是mini</div>
<divclass="mini">class是mini</div>
</div>
<divclass="one">
class是one
<divclass="mini01">class是mini01</div>
<divclass="mini">class是mini</div>
</div>
<br>
<divid="mover">
动画
</div>
<br>
<spanclass="spanone">span
</span>
<spanclass="mini">span
</span>
</body>
<scriptlanguage="JavaScript">
$().ready(function(){
//<inputtype="button"value="改变id为one的元素的背景色为#0000FF"id="b1"/>
$("#b1").click(function(){
$("#one").css("background-color","red");
});
//<inputtype="button"value="改变元素名为<div>的所有元素的背景色为#00FFFF"id="b2"/>
$("#b2").click(function(){
$("div").css("background-color","red");
});
//<inputtype="button"value="改变class为mini的所有元素的背景色为#FF0033"id="b3"/>
$("#b3").click(function(){
$(".mini").css("background-color","red");
});
//<inputtype="button"value="改变所有元素的背景色为#00FF33"id="b4"/>
$("#b4").click(function(){
$("*").css("background-color","red");
});
//<inputtype="button"value="改变所有的<span>元素和id为two的元素的背景色为#3399FF"id="b5"/>
$("#b5").click(function(){
$("span,#two").css("background-color","red");
});
});
</script>
</html>
[/code]//层次选择器：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript"src="../js/jquery-1.4.2.js"></script>
<styletype="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999CC;
border:#0001pxsolid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#0001pxsolid;
font-size:12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<inputtype="button"value="保存"class="mini"name="ok"class="mini"/>
<inputtype="button"value="改变<body>内所有<div>的背景色为#0000FF"id="b1"/>
<inputtype="button"value="改变<body>内子<div>的背景色为#FF0033"id="b2"/>
<inputtype="button"value="改变id为one的下一个<div>的背景色为#0000FF"id="b3"/>
<inputtype="button"value="改变id为two的元素后面的所有兄弟<div>的元素的背景色为##0000FF"id="b4"/>
<inputtype="button"value="改变id为two的元素所有<div>兄弟元素的背景色为#0000FF"id="b5"/>
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<divid="one">
id为one
</div>
<divid="two"class="mini">
id为twoclass是mini
<divclass="mini">class是mini</div>
</div>
<divclass="one">
class是one
<divclass="mini">class是mini</div>
<divclass="mini">class是mini</div>
</div>
<divclass="one">
class是one
<divclass="mini01">class是mini01</div>
<divclass="mini">class是mini</div>
</div>
<br>
<divid="mover">
动画
</div>
<br>
<spanclass="spanone">span
</span>
</body>
<scriptlanguage="JavaScript">
$().ready(function(){
//<inputtype="button"value="改变<body>内所有<div>的背景色为#0000FF"id="b1"/>
$("#b1").click(function(){
$("bodydiv").css("background-color","red");
});
//<inputtype="button"value="改变<body>内子<div>的背景色为#FF0033"id="b2"/>
$("#b2").click(function(){
$("body>div").css("background-color","red");
});
//<inputtype="button"value="改变id为one的下一个<div>的背景色为#0000FF"id="b3"/>
$("#b3").click(function(){
$("#one+div").css("background-color","red");
});
//<inputtype="button"value="改变id为two的元素后面的所有兄弟<div>的元素的背景色为##0000FF"id="b4"/>
$("#b4").click(function(){
$("#two~div").css("background-color","red");
});
//<inputtype="button"value="改变id为two的元素所有<div>兄弟元素的背景色为#0000FF"id="b5"/>
$("#b5").click(function(){
$("#two").siblings("div").css("background-color","red");
});
});
</script>
</html>
[/code]//基础过滤选择器：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript"src="../js/jquery-1.4.2.js"></script>
<styletype="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999CC;
border:#0001pxsolid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#0001pxsolid;
font-size:12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<inputtype="button"value="保存"class="mini"name="ok"class="mini"/>
<inputtype="button"value="改变第一个div元素的背景色为#0000FF"id="b1"/>
<inputtype="button"value="改变最后一个div元素的背景色为#0000FF"id="b2"/>
<inputtype="button"value="改变class不为one的所有div元素的背景色为#0000FF"id="b3"/>
<inputtype="button"value="改变索引值为偶数的div元素的背景色为#0000FF"id="b4"/>
<inputtype="button"value="改变索引值为奇数的div元素的背景色为#0000FF"id="b5"/>
<inputtype="button"value="改变索引值为大于3的div元素的背景色为#0000FF"id="b6"/>
<inputtype="button"value="改变索引值为等于3的div元素的背景色为#0000FF"id="b7"/>
<inputtype="button"value="改变索引值为小于3的div元素的背景色为#0000FF"id="b8"/>
<inputtype="button"value="改变所有的标题元素的背景色为#0000FF"id="b9"/>
<inputtype="button"value="改变当前正在执行动画的所有元素的背景色为#0000FF"id="b10"/>
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<divid="one">
id为one
</div>
<divid="two"class="mini">
id为twoclass是mini
<divclass="mini">class是mini</div>
</div>
<divclass="one">
class是one
<divclass="mini">class是mini</div>
<divclass="mini">class是mini</div>
</div>
<divclass="one">
class是one
<divclass="mini01">class是mini01</div>
<divclass="mini">class是mini</div>
</div>
<br>
<divid="mover">
动画
</div>
<br>
</body>
<scriptlanguage="JavaScript">
$().ready(function(){
//<inputtype="button"value="改变第一个div元素的背景色为#0000FF"id="b1"/>
$("#b1").click(function(){
$("div:first").css("background-color","red");
});
//<inputtype="button"value="改变最后一个div元素的背景色为#0000FF"id="b2"/>
$("#b2").click(function(){
$("div:last").css("background-color","red");
});
//<inputtype="button"value="改变class不为one的所有div元素的背景色为#0000FF"id="b3"/>
$("#b3").click(function(){
$("div:not(.one)").css("background-color","red");
});
//<inputtype="button"value="改变索引值为偶数的div元素的背景色为#0000FF"id="b4"/>
$("#b4").click(function(){
$("div:even").css("background-color","red");
});
//<inputtype="button"value="改变索引值为奇数的div元素的背景色为#0000FF"id="b5"/>
$("#b5").click(function(){
$("div:odd").css("background-color","red");
});
//<inputtype="button"value="改变索引值为大于3的div元素的背景色为#0000FF"id="b6"/>
$("#b6").click(function(){
$("div:gt(3)").css("background-color","red");
});
//<inputtype="button"value="改变索引值为等于3的div元素的背景色为#0000FF"id="b7"/>
$("#b7").click(function(){
$("div:eq(3)").css("background-color","red");
});
//<inputtype="button"value="改变索引值为小于3的div元素的背景色为#0000FF"id="b8"/>
$("#b8").click(function(){
$("div:lt(3)").css("background-color","red");
});
//<inputtype="button"value="改变所有的标题元素的背景色为#0000FF"id="b9"/>
$("#b9").click(function(){
$(":header").css("background-color","red");
});
//<inputtype="button"value="改变当前正在执行动画的所有元素的背景色为#0000FF"id="b10"/>
$("#b10").click(function(){
$(":animated").css("background-color","red");
});
functionm(){
$("#mover").slideToggle("slow",m);
}
m();
});
</script>
</html>
[/code]//内容过滤选择器：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript"src="../js/jquery-1.4.2.js"></script>
<styletype="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999CC;
border:#0001pxsolid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#0001pxsolid;
font-size:12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<inputtype="button"value="保存"class="mini"name="ok"class="mini"/>
<inputtype="button"value="改变含有文本‘di’的div元素的背景色为#0000FF"id="b1"/>
<inputtype="button"value="改变不包含子元素(或者文本元素)的div空元素的背景色为"id="b2"/>
<inputtype="button"value="改变含有class为mini元素的div元素的背景色为#0000FF"id="b3"/>
<inputtype="button"value="改变含有子元素(或者文本元素)的div元素的背景色为#0000FF"id="b4"/>
<inputtype="button"value="改变不含有文本di;的div元素的背景色"id="b5"/>
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<divid="one">
id为onediv
</div>
<divid="two"class="mini">
id为twoclass是minidiv
<divclass="mini">class是mini</div>
</div>
<divclass="one">
class是one
<divclass="mini">class是mini</div>
<divclass="mini">class是mini</div>
</div>
<divclass="one">
class是one
<divclass="mini01">class是mini01</div>
<divclass="mini">class是mini</div>
</div>
<divclass="one">
</div>
<br>
<divid="mover">
动画
</div>
<br>
</body>
<scriptlanguage="JavaScript">
$().ready(function(){
//<inputtype="button"value="改变含有文本‘di’的div元素的背景色为#0000FF"id="b1"/>
$("#b1").click(function(){
$("div:contains('di')").css("background-color","red");
});
//<inputtype="button"value="改变不包含子元素(或者文本元素)的div空元素的背景色为"id="b2"/>
$("#b2").click(function(){
$("div:empty").css("background-color","red");
});
//<inputtype="button"value="改变含有class为mini元素的div元素的背景色为#0000FF"id="b3"/>
$("#b3").click(function(){//谁有选谁
$("div:has(.mini)").css("background-color","red");
});
//<inputtype="button"value="改变含有子元素(或者文本元素)的div元素的背景色为#0000FF"id="b4"/>
$("#b4").click(function(){
$("div:parent").css("background-color","red");
});
//<inputtype="button"value="改变不含有文本di;的div元素的背景色"id="b5"/>
$("#b5").click(fu
24000
nction(){
$("div:not(:contains('di'))").css("background-color","red");
});
});
</script>
</html>
[/code]//可见度过滤选择器：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript"src="../js/jquery-1.4.2.js"></script>
<styletype="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999CC;
border:#0001pxsolid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#0001pxsolid;
font-size:12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<inputtype="button"value="保存"class="mini"name="ok"class="mini"/>
<inputtype="button"value="改变所有可见的div元素的背景色为#0000FF"id="b1"/>
<inputtype="button"value="选取所有不可见的元素,利用jQuery中的show()方法将它们显示出来,并设置其背景色为#0000FF"id="b2"/>
<inputtype="button"value="选取所有的文本隐藏域,并打印它们的值"id="b3"/>
<inputtype="button"value="选取所有的文本隐藏域,并打印它们的值"id="b4"/>
<!--文本隐藏域-->
<inputtype="hidden"value="hidden_1">
<inputtype="hidden"value="hidden_2">
<inputtype="hidden"value="hidden_3">
<inputtype="hidden"value="hidden_4">
<inputtype="hidden"value="hidden_5">
<inputtype="hidden"value="hidden_6">
<inputtype="hidden"value="hidden_7">
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<divid="one">
id为onediv
</div>
<divid="two"class="mini">
id为twoclass是minidiv
<divclass="mini">class是mini</div>
</div>
<divclass="visible">
class是one
<divclass="mini">class是mini</div>
<divclass="mini">class是mini</div>
</div>
<divclass="one">
class是one
<divclass="mini01">class是mini01</div>
<divclass="mini">class是mini</div>
</div>
<divstyle="display:none">
这是隐藏的
</div>
<divclass="one">
</div>
<br>
<divid="mover">
动画
</div>
<br>
</body>
<scriptlanguage="JavaScript">
$().ready(function(){
//<inputtype="button"value="改变所有可见的div元素的背景色为#0000FF"id="b1"/>
$("#b1").click(function(){
$("div:visible").css("background-color","red");
});
//<inputtype="button"value="选取所有不可见的元素(实际含不可见的孩子们),利用jQuery中的show()方法将它们显示出来,并设置其背景色为#0000FF"id="b2"/>
$("#b2").click(function(){
$("div:hidden").each(function(index,domEle){
$(this).show();//把当前遍历的DOM对象转换成了jQuery对象
$(this).css("background-color","red");
});
});
/*
jQuery中的each(function(index,domEle){})
index:当前遍历的索引
domEle:当前遍历的DOM对象。
*/
//<inputtype="button"value="选取所有的文本隐藏域,并打印它们的值"id="b3"/>
//<inputtype="button"value="选取所有的文本隐藏域,并打印它们的值"id="b4"/>
});
</script>
</html>
[/code]//属性过滤选择器：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript"src="../js/jquery-1.4.2.js"></script>
<styletype="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999CC;
border:#0001pxsolid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#0001pxsolid;
font-size:12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<inputtype="button"value="保存"class="mini"name="ok"class="mini"/>
<inputtype="button"value="含有属性title的div元素"id="b1"/>
<inputtype="button"value="属性title值等于test的div元素"id="b2"/>
<inputtype="button"value="属性title值不等于test的div元素(没有属性title的也将被选中)"id="b3"/>
<inputtype="button"value="属性title值以te开始的div元素."id="b4"/>
<inputtype="button"value="属性title值以est结束的div元素.."id="b5"/>
<inputtype="button"value="属性title值含有es的div元素."id="b6"/>
<inputtype="button"value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的div元素"id="b7"/>
<!--文本隐藏域-->
<inputtype="hidden"value="hidden_1">
<inputtype="hidden"value="hidden_2">
<inputtype="hidden"value="hidden_3">
<inputtype="hidden"value="hidden_4">
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<divid="one">
id为onediv
</div>
<divid="two"class="mini"title="test">
id为twoclass是minidivtitle="test"
<divclass="mini">class是mini</div>
</div>
<divclass="visible">
class是one
<divclass="mini">class是mini</div>
<divclass="mini">class是mini</div>
</div>
<divclass="one"title="test02">
class是onetitle="test02"
<divclass="mini01">class是mini01</div>
<divclass="mini">class是mini</div>
</div>
<divclass="visible">
这是隐藏的
</div>
<divclass="one">
</div>
<br>
<divid="mover">
动画
</div>
<br>
</body>
<scriptlanguage="JavaScript">
$().ready(function(){
//<inputtype="button"value="含有属性title的div元素"id="b1"/>
$("#b1").click(function(){
$("div[title]").css("background-color","red");
});
//<inputtype="button"value="属性title值等于test的div元素"id="b2"/>
$("#b2").click(function(){
$("div[title='test']").css("background-color","red");
});
//<inputtype="button"value="属性title值不等于test的div元素(没有属性title的也将被选中)"id="b3"/>
$("#b3").click(function(){
$("div[title!='test']").css("background-color","red");
});
//<inputtype="button"value="属性title值以te开始的div元素."id="b4"/>
$("#b4").click(function(){
$("div[title^='te']").css("background-color","red");
});
//<inputtype="button"value="属性title值以est结束的div元素.."id="b5"/>
$("#b5").click(function(){
$("div[title$='est']").css("background-color","red");
});
//<inputtype="button"value="属性title值含有es的div元素."id="b6"/>
$("#b6").click(function(){
$("div[title*='es']").css("background-color","red");
});
//<inputtype="button"value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的div元素"id="b7"/>
$("#b7").click(function(){
$("div[id][title*='es']").css("background-color","red");
});
});
</script>
</html>
[/code]//子元素过滤选择器：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript"src="../js/jquery-1.4.2.js"></script>
<styletype="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999CC;
border:#0001pxsolid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#0001pxsolid;
font-size:12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<inputtype="button"value="保存"class="mini"name="ok"class="mini"/>
<inputtype="button"value="每个class为one的div父元素下的第2个子元素"id="b1"/>
<inputtype="button"value="每个class为one的div父元素下的第一个子元素"id="b2"/>
<inputtype="button"value="每个class为one的div父元素下的最后一个子元素"id="b3"/>
<inputtype="button"value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"id="b4"/>
<!--文本隐藏域-->
<inputtype="hidden"value="hidden_1">
<inputtype="hidden"value="hidden_2">
<inputtype="hidden"value="hidden_3">
<inputtype="hidden"value="hidden_4">
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<divid="one">
id为onediv
</div>
<divid="one"class="mini"title="test">
id为twoclass是minidivtitle="test"
<divclass="mini">class是mini</div>
</div>
<divclass="one"title="test">
<divclass="mini">class是mini******</div>
</div>
<divclass="visible">
class是one
<divclass="mini">class是mini</div>
<divclass="mini">class是mini</div>
</div>
<divclass="one"title="test02">
class是onetitle="test02"(**************
<divclass="mini01">class是mini01</div>
<divclass="mini">cdddddddlass是mini</div>
</div>
<divclass="visible">
这是隐藏的
</div>
<divclass="one">
</div>
<br>
<divid="mover">
动画
</div>
<br>
</body>
<scriptlanguage="JavaScript">
$().ready(function(){
//<inputtype="button"value="每个class为one的div父元素下的第2个子元素"id="b1"/>
$("#b1").click(function(){
$("div[class='one']:nth-child(2)").css("background-color","red");
});
//<inputtype="button"value="每个class为one的div父元素下的第一个子元素"id="b2"/>
$("#b2").click(function(){
$("div[class='one']:first-child").css("background-color","red");
});
//<inputtype="button"value="每个class为one的div父元素下的最后一个子元素"id="b3"/>
$("#b3").click(function(){
$("div[class='one']:last-child").css("background-color","red");
});
//<inputtype="button"value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"id="b4"/>
$("#b4").click(function(){
$("div[class='one']:only-child").css("background-color","red");
});
});
</script>
</html>
[/code]//表单对象属性过滤选择器：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript"src="../js/jquery-1.4.2.js"></script>
<styletype="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999CC;
border:#0001pxsolid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#0001pxsolid;
font-size:12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<inputtype="button"value="保存"class="mini"name="ok"class="mini"/>
<inputtype="button"value="利用jQuery对象的val()方法改变表单内可用<input>元素的值"id="b1"/>
<inputtype="button"value="利用jQuery对象的val()方法改变表单内不可用<input>元素的值"id="b2"/>
<inputtype="button"value="利用jQuery对象的length属性获取多选框选中的个数"id="b3"/>
<inputtype="button"value="利用jQuery对象的text()方法获取下拉框选中的内容"id="b4"/>
<inputtype="text"value="不可用值1"disabled="disabled">
<inputtype="text"value="可用值1">
<inputtype="text"value="不可用值2"disabled="disabled">
<inputtype="text"value="可用值2">
<br>
<inputtype="checkbox"name="items"value="美容">美容
<inputtype="checkbox"name="items"value="IT">IT
<inputtype="checkbox"name="items"value="金融">金融
<inputtype="checkbox"name="items"value="管理">管理
<br>
<inputtype="radio"name="sex"value="男">男
<inputtype="radio"name="sex"value="女">女
<br>
<selectname="job"id="job"multiple="multiple"size=4>
<option>程序员</option>
<option>中级程序员</option>
<option>高级程序员</option>
<option>系统分析师</option>
</select>
<selectname="edu"id="edu">
<option>本科</option>
<option>博士</option>
<option>硕士</option>
<option>大专</option>
</select>
<divid="two"class="mini">
id为twoclass是minidiv
<divclass="mini">class是mini</div>
</div>
<divclass="one">
class是one
<divclass="mini">class是mini</div>
<divclass="mini">class是mini</div>
</div>
<divclass="one">
class是one
<divclass="mini01">class是mini01</div>
<divclass="mini">class是mini</div>
</div>
</body>
<scriptlanguage="JavaScript">
$().ready(function(){
//<inputtype="button"value="利用jQuery对象的val()方法改变表单内可用<input>元素的值"id="b1"/>
$("#b1").click(function(){
$("input:enabled").each(function(index,domELe){
alert($(this).val());
});
});
//<inputtype="button"value="利用jQuery对象的val()方法改变表单内不可用<input>元素的值"id="b2"/>
$("#b2").click(function(){
$("input:disabled").each(function(index,domELe){
alert($(this).val<101fb/span>());
});
});
//<inputtype="button"value="利用jQuery对象的length属性获取多选框选中的个数"id="b3"/>
$("#b3").click(function(){
$("input:checked").each(function(index,domELe){
alert($(this).val());
});
});
//<inputtype="button"value="利用jQuery对象的text()方法获取下拉框选中的内容"id="b4"/>
$("#b4").click(function(){
$("selectoption:selected").each(function(index,domELe){
alert($(this).text());
});
});
});
</script>
</html>
[/code]//Test2计算选定的多选的个数：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript"src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<form>
<inputtype="checkbox"name="hobby"value="篮球"/>篮球
<inputtype="checkbox"name="hobby"value="足球"/>足球
<inputtype="checkbox"name="hobby"value="排球"/>排球
<inputtype="checkbox"name="hobby"value="乒乓球"/>乒乓球
<inputtype="button"name="b1"id="b1"value="选中的个数"/>
</form>
<scripttype="text/javascript">
$().ready(function(){
$("#b1").click(function(){
alert($("input:checkbox:checked").length);
});
});
</script>
</body>
</html>
[/code]
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                jQuery
                                                js
                                                表单
                                                互联网
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航