jQuery is()函数用法3例

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>

赞 (0)

相关推荐

  • jQuery的中 is(':visible') 解析及用法(必看)

    实例 选择 <body> 元素中每个可见的元素: $("body :visible") 定义和用法 :visible 选择器选取每个当前是可见的元素. 除以下几种情况之外的元素即是可见元素: • 设置为 display:none • type="hidden" 的表单元素 • Width 和 height 设置为 0 • 隐藏的父元素(同时隐藏所有子元素) 语法 $(":visible") $(document).ready(func

  • jQuery中is()方法用法实例

    本文实例讲述了jQuery中is()方法用法.分享给大家供大家参考.具体分析如下: 此方法使用参数来检查匹配元素集合. 如果其中至少有一个元素符合这个给定的参数就返回true,否则返回false. 语法结构一: 复制代码 代码如下: $(selector).is(expr) 参数列表: 参数 描述 expr 字符串值,供匹配当前元素集合的选择器表达式. 实例代码: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta cha

  • jQuery中:visible选择器用法实例

    本文实例讲述了jQuery中:visible选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配所有当前可见的元素. 语法结构: 复制代码 代码如下: $(":visible") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码 代码如下: $("div:visible").css({color:"blue"}) 以上代码能够将可见的div元素中的字体颜色设置为蓝色. 如果不和其他选择器配合使用,

  • jquery通过visible来判断标签是否显示或隐藏

    复制代码 代码如下: if($(".spnTotal").is(":visible")==false) { alert('隐藏'); } else { alert('显示'); }

  • jQuery is()函数用法3例

    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&g

  • jquery队列函数用法实例

    本文实例讲述了jquery队列函数用法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.9

  • jQuery实用函数用法总结

    本文以实例的形式总结了jQuery的常见实用函数.分享给大家供大家参考之用.具体示例如下: 1.修剪字符串 $('#id').val($.trim($('#someid').val())) 2.遍历集合 可能这样写: var anArray = ['one','two']; for(var n = 0; n < anArray.length; n++){ } 还有可能这样写: var anObject = {one: 1, two: 2}; for(var p in anObject){ } 但

  • Jquery css函数用法(判断标签是否拥有某属性)

    判断一个层是否隐藏: 复制代码 代码如下: $("#id").css("display")=="none" ; 在所有匹配的元素中,设置一个样式属性的值: 复制代码 代码如下: $("p").css("color","red"); 把一个"名/值对"对象设置为所有匹配元素的样式属性. 这是一种在所有匹配的元素上设置大量样式属性的最佳方式 复制代码 代码如下: $(&q

  • jQuery.extend 函数及用法详细

    jquery.extend函数详解 JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩展方法原型是: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的.如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

  • jQuery中attr()与prop()函数用法实例详解(附用法区别)

    jQuery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2.

  • 详细介绍jQuery.outerWidth() 函数具体用法

    详细介绍jQuery.outerWidth() 函数具体用法

    下面我们来通过jQuery实例代码演示outerWidth()函数, outerWidth()函数用于设置或返回当前匹配元素的外宽度.外宽度默认包括元素的内边距(padding).边框(border),但不包括外边距(margin)部分的宽度.你也可以指定参数为true,以包括外边距(margin)部分的宽度.如下图: 如果你要获取其它情况的宽度,请使用width()和innerWidth(),你可以点此查看三者之间的区别.该函数属于jQuery对象(实例),并且对不可见的元素依然有效.语法jQ

  • jquery遍历函数siblings()用法实例

    本文实例讲述了jquery遍历函数siblings()用法.分享给大家供大家参考,具体如下: siblings([expr]) 得到所有匹配元素集合中各个元素的所有兄弟元素集合.返回匹配元素集合 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

  • php Redis函数用法实例总结【附php连接redis单例类】

    本文实例总结了php Redis函数用法.分享给大家供大家参考,具体如下: 一直在拿PHP使用Redis,但是总感觉不牢靠,索性借这个时间空余一气呵成, 把PHP中所有操作到的Redis命令,几乎全敲个遍,包括它的返回值都是盯对过的,哪怕下回忘了也可以直接过来查嘛~大家也可以放心使用. 测试环境:    PHP:5.5     Redis:2.4.6 参考网址:   https://github.com/phpredis/phpredis Tips: 对于:string, set , sort

  • jQuery的load()方法及其回调函数用法实例

    本文实例讲述了jQuery的load()方法及其回调函数用法.分享给大家供大家参考.具体如下: 下面的js代码演示了jQuery的load()方法的使用,并演示了带回调函数(callback)的load方法的使用 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(fun

随机推荐