jquery动画

一. 简介 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对象

*/ /*--> */ /*--> */ /*--> */ /*--> */ 一、简单的一些介绍 1.jQuery是由普通的是由一些系列操作DOM节点的函数和一些其他的工具方法组成的js库。 2.为什么要使用jQuery库？ 　　jQuery面向用户良好的设计在使用过程中彻底解放了记忆原生操作DOM的接口。 　　 jQuery中包含了可重用的函数，用来辅助我们简化JavaScript开发。 　　jQuery在半数以上并没有复杂交互的网站中得以大量使用，因为他们需要的仅仅是一些兼容低级浏览器又有炫酷效果动画的页面。 　　 jQuery改变了数百万人编写JavaScript的方式，当然部分人已经觉得时过境迁，组件化，工程化大行其道，但不要忘记jQuery对前端开发者的启蒙意义！且很多公司项目依然需要使用。 3.jQuery注意点： 　　jQuery知识辅助工具，不能完全替代js，二者并存的方式出现在项目中； 　　 jQuery很庞杂，先学使用再学思想。 　　jQuery方法很多，按需学习，把常用的学透彻。 　　 jQuery API使用时可以现查现用，不难理解。 4.引入jQuery库：cdn:http://www.jq22.com/cdn/#a2 5.jQuery官网：中文： https://www.jquery123.com/ 英文原版： https://jQuery.com/ 二

一、JQuery介绍 1、jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 2、JQuery使用户能够更方便处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能极大地简化JavaScript编程。 二、JQuery的优势 1、一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 2、丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要讲一个表格的隔行变色，jQuery也是一行代码搞定。 3.链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 4、事件、样式、动画支持。jQuery还建华了js操作css的代码，并且代码的可读性也比js要强。 5、Ajax操作支持。jQuery简化了AJax操作，后端只需要返回一个JSON格式的字符串就能完成与前端的通信。 6、跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容性问题而伤透脑筋。 7、插件扩展开发。jQuery有着丰富的第三方插件，例如：树形菜单、日志控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。 三

一、显示与隐藏动画效果 1.显示hide()和隐藏show() 语法： 1 jQuery对象.show（duration,[fn]); 2 jQuery对象.hide（duration,[fn]); 3 /*其中duration是动画效果运行时间，可选填slow、normal、fast，对应的速度分别为600ms、400ms、200ms。 4 也可以直接填毫秒数，fn函数为回调函数，动作完成后调用此函数*/ 2.toggle()函数 语法： jQuery对象.toggle(); /*无参格式，在显示和隐藏之间切换*/ jQuery对象.toggle(true or false) ; /*带布尔值形式，为true时显示元素，否则，隐藏元素*/ jQuery对象.toggle(duration,[fn]); /*与show()函数用法类似*/ 二、淡入与淡出动画效果 1.淡入fadeIn（）淡出fadeOut（） 语法： jQuery对象.fadeIn(duration,[fn]); jQuery对象.fadeOut(duration,[fn]); /*本质上是改变元素的透明度*/ /*其中duration是动画效果运行时间，可选填slow、normal、fast，对应的速度分别为600ms、400ms、200ms。 也可以直接填毫秒数，fn函数为回调函数，动作完成后调用此函数*/ 2

1.什么是jQuery？ 　　jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作(DOM)、事件处理、动画设计和Ajax交互。 2.怎么使用jQuery 　　1.下载 　　　　下载地址：https://github.com/jquery/jquery/releases 　　2.导入jQuery库 　　　　<script type="text/javascript" src="js/jquery.min.js"></script> 　　3.语法：$("选择器").动作() 3.jQuery 对象和 DOM 对象相互转换 　　jQuery ---> DOM 　　　　1.[index] 方法，就是在 jQuery 对象后面加上索引，比如： var $cr = $(#cr); // jQuery 对象 var cr = $cr[0]; // 将 jQuery 转化为 DOM 对象 　　　　2.get(index) 方法 var $cr = $(#cr); // jQuery 对象 var cr = $cr.get(0); // 将 jQuery 转化为 DOM 对象 　　 　　DOM

Query 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不 及 的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。今天在 Kollermedia.at 上发现了一篇JQuery插件列表的 文章 ，特推荐如下。 文件上传(File upload) Ajax File Upload . jQUploader . Multiple File Upload plugin . jQuery File Style . Styling an input type file . Progress Bar Plugin . 表单验证(Form

1what http://jquery.com/ * 一个优秀的JS函数库: write less, do more（使用了jQuery的网站超过90%，中大型WEB项目开发首选） * 封装简化DOM操作(CRUD) / Ajax 2why * 强大选择器: 方便快速查找DOM元素（HTML元素选取和操作） * 隐式遍历(迭代): 一次操作多个元素 * 读写合一: 读数据/写数据用的是一个函数（一般传参数就是写，不传就是读） * 链式调用: 可以通过.不断调用jQuery对象的方法 * HTML事件处理（响应用户操作） * DOM操作(CUD) * 样式（CSS）操作 * JS动画效果 * 浏览器兼容 * 易扩展插件 * ajax封装 3how 3.1 引入jQuery库 1）本地引入 <script type="text/javascript" src="js/jquery-1.12.3.js"></script> 2）CDN远程引入（需要有网） <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/jquery/1.9.0/jquery.js

1 jQuery核心函数 * 简称: jQuery函数($/jQuery) * jQuery库向外直接暴露的就是$/jQuery * 引入jQuery库后, 直接使用$即可 * 当函数用: $(xxx) * 当对象用: $.xxx() 1.1理解 即: $ 或 jQuery jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用, 且传递的参数类型不同/格式不同功能就完全不同，也可作为对象调用其定义好的方法, 此时$就是一个工具对象。 1.2作为一般函数调用: $(param) 1)参数为函数：当DOM加载完成后，执行此回调函数。例：$(fun) 2)参数为选择器（(selector)）字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象。例：$("#div1") 3)参数为DOM对象: 将dom对象封装成jQuery对象。例：$(div1Ele) 4)参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象。例：$("<div>") 1.3作为对象使用: $.xxx() 1) 发送ajax请求的方法： $.ajax()、 $.get()、$.post()··· 2）其他工具方法： $.each() : 隐式遍历数组 $.trim() : 去除两端的空格 $.parseJSON() ··· <script src="js/jquery-1

定义和用法 animate() 方法执行 CSS 属性集的自定义动画。 该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。 只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。 提示： 请使用 "+=" 或 "-=" 来创建相对动画。 语法 $(selector).animate({styles},speed,easing,callback) 参数 参数 必需的 描述 styles 是 规定产生动画效果的一个或多个 CSS 属性/值。 注意： 当与 animate() 方法一起使用时，该属性名称必须是驼峰写法： 您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。 可以应用动画的属性： backgroundPositionX backgroundPositionY borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop

HTML和CSS HTML5基础 HTML常用标签 CSS3基础 CSS选择器 CSS基础样式 CSS基础布局 JavaScript JavaScript基础 JavaScript基本数据类型 JavaScript基础语法 JavaScript函数 JavaScript 内置对象 JavaScript的DOM操作 对象模型 文档对象模型 DOM jQuery jQuery基础 jQuery选择器 jQuery属性和样式操作 jQuert DOM操作 jQuery 动画效果 jQuery 插件 BootStrap BootStrap基础 Bootstrap布局 Bootstrap组件 Bootstrap插件 Vue Vue基础 Vue指令 Vue实例 Vue组件 Vue 项目搭建 Vue生命周期钩子 Vue项目功能插件 来源： https://www.cnblogs.com/TMesh/p/11756066.html