0717-7821348
彩票365官方网站

彩票365官方网站

您现在的位置: 首页 > 彩票365官方网站
jQuery根底(2) 96
2019-05-26 08:05:13

第5章 DOM节点的仿制与替换

(1)DOM仿制clone()

克隆节点是DOM的常见操作,jQuery供给一个clone办法,专门用于处理dom的克隆:

.clone()办法:仿制一切匹配的元素调集,包含一切匹配元素、匹配元素的下级元素、文字节点。需求留意,假如节点有事情或许数据之类的其他处理,咱们需求经过clone(ture)传递一个布尔值ture用来指定,这样不仅仅仅仅克隆单纯的节点结构,还要把顺便的事情与数据给一起克隆了。

HTML部分

JavaScript部分
$("div").on('click', function() {//履行操作})
//clone处理一
$("div").clone() //只克隆了结构,事情丢掉
//clone处理二
$("div").clone(true) //结构、事情与数据都克隆

细节:

  • clone()办法时,在将它刺进到文档之前,咱们能够修正克隆后的元素或许元素内容,如$(this).clone().css('color','red') 添加了一个色彩。
  • 经过传递true,将一切绑定在原始元素上的事情处理函数仿制到克隆元素上。
  • clone()办法是jQuery扩展的,只能处理经过jQuery绑定的事情与数据。
  • 元素数据(data)内方针和数组不会被仿制,将持续被克隆元素和原始元素同享。深仿制的一切数据,需求手动仿制每一个。

(2)DOM替换replaceWith()和replaceAll()

1).replaceWith( newContent )

用供给的内容替换调会集一切匹配的元素而且回来被删去元素的调集

简略来说:用$()挑选节点A,调用replaceWith办法,传入一个新的内容B(HTML字符串,DOM元素,或许jQuery方针)用来替换选中的节点A

看个简略的比方:一段HTML代码


榜首段


第二段


第三段



替换第二段的节点与内容

$("p:eq(1)").replaceWith('替换第二段的内容')

经过jQuery挑选出第二个p元素,调用replaceWith进行替换,成果如下


榜首段


替换第二段的内容'

第三段



2).replaceAll( target )

用调集的匹配元素替换每个方针元素

.replaceAll()和.replaceWith()功用相似,可是方针和源相反,用上述的HTML结构,咱们用replaceAll处理

$('替换第二段的内容').replaceAll('p:eq(1)')

总结:

  • .replaceAll()和.replaceWith()功用相似,首要是方针和源的方位差异
  • .replaceWith()与.replaceAll() 办法会删去与节点相关联的一切数据和事情处理程序
  • .replaceWith()办法,和大部分其他jQuery办法相同,回来jQuery方针,所以能够和其他办法链接运用
  • .replaceWith()办法回来的jQuery方针引证的是替换前的节点,而不是经过replaceWith/replaceAll办法替换后的节点

(3)DOM包裹wrap()办法

假如要将元素用其他元素包裹起来,也便是给它添加一个父元素,针对这样的处理,JQuery供给了一个wrap办法

1).wrap( wrappingElement )

在调会集匹配的每个元素周围包裹一个HTML结构

简略的看一段代码:

p元素

给p元素添加一个div包裹

$('p').wrap('

')

最终的结构,p元素添加了一个父div的结构


p元素



2).wrap( function )

一个回调函数,回来用于包裹匹配元素的 HTML 内容或 jQuery 方针

运用后的作用与直接传递参数是相同,只不过能够把代码写在函数体内部,写法不同罢了

以榜首个事例为例:

$('p').wrap(function() {
return '
'; //与榜首种相似,仅仅写法不相同
})

留意:

.wrap()函数能够承受任何字符串或方针,能够传递给$()工厂函数来指定一个DOM结构。这种结构能够嵌套了好几层深,但应该只包含一个中心的元素。每个匹配的元素都会被这种结构包裹。该办法回来原始的元素集,以便之后运用链式办法。

