Jquery form选择器
Posted 再见吧
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery form选择器相关的知识，希望对你有一定的参考价值。
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选择器的主要内容，如果未能解决你的问题，请参考以下文章
jQuery:not选择器的说明和:checked选择器的使用