html 鼠标单击显示div,3.1.2 利用鼠标单击实现DIV的选取

3.1.2  利用鼠标单击实现DIV的选取

有时我们不希望鼠标悬停就选取一个DIV，而是希望当鼠标对DIV进行单击时选择它。如果是这样，需要使用鼠标的单击事件来操作对DIV的选取。其中，需要使用jQuery函数ready()、click()。使用ready()函数在文档加载完成后注册DIV的鼠标单击事件，在鼠标单击事件中做出响应。

1．jQuery函数click()--鼠标单击事件

该函数触发每一个匹配元素的单击事件。其语法形式如下：click([fn])

注：这个函数会调用执行绑定到click事件的所有函数。

HTML代码和CSS样式参考光盘内容。下面直接看一下JavaScript功能实现：1

2   $(function(){

3       $("#div1").click(function(){                //鼠标单击事件

4           alert("单击层被选择");

5       });

6   });

7

效果如图3.3所示。在jQuery中还有一个事件响应函数toggle()。它对鼠标单击的不同次数进行响应，而不仅仅是单击事件。当发生多次单击的时候，每次单击事件都可以用这个函数做处理操作，它和上面所介绍的hover()函数同属于事件切换函数。这里我们想要实现当鼠标***次单击DIV的时候选取，第二次单击DIV的时候撤销选取。