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 相关文章推荐
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
JavaScript实现缓动动画
Nov 25 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
JQuery 写的个性导航菜单
2009/12/24 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
JS分页的实现(同步与异步)
2017/09/16 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
python类继承用法实例分析
2015/05/27 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python类中super() 的使用解析
2019/12/19 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
python 串行执行和并行执行实例
2020/04/30 Python
浅谈Python 函数式编程
2020/06/20 Python
python2和python3哪个使用率高
2020/06/23 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
求职推荐信
2013/10/28 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
领班岗位职责范文
2014/02/06 职场文书
还款承诺书范文
2014/05/20 职场文书
专业见习报告范文
2014/11/03 职场文书
党员公开承诺书2015
2015/01/21 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers