10_jQuery_鼠标事件

HTML代码：

    <p>haha 1</p>
    <p>haha 2</p>
    <p>haha 3</p>
    <p>haha 4</p>
    <p>haha 5</p>

jQuery代码：

    //点击文本，然后弹出该文本
    //以下两种方法均能实现
    //JavaScrip代码
        //var p=document.getElementsByTagName("p");
//        for(var i=0;i<p.length;i++)
//        {
//            p[i].onclick=function()
//            {
//                alert(this.innerHTML);
//            }
//        }

//jQuery代码：
    $(function(){
        $("p").click(function(){
            alert($(this).html()); 
            })
        })

效果：

HTML代码：

    <p>haha 1</p>
    <p>haha 2</p>
    <p>haha 3</p>
    <p>haha 4</p>
    <p>haha 5</p>
   

jQuery代码：

    $(function(){//双击文本，就可以弹出文本
        $("p").dblclick(function(){
            alert($(this).html()); 
            })
        })

效果：与上图产生的效果一样，只是产生的方式不一样，此处是双击文本弹出

鼠标悬停在p标签上的时候，弹出文本框

HTML代码：

 

    <p>haha 1</p>
    <p>haha 2</p>
    <p>haha 3</p>
    <p>haha 4</p>
    <p>haha 5</p>
    

 

css代码：

    p{
        width:300px;
        background-color:aquamarine;
    }

 

jQuery代码：

    $(function(){//鼠标悬停在文本上，就可以弹出文本
        $("p").hover(function(){
            alert($(this).html()); 
            })
        })

效果：