在学习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. GO的初始简书（一）简介安装

    已经玩了很长一段时间的golang了,做个gopher,下面我将逐步展示各种go语言的开发,从入门开始哦,完全是凭着自己学习和实践的结果展示,如果有说的不对的,请指正. 简介 go语言是由Google ...

  2. ES6入门2

    for-of循环: 新语法如下: for (var value of myArray) { console.log(value); } 它的优点是: 这是目前遍历数组最简洁和直接的语法: 它避免了fo ...

  3. Java计算1-100的和(要求尽量考虑代码优化)

    1.递归算法 public static void main(String[] args) { System.out.println(add(1)); } private static int add ...

  4. 【shell脚本实例】shell脚本统计单词频率、出现次数最多的n个单词

    1. 统计的对象words.txt,每个单词占一行(从简考虑了~) zjd@ubuntu:~/test$ cat word.txt used this count mysql count this u ...

  5. Fast data loading from files to R

    Recently we were building a Shiny App in which we had to load data from a very large dataframe. It w ...

  6. HTML中部分标签的嵌套问题

    书写HTML结构的时候,对于标签的嵌套问题,在我发现这个问题之前,都不在自己的考虑之中,还傻傻的以为标签之间是可以进行百搭的! 其实,有些标签是不能进行随意嵌套,如果你没有深受其害,你是不会发现它的存 ...

  7. 快速傅里叶变换（FFT）算法【详解】

    快速傅里叶变换(Fast Fourier Transform)是信号处理与数据分析领域里最重要的算法之一.我打开一本老旧的算法书,欣赏了JW Cooley 和 John Tukey 在1965年的文章 ...

  8. NodeJS在线聊天室（NodeJS & SocketIO & Express & EJS & MongoDB & Gulp）

    项目背景 这个项目主要是为了玩玩NodeJS,项目的方向大概是做出类似QQ的在线聊天系统.想要在线体验可以点击在线演示. 项目使用PM2进行部署和管理,功能在不断的迭代开发中.如果你觉得这个项目比较有 ...

  9. Delphi使用Zint生成QR二维条码（zint.dll）

    Delphi使用Zint生成QRCODE 本文使用的Zint Barcode Library(zint.dll)版本为2.6.0,和之前使用的2.4.3版本在zint_symbol这个结构体上会有差异 ...

  10. maven 修改默认的JDK版本

    maven jdk 版本配置 maven 默认使用的 jdk 版本 新建一个 maven 项目,如下 : 项目左下方出现一个感叹号,JRE 显示的是 1.5 版本.解决方式有两种,一种是配置 pom. ...