常见的JQuery应用举例

时间:2022-06-27 11:17:55

在学习JS之后,JQuery(以下简称JQ)为我们提供了一种更加便捷和简单的操作模式,利用它开发人员将更为高效的进行工作,下面将一些常见的问题进行举例。

1.点击某处弹出提醒,例如某些游戏在注册时会弹出“过渡游戏有害健康”的提示语,利用JQuery可以解决这一问题。

首先运行效果如下,鼠标点击勾选框时弹出“适度游戏的提示框”。

常见的JQuery应用举例

要解决这个问题,其实H5的hover事件和JS都可以解决,但是利用JQ代码更加方便快捷,主要是鼠标事件的应用:mouseover和mouseout。

其运行代码如下

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8" />
  <title></title>
  <style type=text/css>
    #div1{
      width: 300px;height: 80px;background-color: bisque;
      display: none;
    }
  </style>
  <script language="JavaScript" src="js/jquery-1.10.2.js"></script>
  <script type="text/javascript">
    $(function(){
    $("input").mouseover(function(){
    $("#div1").css("display","block");
    });
    $("input").mouseout(function(){
    $("#div1").css("display","none");
    });
   });
  </script>
</head>
<body>
  <input type="checkbox" />XX游戏协议
  <div id="div1">
    为了您的身体健康,请适度游戏。
  </div>
</body>
</html>

相同的,我们可以按照这个思路解决类似的问题,如导航栏点击背景色改变等。

2.利用JQuery实现动画

jQuery animate() 方法允许您创建自定义的动画

下面是一些常用的动画显示效果:

.show():让隐藏元素显示,同时修改元素的宽度、高度、opacity属性
.hide():让显示元素隐藏,与show()相反;
.slideDown(): 让隐藏元素显示,效果为从上往下,增加高度
.slideUp(): 让显示的元素隐藏,效果从下往上,减小高度
.slideToggle():让显示的隐藏,让隐藏的显示
.fadeOut(): 让显示元素隐藏,淡出
.fadeIn(): 让隐藏元素显示,淡入
.fadeToggle(): 让显示的隐藏,让隐藏的显示。淡入淡出
.fadeTo(时间,透明度,函数):同fadeToggle,但是多了透明度参数,可以指定显示的最终透明度
.animate({最终的样式属性键值对},动画时间,动画效果("linear" "swing"),回调函数): 自定义动画

应用举例:让动画往右移动,拉伸并且透明度降低。效果如下图

常见的JQuery应用举例

其运行代码如下

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title></title>
    <script language="JavaScript" src="js/jquery-1.10.2.js"></script>
    <style type="text/css">
      div{
        position: absolute;
      }
    </style>
  <script type="text/javascript">
    $(function(){
    $("div").animate({
      left:"350px",
      width:"100px",
      height:"200px",
      opacity:"0.1"
      },3000,function(){
     alert("动画完成")
  });

   });

   </script>
   <style>
    div{
      width: 100px;
      height: 100px;
      background-color: red;
      overflow: hidden;
    }

   </style>
</head>
  <body>
    <div>动画</div>
  </body>
</html>

除此之外,JQ还有更强大的地方,总而言之,JQ是非常利于提高开发者工作效率的。