在学习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. md5加密解析

    MD5加密算法解析 知识库连接: http://baike.baidu.com/view/7636.htm http://baike.baidu.com/subview/350813/7544439. ...

  2. 12、借助Jacob实现Java打印报表(Excel、Word)

    12.使用Jacob来处理文档 Word或Excel程序是以一种COM组件形式存在的.如果能够在Java中调用相应组件,便能使用它的方法来获取文档中的文本信息.Jacob是一个JAVA到微软的COM接 ...

  3. progressBar的使用

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  4. iOS系统原生 二维码的生成、扫描和读取（高清、彩色）

    由于近期工作中遇到了个需求:需要将一些固定的字段 在多个移动端进行相互传输,所以就想到了 二维码 这个神奇的东东! 现在的大街上.连个摊煎饼的大妈 都有自己的二维码来让大家进行扫码支付.可见现在的二维 ...

  5. js的event事件

    一 .  焦点:使浏览器能够区分区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置焦点 1.点击 2.tab   3.js 不是所有元素都能够接受 ...

  6. Nagios配置安装详解

    nagios.html :first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0,0,.1);borde ...

  7. 【小练习04】HTML+CSS--医药健康小页面

    要求实现如下效果图: 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  8. Java中设计模式之单例设计模式-1

    单例作用 1 节省内存 2 可以避免多种状态导致状态冲突 单例的创建步骤 1 私有化构造方法 2 私有化声明的属性 3 getInstance 4 方法需要静态 单例分类 1.懒汉式 2.饿汉式 两种 ...

  9. ActionContext、ServletContext、pageContext的区别？

    ActionContext是当前的Action的上下文环境,通过ActionContext可以获取到request.session.ServletContext等与Action有关的对象的引用: Se ...

  10. jquery不兼容input的change事件处理

    因为客户使用系统一般都是用IE版本的浏览器,所以每次在chrome下调试之后都要在IE走一遍; 这次准备在选择开始时间或者结束时间之后在下方能及时给出对应的天数,但是在IE8下试了change时间根本 ...