JQuery的属性与样式操作

[沫栀丶]

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：JQuer和MVC开发工具
作者：郑健鹏
撰写时间：2019年4月14日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

这次我们来学习jQuery鼠标事件，如果要使用这些事件，第一步是应用Jquery插件，第二步是绑定要使用这些事件所使用的元素，比如按钮之类的，这里的演示就绑定了按钮，当鼠标点击，移入和移除会触发一些绑定的事件
jQuery鼠标事件
jQuery鼠标事件列表：
click 单击事件 dbclick 双击事件
mousedown 鼠标按下事件 mouseup鼠标弹起事件
mouseenter 鼠标进入事件 mouseleave 鼠标离开事件
jQuery鼠标事件之click与dbclick事件
click([[data], fn])
参数说明：fn 在每一个匹配元素的click事件中绑定的处理函数。
data:click([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的click事件中绑定的处理函数。
dblclick([[data],fn]) 参数说明同上
1·第一个按钮的点击事件：这是鼠标的单击事件
$("button:eq(0)").click(function () {
alert("jQuery鼠标事件之鼠标单击事件");
});
2·第二个按钮的dblclick事件：这是鼠标的双击事件
$("button").eq(1).dblclick(function () {
alert("jQuery鼠标事件之鼠标双击事件");
});
3·第三个按钮的mousedown事件：这是鼠标的按下事件
$("button").eq(2).mousedown(function () {
alert("jQuery鼠标事件之鼠标按下事件");
});
4·第四个按钮的mouseup事件：这是鼠标的弹起事件
$("button").eq(3).mouseup(function () {
alert("jQuery鼠标事件之鼠标弹起事件");
});
5·第五个按钮的mouseover事件：这是鼠标的移入事件
$("button").eq(4).mouseover(function () {
alert("jQuery鼠标事件之鼠标移入事件");
});
6·第六个按钮的mouseover事件：这是鼠标的移出事件
$("button").eq(5).mouseout(function () {
alert("jQuery鼠标事件之鼠标移出事件");
});
jQuery鼠标事件之hover事件
hover([over,]out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
参数说明：
over,out：
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
out
当鼠标移到元素上或移出元素时触发执行的事件函数
$(".divContent").hover(
function () {//hover的第一个函数：鼠标移入的时候触发事件
$(this).addClass("changeColor");//添加一个类
},
function () {//hover的第二个函数：鼠标移出的时候触发事件
$(this).removeClass("changeColor");//移除类