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 ...
随机推荐
- HDU - 6208 The Dominator of Strings HDU - 6208 AC自动机 || 后缀自动机
https://vjudge.net/problem/HDU-6208 首先可以知道最长那个串肯定是答案 然后,相当于用n - 1个模式串去匹配这个主串,看看有多少个能匹配. 普通kmp的话,每次都要 ...
- Murano Weekly Meeting 2016.06.07
Meeting time: 2016.June.7 1:00~2:00 Chairperson: Kirill Zaitsev, from Mirantis Meeting summary: 1.A ...
- (转)使用HMC接管通过串口或显卡安装的分区操作系统
使用HMC接管通过串口或显卡安装的分区操作系统 原文:http://m.blog.itpub.net/23135684/viewspace-1062084/ 这是一个真实的案例,客户有一台P550的服 ...
- 如何解决css和js的{}与smarty定界符冲突的问题
当输入url地址后网页出现:Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error i ...
- Entity Framework Many to Many Relation Mapping（Entity Framework多对多关系映射）
通常我们在做数据库设计时都会有两张表是多对多关系的时候,在数据库做多对多关系时候我们通常通过中间关联表来处理,那我们现在在EF中是如何处理的呢? 假设我们有如下关系,用户(User)包含多个角色(Ro ...
- 了解委托（Delegate）
委托是一种全新面向对象语言特性,运行在.Net平台 基于委托,开发事件驱动程序变得非常简单 使用委托可以大大简化多线程变成的难度 理解委托 int a: //定义变量 a=100://给变量赋值 ...
- 命令“mkdir "xxx" xcopy "xxx" "xxx" /S /E /C /Y”已退出，代码为 9009。
前几天公司来了个新同事,使用的VS2013,但我们的所有项目都是使用VS2012创建的,我想用13打开应该没有什么问题.昨天新同事修改完代码提交后,我获取完成后无法编译成功,提示: 错误 3 命令“m ...
- jQuery中的节点操作(一)
html代码如下 <p>Dom操作练习</p> jQuery插入节点 $("p").append("武汉php"); //向每个匹配的元 ...
- Trouble Shooting的一些感想（实时补充）
最近一直做两个产品功能的Merge工作,代码Merge过来之后,发现了很多问题.经过Trouble Shooting,最终发现归根结底都是我们Merge的问题,例如有的Code没有Merge过来,Me ...
- [javascript]什么是闭包？
http://www.zcfy.cc/article/master-the-javascript-interview-what-is-a-closure-2127.html