JQuery 过滤选择器 与属性修改的方法演示比较
文本匹配
在表单输入项里面输入值，根据输入值，点击判断按钮，让对应的复选框选中
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
请输入城市：<input type="text" id="id"/>
<br/><br/>
城市复选框：
<div style="width:200px;background:red;">
<input type="checkbox" name="love" value="北京"/>北京
<input type="checkbox" name="love" value="南京"/>南京
<input type="checkbox" name="love" value="上海"/>上海
</div> <br/><br/>
<input type="button" value="判断" onclick="checkCity()"/>
<!-- 思路一-->
<script type="text/javascript">
function checkCity(){
var city= $("#id").val();
alert(city);
$("input[name=love]").each(function(index,element){
if(element.value==city){
alert("just it");
// 以下四种方法都行
// $(element).prop("checked",true);
$(element).attr("checked",true);
// $(element).prop("checked","checked");
// $(element).attr("checked","checked");
}
})
}
</script>
<!-- 思路二-->
<script type="text/javascript">
function checkCity(){
$("input[name=love").prop("checked",false);
var city= $("#id").val();
$("input[value="+city+"]").prop("checked",true); }
</script>
</body> </html>
获取复选框状态
点击按钮，获取复选框状态为选中的个数，并将结果弹出在页面
基础页面效果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script> </head> <body>
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="button" value="提交"/> </body>
<script type="text/javascript">
// 方法一
// $(function(){
// var i=0;
// $("input[type=button]").click(function(){
// $("input[type=checkbox]").each(function(index,element){
// //这里使用attr就不行
// alert($(element).prop("checked"));
// if($(element).prop("checked")==true){
// i++;
// }
// });
// alert(i);
// });
// });
// 方法二
// $(function(){
// var i=0;
// $("input[type=button]").click(function(){
// $("input[type=checkbox]:checked").each(function(index,element){
// i++;
// });
// alert(i);
// });
// });
// 方法三
$(function(){
var i=0;
$("input[type=button]").click(function(){
alert($("input[type=checkbox]:checked").length);
});
});
</script>
</html>
属性更改
当复选框被选中时，复选框对应的文本颜色为红色；
当复选框未被选中时，复选框对应的文本颜色为黑色；
基础页面效果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> </head> <body>
<table border="1">
<tr>
<td><input type="checkbox" class="ck" /> <font >Data1</font></td> </tr>
<tr>
<td><input type="checkbox" class="ck" /><font >Data2</font></td> </tr>
<tr>
<td><input type="checkbox" class="ck" /><font >Data3</font></td> </tr>
</table>
<script type="text/javascript">
$(function(){
for(var i=0;i<$(".ck").length;i++){
// 这里注意取数组元素后不是JQuery对象了,要在穿上马甲才能使用click()属于JQuery方法
$($(".ck")[i]).click(function(){
alert();
if($(this).prop("checked")==true){
$(this).next().css("color","red");
}else{
$(this).next().css("color","black");
}
});
} // for(var i = 0; i < ck.length; i++) {
// $(ck[i]).click(function() {
//
// //获取复选框的选中状态
// var cked = $(this).prop("checked");
//
// //如果选中
// if(cked == true) {
//
// //将第二个单元格内的文本字体变红色
// $(this).next().prop("color", "red");
// } else {
// //将第二个单元格内字体变黑色
// $(this).next().prop("color", "black")
// }
// })
// $("input[type=checkbox]:eq(2)").click(function(){
// if($("input[type=checkbox]:eq(2)").prop("checked")==true){
// $("font:eq(2)").css("color","red");
// }else{
// $("font:eq(2)").css("color","black");
// }
// });
})
</script> </body> </html>
div显示&隐藏
获取所有隐藏div，让隐藏div显示，并且改变背景颜色,点击关闭按钮，所有div恢复到初始状态
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
.diveven { background:#bbffaa;}
</style>
</head>
<body>
<div style="width:100px;height:100px;border:1px solid;display:none">中国万岁</div>
<div style="width:100px;height:100px;border:1px solid;display:none">世界万岁</div>
<div style="width:100px;height:100px;border:1px solid;">宇宙万岁</div> <input type="button" value="显示并且变颜色" onclick="showContent();"/>
<input type="button" value="关闭" onclick="closeContent();"/> <script type="text/javascript">
// 方法一
// function showContent(){
// $("div[style*=none]").each(function(index,element){
// $(element).css("display","block").css("background-color","red");
// });
// }
// function closeContent(){
// $("div[style*=disp]").each(function(index,element){
// $(element).css("display","none");
// });
// }
// 方法二
function showContent(){
$("div:hidden").show(2000).addClass("diveven");
}
function closeContent(){
$("div:lt(2)").hide().removeClass("diveven");
}
</script>
</body>
</html>
JQuery 过滤选择器 与属性修改的方法演示比较的更多相关文章
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
- jquery得到iframe src属性值的方法
这篇文章主要介绍了jquery得到iframe src属性值的方法,很简单,很实用,需要的朋友可以参考下 取得iframe src属性的的值: Html代码 <!DOCTYPE HTML> ...
- jQuery过滤选择器:not()方法使用介绍
在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) & ...
- jQuery过滤选择器:not()方法介绍
jQuery(':not(selector)') 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not ...
- 009 jquery过滤选择器-----------（表单对象属性过滤选择器 与 表单选择器）
1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- jQuery过滤选择器
//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...
- 10分钟-jQuery过滤选择器
1.:first过滤选择器 本次我们介绍过滤选择器,该类型的选择器是依据某过滤规则进行元素的匹配.书写时以":"号开头,通经常使用于查找集合元素中的某一位置的单个元素. 在jQue ...
- Jquery过滤选择器，选择前几个元素，后几个元素，内容过滤选择器等
一.基本过滤选择器(重点掌握下列八个):first 选取第一个元素 $("div:first").css("color","red");:l ...
随机推荐
- 【3dsMax安装失败，如何卸载、安装3dMax 2017？】
是不是遇到MAYA/CAD/3DSMAX/INVENTOR安装失败?AUTODESK系列软件着实令人头疼,MAYA/CAD/3DSMAX/INVENTOR安装失败之后不能完全卸载!!!(比如maya, ...
- inventor安装不了
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- git使用笔记-基础篇
git使用手册:https://git-scm.com/book/zh/v1/ 一.分支 1.查看所有本地分支 git branch 2.查看所有本地分支和远程分支 git branch -a 3.查 ...
- 性能测试工具Jmeter08-Jmeter断言（检查点）
断言是在请求的返回层面增加一层判断机制.因为请求成功了,并不代表结果一定正确,因此需要检测机制提高测试准确性. 下面介绍常用的jmeter三种断言 1.响应断言 例如: 模式匹配规则 2.Size A ...
- [转]jQuery为控件添加水印文字
本文转自:http://www.cnblogs.com/gzh4455/archive/2011/09/29/2195418.html jQuery扩展: jquery.tinywatermark-3 ...
- adb root错误信息adbd cannot run as root in production builds问题解决
adb root错误信息adbd cannot run as root in production builds问题解决 一．问题描述 1.输入指令 >adb root adbd cannot ...
- eclipse中使用git下载项目
准备工作: 目的:从远程仓库github上down所需的项目 eclipse使用git插件下载github上项目 eclipse版本:eclipse4.5 64位 jdk版本:jdk-1.7 64位 ...
- S3C2440 中断相关寄存器小探
========================================== 转载时请注明出处和作者联系方式 文章出处:http://blog.csdn.net/longintchar 作者联 ...
- SecureCRT中文乱码解决方案
SecureCRT是一个商业终端连接工具.SecureCRT可以自定义界面颜色方案,可以连接SSH1与SSH2.Telnet等服务.默认设置下,通过SecureCRT连接SSH服务器可能出现中文乱码的 ...
- Geek to Live: Set up your personal Wikipedia
http://lifehacker.com/163707/geek-to-live--set-up-your-personal-wikipedia Filed to: Wikipedia Captur ...