Jquery——Day2（基础事件）

梦里梦外; 2022-07-12 12:43 200阅读 0赞

在jquery中，加载事件采用$(document).ready()方法，用它来代替JavaScript中的window.onload方法。

二者的区别在于（1）执行时机上，window.onload必须在网页所有元素加载到浏览器后才执行即访问网页中的元素；而$(document).ready()方法在于若DOM结构准备完全就绪，就可以被调用；（2）调用次数上，window.onload方法只可以加载一次，而$(docuemnt).ready()方法可以多次使用。（3）简写方式上，在jquery中，事件加载是有简写方式的，即$(function()\{\})。

事件分为：绑定事件bind()、简写事件、

1、绑定事件bind()

bind( type \[,data\] ,fn)，该方法含有三个参数，第1个参数为事件的类型（blur、focus、load、click、mouseover等），第2个参数为可选的参数，第3个参数用来绑定的处理函数。

<div id="panel"> <h5 class="head">什么是jquery</h5> <div class="content"> jquery是一门编程语言，是一个优秀的JavaScript库，便于开发人员使用。 </div> </div>

若要点击“什么是jquery”，出现content类下的文本内容，即需要使用click点击事件。

（1）绑定click事件

$(function(){ $('#panel h5.head').bind('click',function(){ $(this).next().show(); }); });

（2）绑定mouseover、mouseout事件

若鼠标滑过标题，即下面的内容content将显示出来；若鼠标滑出标题链接时，即下面的内容隐藏

$(function(){ $("#panel h5.head").bind("mouseover",function(){ $(this).next().show(); }).bind("mouseout",function(){ $(this).next().hide(); }); });

与mouseover、mouseout事件相对应的另外两个鼠标事件是mouseenter、mouserleave

二者区别：

（1）定义上讲，mouseover()、mouseout()表示鼠标移入和移出时会触发，

mouseenter()、mouseleave()表示鼠标穿过或穿出时会触发；

（2）当穿过子元素时，mouseenter()、mouseleave()不会触发，而mouseover()、mouseout()会触发

**     （注意：enter不会触发子节点，over会触发子节点，平时使用enter的居多）**

2、简写事件

简写事件方式与bind()绑定事件实现效果相同，唯一的区别在于减少了代码量，将上述代码改写如下：

$(function(){ $("#panel h5.head").mouseover(function(){ $(this).next().show(); }).mouseout(function(){ $(this).next().hide() }); });

此外，与鼠标事件mouseover、mouseout对应的还有键盘事件keypress、keydown、keyup，写法类似。

keyup()、keydown()返回的是一个键值keyCode

keypress()表示触发鼠标按下。

（2）光标事件激活focus()、光标丢失blur()

同时focusIn()也表示表示光标激活，focusOut()表示光标丢失。

区别在于

focus()、blur()必须是**当前元素**才能激活，

而focusIn()、focusOut()可以是**子元素**激活。

3、复合（合成）事件

（1）ready(fn)：表示DOM结构加载完毕

（2）hover(fn1,fn2)：用于模拟光标悬停事件。

若光标移动到元素上，会触发指定的第一个函数（enter）；移出该元素时，会触发第二个函数（leave），

**它是mouseenter()、mouseleave()的结合体**。

$(function(){ $("#panel h5.head").hover(function(){ //enter $(this).next().show(); },function(){ //leave $(this).next().hide(); }); });

（3）toggle()：用于模拟鼠标连续单击事件。

toggle(fn1,fn2,...,fnN)

若第一次单击元素，触发第一个函数（fn1）；若第二次单击时，触发第二个函数（fn2），以此类推。

$(function(){ $("#panel h5.head").toggle(function(){ //fn1 $(this).next().toggle(); },function(){ //fn2 $(this).next().toggle(); }); });

（4）加强效果

即在css样式中添加类highlight（高亮）

.highhight{background:#ff3300;}

上述代码，在显示函数中，添加“高亮”，使得标题高亮显示；在隐藏函数中，添加高亮，使得内容高亮显示。

$(function(){ $("#panel h5.head").toggle(function(){ //fn1 $(this).addClass("highlight"); $(this).next().toggle(); },function(){ //fn2 $(this).removeClass("highlight"); $(this).next().toggle(); }); });