文档章节

jQuery is()函数用法3例

Sherlock_z
 Sherlock_z
发布于 2014/11/07 11:25
字数 663
阅读 219
收藏 18
这篇文章主要介绍了jQuery is()函数用法3例,jQuery的is()函数其实是非常有用的,能不能用好直接决定你的代码是否高效,需要的朋友可以参考下。

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>





本文转载自:http://www.jb51.net/article/49775.htm

共有 人打赏支持
Sherlock_z
粉丝 4
博文 29
码字总数 45
作品 0
南京
程序员
私信 提问
jQuery命名冲突解决的五种方案

引言: 最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。因为许多JavaScript 库使用$作为函数或变量名,jqu...

龙上
2012/03/30
0
0
jQuery.extend 函数各种用法

JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。 一、Jquery的扩展方法原型是:    extend(dest,...

吟啸_徐行
2015/04/29
0
0
jquery的一些用法 有用的用法。

AJAX 框架 用Asp.net ajax 还是 Jquery? AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NETAJAX 并不包括在 AJAX 框架之中。 刚开始学了 JQuqery,众多的 $g...

雪中漫步
2010/03/29
0
0
jQuery中 $.fn的用法

jquery $.fn $.fx是什么意思 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个...

-wangming-
2015/02/05
0
0
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
07/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

降压变换器 Buck

特点 输入输出极性相同。 工作过程 在 MOS 导通时,输入电源通过 L 和 C 滤波后向负载端提供电流;当 MOS 断开后,L 通过二极管续流,保持负载电流连续。输出电压因为占空比的作用,不会超过...

colinux
今天
1
0
Apache日志不记录访问静态文件,访问日志切割,静态元素过期时间设置

Apache配置不记录访问静态文件的日志 网站大多元素为静态文件,如图片、css、js等,这些元素可以不用记录 vhost原始配置 <VirtualHost *:80> ServerAdmin test@163.com DocumentRoo...

野雪球
今天
3
0
聊聊storm的ICommitterTridentSpout

序 本文主要研究一下storm的ICommitterTridentSpout ICommitterTridentSpout storm-core-1.2.2-sources.jar!/org/apache/storm/trident/spout/ICommitterTridentSpout.java public interface......

go4it
今天
4
0
Ubuntu常用操作

查看端口号 netstat -anp |grep 端口号 查看已使用端口情况 netstat -nultp(此处不用加端口号) netstat -anp |grep 82查看82端口的使用情况 查找被占用的端口: netstat -tln netstat -tl...

hc321
昨天
3
0
网站cdn的静态资源突然访问变的缓慢,问题排查流程

1.首先我查看了一下是否自己的网络问题,通过对比其他资源的访问速度和下载速度,确认不是 2.通过ping 和 tracert 判断cdn域名能否正常访问,(最后回想感觉这一步可以省略,因为每次最终能访...

小海bug
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部