HTML之jQuery事件函数、名称冲突、隐藏和显示等代码实例讲解

jQuery 事件函数

jQuery是为事件处理特别设计的

jQuery事件处理方法是jQuery的核心函数

其写法如下

$("button").click(function(){something})

当你点击button时，会触发点击事件，调用这个函数。

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

$(document).ready(function)       //将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)       //触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)    //双击事件
$(selector).focus(function)       //获得焦点事件
$(selector).mouseover(function)   //悬停事件

jQuery 隐藏和显示

可以使用hide()和show()方法来隐藏和显示HTML元素：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

当然，函数要写在ready函数中

语法

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

jQuery toggle()

toggle（）是切换方法，在上面的例子中，我们是创建了两个class为hide，show按钮或者其他的标签，通过两个点击事件来完成隐藏和显示。toggle方法可以在一个按钮上实现hide(),show()的切换，显示被隐藏的元素，隐藏被显示的元素。

$("button").click(function(){
  $("p").toggle();
});

语法：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。