jquery动画

JQuery目录 1.JQuery介绍 2.JQuery内容 　　2.1 JQuery基础语法规则 　　2.2 查找标签 　　2.3 筛选器方法 　　2.4 查找 　　2.5 筛选 　　2.6 操作标签 　　2.7 事件 　　2.8 动画效果 1.JQuery介绍 　　jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。例如： $(“#i1”).html()。 $("#i1").html()的意思是： 获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。 相当于： document.getElementById("i1").innerHTML; 虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。 约定：我们在声明一个jQuery对象变量的时候在变量名前面加上$： 声明对象： 　　var $variable = jQuery对像 　　var variable = DOM对象 　　$variable[0]//jQuery对象转成DOM对象 拿上面那个例子举例，jQuery对象和DOM对象的使用： 　　$("#i1").html()

jQuery 是一个 JavaScript 函数库。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！ jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities $(this).hide() 　　演示 jQuery hide() 函数，隐藏当前的 HTML 元素。 $("#test").hide() 　　演示 jQuery hide() 函数，隐藏 id="test" 的元素。 $("p").hide() 　　演示 jQuery hide() 函数，隐藏所有 <p> 元素。 $(".test").hide() 　　演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。 基础语法是：$(selector).action() jQuery 遍历， 意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。 AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。 简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

jQuery-DOM操作 样式操作 通过class 通过css方法 text,html,val操作 获取 设置 节点属性操作 获取 设置 移除 节点操作 插入节点 删除节点 复制 / 移动 节点 盒子模型(尺寸) 节点间关系 父节点 子节点 兄弟节点 过滤(选择器方法) 样式操作 通过class jQuery有 addClass , removeClass , toggleClass , hasClass 4个类操作方法； jQuery UI除了对前三者增加了动画外，还添加了 switchClass 方法(含动画) 方法 备注 add/remove/toggle Class(class) jQuery只有一个参数 hasClass(class) 返回布尔值 通过css方法 设置css //单个 $("p").css("backgroundColor","#aaa"); //多个 $("p").css({ "width":"100px", ... }); 参数书写格式看这里： https://blog.csdn.net/yjl15517377095/article/details/99827188 → 自定义动画 → 参数书写格式 书写规范都一样， 可以使用相对值 ， 不可以使用预设值 注意获取单个时属性必须为String，或者按多个作为对象则可以不加引号 设置的css为内联样式

一. 简介 1. 什么是jQuery jQuery是一个开源的、优秀的javascript函数库(js框架)，它体积小，简化了很多对HTML、CSS、DOM、事件、动画的处理。是对Js的封装。 jquery宗旨：写的更少，做的更多，吃的少，干得多。 2. jQuery优势 市场占有率高，工作中用到的可能性大。 jquery相比其他的js库，有其鲜明的特点，方便对页面元素节点对象进行查找 插件支持：时间选取器、表单验证等。 完善的ajax支持 高低版本兼容性好 3. jQuery下载与部署 源代码下载地址： http://jquery.com/ 下载软件压缩包 jQuery有两个版本，两者功能没有区别，大小的区别在于 min 是压缩后的代码，即把空行，空白等压缩掉，把变量名字变短。而文件比较大的没有压缩的源文件。所以在学习时，使用没有压缩的源文件，但是上线后，在线网站使用压缩版，提供下载速度。 jquery-1.8.3.js ：未经过压缩后的版本，具有可读性（内部有许多注释，空格，回车） jquery-1.8.3.min.js ：经过压缩后的版本，代表更精简（没有空格和回车） 使用jQuery 复制jquery-1.8.3.js到项目js目录中并改名为jquery.js 通过script代码中的src属性载入jquery源代码到当前页面即可 二. jQuery对象与DOM对象

以下面的这个盒子为例，我设置了它在页面中居中显示，方便观看： < div id = " box " > </ div > < script src = " jquery-3.4.1.min.js " > </ script > < style > #box { background : #18af75 ; height : 300px ; width : 300px ; margin : auto ; position : absolute ; top : 250px ; bottom : 250px ; left : 250px ; right : 250px ; } </ style > 1、隐藏box； $ ( '#box' ) . hide ( ) ; 2、显示box; $ ( '#box' ) . show ( ) ; 3、加入延迟； $ ( '#box' ) . delay ( 1000 ) . hide ( ) ; //延迟1秒 $ ( '#box' ) . delay ( 1000 ) . show ( ) ; 4、逐渐淡出： $ ( '#box' ) . fadeOut ( 1000 ) ; //动画时间1秒 5、逐渐淡入： $ ( '#box' ) . fadeIn ( 1000 ) ; //动画时间1秒 6、渐变到特定透明度： $ ( '#box' ) .

原文: http://blog.gqylpy.com/gqy/494 置顶：来自一名75后老程序员的武林秘籍——必读 （博主推荐） 来，先呈上武林秘籍链接： http://blog.gqylpy.com/gqy/401/ 你好，我是一名极客！一个 75 后的老工程师！ 我将花两分钟，表述清楚我让你读这段文字的目的！ 如果你看过武侠小说，你可以把这个经历理解为，你失足落入一个山洞遇到了一位垂暮的老者！而这位老者打算传你一套武功秘籍！ 没错，我就是这个老者！ 干研发 20 多年了！我也年轻过，奋斗过！我会画原理图，会画 PCB，会模拟，会数字！玩过 PLC，玩过单片机，会用汇编，会用 C！玩过 ARM，比如 PLC，STM32，和时下正在起飞的 NXP RT1052！搞过 DSP，比如 TMS320F28335！搞过 FPGA，不管 Xilinx 还是 Altera，也不管是 Verilog 还是 VHDL，或者直接画数字电路图！我懂嵌入式系统，比如 uCOS 和 Linux！我懂开源的硬件，比如 Arduino 和树莓派!我也搞软件，学了一堆上位机的语言C#，JAVA，Python，Kotlin，Swift！会写爬虫工具，又自学写APP，不管Android 还是 IOS！ 可是这一切有什么用呢？土鸡瓦狗！不值一提！干技术的永远就是最苦逼的那个人！ 我相信看到这里的你，应该是个 IT

jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。 下载链接： jQuery官网 中文文档： jQuery AP中文文档 参考博客：https://www.cnblogs.com/liwenzhou/p/8178806.html jQuery版本 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日) 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。 维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。 jQuery对象 jQuery对象

JQuery 和 Extjs 比较 一、JQuery 和 Extjs 比较 JQuery-EasyUI是仿照Ext做的。 Ext框架是一个整体，面向对象的编程思想，每个控件之间可以相互通讯。JQuery的控件全都是分散的，没有整体性可言。单独拿出来一个控件就能用。 Ext有一定学习曲线，不像EasyUI就那么几个简单的API完事儿了。 如果你要开发系统应用的话，首选Ext不会错的，控件库丰富，扩展和维护都方便。如果是简单的页面动画和效果，JQuery-EasyUI足够。 jquery-EasyUI只是一个工具库，比较简单，相对容易。 Ext是一套真正的ria开发框架，甚至可以实现桌面应用一样的强大功能。本身代码质量高，而且是高度的面向对象设计的。jQuery-EasyUI 入门相对容易一些，实际用的过程中要用到各种插件，基本上用一个“学”一个， ExtJS 入门稍难. 二、内容介绍： 1、什么是ExtJS: ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件

1. jQuery的概述 1.1 jQuery的概念 jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“Write Less，Do More” jQuery主要是封装了JavaScript常用的功能代码，优化了DOM操作、时间处理、动画设计和Ajax交互。 学习jQuery的本质就是：学习调用这些函数（方法） jQuery出现的目的就是加快前端人员的开发速度，我们可以灰常方便地调用以及使用它，从而提高开发效率 jQuery与原生js形象比喻 1.2 jQuery的优点 轻量级，核心文件才几十kb，不会影响页面加载速度 跨浏览器兼容，基本兼容了现在的主流浏览器 链式编程，隐式迭代 对事件、样式、动画支持，大大优化了DOM操作 支持插件扩展开发，有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等 免费、开源 2. jQuery的基本使用 2.1 jQuery的下载 官网网址：https://jquery.com/ 版本信息： 1x：兼容IE678等低版本的浏览器，官网不再维护更新 2x：不兼容IE678等低版本的浏览器，官网不再维护更新 3x：不兼容IE678等低版本的浏览器，官网主要维护更新的版本 所有版本的下载网址： https://code.jquery.com/ 2.2 jQuery的使用步骤 1.引入jQuery文件 <script type=

show显示动画 方式一：无参数，表示让指定的元素直接显示出来，底层是通过display:block实现的，这就是说，要显示的元素一开始不能是隐藏的 $(选择器).show(); 方式二：通过控制元素的宽高、透明度、display属性，逐渐显示，例如：3秒后显示完毕。 $(选择器).show(speed); ​ 方式三：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。 $(选择器).show("slow"); 其中slow:600ms normal:400ms fast:200ms 方式四：动画执行完后，立即执行回调函数。 $(选择器).show("slow"，func(){}) ​ 四种方式的功能是一样的：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。 hide隐藏动画 与show的用法相对应 $(selector).hide(); ​ $(selector).hide(speed); ​ $(selector).hide("slow"); ​ $(selector).hide(speed, function(){}); ​ 注意$('div').stop()的使用。作用：程序暂停当前的步骤（如果当前步骤没有全完执行完，也暂停），继续后面的步骤，直到结束 【实例】实现点击按钮显示盒子，再点击按钮隐藏盒子 1 <