(4)DOM包裹unwrap()办法

咱们能够经过wrap办法给选中元素添加一个包裹的父元素。相反,假如删去选中元素的父元素要怎么处理 ?

jQuery供给了一个unwarp()办法 ,作用与wrap办法是相反的。将匹配元素调集的父级元素删去,保存自身(和兄弟元素,假如存在)在本来的方位。

看一段简略事例:


p元素



我要删去这段代码中的div,一般惯例的办法会直接经过remove或许empty办法

$('div').remove();

可是假如我还要保存内部元素p,这样就意味着需求多做许多处理,进程相对要费事许多,为了更方便,jQuery供给了unwarp办法很便利的处理了这个问题

$('p').unwarp();

找到p元素,然后调用unwarp办法,这样只会删去父辈div元素了

成果:

p元素

以下功用相同:

$('p').unwrap('

')

$('p').unwrap(function() { return '

'; })

(5)DOM包裹wrapAll()办法

wrap是针对单个dom元素处理,假如要将调会集的元素用其他元素包裹起来,也便是给他们添加一个父元素,针对这样的处理,JQuery供给了一个wrapAll办法

1).wrapAll( wrappingElement )

给调会集匹配的元素添加一个外面包裹HTML结构

简略的看一段代码:

p元素


p元素


给一切p元素添加一个div包裹

$('p').wrapAll('

')

最终的结构,2个P元素都添加了一个父div的结构


p元素


p元素



2).wrapAll( function )

一个回调函数,回来用于包裹匹配元素的 HTML 内容或 jQuery 方针,经过回调的办法能够独自处理每一个元素

以上面事例为例,

$('p').wrapAll(function() {
return '
';
})

以上的写法的成果如下,等同于warp的处理了


p元素




p元素



留意:

.wrapAll()函数能够承受任何字符串或方针,能够传递给$()工厂函数来指定一个DOM结构。这种结构能够嵌套多层,可是最内层只能有一个元素。一切匹配元素将会被当作是一个全体,在这个全体的外部用指定的 HTML 结构进行包裹。

(6)DOM包裹wrapInner()办法

假如要将合会集的元素内部一切的子元素用其他元素包裹起来,并当作指定元素的子元素,针对这样的处理,JQuery供给了一个wrapInner办法

1).wrapInner( wrappingElement )

给调会集匹配的元素的内部,添加包裹的HTML结构

用个简略的比方描绘下,简略的看一段代码:

p元素

p元素

给一切元素添加一个p包裹

$('div').wrapInner('

')

最终的结构,匹配的di元素的内部元素被p给包裹了


p元素




p元素



2).wrapInner( function )

答应咱们用一个callback函数做参数,每次遇到匹配元素时,该函数被履行,回来一个DOM元素,jQuery方针,或许HTML片段,用来包住匹配元素的内容

以上面事例为例,

$('div').wrapInner(function() {
return '

';
})

以上的写法的成果如下,等同于榜首种处理了

留意: 当经过一个挑选器字符串传递给.wrjQuery根底(2) 96apInner() 函数,其参数应该是格局正确的 HTML,而且 HTML 标签应该是被正确封闭的。

第6章 jQuery遍历

(1)children()办法

jQuery是一个合集方针,假如想快速查找合集里边的榜首级子元素,此刻能够用children()办法。这儿需求留意:.children(selector) 办法是回来匹配元素调会集每个元素的一切子元素(仅儿子辈,这儿能够了解为便是父亲-儿子的联系)

了解节点查找联系:



  • 1



代码假如是$("div").children(),那么意味着只能找到ul,因为div与ul是父子联系,li与div是祖辈联系,因而无法找到。

children()无参数

答应咱们经过在DOM树中对这些元素的直接子元素进行查找,而且结构一个新的匹配元素的jQuery方针

留意:jQuery是一个合集方针,所以经过children是匹合作会集每一给元素的榜首级子元素

.children(selector)

挑选性地承受同一类型挑选器表达式

$("div").children(".selected")

相同的也是因为jQuery是合集方针,或许需求对这个合集方针进行必定的挑选,找出方针元素,所以答应传一个挑选器的表达式

(2)find()办法

jQuery是一个合集方针,假如想快速查找DOM树中的这些元素的子孙元素,此刻能够用find()办法,这也是开发运用频率很高的办法。这儿要留意 children与find办法的差异,children是父子联系查找,find是子孙联系(包含父子联系)

了解节点查找联系:



  • 1



代码假如是$("div").find("li"),此刻,li与div是祖辈联系,经过find办法就能够快jQuery根底(2) 96速的查找到了。

.find()办法要留意的知识点:

  • find是遍历当时元素调会集每个元素的子孙。只需契合,不管是儿子辈,孙子辈都能够。
  • 与其他的树遍历办法不同,挑选器表达式关于.find()是必需的参数。假如咱们需求完成对一切子孙元素的取回,能够传递通配挑选器'*'。
  • find只在子孙中遍历,不包含自己。
  • 挑选器 context 是由 .find() 办法完成的;因而,$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。

留意要点:

.find()和.children()办法是相似的

  1. children只查找榜首级的子节点
  2. find查找规模包含子节点的一切子孙节点

(3)parent()办法

jQuery是一个合集方针,假如想快速查找合集里边的每一个元素的父元素(这儿能够了解为便是父亲-儿子的联系),此刻能够用parent()办法

因为是父元素,这个办法只会向上查找一级

了解节点查找联系:



  • 1



查找ul的父元素div, $(ul).parent(),便是这样简略的表达

1)parent()无参数

