Jqeury对form元素筛选。测试代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<meta name="viewport" content="width=device-width, initial-scale=1.0">
???<meta http-equiv="X-UA-Compatible" content="ie=edge">
???<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
???<style>
???????div {
???????????height: 100px;
???????????width: 100px;
???????????border: 1px solid red;
???????}
???????.highColor {
???????????color: yellow;
???????}
???</style>
</head>
<body>
???<form id="form1" action="#">
???????<div class="aaa">
???????????<label for="aa">aaaaabbbb</label>
???????????<label for="aa">333333</label>
???????</div>
???????<input type="text" value="慢慢显示" hidden="true"><br/>
???????<input name="add" value="可用文本" /><br/>
???????<input name="email" value="不可用文本框" disabled="disabled" /><br/>
???????<input name="che" value="可用文本" /><br/>
???????<input name="name" value="不可用文本框" disabled="disabled" /><br/>
???????<br/><br/>
???????<input type="checkbox" name="newsletter" value="test1" checked="checked">测试一
???????<input type="checkbox" name="newsletter" value="test2">测试二
???????<input type="checkbox" name="newsletter" value="test3">测试三
???????<input type="checkbox" name="newsletter" value="test4" checked="checked">测试四
???????<input type="checkbox" name="newsletter" value="test5">测试五
???????<div id="divText"></div>
???????<br/><br/> 下拉列表1:
???????<br/>
???????<select name="test1" multiple="multiple" style="height:100px">
???????????<option selected="selected">浙江</option>
???????????<option >湖南</option>
???????????<option >天津</option>
???????????<option selected="selected">北京</option>
???????????<option >广州</option>
???????????<option selected="selected">湖北</option>
???????</select><br/><br/> 下拉列表2:
???????<br/>
???????<select name="test1">
???????????<option >浙江</option>
???????????<option >湖南</option>
???????????<option >天津</option>
???????????<option selected="selected">北京</option>
???????????<option >广州</option>
???????????<option >湖北</option>
???????</select><br/><br/>
???????<div>
???????????<ul>
???????????????<li>hahaha0<span>hahaha1</span></li>
???????????????<li>hahaha1</li>
???????????????<li>hahaha2</li>
???????????????<li>hahaha3</li>
???????????????<li>hahaha4</li>
???????????</ul>
???????</div>
???</form>
???<script>
???????//三、过滤选择器的使用,一般都是用:。
???????$(function() {
???????????$("input:enabled").val("我是可用的");
???????????$("input:disabled").val("我是不可用的");
???????????var length = $("input:checked").length;
???????????//获取多选中选中的内容
???????????//var selectedStr = $("select:first option:selected").text();
???????????//获取多选中选中的个数----------------这个很重要
???????????//var selectedStr = $("select:first option:selected").length;
???????????//获取多选框中第N个选中的内容,index从0开始。----------------这个很重要
???????????// var selectedStr = $("select:first option:selected").get(0).textContent;
???????????//这个属于延伸自己拓展:表示select的子代第一个子代被选中的元素,并获取。如果没被选中,则报错。
???????????//var selectedStr = $("select :first:selected").get(0).textContent;
???????????// alert("length=" + length + "; selectedStr=" + selectedStr);
???????????// var length1 = $("#form1 :input").length; //这个是form中元素的个数,不只是input框
???????????// alert("length1=" + length1);
???????????// var str = $(".aaa").get(0).children("label").get(0).textContent;
???????????// var str = $(".aaa").children("label:first").text();
???????????// alert(str);
???????????//filter 对所有子代进行筛选符合条件的。返回自身$("div ul li")集合
???????????// $("div ul li").filter(":contains(hahaha3),:contains(hahaha1)").addClass("highColor");
???????????//find ?对所有子代进行筛选符合条件的,返回$("div ul li")所有子元素集合
???????????//$("div ul ").find(":contains(hahaha3),:contains(hahaha1)").addClass("highColor");
???????????$("div ul ").find(":contains(hahaha3),:contains(hahaha1)").css("color", "red");
???????})
???</script>
</body>
</html>
Jquery form选择器
原文地址:https://www.cnblogs.com/lixianfu5005/p/9127155.html