锋利的jQuery中的事件与动画

xiaozhen0610

于 2020-07-14 16:17:13 发布

阅读量86

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjcc1c10022j.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

奋夜的奋斗 ———— 事件与动画 ———— 来自地狱的战镰

小小的单词难不倒我们哦！！！！！！！

bind：绑定 unbind：接触绑定 toggle：栓牢 fadeout：渐显 fadeout：渐没

一：事件

1.鼠标事件

(1)$()是$(document)的简写，默认参数是document.

$(function(){}是$(document).ready(function(){})的简写。

(1)事件绑定 bind(type [,data],fn);

type是事件类型，有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,

mouseover,mousemove,mouseout,mouseenter,mouseleave,change,select,submit,keydown,

keypress,keyup和error等，也可是是自定义名称。

eg：光棒效果：

 <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
    <script type="text/javascript">
           $(function(){
              $("li").bind({"mouseover":function(){
                      $(this).css("background","green");
                  },"mouseout":function(){
                      $(this).css("background","");
                  }, "click":function(){
                    alert($(this).text());
                  },               
              }).unbind("mouseout mouseover");
                
           });
    </script>
  </head>
  
  <body>
    <ul>
          <li>胡椒粉和健康</li>
          <li>对付佛教快点回家</li>
          <li>解放后地上佛</li>
          <li>都会放假回家都会降低发动机和房价</li>
    </ul>
  </body>

bind的列子：

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 <script type="text/javascript" language="javascript" > 
 $(document).ready(function(){  //等待所有dom绘制完成后就执行
     $("#panel h5.head").bind("click",function(){
    var $content = $(this).next();
    if($content.is(":visible")){
        $content.hide();
        }else{
        $content.show();
        }
    });//bind
    
 }); //$(document)
 </script>
</head>
<body>

<div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
        jQuery是继prototype之后的有一个优秀的javascript类库
    </div>
</div>

</body>
</html>

二：键盘事件：

对于click,mouseover,mouseout这类事件，可以使用下面的简写方法：

<script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function(){ //等待所有dom绘制完成后就执行  $("#panel h5.head").mouseover(function(){ $(this).next().show(); }).mouseout(function(){ $(this).next().hide(); }); }); //$(document) </script> </head> <body> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继prototype之后的有一个优秀的javascript类库 </div> </div> </body> </html>

三：表单事件

eg:

<style type="text/css">
        .myred{
           color:red;
        }
    
    </style>
    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
    <script type="text/javascript">
         $(function(){
             $("input").focus(function(){
                $("span").addClass("myred");
             });
          });
         $(function(){
             $("input").blur(function(){
                $("span").removeClass("myred");
             });
          });
    
    
    </script>
  </head>
  
  <body>
      <input><span class="myred">键盘事件 ，移除显示</span>
  </body>

DA 二：动画

(1)show()将元素display样式设置为先前的显示状态(block,inline);hide()将display样式设置为none,导致隐藏。

可以加参数fast,slow,normal,时间整数(毫秒)。

(2)fadeOut()改到透明度到消失，fadeIn()相反。

(3)slideDown()向下显示，slideUp()向上隐藏。

(4)animate(params,speed,callback)自定义动画，params为样式如{property1:"value1",property2:"value2"}

speed速度，可选；callback动画执行完执行的函数，可选。

eg：

$('input').bind('click', function () { if ($(this).is(':visible')) {//如果内容为显示 $(this).hide(); } else { $(this).show(); } })

2.切换元素可见状态（toggle()）

#panel 
{
    position:relative;
    width:100px;
    height:300px;
    border:1px solid #0050D0;
    background:#96e555;
    cursor:pointer;
}
html代码：
<div id="panel"></div> jQuery代码： $("#panel").click(function () { $(this).animate({ left: "+=500px" }, 3000) //累计从左移动，先执行 .animate({ height: "-=100px" }, 2000) //累计减少高度，后执行 .animate({ opacity: "0.5" }, 3000)//透明度降低到0.5 .fadeOut("slow", function () { //动画都可以带有回调函数 $(this).css("display", "block"); //显示,css方法不加入到动画队列，因此在callback中 $(this).animate({ opacity: "1" }, 3000); //改变透明度 }); });

(1)+=和-=可以累计改变属性的值，如果直接写数字则改变一次。

(2)animate中的left是从左，top是从上；

(3)css()方法不会加入到动画队列，而是立即执行。

(4)将多个属性放到animate中会同时执行这些动画。

3,停止动画和判断是否正在动画

(1)stop[clearQueue][gotoEnd]);可选参数,true或false;clearQueue是否要清空未执行的动画队列；gotoEnd代表

是否直接跳转到当前动画的末状态。如果直接使用stop()就停止当前正在进行的动画，后面的动画继续。

(2)hover(enter,leave)是鼠标悬停事件,进入执行enter，出来执行leave;下面的例子防止动画效果与鼠标不一致：

如果有多个动画，想在enter时停止，可以将参数clearQueue设为true ,像这样stop(true)

stop(false,true)让当前动画直接到末状态。

stop(true,true)让当前动画直接到末状态，并清空动画队列。

(3)判断是否处于动画状态

(4)延迟动画 delay(1000) 延迟1秒。

欣欣向荣

xiaozhen0610

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
锋利的jQuery中的事件与动画

奋夜的奋斗 ———— 事件与动画 ———— 来自地狱的战镰小小的单词难不倒我们哦！！！！！！！ bind：绑定 unbind：接触绑定 toggle：栓牢 fadeout：渐显 fadeout：渐没一：事件 1.鼠标事件 (1)$()是$(document)的简写，默认参数是document. $(function(){}是$(document).ready...
复制链接

扫一扫