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 ...
随机推荐
- ssh RSA key变化后处理
root@localhost:/# scp -r root@172.19.47.30:/home/linux-4.16.2-devm.1.2.aarch64.dongbo ./@@@@@@@@@@@@ ...
- centOS和redHat防火墙开放端口
发现在CentOS 7上开放端口用iptables没效果(或者是sodino没找到正确的命令,传说Centos7 下默认的防火墙是 Firewall,替代了之前的 iptables)… 使用firew ...
- HDU 4357——String change——————【规律题】
String change Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- Day3下
少女[问题描述]你是能看到第一题的 friends呢.—— hja少女在图上开车, 她们希望把每条边分配给与其相连的点中一个并且每个点最多被分配一条边,问可能的方案数.[输入格式]第一行两个整数
- Active Directory 域服务对象
局域网计算机控制中心 可以在DC上控制所有局域网资源(计算机 .用户.设备) 大中型企业管理必备. 最后,它还可以让开发人员集成LDAP身份认证,使用域账号登录应用. 也就是说,此企业的所有系统,都可 ...
- Differences or similarities between Java and C++
“作为一名C++程序员,我们早已掌握了面向对象Object-oriented Programming程序设计的基本概念,而且Java的语法无疑是非常熟悉的.事实上,Java本来就是从C++衍生出来的. ...
- spring mvc踩坑记
前言 主要介绍自己在学习spring mvc过程中踩到的一些坑,涉及到当时遇到这个错误是如何思考的,对思路进行总结,下次遇到类似的错误能够提供一些思路甚至快速解决. 环境准备 jdk8,spring4 ...
- JavaScript（一） 对象基础
1.定义类或对象 1.1 混合的构造函数/原型方法 用构造函数定义对象的所有非函数属性,类似于Java的构造方法.用原型方法定义对象的函数属性(方法).这种方法是使用比较广泛的定义类或对象的方法. / ...
- iOS获取/删除url中的参数
1.获取URL中的某个参数: - (NSString *)getParameter:(NSString *)parameter urlStr:(NSString *)url { NSError *er ...
- C语言中头文件怎么写？（本文来源网络，由黑乌鸦进一步完善）
c语言头文件怎么写?我一直有这样的疑问,但是也一直没去问问到底咋回事:所以今天一定要把它弄明白! 其实学会写头文件之后可以为我们省去不少事情,可以避免书写大量的重复代码.有利于整理思路.使代码脉络 ...