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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
js如何取消事件冒泡
Sep 23 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 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发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
java script编程起步(第三课)
2007/01/10 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
VUE重点问题总结
2018/03/19 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
Python实时获取cmd的输出
2015/12/13 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python中K-means算法基础知识点
2021/01/25 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
业务代表的岗位职责
2013/11/16 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
党风廉设责任书
2014/04/16 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
工作自我推荐信范文
2015/03/25 职场文书
农村老人去世追悼词
2015/06/23 职场文书
初三语文教学反思
2016/03/03 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python