JQuery 中的事件委托

本文实例讲述了jQuery中is()方法用法。分享给大家供大家参考。具体分析如下:

定义

事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新元素的子元素也可以拥有相同的操作。可以理解为生命一个全局标量,所有的子元素,都要执行我声明父元素的参数。

此方法使用参数来检查匹配元素集合。
如果其中至少有一个元素符合这个给定的参数就返回true,否则返回false。

事件与事件委托代码对比

事件 <!DOCTYPE html>

 <!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″>
        <title></title>
        <script type=”text/javascript” src=”js/jquery-1.12.4.min.js”
></script>
        <script>
            $(function(){
                    $ali = $(‘#list li’);
                    $ali.click(function() {
                            $(this).css({background:’red’});
                            });
                    })
        </script>    
    </head>
    <body>
        <ul id=”list”>
                <li>1</li>
                <li>2</li>
             <li>3</li>
             <li>4</li>
             <li>5</li>
        </ul>
    </body>
</html>

事件委托 <!DOCTYPE html>

  <!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″>
        <title></title>
        <script type=”text/javascript” src=”js/jquery-1.12.4.min.js”
></script>
        <script>
            $(function(){
                    $ali = $(‘#list’);
                    $ali.delegate(‘li’,’click’,function(){
                        $(this).css({background:’red’});
                    })
       })
        </script>    
    </head>
    <body>
        <ul id=”list”>
                <li>1</li>
                <li>2</li>
             <li>3</li>
             <li>4</li>
             <li>5</li>
        </ul>
    </body>
</html>

语法结构一:

易错点

事件委托,用delegate(委托)词;由于事件委托
都是子元素委托给了父元素,因此声明的是父级元素,不许要声明子元素;

复制代码 代码如下:

$(selector).is(expr)

参数列表:

参数 描述
expr 字符串值,供匹配当前元素集合的选择器表达式。

实例代码:

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
威尼斯人线上娱乐,<head>
<meta charset=”utf-8″/>
<meta name=”author” content=”//www.jb51.net/” />
<title>is()函数-脚本之家</title>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
  alert($(“li”).parent().is(“ul”))
})
</script>
</head>
<body>
<div>
  <ul>
    <li>div+css专区</li>
    <li>jQuery专区</li>
  </ul>
</div>
</body>
</html>

下面代码检测li元素的父元素是否是ul,如果是返回true,否则返回false。

语法结构二:

参数列表:

参数 描述
element 用于匹配元素的DOM元素或者jQuery元素。

实例代码:

网站地图xml地图