jQuery is()函数用法3例


Posted in Javascript onMay 06, 2014

jQuery提供了is()方法可以很方便的判断元素是否可见,是否隐藏,是否选中。

一、判断元素是否隐藏

如下html中的div元素是隐藏的:

<!doctype html>
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jQuery/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="http://ajax.microsoft.com/ajax/jQuery/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="http://code.jquery.com/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> </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>
Javascript 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
jquery提示效果实例分析
Nov 25 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
js实现三角形粒子运动
Sep 22 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 #Javascript
一些老手都不一定知道的JavaScript技巧
May 06 #Javascript
jQuery中的$.ajax()方法应用
May 06 #Javascript
jquery判断元素是否隐藏的多种方法
May 06 #Javascript
JQuery调用WebServices的方法和4个实例
May 06 #Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 #Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 #Javascript
You might like
PHP下几种删除目录的方法总结
2007/08/19 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
js实现五星评价功能
2017/03/08 Javascript
深入理解vue中的$set
2017/06/01 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
农业大学毕业生的个人自我评价
2013/10/11 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
优秀教师单行材料
2014/12/16 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python