jquery动画

前端_JQuery

主宰稳场 提交于 2020-02-26 04:57:48
使用参考: http://jquery.cuishifeng.cn/ 目录 jQuery是什么 jQuery对象 寻找元素(选择器和筛选器) 选择器 表单属性选择器 筛选器 操作元素(属性、css、文档处理) 事件 属性操作 each循环 文档节点处理 动画效果 css操作 扩展方法(插件机制) 定义插件 定义作用域 默认参数 实例 tab切换、左侧菜单、全反选、模态对话框、复制样式条、返回顶部、面板拖动、放大镜、注册验证 jQuery是什么 [1] jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。 [2] jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! [3] 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 [4] jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。 [5] jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 jQuery对象 jQuery 对象就是通过 jQuery 包装 DOM

jquery动画效果

半城伤御伤魂 提交于 2020-02-26 01:26:15
1.基本效果 show([s,[e],[fn]]) 显示 hide([s,[e],[fn]]) 隐藏 toggle([s],[e],[fn]) 显示隐藏切换 不带参数 直接显示隐藏 带参数 speed easing fn 不建议带speed easing fn 指动画完成之后 2.滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) 3.淡入淡出 fadeIn([s],[e],[fn]) 淡入 fadeOut([s],[e],[fn]) 淡出 fadeTo([[s],o,[e],[fn]]) 透明度的动画 fadeToggle([s,[e],[fn]]) 4自定义 animate(p,[s],[e],[fn])1.8 params 属性 speed easing fn stop([c],[j])1.7 停止当前正在执行的动画 delay(d,[q]) 延迟后续动画的执行 finish([queue])1.9+ <body> <button class="btns">start</button> <button class="btnp">stop</button> <button class="btnf">finish</button> <ul> <li><span>mousedown([

js、jquery实用小技巧集合

青春壹個敷衍的年華 提交于 2020-02-23 05:00:28
Tip16:JS的定时器   JS 中有两种定时器,setTimeout('fn', t) 和 setInterval('fn', t),'fn'指的是定时执行的方法名,字符串类型。   setTimeout('fn', t): 只执行一次,执行完成后将销毁。   setInterval('fn', t):一直执行。 (Date:2012-02-17) ----------------------------------------------------------------- Tip15:Jquery触发回车事件 $(function () { $('#target').bind('keyup', function (event) { if (event.keyCode == 13) { alert("Hello~"); } }); }); (Date:2011-10-28) ----------------------------------------------------------------- Tip14:获得select 的值   jquery可以像获取textbox值一样获取select的值:$('select').val(); (Date:2011-10-19) ------------------------------------------------

华育兴业干货 | Web前端经典面试题及答案

a 夏天 提交于 2020-02-21 19:18:57
昨天,小骨头分享了关于Java的面试题,有学员反映需要前端方向的面试题,所以小骨头又来给大家分享干货了,本篇收录了一些面试前端岗位时,经常会遇到的经典面试题,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者。 javascript 1、JavaScript中如何检测一个变量是一个String类型?请写出函数实现 方法1、 function isString(obj){ return typeof(obj) === "string"? true: false; // returntypeof obj === "string"? true: false; } 方法2、 function isString(obj){ return obj.constructor === String? true: false; } 方法3、 function isString(obj){ return Object.prototype.toString.call(obj) === "[object String]"?true:false; } 如: var isstring = isString('xiaoming'); console.log(isstring); // true 2、请用js去除字符串空格? 方法一:使用replace正则匹配的方法 去除所有空格: str = str

前端——jQuery

会有一股神秘感。 提交于 2020-02-20 13:04:02
  jQuery是JS的工具库,对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装, 使用 . 链式写法 , 提供更完善,更便捷的方法。   再使用jquery之前,我们需要先引入jquery文件,才能使用jquery语法,导入jQ文件的方法有两种。 从 jquery.com 下载 jQuery 库,本地导入(比较常用) 从 CDN(内容分发网络)中载入 jQuery,Staticfile CDN、百度、新浪、谷歌和微软的服务器都存有 jQuery 。 <head> // 本地导入 <script src="js/jquery.min.js"></script> // 从 Staticfile CDN 导入 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> // 百度CDN <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </head> 注意:使用CDN有一个很大的优势,那就是许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN

jQuery 基础

孤者浪人 提交于 2020-02-20 10:21:03
# JQuery简介 {ignore} [toc] ## 什么是JQuery? 1. JQuery是一个JavaScript函数库 2. JQuery是一个轻量级“写的少,做的多”的JavaScript库 3. JQuery库包含以下功能: HTML元素获取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX、Utilities ## JQuery语法 JQuery语法是通过选取HTML元素,并对选取的元素执行某些操作。 基础语法:$(selector).action() 美元符号定义JQuery、选择符(selector)“查询”和“查找”HTML元素、JQuery的action()执行对元素的操作 ## 文档就绪函数 1. $(document).ready(function (){这个里面写JQuery代码}) 2. $(function(){这个里面写JQuery代码}) ## JQuery事件 页面对不同访问者的相应叫做事件。 事件处理程序指的是当HTML中发生某些事件时所调用的方法。 常见的DOM事件: 1. 鼠标事件 click、dblclick(双击改变样式)、mouseenter(当鼠标放在这个元素上)、mouseleave 2. 键盘事件 keypress、keydown、keyup 3.

jQuery easing动画效果扩展

淺唱寂寞╮ 提交于 2020-02-17 23:31:35
引入Easing js文件 <script src="js/jquery.min.js"></script> <script src="js/jquery.easing.min.js"></script> 使用jQuery Easing $(element).slideUp({   duration: 1000,   easing: method,   complete: callback }); 参数duration:定义动画速度,时间越短,运动速度越快。 参数easing:指定动画效果,Easing js提供多种动画效果,有匀速运动、变加速运动、缓冲波动效果,它们是:linear,swing,jswing,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic, easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart, easeInQuint,easeOutQuint,easeInOutQuint,easeInSine,easeOutSine, easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc, easeOutCirc,easeInOutCirc,easeInElastic

jquery与js的区别与基础操作

╄→гoц情女王★ 提交于 2020-02-17 11:15:24
一.什么是 jQuery jQuery是一个 Java Script库,它通过封装原生的 JavaScript 函数得到一整套定义好的方法。它的作者是John Resig,于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、 CSS 、DOM和Ajax于一体的强大功能。它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。 JQuery的优点:小巧、方便、功能强大。插件丰富、开源、免费。 二.Jquery的功能和优势 jQuery 作为 JavaScript 封装的库,他的目的就是为了简化开发者使用 JavaScript。主要功能有以下几点: 1.像 CSS 那样访问和操作 DOM 2.修改 CSS 控制页面外观 3.简化 JavaScript 代码操作 4.事件处理更加容易 5.各种动画效果使用方便 6.让 Ajax 技术更加完美 7.基于 jQuery 大量插件 8.自行扩展功能插件 jQuery 最大的优势,就是特别的方便。比如模仿 CSS 获取 DOM,比原生的 JavaScript要方便太多。并且在多个 CSS 设置上的集中处理非常舒服,而最常用的 CSS 功能又封装到单独的方法,感觉非常有心。最重要的是 jQuery 的代码兼容性非常好,你不需要总是头疼着考虑不同 浏览器 的兼容问题。 好!以上都是网摘!

jquery基本语法使用、总结笔记

自古美人都是妖i 提交于 2020-02-17 09:31:17
初识jQuery jQuery简介 什么是jQuery? jQuery是一个优秀的JavaScript库,是一个凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档,操作DOM,执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念:write less,do more. 常见的javascript库? Prototype:是最早成型的JS库之一,对于JS的内置对象做了大量的扩展。 Do jo:提供了很多奇特JS库没有提供的功能。例如:离线存储的API,生成图标的组件等等。 YUI:是由Yahoo公司开发的一套完备的,扩展性良好的富交互网页程序工作集。 Ext JS:原本是对YUI的一个扩展,主要用于创建前端用户界面。 Moo Tools:是一套轻量、简洁、模拟化和面向对象的JS框架。 jQuery:同样是一个轻量级的库,拥有强大的选择器等更多优点,吸引了更多开发者去学习使用它。 jQuery的特性 jQuery能做以下事情: HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX Utilities jQuery的使用方式 1、下载后引入 < script src = "jquery-3.3.1/jquery-3.3.1.min.js" >

jQuery学习-day04

南笙酒味 提交于 2020-02-16 05:08:28
事件的移入和移出 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 *{ 7 margin: 0; 8 padding: 0; 9 } 10 .father{ 11 width: 200px; 12 height: 200px; 13 background: red; 14 } 15 .son{ 16 width: 100px; 17 height: 100px; 18 background: blue; 19 } 20 </style> 21 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 22 <script type="text/javascript"> 23 $(function(){ 24 //mouseover/mouseout事件,子元素被移入和移出也会触发到父元素 25 26 //mouseenter/mousuleave事件,子元素被移入和移出不会触发父元素 27 $(".father").mouseenter(function(){ 28 alert("father移入"); 29 }); 30 $(".father").mouseleave(function