parent()办法答应咱们能够在DOM树中查找到这些元素的父级元素,从有序的向上匹配元素,并依据匹配的元素创立一个新的 jQuery 方针

留意:jQuery是一个合集方针,所以经过parent是匹合作会集每一个元素的父元素

2)parent()办法挑选性地承受同一型挑选器表达式

相同的也是因为jQuery是合集方针,或许需求对这个合集方针进行必定的挑选,找出方针元素,所以答应传一个挑选器的表达式

(4)parents()办法

jQuery是一个合集方针,假如想快速查找合集里边的每一个元素的一切祖辈元素,此刻能够用parents()办法

其实也相似find与children的差异,parent只会查找一级,parents则会往上一向查到查找到先人节点

了解节点查找联系:



  • 1



在li节点上找到祖 辈元素div, 这儿能够用$("li").parents()办法

1)parents()无参数

parents()办法答应咱们能够在DOM树中查找到这些元素的先人元素,从有序的向上匹配元素,并依据匹配的元素创立一个新的 jQuery 方针;

回来的元素次序是从离他们最近的父级元素开端的

留意:jQuery是一个合集方针,所以经过parent是匹合作会集一切元素的祖辈元素

2)parents()办法挑选性地承受同一型挑选器表达式

相同的也是因为jQuery是合集方针,或许需求对这个合集方针进行必定的挑选,找出方针元素,所以答应传一个挑选器的表达式

留意事项:

  1. parents()和.parent()办法是相似的,但后者仅仅进行了一个单级的DOM树查找
  2. $( "html" ).parent()办法回来一个包含document的调集,而$( "html" ).parents()回来一个空调集。

(5)closest()办法

以选定的元素为中心,往内查找能够经过find、children办法。假如往上查找,也便是查找当时元素的父辈祖辈元素,jQuery供给了closest()办法,这个办法相似parents可是又有一些纤细的差异,归于运用频率很高的办法

closest()办法承受一个匹配元素的挑选器字符串

从元素自身开端,在DOM 树上逐级向上级元素匹配,并回来最早匹配的先人元素

例如:在div元素中,往上查找一切的li元素,能够这样表达

