jQuery中DOM事件合成的实例分析
jQuery有两个合成事件——悬停()方法和切换()方法,与前面提到的现成()方法类似,悬停()方法和切换()方法属于jQuery自定义方法。
悬停()方法
悬停()方法的语法结构如下所示:
盘旋(进入,离开);
悬停()方法用于模拟光标的悬停事件。当光标移动到元素时,它触发指定的第一个函数(Enter);当光标移出元素时,它触发指定的第二个函数(离开)。
代码是:
$(函数(){())
$(#面板H5。头)。Hover(function(){)
$(这个);
}函数(){()
$(这个);
})
})
代码运行的效果与下面的代码相同,当光标在标题链接上滑动时,相应的内容就会显示出来;当光标退出标题链接时,相应的内容就会隐藏起来。
$(函数(){())
$(#面板H5。头)。Mouseover(function(){)
$(这)。下(div.content )显示();
});
$(#面板H5。头)。Mouseover(function(){)
$(这)。下(div.content )藏();
})
});
小心 uff1a
1中有伪类选择器。CSS,如:在大多数规范的浏览器中,伪类选择器可以用于任何元素。然而,IE浏览器中的伪类选择器只能用于超链接元素。对于其他元素,您可以使用jQuery的()悬停()方法(6)。
2。悬停()方法是完全绑定的替代(MouseEnter)和绑定(MouseLeave )在jQuery代替绑定(问号)和绑定(怪),所以当你需要触发悬停第二功能()方法,你需要使用触发器(MouseLeave )来触发,触发(怪)。
切换()方法
切换()方法的语法结构如下所示:
切换(FNL、FN2,…FNN);
toggle()方法被用来模拟鼠标连续点击事件。第一次点击元素触发指定的第一个函数(FN1);当同一元素再次单击,它触发指定的第二功能(FH2);如果有更多的功能,它会触发转直到最后一个,每个的随后点击重复功能的旋转。
在前面的增强效果示例中,使用了以下jQuery代码:
$(函数(){())
$(#面板H5。头)。Toggle(function(){)
$(这个);
}函数(){()
$(这个);
})
})
切换()方法的使用不仅达到了同样的效果,而且简化了代码。
切换()方法在jQuery中有另一个角色:切换元素的可见状态。如果元素可见,开关后单击被隐藏;如果元素隐藏,开关后可以单击,因此上述代码也可以编写成以下jQuery代码:
$(函数(){())
$(#面板H5。头)。Toggle(function(){)
$(这个)。下一步。(Toggle);
}函数(){()
$(这个)。下一步。(Toggle);
})
})
为了获得更好的用户体验,现在不仅需要显示内容,还要在用户点击标题链接后突出标题:
$(函数(){())
$(#面板H5。头)。Toggle(function(){)
$(这)。AddClass(亮点);
$(这个);
}函数(){()
$(这)。RemoveClass(亮点);
$(这个);
});
})
运行代码后,如果显示内容,标题将高亮显示:如果内容被隐藏,则不会突出新闻标题。
希望本文能对大家的jQuery程序设计有所帮助。