jquery事件之事件委托和事件切换,获取append后的动态成分

By admin in 4858美高梅 on 2019年8月17日

jquery 1.9+放弃了live,说是用on代替了!

一、事件委托函数:

jQuery 具有可操作 HTML 成分和品质的精锐方法。

那就是说一旦大家在此之前用live来获得jquery动态增进的要素,今后应有用on怎么写吧?

方法名

说明

语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器)

live

用于为指定元素的一个或多个事件绑定事件处理函数。

jQueryObject.live( events [, data ], handler )

   jQueryObject.one( eventObject )

die

主要用于解除由live()函数绑定的事件处理函数。

jQueryObject.die( [ events [, handler ]] )
jQueryObject.die( eventObject )

delegate

用于为指定元素的一个或多个事件绑定事件处理函数。

jQueryObject.delegate( selector , events [, data ], handler )
jQueryObject.delegate( selector,eventObject )

undelegate

主要用于解除由delegate()函数绑定的事件处理函数。

jQueryObject.undelegate( [ selector , events [, handler ]] )
jQueryObject.undelegate( selector ,eventObject )
 

一、获得值

1、text()    设置或回到所选成分的公文内容

$(“#btn1”).click(function(){

alert(“Text: ” + $(“#test”).text());

});

2、html()   设置或重回所选元素的源委(富含 HTML 标识)

$(“#btn2”).click(function(){

alert(“HTML: ” + $(“#test”).html());

});

3、val()     设置或重回表单字段的值

$(“button”).click(function(){

alert(“值为: ” + $(“#test”).val());

});

4、attr()     获取属性

$(“button”).click(function(){

alert(“属性为: “+ $(“#baidu”).attr(“href”));

});


首先:

 

二、设置值

$(“#btn1”).click(function(){ 

$(“#test1”).text(“Hello world”);

});  

$(“#btn2”).click(function(){

$(“#test2”).html(“<b>Hello world</b>”); 

});  

$(“#btn3”).click(function(){   

$(“#test3”).val(“Baidu”); 

});

$(“#btn4”).click(function(){

$(“#Baidu”).attr(

{

“href” : “”,

“title” : “百度”

});

});

—–仍是能够安装那些主意的回调函数—–

回调函数由五个参数:被选成分列表中当前成分的下标,以及原始值。然后以函数新值重返您希望利用的字符串。

$(“#test1”).text(function(i,origText){

return “旧文本: ” + origText + ” 新文本: Hello world! (index: ” + i +
“)”;

});

$(“#Baidu”).attr(“href”, function(i, origValue){

return origValue;

});


<div id=”one”></div>
然后,我使用append的方法:

1.live()函数用于为钦点成分的多个或四个事件绑定事件管理函数。从jQuery
1.7开首,该函数被标志为已不达时宜;从jQuery
1.9始发被移除。请使用on()函数来代表。live()函数并非直接在此时此刻jQuery对象相配的各种成分上绑定事件管理函数,而是将事件管理函数”委托”给document对象来拍卖。使用live()函数须求留心以下难点:当前jQuery对象必须透过选取器字符串构造,不然不可能管理触发的事件;在调用该函数从前,jQuery会尝试搜索当前jQuery接纳器所相配的要素。在大文书档案中那说不定相比耗费时间;该函数不协助方法链。比如:$(“a”).find(“.foo”).live(…)是低效的,且不恐怕依据预期符合规律干活;由于live()的事件管理函数全体附加到document对象上,因而在事变被拍卖以前,事件可能要透过最长最慢的平地风波路线;在由于平台或事件反差,有些事件不支持冒泡,进而无法冒泡传递到document,此时可能无法处理该事件;由于live()函数的事件管理函数全体叠合在document对象上,假如通过有个别格局化解了document对象上的风云绑定,或然会涉及到利用live()函数委托绑定的任何因素的事件管理函数。举例$(document).off()。
//为div中的全部p成分的click事件绑定事件管理函数
$(“div p”).live(“click”,function(){
alert($(this).text());
});
$(“#n1″).append(‘<p
id=”n6”>上述绑定的click事件对此因素也一蹴而就jquery事件之事件委托和事件切换,获取append后的动态成分。!</p>’);//后增添的n6也能够触发上述click事件,因为它也是div中的p成分(与bind分化等)

三、增加参数

1、append()       在被选成分的尾声插入内容

2、prepend()     在被选成分的始发插入内容

3、after()           在被选成分之后插入内容

4、before()        在被选成分从前插入内容

例子:

$(“p”).append(” 充实文本“);

//差别的点子加码多条新因素

function appendText()

{

var txt1=”<p>文本</p>”;                    //
使用HTML标签创设文本

var txt2=$(“<p></p>”).text(“文本”);    //
使用jQuery创建文本

var txt3=document.createElement(“p”);

txt3.innerHTML=”文本”;                      // 使用DOM创造文本

$(“body”).append(txt1,txt2,txt3);        // 追加新成分

}


$(‘#one’).append(“<p id=’two’>test1</p>”);
获得的结果是:

var data={id:1,name:”eric”};
var eventsMap = {
“mouseenter”: function(event){
$(this).html( “你好!”+event.data.name);
},

四、删除元素

1、remove()  方法删除被选元素及其子成分。

2、empty()   方法删除被选成分的子成分。

删除 class=”UILabel” 的所有<p>元素: $(“p”).remove(“.UILabel”);


<div id=”one”><p id=”two”>test1</p></div>

“mouseleave”: function(event){
$(this).html( “再见!”+event.data.name);
}
};
$(“#n5”).live( eventsMap,data);//为n5绑定mouseenter
mouseleave多少个事件(one和bind绑定方法能够不加上data,可是on和live要丰硕)

五、jQuery 操作 CSS

1、addClass()            向被选成分加多一个或多少个类

2、removeClass()      从被选成分删除一个或八个类

3、toggleClass()        对被选成分实行增添/删除类的切换操作

4、css()                      设置或再次回到样式属性

事例:(这里大家拿toggleClass为例)

① 首先设置一下样式表 有TextSize和Color那三个类

<style type=”text/css”>

.TextSize

{

font-size: x-large;

}

.Color

{

color: red;

}

</style>

② 设置html样式

<h1 class=”Color”>标题1111</h1>

<p>段落段落</p>

<div>文本哈哈哈</div>

<br>

<button>添加/删除类</button>

③ 设置jquery脚本

<script>

$(document).ready(function()

{

$(“button”).click(function()

{

$(“h1,p,div”).toggleClass(“Color TextSize”);

});

});

</script>


2.die()函数用于移除相配成分上绑定的二个或八个事件的事件管理函数。die()函数首要用以破除由live()函数绑定的事件管理函数。
$(“#n5”).die();
3.delegate()函数用于为钦定成分的多个或七个事件绑定事件管理函数。(从jQuery
1.7起来,请优用事件函数on()替代该函数。)
// 为div中的全部p成分绑定click事件管理程序
$(“div”).delegate(“p”,”click”,function(event){
alert($(this).text());
});
$(“#n1″).append(‘<p
id=”n6”>上述绑定的click事件对此因素也一蹴而就!</p>’);//后加多的n6也足以触发上述click事件,因为它也是div中的p成分
还可以够何况绑定多少个事件,并为事件管理函数字传送递一些增大的数量:
var data={id:1,name:”eric”};
var eventsMap = {
“mouseenter”: function(event){
$(this).html( “你好!”+event.data.name);
},

六、jQuerycss() 方法

直接拿例子来说:

<p id=”p1″ style=”background-color: blue”>段落1111</p>

<p id=”p2″ style=”background-color: yellow”>段落2222</p>

<br><button>按钮</button>

① 返回 CSS 属性

$(“button”).click(function()

4858美高梅 ,{

alert(“重临的值”+$(“#p2”).css(“background-color”));

});

② 设置(多个) CSS 属性

$(“button”).click(function()

{

$(“#p1,#p2”).css({

“background-color”:”red”,

“font-size”:”200%”});

});


这段日子,笔者想取得p里的值,

“mouseleave”: function(event){
$(this).html( “再见!”+event.data.name);
}
};
$(“div”).delegate(“#n3”,eventsMap,data);/为n5绑定mouseenter
mouseleave四个事件(one和bind绑定方法能够不增加data,可是on和live和delegate要增加)
4.undelegate()函数用于移除成分上绑定的贰个或多少个事件的事件管理函数。undelegate()函数首要用来破除由delegate()函数绑定的事件管理函数。
//$(“body”).undelegate( );
$body.undelegate(“:button”, “click”, btnClick2);

七、jQuery尺寸

1、width()

安装或重返成分的增长幅度(不富含内边距、边框或异地距)

2、height()

安装或重回成分的惊人(不富含内边距、边框或异地距)

3、innerWidth()

归来成分的幅度(包涵内边距)

4、innerHeight()

回到成分的惊人(包含内边距)

5、outerWidth()

归来成分的上升的幅度(包括内边距和边框)

6、outerHeight()

回到成分的惊人(包涵内边距和边框)

4858美高梅 1

例子:

jquery代码:

var txt=””;

txt+=”div 宽度: ” + $(“#div1”).width();

txt+=”div 高度: ” + $(“#div1”).height();

txt+=”div 宽度,包罗内边距: ” + $(“#div1”).innerWidth();

txt+=”div 中度,富含内边距: ” + $(“#div1”).innerHeight();

txt+=”div 宽度,饱含内边距和边框: ” + $(“#div1”).outerWidth();

txt+=”div 高度,富含内边距和边框: ” + $(“#div1”).outerHeight();

$(“#div1”).html(txt);

html代码:

<div id=”div1″
style=”height:100px;width:300px;padding:10px;margin:3px;border:1px solid
blue;background-color:lightblue;”></div>

借使大家间接用:

<body>
<div id=”n1″>
<p id=”n2″><span>CodePlayer</span></p>
<p id=”n3″><span>qinqin</span></p>
<em id=”n4″>;
</div>
<p>id=”n5″>Google</p>
<input id=”btn1″ type=”button” value=”点击1″ />
<input id=”btn2″ type=”button” value=”点击2″ />
<a id=”a1″ href=”#”>CodePlayer</a>
<input id=”btn” type=”button” value=”点击绑定贰次” />
<div id=”n2″>
<p id=”n6″><span>CodePlayer</span></p>
<p id=”n7″><span>qinqin</span></p>
</div>
<div id=”log”><div>
</body>

$(“#two”).on(“click”,function(data){

二、事件切换函数

alert(data);

方法名

说明

语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器)

hover

鼠标悬停事件。

jQueryObject.hover( handlerIn , handlerOut )
jQueryObject.hover( handlerInAndOut )

toggle

为匹配元素的click事件绑定多个事件处理函数

jQueryObject.toggle( handler1, handler2 [, handlerN... ] )

});
那便是说,是不会弹出窗口的!

1.hover()函数用于为各类匹配成分的hover事件绑定管理函数。hover事件正是鼠标悬停事件。
$(“a”).hover(function(){
$(this).css(“color”,”red”);//鼠标移上
}, function(){
$(this).css(“color”,”blue”); //鼠标移开
});
2.toggle()是二个奇异的风浪函数,用于为相称成分的click事件绑定多少个事件处理函数。每一次触发click事件时,toggle()函数会交替施行当中的贰个事件处理函数。(jQuery还恐怕有三个同名的toggle()函数,用于切换来分的显示/掩盖。)
举个例子,大家使用toggle(“click”, A, B,
C)为要素的click事件绑定了3个事件管理函数A、B、C。第四回点击实践A,第叁遍点击实践B,第壹遍点击实行C,第五回点击又实行A,第八遍点击又实行B
……(假使调用了累累toggle(),它们之间是独自的)。删除通过toggle()绑定的事件,使用unbind()函数。举个例子:unbind(“click”)。
(从1.8上马被标识为已不适合时机,并从1.9从头被移除。)
function handle1(){
alert(“click1”);
}
function handle2(){
alert(“click2”);
}
function handle3(){
alert(“click3”);
}
function handle4(){
alert(“click4”);
}
$(“#btn1”).toggle(handle1,handle2,handle3,handle4); //可循环切换

内需改成那样的:

<body>
<div id=”n1″>
<p id=”n2″><span>CodePlayer</span></p>
<p id=”n3″><span>qinqin</span></p>
<em id=”n4″>;
</div>
<p>id=”n5″>Google</p>
<input id=”btn1″ type=”button” value=”点击1″ />
<input id=”btn2″ type=”button” value=”点击2″ />
<a id=”a1″ href=”#”>CodePlayer</a>
<input id=”btn” type=”button” value=”点击绑定三回” />
<div id=”n2″>
<p id=”n6″><span>CodePlayer</span></p>
<p id=”n7″><span>qinqin</span></p>
</div>
<div id=”log”><div>
</body>

$(“body”).on(“click”,”#two”,function(data){

 

alert(data);

});
真的!

1.9+甩掉了live,说是用on代替了!
那么一旦大家原先用live来博取jquery动态拉长的因素,未来理应用on怎么写吧?
首先: div id=”one”/div 然…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有