jquery常用方法及使用示例汇总(2)


$(document).ready(function(){
        $('.box').live('click',function(){
            $(this).clone().appendTo('.container');
        });
    });

<div>
        <div></div>
    </div>

使用live方法绑定事件的缺点在于它无法使用链式调用,那有没有既可以像live方法那样绑定事件,又可以支持链式调用的方法呢?答案就是下面的delegate方法。

delegate()方法:为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,
并规定当这些事件发生时运行的函数。从jQuery 1.7开始,.delegate()已经被.on()方法取代。
语法:

$(selector).delegate(childSelector,event type,function)
参数说明:

childSelector 必需。规定要附加事件处理程序的一个或多个子元素。

event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

function 必需。规定当事件发生时运行的函数。

复制代码 代码如下:


$(document).ready(function(){
        $('.container').delegate('.box','click',function(){
            $(this).clone().appendTo('.container');
        });
    });

delegate()会在以下两个情况下使用到:

1、如果你有一个父元素,需要给其下的子元素添加事件,这时你可以使用delegate()了,代码如下:

复制代码 代码如下:


$("ul").delegate("li", "click", function(){

$(this).hide();

});

2、当元素在当前页面中不可用时,可以使用delegate()

end()方法

end()方法:在jquery命令链内调用,以便退回到前一个包装集。
每次过滤方法都会被压入栈中。当我们需要返回到前一个状态时,我们可以使用end() 进行出栈操作,来返回栈中的前一个状态。

end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。

复制代码 代码如下:


<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <script src=""></script>
</head>
<body>
    <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

<script type="text/javascript">
    $('ul.one').find(".two").css("color","red").find('.three').css("background","blue");
</script>

在上面的代码例子中,我们只会看到item 1的字体颜色改变了,而背景颜色没有改变。这是因为
第二个find()方法之前的状态返回的是红色字体的class值为two的对象,因此,第二次find()只会查找<ul> 中的.two,使用end()方法修改该链式操作的代码如下:

复制代码 代码如下:


<script type="text/javascript">
    $('ul.one').find(".two").css("color","red").end().find('.three').css("background","blue");
</script>

end()方法在这里是 返回调用 find() 之前的状态,也就是$('ul.one')

toggleClass()

`toggleClass()方法:`如果在元素中指定类名称不存在,则添加指定类名称;如果元素已经拥有指定
类名称,则从元素中删除指定类名称。
  css(name,value)方法:设定指定的值到每个已匹配元素的指定的css样式属性

wrap()和wrapInner()

`wrap()和wrapInner():`前者把所有匹配的元素用其他元素的结构化标记包裹起来;
后者将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。
看下面一个wrap()的例子:
用原先div的内容作为新div的class,并将每一个元素包裹起来

HTML 代码:

复制代码 代码如下:


<div>
  <div>Hello</div>
  <div>Goodbye</div>
</div>

jQuery 代码:

复制代码 代码如下:


$('.inner').wrap(function() {
  return '<div />';
});

结果:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgszfd.html