结果:
How are you?
.bind()、.live()和.delegate()方法
.bind():绑定事件处理函数的最基本方式是使用.bind()方法。它和live()方法一样,接受两个参数:
.bind(event type,event handler)
两种绑定事件处理函数的方法:
function test(){
alert("Hello World!");
}
});
事件处理函数也可以使用匿名函数,如下所示:
.live():live方法和bind方法的唯一区别在于.live()不仅作用于DOM中当前存在的元素,还作用于将来可能存在(动态生成)的元素
Box').live('click',function(){
$(this).clone().appendTo('.container');
});
});
Box">
使用live方法绑定事件的缺点在于它无法使用链式调用,那有没有既可以像live方法那样绑定事件,又可以支持链式调用的方法呢?答案就是下面的delegate方法。
delegate()方法:为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,
并规定当这些事件发生时运行的函数。从jQuery 1.7开始,.delegate()已经被.on()方法取代。
语法:
$(selector).delegate(childSelector,event type,function)
参数说明:
childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
function 必需。规定当事件发生时运行的函数。
Box','click',function(){
$(this).clone().appendTo('.container');
});
});
delegate()会在以下两个情况下使用到:
1、如果你有一个父元素,需要给其下的子元素添加事件,这时你可以使用delegate()了,代码如下:
2、当元素在当前页面中不可用时,可以使用delegate()
end()方法
end()方法:在jquery命令链内调用,以便退回到前一个包装集。
每次过滤方法都会被压入栈中。当我们需要返回到前一个状态时,我们可以使用end() 进行出栈操作,来返回栈中的前一个状态。
end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。
>
end()方法在这里是 返回调用 find() 之前的状态,也就是$('ul.one')
toggleClass()
`toggleClass()方法:`如果在元素中指定类名称不存在,则添加指定类名称;如果元素已经拥有指定
类名称,则从元素中删除指定类名称。
css(name,value)方法:设定指定的值到每个已匹配元素的指定的css样式属性
wrap()和wrapInner()
`wrap()和wrapInner():`前者把所有匹配的元素用其他元素的结构化标记包裹起来;
后者将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。
看下面一个wrap()的例子:
用原先div的内容作为新div的class,并将每一个元素包裹起来
HTML 代码:
jQuery 代码:
';
});
结果:
接着再看下面一个wrapInner()的例子:
用原先div的内容作为新div的class,并将每一个元素包裹起来
HTML 代码:
jQuery 代码:
';
});
结果:
detach、empty和remove方法
.detach( [selector ] ):从DOM中去掉所有匹配的元素。当需要移走一个元素,不久又将该元素插入DOM时,就需要用到detach方法。
.empty():这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。
.remove( [selector ] ):将元素从DOM中移除,同时移除元素上的事件及 jQuery 数据
empty()的例子:
.attr()和.prop()
.attr():获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。
.prop():同上
jQuery 1.6之前 ,.attr()方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始, .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。
例如,selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked,和 defaultSelected 应使用.prop()方法进行取值或赋值。
他们没有相应的属性(attributes),只有特性(property)。
.after()和.insertAfter()
1.after()
描述:
在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
Hello
I would like to say:
jQuery 代码:
结果:
I would like to say: Hello
2.insertAfter()
描述:
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
HTML 代码:
I would like to say:
jQuery 代码:
结果:
.before()和.insertBefore()
3.before()
描述:
在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
I would like to say: Hello
jQuery 代码:
结果:
Hello
I would like to say:
.append()和.appendTo()
4.append()
描述:向所有段落中追加一些HTML标记。
HTML 代码:
I would like to say:
jQuery 代码:
Hello");
结果:
I would like to say: Hello
5.appendTo()
描述:新建段落追加div中并加上一个class
HTML 代码:
jQuery 代码:
")
.appendTo("div")
.addClass("test")
.end()
.addClass("test2");
结果:
.prepend()和.prependTo()
6.prepend()
描述:向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
I would like to say:
Hello
jQuery 代码:
$("p").prepend( $("b") );
结果:
HelloI would like to say:
7.prependTo()
描述:把所有段落追加到ID值为foo的元素中。
HTML 代码:
I would like to say:
jQuery 代码:
结果:
I would like to say:
总结
1. .insertAfter()和.after():在现存元素的外部,从后面插入元素
2. .insertBefore()和.before():在现存元素的外部,从前面插入元素
3. .appendTo()和.append():在现存元素的内部,从后面插入元素
4. .prependTo()和.prepend() :在现存元素的内部,从前面插入元素
原文链接:https://www.f2er.com/jquery/57360.html