jquery 动态设置悬浮事件 jquery鼠标悬浮事件文字

1. 事件的处理方式

a、on添加事件是，如果事件名不同，但是事件触发后的操作相同，可以连写，中间用空格，如：on(“click mouseover mouseout”,function(){console.log(10)});

b、另外可以添加多个同名的事件，不会被覆盖，可以共存。

1. on方法

1. 作用：为元素添加事件
2. 格式：元素.on（”事件名”,选择器，数据， 事件函数）；
3. 示例：$(‘ul’).on(‘click’,’#box’,{name:”Tom”},fn);

数据可以是对象类型，也可是数组类型。

$("div").on("click",{name:"tom",age:23,gender:"男",background:"yellow"},function (event) {
 $(this).html("姓名："+event.data.name+"<br>性别："+event.data.gender).css("background",event.data.background)
 })；

使用选择器的时候，注意，前面操作的是父元素。

$("ul").on("click","#box",function(){
 console.log("heoo")
})
$("ul").on("click",":not(#box)",function(){
 console.log("heoo")
})

1. off方法

1. 作用：删除事件
2. 格式：元素.off（“事件名”）
3. 注意：如果没有写参数事件名，那么删除元素身上所有的事件，可以同时删除多个事件，事件名间用空格分隔

$("div").on("mouseup mousedown mouseover",function(){
 console.log("hello")
})
$("div").off("mousedown mouseup");

1. one

1. 作用：给元素绑定一个一次性的事件，（one里面写的可以是多个事件）
2. 格式：元素.one(“事件名”， 事件函数);

$("div").one("mouseover mouseout",function(){
 console.log(1)
})

1. bind

1. 作用：给元素添加事件，作用同on
2. 格式：元素.bind（“事件名”， 事件函数）；

2. unbind

1. 作用：删除元素身上的事件,作用同off
2. 格式：元素.unbind（“事件名”）；

3. trigger

1. 作用：触发匹配元素上指定类型的事件
2. 格式：元素（元素集合）.trigger（“事件名”）
3. 注意：集合中的每个元素身上的事件都会被触发

$("li").on("click",function(){
 console.log($(this).text())
}).trigger("click");

每一个li上的事件都会在打开页面时自动触发。

常用于代码测试。

1. triggerHandler

1. 作用：触发匹配元素集合中第一个元素指定类型事件
2. 格式：元素（元素集合）.triggerHandler（“事件名”）

$("li").on("click",function(){
 console.log($(this).text())
}).triggerHandler("click")；

只有第一个子元素身上的事件被自动触发。

1. 事件对象

1. event.type：此属性可以返回事件的类型

$("div").click(function(event){
 console.log(event.type)
})

1. event.pageX：此属性能够返回当前鼠标指针相对于文档的左边缘的位置
2. event.pageY：此属性能够返回当前鼠标指针相对于文档的上边缘的位置。

$("div").click(function(event){
 console.log(event.pageX+":"+event.pageY)
})

1. event.which：针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮，按键盘按键返回keyCode，按鼠标左键返回1，按鼠标右键返回3，按鼠标中间键返回2

$("div").on("contextmenu",function(event){
 event.preventDefault();
 console.log(event.which)
}).click(function(event){
 console.log(event.which)
})

阻止点击右键的默认事件，并且弹出鼠标或键盘事件中鼠标和键盘的keycode.

1. event.result：此属性可以返回与当前事件类型相同事件的前一个处理函数的返回值

注意，这儿的绑定的事件必须是同名的事件，event.result返回的是定义的上个事件的返回值。

1. event.data：此属性返回传递给当前事件处理函数的额外数据。返回值可以是任意类型的，如果没有传递额外数据，那么返回值是undefined

$("div").on("click",function(event){
 console.log(event.data)
})

1. event.target：此属性用来返回触发事件的DOM元素（该事件发生了，但是点击的是谁）
2. event.currentTarget：在事件冒泡阶段中的当前DOM元素（谁身上的事件被触发了）
3. event.delegateTarget：同上

把下面的4个例子看懂，就明白了。

$("#box1").on("click",function(event){
 console.log(event.currentTarget)
});
$("div").on("click",function(event){
 console.log(event.currentTarget)
});
$("#box1").on("click",function(event){
 console.log(event.target)
});
$("div").on("click",function(event){
 console.log(event.target)
});

1. event. relatedTarget：在事件中涉及的其它任何DOM元素

1. 对于mouseout 事件，它指向被进入的元素，表示去哪
2. 对于mouseover事件，表示从哪来

$("#box2").on("mouseover",function(event){
 console.log(event.relatedTarget)
 })

从box1移入box2时打印的是box1，从box2右边移入打印的是body，从它下面移入返回的是html.

1. event. timeStamp：这个属性返回事件触发时距离1970年1月1日的毫秒数

实际测试的效果好像是触发该事件距离打开页面的时间差，单位是毫秒数。

以上都是属性，不加小括号，以下都是方法，要加小括号。

1. event.stopPropagation方法：阻止冒泡

$("#box1").on("click",function(event){
 console.log(222)
});
$("#box2").on("click",function(event){
 console.log(111)
 event.stopPropagation();
})

这个案例，点击box3，仍然可以打印111,但是不能打印222，因为box2阻止的往上冒泡，所以点击box3时，点击事件冒到box2就不再继续往上冒了。而如果点击box2,会打印111,不会打印222,因为它的函数打印的111,但是不能冒泡，所以不能打印111.

但是如果阻止box3的事件冒泡，那么点击box3会打印111，不打印222，点击box2仍然会打印222.，阻止冒泡，只是阻止的本层往上一级的冒泡。

$("#box1").on("click",function(event){
 console.log(222)
});
$("#box3").on("click",function(event){
 console.log(111)
 event.stopPropagation();
})

1. event.isPropagationStopped方法：根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值，如果调用了返回true，否则返回false；

1. preventDefault方法：阻止默认事件行为的触发。

1. event.isDefaultPrevented方法：根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值

1. event.stopImmediatePropagation：此方法可以阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。

下面显示阻止了冒泡，

下面显示是后面定义的同名事件不在执行，也被阻止了。与event.result的相似，必须是后面定义的事件必须是同名的。

1. event.isImmediatePropagationStopped：根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。

以上案例基本用的都是下面的结构。

<div id="box1">
 <div id="box2">
 <div id="box3"></div>
 </div>
</div>

1. DOM对象的onload事件和jQuery的ready事件的区别

1. 执行时间不同：

1. window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
2. $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。所以加载速度快。

只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.
但是对于一些特殊应用，比如图片的放大缩小，图片的剪裁。需要网页所有的内容加载完毕后才执行的呢？我推荐使用$(window).load()方法，这 个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有OnLoad事件的弊端.

1. 编写个数不同：

1. window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
2. $(document).ready()可以同时编写多个，并且都可以得到执行

2. 简化写法

1. window.onload没有简写方式
2. ready有3种简写方式

a/$(document).ready(function(){});
b/$().ready(function(){});
c/$(function(){});
$(function() {
 $("a").click(function() {
 alert("Hello world!");
 });
})

常写这样。

window.οnlοad=function(){
 console.log(100)}
 window.οnlοad=function(){
 console.log(200)}
 $(document).ready(function(){
 console.log(4000)})
 $(document).ready(function(){
 console.log(5000)
 })

结果为4000，5000，200。

一般样式控制的，比如图片大小控制放在onload 里面加载;

而：jS事件触发的方法，可以在ready 里面加载;

1. 效果

1. show方法

1. 作用：显示隐藏元素
2. 格式：元素.show（时间，回调函数），时间单位为毫秒
3. 注意：回调函数表示动画完成后执行的操作

2. hide方法

1. 作用：隐藏显示的元素
2. 格式：元素.hide（时间，回调函数）

3. slideDown方法

1. 作用：通过向下滑动的方式显示匹配元素
2. 格式：元素.slideDown（时间，回调函数）

4. slideUp方法

1. 作用：通过向下滑动的方式显示匹配元素
2. 格式：元素. slideUp（时间，回调函数）

5. slideToggle方法

1. 作用：此方法通过高度变化来切换所有匹配元素的可见性，点击展开，再点击折叠
2. 格式：元素. slideToggle（时间，回调函数）

6. fadeIn方法

1. 作用：此方法可以通过淡入的方式显示匹配元素。
2. 格式：元素. fadeIn（时间，回调函数）

先display:block，再opacity属性变化为1.

1. fadeOut方法

1. 作用：此方法通过淡出的方式隐藏匹配元素。先opacity属性变化为1.，再display:none
2. 格式：元素. fadeOut（时间，回调函数）

2. fadeTo方法

1. 作用：此方法调整匹配元素的透明度。
2. 格式：元素. fadeTo（时间，透明度，回调函数）

3. fadeToggle方法

1. 作用：此方法通过过匹配的元素的不透明度动画，来显示或隐藏它们，点击淡入，再点击淡出
2. 格式：元素.fadeToggle（时间，回调函数）

4. animate方法

1. 作用：创建自定义动画
2. 格式：元素.animate（{属性名：属性值}，时间，回调函数）

5. stop方法

1. 作用：此方法停止匹配元素当前正在运行的动画。
2. 格式：元素.stop（参数1，参数2）
3. 注意：

1. 如果一个参数都不写，停止当前动画，后面还没有执行的动画，从停止时的状态继续按照后面设置的动画效果执行。
2. 参数1：表示是否停止所有动画，如果为true表示停止所有，如果false和参数空着的效果一样。
3. 参数2：规定是否完成当前正在执行的动画，如果为true，则不会按照原来既定的规则完成当前动画，而是立马完成当前动画，然后后面定义的动画正常执行。false的话，当前动画停止，从停止的状态接着执行后面定义的动画。默认值是false。

stop事件的位置没有特殊要求。

$("button").click(function(){
 $("div").hide(2000).show(2000).click(function(){
 $(this).stop(false,false)
 })
 })

1. delay方法

1. 作用：延迟动画执行时间
2. 格式：元素.delay（时间）.动画();delay事件一定要写在动画事件的前面。

$("button").click(function(){
 $("div").delay(2000).hide(2000)
 })

1. finish方法

1. 作用：停止当前动画，且删除后面所有动画的效果，而是从停止的状态，开始执行，立即变成后面动画要求的最终效果。（他们的CSS属性设置为它们的目标值）
2. 格式：元素.finish（）；

注意finish的位置，没有特殊要求。

$("button").click(function(){
 $("div").hide(2000).click(function(){
 $(this).finish()
 }).show(2000)
 })

1. 对象访问

1. each方法

1. 作用：遍历jQuery对象
2. 格式：元素集合.each（回调函数）

2. size方法

1. 作用：获取元素集合中的元素个数
2. 格式：元素集合.size（）

3. length属性

1. 作用：获取元素集合中的元素个数
2. 格式：元素集合.length

4. selector属性

1. 作用：获取选取当前元素时使用的选择器，标签p或者#box
2. 格式：元素.selector

5. get方法

1. 作用：获取集合中的第n个DOM对象
2. 格式：元素集合.get（下标），或者直接用[下标]；

6. index方法

1. 作用：搜索匹配的元素，并返回相应元素的索引值，如果没有返回-1
2. 格式：元素集合.index（jQuery对象）

2. context属性

其中$()选择器还有第二个参数范围，(“span”,p),p一定要是一个选取出来的dom对象。表示在p中选择span

1. 作用：返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。
2. 属性：prop方法

1. 作用：获取或设置元素的属性值
2. 获取：元素.prop（‘属性名’）
3. 设置：元素.prop（‘属性名’，‘属性值’）
4. prop方法和attr方法的区别

1. prop不支持自定义的HTML属性，设置时添加不上，获取时返回值为undefined，而attr支持;

$("ul").attr("a",100) ，trr可以设置自定义的属性。

$("ul").prop("a",100)，prop加不上。

而且如果已经设置了自定义的属性，用attr可以获取具体的值，而prop获取undefined.

1. 如果不是自定义属性，那么如果元素没有设置该属性，获取时prop返回值为空字符串，而attr为undefined
2. 在复选框和单选框的区别

1. prop()函数的结果(获取):

• 如果被选中，返回值是true。
• 如果没有被选中，返回值是false。

1. attr()函数的结果（获取）:

如果被选中，返回值是checked。如果没有被选中，返回值是undefined

如果设置取消选中状态，那么用prop方法checked等于true或者false.