$("div").closet("li')

留意:jQuery是一个合集方针,所以经过closest是匹合作会集每一个元素的先人元素

closest()办法给定的jQuery调集或元素来过滤元素

相同的也是因为jQuery是合集方针,或许需求对这个合集方针进行必定的挑选,找出方针元素,所以答应传一个jQuery的方针

留意事项:

.parents()和.closest()是有点相似的,都是往上遍历祖辈元素,可是两者仍是有差异的,不然就没有存在的含义了:

  • 开端方位不同:.closest开端于当时元素 .parents开端于父元素
  • 遍历的方针不同:.closest要找到指定的方针,.parents遍历到文档根元素,closest向上查找,直到找到一个匹配的就间断查找,parents一向查找到根元素,并将匹配的元素参加调集
  • 成果不同:.closest回来的是包含零个或一个元素的jquery方针,parents回来的是包含零个或一个或多个元素的jquery方针

(6)next()办法

jQuery是一个合集方针,假如想快速查找指定元素调会集每一个元素紧邻的后边同辈元素的元素调集,此刻能够用next()办法

1)next()无参数

答应咱们找元素调会集紧跟着这些元素的直接兄弟元素,并依据匹配的元素创立一个新的 jQuery 方针。

留意:jQuery是一个合集方针,所以经过next匹合作会集每一个元素的下一个兄弟元素

2)next()办法挑选性地承受同一类型挑选器表达式

相同的也是因为jQuery是合集方针,或许需求对这个合集方针进行必定的挑选,找出方针元素,所以答应传一个挑选器的表达式

(7)prev()办法

jQuery是一个合集方针,假如想快速查找指定元素调会集每一个元素紧邻的前面同辈元素的元素调集,此刻能够用prev()办法

1)prev()无参数

取得一个包含匹配的元素调会集每一个元素紧邻的前一个同辈元素的元素调集

留意:jQuery是一个合集方针,所以经过prev是匹合作会集每一个元素的上一个兄弟元素

2)prev()办法挑选性地承受同一类型挑选器表达式

相同的也是因为jQuery是合集方针,或许需求对这个合集方针进行必定的挑选,找出方针元素,所以答应传一个挑选器的表达式

(8)siblings()

jQuery是一个合集方针,假如想快速查找指定元素调会集每一个元素的同辈元素,此刻能够用siblings()办法

1)siblings()无参数

取得一个包含匹配的元素调会集每一个元素的同辈元素的元素调集

留意:jQuery是一个合集方针,所以经过siblings是匹合作会集每一个元素的同辈元素

2)siblings()办法挑选性地承受同一类型挑选器表达式

相同的也是因为jQuery是合集方针,或许需求对这个合集方针进行必定的挑选,找出方针元素,所以答应传一个挑选器的表达式

(9)add()办法

jQuery是一个合集方针,经过$()办法找到指定的元素合集后能够进行一系列的操作。$()之后就意味着这个合集方针已经是确认的,假如后期需求再往这个合会集添加一新的元素要怎么处理?jQuery为此供给add办法,用来创立一个新的jQuery方针 ,元素添加到匹配的元素调会集

.add()的参数能够简直承受任何的$(),包含一个jQuery挑选器表达式,DOM元素,或HTML片段引证。

简略的看一个事例:

操作:挑选一切的li元素,之后把p元素也参加到li的合会集


  • list item 1

  • list item 3


新的p元素


处理一:传递挑选器

$('li').add('p')

处理二:传递dom元素

$('li').add(document.getElementsByTagName('p')[0])

还有一种办法,便是动态创立P标签参加到合集,然后将整个调集刺进到指定的方位,可是这样就改动元素的自身的摆放

