在学习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. wifi驱动总结（1）

    一.wifi平台设备驱动注册过程Path:Rtw_android.c (rk3399\kernel\drivers\net\wireless\rockchip_wlan\rtl8723au\os_de ...

  2. mybatis中传入一个List集合作为查询条件的参数

    如果有一个查询参数有多个,用一个List集合传进去,这个mapper文件可以这么写 <select id="queryList04" resultType="map ...

  3. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  4. ASP实现计算机爱好者网站，可以直接浏览

    利用ASP制作的计算机爱好者协会网站,内容比较全面,具有母版和子页的功能,利用ACCESS数据库进行资源存储.适合新手学习和网页制作比赛参考 下载地址:http://download.csdn.net ...

  5. IO回忆录之怎样过目不忘(BIO/NIO/AIO/Netty)

    有热心的网友加我微信,时不时问我一些技术的或者学习技术的问题.有时候我回微信的时候都是半夜了.但是我很乐意解答他们的问题.因为这些年轻人都是很有上进心的,所以在我心里他们就是很优秀的,我愿意多和努力的 ...

  6. HourRank 19

    https://www.hackerrank.com/contests/hourrank-19/challenges 第一题略. 第二题是nim博弈,问删掉一个区间的石子,使得先手败的方案有几种,明显 ...

  7. struts2.1.6教程七、国际化

    尽管国际化不是重点内容,但是也有必要了解它的使用.在struts2中国际化有三种级别:分别是针对某个Action的action级别,针对package的package级别,针对webapp的webap ...

  8. 为女票写的计算工作时间的SQL

    排除非工作时间.非工作日后,计算工作时间,代码如下: -- 删除函数 DROP FUNCTION IF EXISTS calculateWorkingTime; set @workStartTime= ...

  9. 对pathtracing的一些个人理解

    本人水平有限,若有错误也请指正~ 上面说到pathtracing(pt)的一些优点和缺点,优点即其实现很简单,这就是大概为什么当今市面上流行的很多渲染器如今都相继采用pathtracing算法为核心进 ...

  10. 如何动态加载js文件，$.getScript()方法的使用

    有时候我们需要动态在页面中加载js文件,jquery封装了getScript()方法,不用自己再创建标签了. 写法: $.getScript("name.js",function( ...