标签:
:nth-child :
:first-child : $(“ul li:first-child”)
将所有ul中的第一个li元素作为Dom对象放进jQuery包装集并返回。
:last-child : $(“ul li:last-child”)
将所有ul中的最后一个li元素作为Dom对象放进jQuery包装集并返回。
:only-child : $(“ul li:only-child”)
将所有有且仅有一个子元素,并且该元素是li元素的ul元素作为Dom对象放进jQuery包装集返回。
<head>
<base href="<%=basePath%>">
<title>My JSP ‘ad_selector7.jsp‘ starting page</title>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//获取所有ul中第二个li
function doSelector1(){
var nthchild = $("ul li:nth-child(2)");
nthchild.each(function(){
alert($(this).html());
});
}
//获取所有ul中第奇数个li(从1开始)
function doSelector2(){
var nthchild = $("ul li:nth-child(odd)");
nthchild.each(function(){
alert($(this).html());
});
}
//获取所有ul中第一个li
function doSelector3(){
var nthchild = $("ul li:first-child");
nthchild.each(function(){
alert($(this).html());
});
}
//获取所有ul中最后一个li
function doSelector4(){
var nthchild = $("ul li:last-child");
nthchild.each(function(){
alert($(this).html());
});
}
//获取所有ul中唯一的li(ul中只有一个元素,且该元素是li,才能被选中,有多个li,或者其他元素都不会被选中)
function doSelector5(){
var nthchild = $("ul li:only-child");
nthchild.each(function(){
alert($(this).html());
});
}
</script>
</head>
<body>
<div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ul>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
<ul>
<li>777</li>
</ul>
</div>
<input type="button" value=":nth-child" onclick="doSelector1()">
<input type="button" value=":nth-child" onclick="doSelector2()">
<input type="button" value=":first-child" onclick="doSelector3()">
<input type="button" value=":last-child" onclick="doSelector4()">
<input type="button" value=":only-child" onclick="doSelector5()">
</body>
:input : $(“:input”);
将所有input元素作为Dom对象放进jQuery包装集并返回,
注意:这里的input元素包括input, textarea, select 和 button 元素 , 注意与 $(“input”) 的区别
:text : $(“:text”);
将所有的文本框(text元素)作为Dom对象放进jQuery包装集并返回。
注意:textarea是文本域,不是文本框,所以这里taxtarea元素不会被选中
:password : $(“:password”);
将所有密码框作为Dom对象放进jQuery包装集并返回。
:radio : $(“:radio”);
将所有单选按钮作为Dom对象放进jQuery包装集并返回。
:checkbox : $(“:checkbox”);
将所有复选按钮作为Dom对象放进jQuery包装集并返回。
:submit : $(“:submit”);
将所有提交表单作为Dom对象放进jQuery包装集并返回
注意:
:image : $(“:image”);
将所有图像域作为Dom对象放进jQuery包装集并返回
:reset : $(“:reset”);
将所有重置按钮作为Dom对象放进jQuery包装集并返回。
:button : $(“:button”);
将所有普通按钮作为Dom对象放进jQuery包装集并返回。
注意:
:file : $(“:file”);
将所有文件域作为Dom对象放进jQuery包装集并返回。
:hidden : $(“input:hidden”);
将所有不可见的input元素作为Dom对象放进jQuery包装集并返回。
<head>
<base href="<%=basePath%>">
<title>My JSP ‘ad_selector8.jsp‘ starting page</title>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//获取所有的input元素( input, textarea, select 和 button 元素)
function doSelector1(){
var inputs = $(":input"); //注意与 $("input")的区别
inputs.each(function(){
alert($(this).val()+$(this).html());
});
}
//获取所有的文本框( textarea是文本域,不是文本框,不会被选中)
function doSelector2(){
var texts = $(":text");
texts.each(function(){
alert($(this).val()+$(this).html());
});
}
//获取所有的密码框
function doSelector3(){
var passwords = $(":password");
passwords.each(function(){
alert($(this).val()+$(this).html());
});
}
//获取所有的单选按钮
function doSelector4(){
var radios = $(":radio");
radios.each(function(){
alert($(this).val()+$(this).html());
});
}
//获取所有的复选按钮
function doSelector5(){
var checkboxs = $(":checkbox");
checkboxs.each(function(){
alert($(this).val()+$(this).html());
});
}
//获取所有的提交按钮(type="submit")
//注意:<button name="test7" id="test7">test7</button> 默认type=submit,所以会被选中
//如果<button name="test7" id="test7">test7</button>增加属性 type="button" ,则不会被选中
function doSelector6(){
var submits = $(":submit");
submits.each(function(){
alert($(this).val()+$(this).html());
});
}
//获取所有的图像域
function doSelector7(){
var images = $(":image");
images.each(function(){
alert($(this).val()+$(this).html());
});
}
//获取所有的重置按钮
function doSelector8(){
var resets = $(":reset");
resets.each(function(){
alert($(this).val()+$(this).html());
});
}
//获取所有的按钮(submit 和 reset 都不会被选中)
//<button name="test7" id="test7" >test7</button> 感觉是个bug :submit和:button都可以选中,
//即使增加属性type="submit" <button name="test7" id="test7" >test7</button>还是会被选中
//而其他的input如果属性为type="submit"或者type="reset" 则不会被选中。
function doSelector9(){
var buttons = $(":button");
buttons.each(function(){
alert($(this).val()+$(this).html());
});
}
//获取所有文件域
function doSelector10(){
var files = $(":file");
files.each(function(){
alert($(this).val()+$(this).html());
});
}
//获取所有不可见的input,或者type=hidden的input
function doSelector11(){
var hiddens = $("input:hidden");
hiddens.each(function(){
alert($(this).val()+$(this).html());
});
}
</script>
</head>
<body>
<div>
<form action="">
<input type="text" id="test1" value="test1" >
<input type="text" id="test2" value="test2" >
<input type="password" id="test3" value="test3" >test3<br>
<select id="test4">test4</select>test4
<select id="test5" >test5</select>test5<br>
<textarea id="test6" rows="5" cols="5">test6</textarea><br>
<button name="test7" id="test7" type=button >test7</button><br>
<input type="radio" id="test8" name="test8" value="test8">test8<br>
<input type="checkbox" id="test9" name="test9" value="test9">test9
<input type="checkbox" id="test9" name="test9" value="test10">test10<br>
<input type="submit" id="test11" name="test11" value="test11"><br>
<input type="image" id="test12" name="test12" value="test12"><br>
<input type="reset" id="test13" name="test13" value="test13"><br>
<input type="file" id="test14" name="test14" value="test14"><br>
<input type="hidden" id="test15" name="test15" value="test15" >
</form>
</div>
<input type="button" value=":input" onclick="doSelector1()">
<input type="button" value=":text" onclick="doSelector2()">
<input type="button" value=":password" onclick="doSelector3()">
<input type="button" value=":radio" onclick="doSelector4()">
<input type="button" value=":checkbox" onclick="doSelector5()">
<input type="button" value=":submit" onclick="doSelector6()">
<input type="button" value=":image" onclick="doSelector7()">
<input type="button" value=":reset" onclick="doSelector8()">
<input type="button" value=":button" onclick="doSelector9()">
<input type="button" value=":file" onclick="doSelector10()">
<input type="button" value=":hidden" onclick="doSelector11()">
</body>
:enabled : $(“input:enabled”);
将所有有效的input元素作为Dom对象放进jQuery包装集并返回
:disabled : $(“input:disabled”);
将所有无效的input元素作为Dom对象放进jQuery包装集并返回
:checked : $(“input:checked”);
将所有被选中的单选框,复选框作为Dom对象放进jQuery包装集并返回(不包括select中的option)
:selected : $(“select option:selected”);
将所有被选中的option作为Dom对象放进jQuery包装集并返回。
<head>
<base href="<%=basePath%>">
<title>My JSP ‘ad_selector9.jsp‘ starting page</title>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//获取有效的input表单元素
function doSelector1(){
var enableds = $("input:enabled");
enableds.each(function(){
alert($(this).val());
});
}
//获取无效的input表单元素
function doSelector2(){
var enableds = $("input:disabled");
enableds.each(function(){
alert($(this).val());
});
}
//匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
function doSelector3(){
var checkeds = $("input:checked");
checkeds.each(function(){
alert($(this).val());
});
}
//获取所有被选中的option
function doSelector4(){
var options = $("select option:selected");
options.each(function(){
alert($(this).val());
});
}
</script>
</head>
<body>
<div>
<input type="text" name="test1" value="test1" disabled="disabled">
<input type="text" name="test2" value="test2" >
</div>
<div>
<input type="checkbox" name="test3" value="test3" checked="checked">test3
<input type="checkbox" name="test3" value="test4" >test4
<input type="checkbox" name="test3" value="test5" checked="checked">test5
</div>
<div>
<select>
<option value="test6" selected="selected">test6</option>
<option value="test7">test7</option>
<option value="test8" >test8</option>
</select>
</div>
<input type="button" value=":enabled" onclick="doSelector1()">
<input type="button" value=":disabled" onclick="doSelector2()">
<input type="button" value=":checked" onclick="doSelector3()">
<input type="button" value=":selected" onclick="doSelector4()">
</body>
标签:
原文地址:http://blog.csdn.net/kyle0349/article/details/51938857