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的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
详解js闭包
Sep 02 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
使用原生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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php计算title标题相似比的方法
2015/07/29 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
win10安装python3.6的常见问题
2020/07/01 Python
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
C++的几个面试题附答案
2016/08/03 面试题
求职自我评价范文100字
2014/09/23 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书