jquery动画

jQuery全录笔记 JQuery 入口函数 jQuery选择器 基本选择器 层级选择器 基本筛选选择器 内容筛选选择器 属性筛选选择器 其它选择器(了解) jQuery操作DOM 获取DOM元素相关盒模型属性-位置属性: DOM节点操作 遍历jQuery元素 吸顶导航案例 让页面滚动至指定位置，兼容代码: jQuery控制标签的属性 jQuery获取DOM相关数据的方法 index()获取元素的索引值 JQ操作css 类相关控制函数 jQuery动画效果 显示隐藏动画切换 滑动显示滑动隐藏动画 淡入淡出动画(透明度动画) JQ的自定义动画 JQuery动画列队机制 delay()让动画延迟执行 事件相关方法 快捷方法 专用方法绑定事件(on方法) 事件委托 注销事件 事件对象: event 事件冒泡概念 阻止事件冒泡 阻止标签默认行为 自定义事件 jQuery命名对象冲突问题 jQuery对象与DOM对象互相转换 JQuery 入口函数 < head > < meta charset = " UTF-8 " > < title > Title </ title > < script > //js的入口函数 window . onload = function ( ) { //整个网页资源加载完毕再执行这里的代码 console . log ( "1" ) ; } ; window

jQuery事件发展历程 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定 简单事件绑定 简单事件注册 click（handler）：单击事件； mouseenter（handler）：鼠标进入事件； mouseleave（handler）：鼠标离开事件； 缺点： 不能同时注册多个事件 bind方式注册事件 bind()共有两个参数： ①第一个参数：事件类型； ②第二个参数：事件处理函数 缺点： 不支持动态事件绑定，即创建新元素时，不会有事件绑定 jQuery 3.x已删除，而使用了on( )方法代替 < body > < input type = " button " value = " 按钮点击 " /> < div id = " pnum " > < p > 12 </ p > < p > 34 </ p > < p > 56 </ p > < p > 78 </ p > </ div > < script src = " ./jquery-1.12.4.js " > </ script > < script > // bind注册事件 $ ( 'p' ) . bind ( "click mouseenter" , function ( ) { $ ( this ) . css ( 'background-color' , 'skyblue' )

这个插件包含三个部分：HTML结构、CSS代码和JS代码。 HTML结构是固定的，结构如下： 1 <!--全屏滚动--> 2 <div class="fullpage-container"> 3 <div class="fullpage-pagebox"> 4 <div id="fullpage-page1" class="fullpage-page-vertical"><h1>1</h1></div> 5 <div id="fullpage-page2" class="fullpage-page-vertical"><h1>2</h1></div> 6 <div id="fullpage-page3" class="fullpage-page-vertical"><h1>3</h1></div> 7 <div id="fullpage-page4" class="fullpage-page-vertical"><h1>4</h1></div> 8 <div id="fullpage-page5" class="fullpage-page-vertical"><h1>5</h1></div> 9 <div id="fullpage-page6" class="fullpage-page-vertical"><h1>6</h1></div> 10 </div> 11 </div>

jQuery 是继 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 即可。 JQuery 在 VS2008 中智能感知配置 1、 下载 JQuery 类库 访问 http://jquery.com/ 网站，在首页的右侧区域会看到下图 点击 Download ，进入 http://docs.jquery.com/Downloading_jQuery ，会看到下图 点击 Visual Studio ，在页面中点击 将 jquery-1.3.2-vsdoc.js

jquery文档准备的三种写法： $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jquery 选择器 基本选择器 $('*') / $('.div') / $('div') / $('#first') / 多项选择器 $('#first, div, .second') 层级选择器 $('aside summary') //aside的子元素summary $('aside > details') //aside的直接子元素details $('summary + ul') //summary相邻的下一个兄弟元素ul $('summary ~ ul') //summary之后的所有兄弟元素ul 属性选择器 $('[class]') $('[class=tool]') $('[class!=tool]') //class不是tool $('[class^=tool_]') //tool_开头 $('[class$=vs]') // vs结束 $('[class*=vs]') //含有vs $('[type][src]') $('[class][class*=lang][class$=y]') 过滤器 $('details > p:first-child') $(

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 一.jquery中的事件 1.执行时机 jquery中使用$(document).ready()方法代替window.onload。区别在于window.onload在网页中的所有元素（包括元素的所有关联文件）完全加载到浏览器中才开始执行，而$(document).ready()在DOM完全就绪时就可以被调用。解决方法是另外一个页面加载方法load()，load()会在元素的onload事件中绑定一个处理函数。如果处理函数绑定在元素上，会在元素的内容加载完毕后触发，如果绑定给window对象，会在所有内容加载完毕后触发。 $(window).load(function{})等价于window.onload=function(){} 多个事件的绑定以及简写 格式：$(document).ready(function(){ })只需多次追加新的行为即可 简写$(function(){ }) ；也可以简写把document省略，即$().ready(function(){}) 2.事件绑定 使用bind()方法来匹配元素进行特定事件的绑定，调用格式bind(type,[.data],fn); 第一个参数是事件类型，包括：blue、focus、load、resize、scroll、unload、click

