在学习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. 每天一道Java题[4]

    问题 怎么将字符串转换为int? 解答 此题看似简单,但经常出现在笔试等地方,由于大家习惯了用IDE,有什么还真未必能写出来.通常都是parseInt()方法进行转换,如下: Int n = Inte ...

  2. 华为路由器AR1220F-S的端口映射NAT配置（拨号光纤上网）

    telnet 登录 或者ssh登录路由器 //进入系统试图界面 sys-view //第一步. 添加acl规则, 允许内网本身访问对外的公网ip. 否则,只能外部人员访问你的公网ip [Huawei] ...

  3. SG函数学（hua）习（shui）记录

    ---恢复内容开始--- 听说有一个东西叫SG函数 觉得自己好像原来是懂一些粗浅的应用但现在感觉要再深♂入一点呢 让我们先来介绍一下SG函数吧 这是某类满足下列条件的玄学博弈问题解法 双人.回合制: ...

  4. Spring Security教程系列（一）基础篇-2

    第 4 章 自定义登陆页面 Spring Security虽然默认提供了一个登陆页面,但是这个页面实在太简陋了,只有在快速演示时才有可能它做系统的登陆页面,实际开发时无论是从美观还是实用性角度考虑,我 ...

  5. 《HelloGitHub》第 14 期

    公告 欢迎通过在 GitHub 上新建 issues 方式推荐项目,我真心希望读者可以在 HelloGItHub,找到真正的编程乐趣! <HelloGitHub>第 14 期 兴趣是最好的 ...

  6. 网络编程应用：基于TCP协议【实现对象传输】--练习

    要求: 基于TCP协议实现,客服端向服务器发送一个对象 服务器接受并显示用户信息 ,同时返回给客户端 "数据已收到" 建一个Student类,属性:name age Student ...

  7. Syntax error on tokens, delete these tokens.问题解决

    问题:Syntax error on tokens, delete these tokens.(在标记语法错误,删除这些标记) 原因:存在中文字符或者符号(包括空格):单引号.双引号不匹配:复制的代码 ...

  8. Redis数据类型之List（三）

         前言:list即链表,它是一个能维持数据先后顺序的列表,便于在表的两端追加和删除数据,中间位置的存取具有O(N)的时间复杂度,是一个双向链表. 一.内部原理            redis ...

  9. HttpClient+Jsoup 抓取网页信息（网易贵金属为例）

    废话不多说直接讲讲今天要做的事. 利用HttpClient和Jsoup技术抓取网页信息.HttpClient是支持HTTP协议的客户端编程工具包,并且它支持HTTP协议. jsoup 是一款基于 Ja ...

  10. STL的空间配置器std_alloc 笔记

    STL的空间配置器std_alloc 笔记 C++的内存分配基本操作是 ::operator new(),内存释放是 ::operator delete(),这里个全局函数相当于C的malloc和fr ...