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 ...
随机推荐
- Unity 为什么有时候播放音乐(音效)会没有声音
1.问题描述 昨晚,我遇到的情况如下: 1.MainCamera里有Audio Source,并且在循环播放音乐 2.在其他的GameObject中也新增一个Audio Source,在某个时机播放音 ...
- 手机web前端调试页面的几种方式
前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...
- php 关于时间的函数
//返回1970年1月1日零点以来的秒数. //定义为从格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数. time(); ...
- 对fastdfs 文件清单进行检查，打印无效的文件
对fastdfs 文件清单进行检查,打印无效的文件2017年12月12日 18:37:18 守望dfdfdf 阅读数:281 标签: fastdfssftpmysql 更多个人分类: 工作 问题编辑版 ...
- Socket网络通信之NIO
Socket网络通信之NIO NIO:new io ,java1.4开始推出的可非阻塞IO. java.nio 包,可解决BIO阻塞的不足 但比BIO学习.使用复杂. 可以以阻塞.非阻塞两种方式工作. ...
- windows远程连接Mac、Mac远程连接Mac、Mac连接Windows
最近因为要进行学习交流,需要用到远程连接,所以找了三种不同的方式,记录如下 1.Windows远程连接Mac 1.mac os x电脑设置 系统偏好设置-共享-勾选“远端管理”,然后在电脑设置—VNC ...
- CSS的框模型(div)与边距（margin、padding）
所谓框模型,例如div标签,你就可以直接把它理解成一个相框. 这个相框里面的相片有高度和宽度,框本身也有一定的宽度.相框和别的相框之间,还有一定的边距. div设置常见属性 border:边框 pad ...
- 在 CentOS 上安装 vsftp 服务
在 CentOS 上安装 vsftp 服务 1.查看当前 CentOS 服务器是否已安装了 vsftpd 服务: rpm -q vsftpd 如果打印如下类似的信息则表明已安装 vsftpd 服务: ...
- angular2-搭建环境
npm 模块将被下载安装到[全局目录]中.[全局目录]通过 npm config set prefix "目录路径" 来设置.通过 npm config get prefix 来 ...
- iDempiere 使用指南 销售发货流程
Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...