jQuery的is()函数的用法
来源:互联网 发布:万网域名可以不备案吗 编辑:程序博客网 时间:2024/05/20 06:25
jQuery中的is()方法可以判断元素是否可见,是否隐藏,是否选中等。
下面我们分别举例介绍。
一、判断元素是否隐藏
如下html中的div元素是隐藏的:
复制代码代码示例:
<!doctype html>
<html>
<head>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="test" style="display:none">你看不到我</div>
<span ></span>
<script type="text/javascript">
$('span').html('test div is visible? ' + $('#test').is(':visible'));
</script>
</body>
</html>
<html>
<head>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="test" style="display:none">你看不到我</div>
<span ></span>
<script type="text/javascript">
$('span').html('test div is visible? ' + $('#test').is(':visible'));
</script>
</body>
</html>
二、判断checkbox是否选中
jquery中可以通过xx.is(':checked')判断checkbox,radiobutton是否是选中状态,如下测试html
复制代码代码示例:
<!doctype html>
<html>
<head>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<p>
<input type="checkbox" name="chkChecked" checked="checked"/> chkChecked
<input type="checkbox" name="chkNoChecked" /> chkNoChecked
</p>
<span ></span>
<script type="text/javascript">
$('span').html('chkChecked checked? ' + $('input[name=chkChecked]').is(':checked') + '<br/> '
+'chkNoChecked checked? ' + $('input[name=chkNoChecked]').is(':checked') );
</script>
</body>
</html>
<html>
<head>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<p>
<input type="checkbox" name="chkChecked" checked="checked"/> chkChecked
<input type="checkbox" name="chkNoChecked" /> chkNoChecked
</p>
<span ></span>
<script type="text/javascript">
$('span').html('chkChecked checked? ' + $('input[name=chkChecked]').is(':checked') + '<br/> '
+'chkNoChecked checked? ' + $('input[name=chkNoChecked]').is(':checked') );
</script>
</body>
</html>
三、判断是否使用了某个样式
复制代码代码示例:
<html lang="en">
<head>
<meta charset="utf-8">
<title>is函数介绍</title>
<style> //设置一些基本样式
div { width:60px; height:60px; margin:5px; float:left;
border:4px outset; background:green; text-align:center;
font-weight:bolder; cursor:pointer; }
.blue { background:blue; } //样式1
.red { background:red; }//样式2
span { color:white; font-size:16px; }
p { color:red; font-weight:bolder; background:yellow;
margin:3px; clear:left; display:none; }
</style>
<script src="jquery-1.9.1.js"></script> //注意 这里使用的是jQuery官方的脚步库
</head>
<body>
<div></div> //注意这里出现了第一个div
<div class="blue"></div>//注意这里出现了第2个div
<div></div>//注意这里出现了第3个div
<div class="red"></div>//注意这里出现了第4个div
<div><br/><span>Peter</span></div>//注意这里出现了第5个div
<div class="blue"></div>//注意这里出现了第6个div
<p> 脚本学堂,www.jbxue.com。</p>
<script>
$("div").one('click', function () { //$("div").one 代表对div元素附加一个事件,
//还能附加多个事件 譬如click或者mouseout时同时执行一些事情
if ($(this).is(":first-child")) { //is函数发挥作用了,is(":first-child") 代表
//判断此div是否第一个出现的div
$("p").text("It's the first div."); //text和html区别在于是否支持html标记
// 此时你在里面写个 alert是不会执行的
} else if ($(this).is(".blue,.red")) { //判断该div是否 具有blue或者red的 class
$("p").text("这是个蓝色或者红色的div");
} else if ($(this).is(":contains('Peter')")) { //判断div中是否存在Peter这个词
$("p").text("It's Peter!");
} else {
$("p").html("It's nothing <em>special</em>.");
}
$("p").hide().slideDown("slow"); //这是一个动画效果。慢慢展现p的内容
$(this).css({"border-style": "inset", cursor:"default"});
});
</script>
</body>
</html>
<head>
<meta charset="utf-8">
<title>is函数介绍</title>
<style> //设置一些基本样式
div { width:60px; height:60px; margin:5px; float:left;
border:4px outset; background:green; text-align:center;
font-weight:bolder; cursor:pointer; }
.blue { background:blue; } //样式1
.red { background:red; }//样式2
span { color:white; font-size:16px; }
p { color:red; font-weight:bolder; background:yellow;
margin:3px; clear:left; display:none; }
</style>
<script src="jquery-1.9.1.js"></script> //注意 这里使用的是jQuery官方的脚步库
</head>
<body>
<div></div> //注意这里出现了第一个div
<div class="blue"></div>//注意这里出现了第2个div
<div></div>//注意这里出现了第3个div
<div class="red"></div>//注意这里出现了第4个div
<div><br/><span>Peter</span></div>//注意这里出现了第5个div
<div class="blue"></div>//注意这里出现了第6个div
<p> 脚本学堂,www.jbxue.com。</p>
<script>
$("div").one('click', function () { //$("div").one 代表对div元素附加一个事件,
//还能附加多个事件 譬如click或者mouseout时同时执行一些事情
if ($(this).is(":first-child")) { //is函数发挥作用了,is(":first-child") 代表
//判断此div是否第一个出现的div
$("p").text("It's the first div."); //text和html区别在于是否支持html标记
// 此时你在里面写个 alert是不会执行的
} else if ($(this).is(".blue,.red")) { //判断该div是否 具有blue或者red的 class
$("p").text("这是个蓝色或者红色的div");
} else if ($(this).is(":contains('Peter')")) { //判断div中是否存在Peter这个词
$("p").text("It's Peter!");
} else {
$("p").html("It's nothing <em>special</em>.");
}
$("p").hide().slideDown("slow"); //这是一个动画效果。慢慢展现p的内容
$(this).css({"border-style": "inset", cursor:"default"});
});
</script>
</body>
</html>
0 0
- jQuery的is()函数的用法
- jQuery中is()的用法
- JQuery中is和hasClass的用法
- jQuery扩展函数的用法
- Jquery toggle函数的用法
- jQuery 中 is() 函数常见用法
- jquery的加载函数ready的用法
- jQuery中toggle()函数的用法
- jQuery中animate()函数的用法
- jQuery.extend扩展函数的用法
- JQuery中$()函数的巧妙用法
- jQuery.extend函数的多种用法!
- jQuery中$()函数的用法小结
- Jquery extend 函数的 用法 解析
- jQuery中on()函数的用法笔记
- Jquery中map函数的用法
- jQuery中$.each()函数的用法
- jQuery的is()方法
- C++模板元编程
- 【爬虫】Python的Requests模块
- html + Bootstrap
- Linux学习之CentOS(二十七)--Linux磁盘管理:LVM逻辑卷的拉伸及缩减
- 关于vs2013与office系列软件一起安装出现bug的情况描述以及解决办法——打开vs2013鼠标不动/动不了
- jQuery的is()函数的用法
- 获取手机型号来源
- ABAP程序 加锁/解锁
- Xamarin.Android之定位
- eclipse不能自动编译,不报错
- CnPack Pascal 代码格式化工具测试版
- iOS 开发中问题 ——tableView分行线距离左侧15像素空白的解决办法
- Linux内核启动流程分析
- How To Set Up vsftpd on Ubuntu 12.04