$('li').add('

新的p元素

').appendTo(方针方位)

(10)eachjQuery根底(2) 96()

jQuery是一个合集方针,经过$()办法找到指定的元素合集后能够进行一系列的操作。比方咱们操作$("li").css('') 给一切的li设置style值,因为jQuery是一个合集方针,所以css办法内部就必须封装一个遍历的办法,被称为隐式迭代的进程。要一个一个给合会集每一个li设置色彩,这儿办法便是each

.each() 办法便是一个for循环的迭代器,它会迭代jQuery方针合会集的每一个DOM元素。每次回调函数履行时,会传递当时循环次数作为参数(从0开端计数)

所以大体上了解3个要点:

  • each是一个for循环的包装迭代器
  • each经过回调的办法处理,而且会有2个固定的实参,索引与元素
  • each回调办法中的this指向当时迭代的dom元素

看一个简略的事例


  • 慕课网

  • Aaron


开端迭代li,循环2次

$("li").each(function(index, element) {
index 索引 0,1
element是对应的li节点 li,li
this 指向的是li
})

这样能够在循环体会做一些逻辑操作了,假如需求提早退出,能够以经过回来 false以便在回调函数内间断循

三、事情篇

第1章 鼠标事情

(1)click与dbclick事情

用交互操作中,最简略直接的操作便是点击操作。jQuery供给了两个办法一个是click办法用于监听用户单击操作,另一个办法是dbclick办法用于监听用户双击操作。这两个办法的用法是相似的,下面以click()事情为例

办法一:$ele.click()

绑定$ele元素,不带任何参数一般是用来指定触发一个事情,用的比较少

点击触发

$("ele").click(function(){
alert('触发指定事情')
})
$("#test").click(function(){
$("ele").click() //手动指定触发事情
});

办法二:$ele.click( handler(eventObject) )

绑定$ele元素,每次$ele元素触发点击操作会履行回调 handler函数,这样能够针对事情的反响做许多操作了,办法中的this是指向了绑定事情的元素

点击触发

$("#test").click(function() {
//this指向 div元素
});

办法三:$ele.click( [eventData ], handler(eventObject) )

运用与办法二共同,不过能够承受一个数据参数,这样的处理是为了处理不同作用域下数据传递的问题

点击触发

$("#test").click(11111,function(e) {
//this指向 div元素
//e.data => 11111 传递数据
});

dblclick()的用法和click()的用法是相似的,能够参阅以上click()的用法。

dbclick与click事情不同的是:

  1. click事情触发需求以下几点:
  2. click事情其实是由mousedown与mouseup 2个动作构成,所以点击的动作只要在松手后才触发
  3. dblclick事情触发需求以下几点:
  4. dblclick又是由2个click叠加而来的,所以dblclick事情只要在满意以下条件的状况下才干被触发
  5. (1)鼠标指针在元素里边时点击。
  6. (2)鼠标指针在元素里边时开释。
  7. (2)鼠标指针在元素里边时再次点击,点击间隔时间,是体系而定。
  8. (4)鼠标指针在元素里边时再次开释。

留意:在同一元素上一起绑定 click 和 dblclick 事情是不可取的。各个浏览器事情触发的次序是不同的,一些浏览器在dblclick之前承受两个 click 事情 ,而一些浏览器只承受一个 click 事情。用户往往可经过不同的操作体系和浏览器装备双击灵敏度

(2)mousedown与mouseup事情

用户交互操作中,最简略直接的操作便是点击操作,因而jQuery供给了一个mousedown的方便办法能够监听用户鼠标按下的操作,与其对应的还有一个办法mouseup方便办法能够监听用户鼠标弹起的操作。两种办法用法相似,下面以mousedown()为例

办法一:$ele.mousedown()

办法二:$ele.mousedown( handler(eventObject) )

办法三:$ele.mousedown( [eventData ], handler(eventObject) )

mousedown事情触发需求以下几点:

  • mousedown着重是按下触发
  • 假如在一个元素按住了鼠标不放,而且拖动鼠标脱离这个元素,并开释鼠标键,这仍然是算作mousedown事情
  • 任何鼠标按钮被按下时都能触发mousedown事情
  • 用event 方针的which差异按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3

mouseup事情触发需求以下几点:

  • mouseup着重是松手触发,与mousedown是相反的
  • mouseup与mousedown组合起来便是click事情
  • 任何鼠标按钮松手时都能触发mouseup事情
  • 用event 方针的which差异按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3

click与mousedown的差异:

click事情其实是由mousedown于mouseup 2个动作构成,所以点击的动作只要在松手后才触发

(3)mousemove事情

用交互操作中,常常需求知道用户是否有移动的操作。根据移动的机制能够做出拖动、拖拽一系列的作用出来。针对移动事情,jQuery供给了一个mousemove的方便办法能够监听用户移动的的操作

办法一:$ele.mousemove()

办法二:$ele.mousemove( handler(eventObject) )

办法三:$ele.mousemove( [eventData ], handler(eventObject) )

 

测验




鼠标在绿色区域移动触发mousemove


移动的X方位:





mousemove事情触发需求以下几点:

  • mousemove事情是当鼠标指针移动时触发的,即使是一个像素
  • 假如处理器做任何严峻的处理,或许假如该事情存在多个处理函数,这或许形成浏览器的严峻的功能问题

(4)mouseover与mouseout事情

在学JS的时分,咱们还记得有两个办法叫移入移出事情吗?onmouseover()与onmouseout()事情~

jQuery傍边相同供给了这样的事情来监听用户的移入移出操作,mouseover()与mouseout()事情,两者用法相似,下面一mouseover为例:

办法一:$ele.mouseover()

办法二:$ele.mouseover( handler(eventObject) )

办法三:$ele.mouseover( [eventData ], handler(eventObject) )

 

测验




鼠标移动:不同函数传递数据


进入元素内部,mouseover事情触发次数:





(5)mouseenter与mouseleave事情

用交互操作中,常常需求知道用户操作鼠标是否有移到元素内部或是元素外部,因而jQuery供给了一个mouseenter和mouseleave的方便办法能够监听用户移动到内部的操作

运用上十分简略,三种参数传递办法与mouseover和mouseout是一模相同的,所以这儿不再重复,首要讲讲差异,下面以mouseenter为例:

mouseenter JavaScript事情是Internet Explorer专有的。因为该事情在平常很有用,jjQuery根底(2) 96Query的模仿这一事情,以便它可用于一切浏览器。该事情在鼠标移入到元素上时被触发。任何HTML元素都能够承受此事情。

mouseenter事情和mouseover的差异:

要害点便是:冒泡的办法处理问题

mouseover为例:


鼠标脱离此区域触发mouseover事情



假如在p元素与div元素都绑定mouseover事情,鼠标在脱离p元素,可是没有脱离div元素的时分,触发的成果:

  1. p元素呼应事情
  2. div元素呼应事情

这儿的问题是div为什么会被触发? 原因便是事情冒泡的问题,p元素触发了mouseover,他会一向往上找父元素上的mouseover事情,假如父元素有mouseover事情就会被触发

所以在这种状况下面,jQuery引荐咱们运用 mouseenter事情

mouseenter事情只会在绑定它的元素上被调用,而不会在子孙节点上被触发

(6)hover事情

学了mouseover、mouseout、mouseenter、mouseleave事情,也了解了四个事情的相同点与不同点,现在能够用来给元素做一个简略的切换作用

在元素上移进移出切换其色彩,一般经过2个事情合作就能够到达,这儿用mouseenter与mouseleave,这样能够避免冒泡问题

$(ele).mouseenter(function(){
$(this).css("background", 'red');
})
$(ele).mouseleave(function(){
$(this).css("background", '#bbffaa');
})

这样意图是到达了,代码略微有点多,关于这样的简略逻辑jQuery直接供给了一个hover办法,能够方便处理

只需求在hover办法中传递2个回调函数就能够了,不需求显现的绑定2个事情

$(selector).hover(handlerIn, handlerOut)

  • handlerIn(eventObject):当鼠标指针进入元素时触发履行的事情函数
  • handlerOut(eventObject):当鼠标指针脱离元素时触发履行的事情函数
$("p").hover(
function() {
$(this).css("background", 'red');
},
function() {
$(this).css("background", '#bbffaa');
}
);

第2章 表单事情

(1)focusin事情

当一个元素,或许其内部任何一个元素取得焦点的时jQuery根底(2) 96分,例如:input元素,用户在点击聚集的时分,假如开发者需求捕获这个动作的时分,jQuery供给了一个focusin事情

办法一:$ele.focusin()

办法二:$ele.focusin( handler )

办法三:$ele.focusin( [eventData ], handler )

//input聚集
//给input元素添加一个边框
$("input:first").focusin(function() {
$(this).css('border','10px solid red')
})
//不同函数传递数据
function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusin('慕课网', fn)
}
a();

