-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2019-03-11
来源 ：
阅读 868
评论 0
摘要：本篇文章探讨了jQuery教程之jQuery form选择器，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。
本篇文章探讨了jQuery教程之jQuery form选择器，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。
<
Jqeury对form元素筛选。测试代码如下：
<!DOCTYPE html>
<html>
<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="//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>
<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>
本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！
喜欢 | 0
不喜欢 | 1
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