1.所有API自带遍历 对jQuery对象调用的修改，会自动应用到集合中每个DOM元素上 2.所有API都返回正在查询的结果集合，可使用链式操作对同一个结果集合执行多个操作，$是构造函数，多次创建浪费内存 3.一个API两用：如果提供了新值，就修改。没提供新值，就获取 修改：$(...).css(属性名，值) 获取：$value=$(...).css(属性名) 修改CSS样式： DOM：elem.style.css属性=值 jquery:elem.css("属性名","值"); 绑定事件：dom：elem.onclick=function(){} jq:$().click(function(){...}) 层级选择器： 父子：parent child 所有后代 parent>child 直接子代 兄弟： child1+next 紧邻child1的下一个，且满足next的要求 child1~nextsiblings 不必紧邻，只要满足nextsiblings的要求 过滤选择器 子元素过滤：同css 选择在父元素下指定位置的子元素 first-chid last-child nth-child(n/even/odd/2n) only-child 问题：旧浏览器不支持：last-child nth-child 基本过滤：css中没有 选择查找结果中指定位置的元素 :first/last

1.click 2.blur 失去焦点 3.focus 得到焦点 4.change 值发生改变 5.ready 页面加载完成 onload $(document).ready(function(){});//完整写法 $(document(){});//简写 在事件中获取事件源的方式 1.如果元素动态绑定事件,this为事件源 2.非动态绑定 event.target||event.srcElement 3.绑定事件时传递this 事件中用变量接收,此变量就是事件源 事件模拟 //延时执行 setTimeout(function(){ //模拟按钮的点击事件 $(“input”).trigger(“click”); },3000); 事件的合并 1.切换显示和不显示 toggle(); 2.hover(fn1,fn2);相当于 onmouseover + onmouseout //给div添加hover事件 $(“div”).hover(function(){ alert(“进来了”); },function(){ alert(“出去了”); }); 动画 1.显示 function fn1(){//显示 $(“img”).show(3000); } 2.隐藏 function fn2(){//隐藏 //第一个参数为动画时间,第二个参数为回调函数(可省略) $(“img”).eq

转载： https://www.cnblogs.com/panie2015/p/6170788.html 1.zDialog.js 各种弹窗插件 详细案例： http://www.2ky.cn/Pri_upfile/txdemo/0811/zDialog/zDialogDemo.html 2.基于Bootstrap Ace模板的菜单和Tab页效果，ace.min.js，ace-element.min.js 一款漂亮的后台模板(html/js)可直接部署于项目中 详细介绍： http://www.tuicool.com/articles/aiiQFjb 3.jquery.flot.js Jquery的图表插件float Flot是一个Jquery下图表插件，具有简单使用，交互效果，具有吸引力外观特点。目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+ 等浏览器，是一个基于Javascript和Jquery纯客端户的脚本库 4.jquery.easypiechart.js 主要是用来统计新的访问、跳出率、服务器负载、使用的RAM等，功能很强大，带有HTML5的动画效果，效果非常炫。 5. jquery画小图插件-jquery.sparkline.js 基本的线图，柱图，饼图等等 官网链接：

jquery文档准备的三种写法： $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jquery 选择器 基本选择器 $('*') / $('.div') / $('div') / $('#first') / 多项选择器 $('#first, div, .second') 层级选择器 $('aside summary') //aside的子元素summary $('aside > details') //aside的直接子元素details $('summary + ul') //summary相邻的下一个兄弟元素ul $('summary ~ ul') //summary之后的所有兄弟元素ul 属性选择器 $('[class]') $('[class=tool]') $('[class!=tool]') //class不是tool $('[class^=tool_]') //tool_开头 $('[class$=vs]') // vs结束 $('[class*=vs]') //含有vs $('[type][src]') $('[class][class*=lang][class$=y]') 过滤器 $('details > p:first-child') $(