(2)focusout事情

当一个元素,或许其内部任何一个元素失掉焦点的时分,比方input元素,用户在点击失掉焦的时分,假如开发者需求捕获这个动作,jQuery供给了一个focusout事情

办法一:$ele.focusout()

办法二:$ele.focusout( handler )

办法三:$ele.focusout( [eventData ], handler )

(3)focus与blur事情

除了表单处理事情focusin事情与focusout事情,相同用于处理表单焦点的事情还有focus与blur事情

它们之间的本质差异:是否支撑冒泡处理

举个简略的比方




其间input元素能够触发focus()事情

div是input的父元素,当它包含的元素input触发了focus事情时,它就发作了focusin()事情。

focus()在元素自身发作,focusin()在元素包含的元素中发作

 

.focusin与blur




点击触发焦点(无反响):



点击触发焦点并冒泡:




blur与focusout也亦是如此

(4)change事情

元素,

  1. input元素
  2. 监听value值的改动,当有改动时,失掉焦点后触发change事情。关于单选按钮和复选框,当用户用鼠标做出挑选时,该事情当即触发。
  3. select元素
  4. 关于下拉挑选框,当用户用鼠标作出挑选时,该事情当即触发
  5. textarea元素
  6. 多行文本输入框,当有改动时,失掉焦点后触发change事情

