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 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
js微信分享接口调用详解
Jul 23 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
javascript prototype 原型链
2009/03/12 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
python 数据加密代码
2008/12/24 Python
Python中针对函数处理的特殊方法
2014/03/06 Python
Python标准库内置函数complex介绍
2014/11/25 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
python中kmeans聚类实现代码
2018/02/23 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
使用python求解二次规划的问题
2020/02/29 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
计算机个人求职信范例
2014/01/24 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
公积金贷款承诺书
2015/04/30 职场文书
毕业实习感受与体会
2015/05/26 职场文书
高中政治教学反思
2016/02/23 职场文书
创业计划书之面包店
2019/09/17 职场文书