Jquery中的事件处理(自动触发事件,禁用按钮,悬停，失焦，滑动效果)

最新推荐文章于 2020-11-29 15:58:48 发布

ws_hgo

最新推荐文章于 2020-11-29 15:58:48 发布

阅读量1.7w

点赞数 1

分类专栏： JQuery 文章标签： jquery function xhtml class border html

本文链接：https://blog.csdn.net/ws_hgo/article/details/6635219

版权

JQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.自动触发事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .Red
    {
     color:Red;
    }
     .Green
    {
     color:Green;
    }
    .buttons
    {
        text-align:center;
        font-weight:bold;
        border:2 solid;
        width:100px;
        float:left;
        margin:5px;
        background-color:Gray;
    }
    </style>
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('.buttons').bind('click', function () {
                 alert('you click' + $(this).text());
                  $('.Green').trigger('click');
             });


         });
     </script>
</head>
<body>

<span class="Red buttons">Red</span>
<span class="Green buttons">Green</span>

<p></p>
  

</body>
</html>

2.点击之后禁用按钮

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .Red
    {
     color:Red;
    }
     .Green
    {
     color:Green;
    }
    .buttons
    {
        text-align:center;
        font-weight:bold;
        border:2 solid;
        width:100px;
        float:left;
        margin:5px;
        background-color:Gray;
    }
    </style>
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('.buttons').bind('click', function () {
                 alert('you click' + $(this).text());
                 $('.buttons').unbind('click');
             });


         });
     </script>
</head>
<body>

<span class="Red buttons">Red</span>
<span class="Green buttons">Green</span>

<p></p>
  

</body>
</html>

3.处理鼠标事件(鼠标点击，释放，划过)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .Red
    {
     color:Red;
    }
     .Green
    {
     color:Green;
    }
    .buttons
    {
        text-align:center;
        font-weight:bold;
        border:2 solid;
        width:100px;
        float:left;
        margin:5px;
        background-color:Gray;
    }
    </style>
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('.buttons').bind('mousedown', function () {
                 alert('you mouse button is pressed down' + $(this).text());

             });

             $('.buttons').bind('mouseup', function () {
                 alert('The mouse button is released over'+$(this).text());
             });

             $('.buttons').bind('mouseover', function () {
                 alert('The mouse button is over' + $(this).text());
             });


         });
     </script>
</head>
<body>

<span class="Red buttons">Red</span>
<span class="Green buttons">Green</span>

<p></p>
  

</body>
</html>

4.元素获得，失去焦点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">

    </style>
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $("#Name").focus(function () {
                 alert('Name has been focused');
             }
             );

             $("#Name").blur(function () {
                 alert('Name lost focus');
             });
         });
     </script>
</head>
<body>

   Name <input id="Name" type="text" />
<p></p>
  

</body>
</html>

5.应用悬停效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .buttons
    {
        text-align:center;
        font-weight:bold;
        border:2 solid;
        width:100px;
        float:left;
        margin:5px;
        background-color:Gray;
    }
    .hover
    {
     cursor:crosshair;
     color:Blue;    
     background-color:cyan;
    }
    </style>
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
          //把两个事件处理程序添加到指定的元素，一个用于当鼠标进入元素时触发，
         //一个用于鼠标离开触发
             $('.buttons').hover(
             function () {
                 $(this).addClass("hover");
             },
             function () {
                 $(this).removeClass("hover");
             }
             );

         });
     </script>
</head>
<body>
<span class="buttons">Click</span>
</body>
</html>

6.'更多'连接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    </style>
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#Message').hide();
             $("#more").toggle(
             function () {
                 $("#Message").show('slow');
                 $(this).text('read less');
             },
             function () {
                 $('#Message').hide();
                 $(this).text('Read More');
             }
             )
         });
     </script>
</head>
<body>
<div>Welome to My Blog</div>
<span id="more">Click More</span>
<div id="Message">
I'm a software engineer development,i have been work in shanghai for about 6 months.I love this job.
it got a lot of potential than my old job.In order to Earning money,I need to work hard and contribute to my team.
</div>
</body>
</html>

7.以滑动效果替换文本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    </style>
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#message1').css({ 'backgroundColor': '#f00', 'text-align': 'center','width':'200px' }).hide();
             $("#message2").css({ 'backgroundColor': 'gray', 'text-align': 'center','width': '200px' }).click(function () {
                 $(this).slideUp();
                 $("#message1").slideDown();
             });
         });
     </script>
</head>
<body>
<p id="message1">Welome to My Blog</p>

<p id="message2">Welcome to My Facebook</p>
</body>
</html>

8.滚动效果