(5)select事情

当 textarea 或文本类型的 input 元素中的文本被挑选时,会发作 select 事情。

这个函数会调用履行绑定到select事情的一切函数,包含浏览器的默许行为。能够经过在某个绑定的函数中回来false来避免触发浏览器的默许行为。

select事情只能用于元素与

运用上十分简略:

办法一:$ele.select()

办法二:$ele.select( handler(eventObject) )

办法三:$ele.select( [eventData ], handler(eventObject) )

 //监听input元素中value的选中
//触发元素的select事情
$("input").select(function(e){
alert(e.target.value)
})
$("#bt1").click(function(){
$("input").select();
})

(6)submit事情

提交表单是一个最常见的事务需求,比方用户注册,一些信息的输入都是需求表单的提交。相同的有时分开发者需求在表单提交的时分过滤一些的数据、做一些必要的操作(例如:验证表单输入的正确性,假如过错就阻挠提交,重新输入)此刻能够经过submit事情,监听下提交表单的这个动作

办法一:$ele.submit()

办法二:$ele.submit( handler(eventObject) )

办法三:$ele.submit( [eventData ], handler(eventObject) )

经过在

元素上绑定submit事情,开发者能够监听到用户的提交表单的的行为

具体能触发submit事情的行为:

  • 当某些表单元素获取焦点时,敲击Enter(回车键)

上述这些操作下,都能够截获submit事情。

这儿需求特别留意:

form元素是有默许提交表单的行为,假如经过submit处理的话,需求制止浏览器的这个默许行为

传统的办法是调用事情方针 e.preventDefault() 来处理, jQuery中能够直接在函数中最终结束return false即可

jQuery处理如下:

$("#target").submit(function(data) { 
return false; //阻挠默许行为,提交表单
});

submit





回车lreland键或许点击提交表单:






回车键或许点击提交表单,制止浏览器默许跳转: