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

1.点击某处弹出提醒，例如某些游戏在注册时会弹出“过渡游戏有害健康”的提示语，利用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"),回调函数)： 自定义动画

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

其运行代码如下

<!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是非常利于提高开发者工作效率的。

常见的JQuery应用举例的更多相关文章

  1. 原生js实现 常见的jquery的功能

    原生选择器   充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...

  2. 常见的jquery一些效果

    1.CSS渐变:background: linear-gradient(to bottom right, #999 , #eee);

  3. angular学习笔记(二十九)-$q服务

    angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...

  4. 第十七章：jQuery类库

    javascript的核心API设计的很简单,但由于浏览器之间的不兼容性,导致客户端的API过于复杂.IE9的到来缓解了这种情况.然而使用javascript的框架或者工具类库,能简化通用操作,处理浏 ...

  5. 从JS和jQuery浅谈DOM操作，当我们在获取时，究竟获取了什么

    0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...

  6. jQuery 2.0.3 源码分析core - 整体架构

    拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery ...

  7. jQuery效率提升建议

    jQuery简洁通用的方法集把编码者从繁重的工作中解脱出来,也拉低了进入javascript的门槛,初学者对浏览器兼容性一无所知的情况下,几行代码就可以写出超炫的特效.网上有一篇文章转载比较泛滥,已经 ...

  8. jquery性能

    1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...

  9. jQuery从无知到无所不知

    说明: 本文以读书笔记的方式整理jQuery的重要知识点,言简意赅,一语中的,删繁就简,引人入胜. 本文先对jQuery强大的功能作一系统的介绍,再详细整理jQuery的选择器.过滤器.DOM操作.事 ...

随机推荐

  1. AMD及requireJS

    前面的话 由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引.AMD规范就是其中比较著名一个,全称是Asynchronous Module Defi ...

  2. PHP简单分页省略中间页码

    <?php /** * @desc created by sublime text3 * @author jxl <[57953279@qq.com>]> * @since 2 ...

  3. Day5模块-random模块

    random:随机数 >>> import random>>> print(random.random()) #生成随机小数0.6906362176182085 & ...

  4. 开涛spring3(6.1) - AOP 之 6.1 AOP基础

    6.1.1  AOP是什么 考虑这样一个问题:需要对系统中的某些业务做日志记录,比如支付系统中的支付业务需要记录支付相关日志,对于支付系统可能相当复杂,比如可能有自己的支付系统,也可能引入第三方支付平 ...

  5. SmartCoder每日站立会议10

    站立会议内容: 准备为上交第一阶段项目进行加班,将各个页面联系起来,静态地图变为动态转换,考虑地图全屏或者是小屏即消息展示方式 1.站立会议照片:      2.任务展板: 3.燃尽图:

  6. java zip4j 内存文件和磁盘文件 压缩和加密

    经常服务器需要对文件进行压缩,网络上流传较多的是从磁盘文件中来压缩成zip文件.但是常常服务器的文件存放在内存中,以byte[]形式存储在内存中.这个时候就不能使用网络上流传的常用方法了,这里就需要对 ...

  7. linux JDK或JRE安装或配置

    1. 使用命令“java –version”如果显示如下内容则jdk已安装成功则无需后续操作. 2. 将解压后的文件“jdk-7u79-linux-x64.rpm ”上传到linux系统目录:/usr ...

  8. opencv基础到进阶（2）

    本文为系列文章的第2篇,主要讲解对图像的像素的操作方法. 2.1存取像素值 为了存取矩阵元素,需要指定元素所在的行和列,程序会返回相应的元素.单通道图像返回单个数值,多通道图像,返回的则是一组向量(V ...

  9. VR问题无关方向，VR全景为您领航，全景智慧城市已势不可当

    2016年,VR绝对是互联网科技圈的一个高频词. 在这一年里,Magic Leap获得阿里领投的近8亿美元的融资,VR公司的商业价值得到认可.Oculus Rift和HTC Vive的VR产品正式发货 ...

  10. VR全景：“互联网+之后的下一个“风口”

    2017年VR虚拟现实会成为流行趋势吗? 2017年,另一个时代正在悄然走来--720全景时代!如果你错过了前十年的互联网大爆发,千万不要再错过接下来十年的VR全景时代的机遇! VR全景是" ...