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 ...
随机推荐
- CharacterController控制的物体移动
CharacterController控制的物体移动: public class playerMove : MonoBehaviour { public float Speed; private C ...
- [转]js 判断图片存在
转自:http://blog.csdn.net/qq415734794/article/details/7261479 .//检查图片是否存在 .function CheckImgExists(img ...
- (转)CentOS下的trap命令
trap命令用于指定在接收到信号后将要采取的动作.常见的用途是在脚本程序被中断时完成清理工作.不过,这次我遇到它,是因为客户有个需求:从终端访问服务器的用户,其登陆服务器后会自动运行某个命令,例如打开 ...
- php关于网页乱码问题
指定浏览器打开网页的编码格式: <meta http-equiv="Content-Type" content="text/html; charset=gb2312 ...
- WEB服务器、网站、域名、IP地址、DNS服务器之间的关系
域名首先指向你的服务器,这个过程叫解析. 服务器分成好多小块,每小块叫一个空间或者一个虚拟主机. 所以当你输入你的域名以后,服务器收到你域名的访问信息,但不知道要打开这么多个小块中的那一个.所以要 ...
- 切图技巧——PS篇
1.选框工具这里可以选择增加选区.减少选区 ==> 2.存储为web格式 1)JPG:一般用于大图 2)gif:可作动图,与png-8基本一样,不支持半透明 3)png-8:不支持动图,不支持半 ...
- js对象动态赋值
<view class="movies-template"> <template is="movieListTemplate" data=&q ...
- MySQL中的information_schema
information_schema 数据库是MySQL自带的,可看作是一个数据库,确切说是信息数据库.其中保存着关于MySQL服务器所维护的所有其他数据库的信息.如数据库名,数据库的表,表栏的数据类 ...
- XHML教会我的一些东西-3
在寒假期间,隔几天就同学聚会,每天都是起床困难户.每天都想着要完成任务,要学习新的东西.但是总是被自己惰性占为上风.感觉自己很没用,但是又继续堕落.真的不能理解自己.呵呵.... 在放假一段时间之后, ...
- MySQL连接服务端的几种方式
一.MySQL 连接本地数据库,用户名为“root”,密码“123456”: D:\>mysql -h localhost -u root -p123456 注意:“-p”和“123456” 之 ...