jquery动画 | 易学教程

jQuery焦点图轮播slide插件

阅读更多关于 jQuery焦点图轮播slide插件

需求示例：一、插件API 1、插件使用 $.slide( container, contentCls, triggerCls [,config] ); 2、必选参数 container: selector, // 外围盒子选择器 contentCls: selector, // 内容面板父容器ClassName triggerCls: selector, // 触发器父容器ClassName 3、config配置可选参数，例 : { 　　autoplay: true, // 是否自动轮播，默认false 　　delay: 4000, // 自动轮播延迟时间，默认4000，单位毫秒　　interval: 4000, // 自动轮播间隙时间，默认4400，单位毫秒　　duration: 400, // 轮播动画持续时间，默认400，单位毫秒　　easing: 'linear', // 轮播过渡方式，默认swing 　　activeCls: 'current' // 触发器激活样式，默认slide-active } 二、插件源码 $.extend({ slide: function( container, contentCls, triggerCls, config ){ // 外围盒子 var container_box = $(container), // 内容父元素

浅谈移动前端的最佳实践

阅读更多关于浅谈移动前端的最佳实践

前言这几天，第三轮全站优化结束，测试项目在2G首屏载入速度取得了一些优化成绩，对比下来有10s左右的差距：这次优化工作结束后，已经是第三次大规模折腾公司框架了，这里将一些自己知道的移动端的建议提出来分享下，希望对各位有用文中有误请您提出，以免误人自误技术选型单页or多页 spa（single page application）也就是我们常常说的web应用程序webapp，被认为是业内的发展趋势，主要有两个优点： ① 用户体验好 ② 可以更好的降低服务器压力但是单页有几个致命的缺点： ① SEO支持不好，往往需要单独写程序处理SEO问题 ② webapp本身的内存管理难，Javascript、Css非常容易互相影响当然，这里不是说多页便不能有好的用户体验，不能降低服务器压力；多页也会有变量污染的问题发生，但造成webapp依旧是“发展趋势”，而没有大规模应用的主要原因是： webapp模式门槛较高，很容易玩坏其实webapp的最大问题与上述几点没有关系，实际上阻碍webapp的是技术门槛与手机性能，硬件方面不必多说，这里主要说技术门槛。 webapp做的好，可以玩动画，可以玩真正意义上的预加载，可以玩无缝页面切换，从某些方面甚至可以媲美原生APP，这也是webapp受到追捧的原因。但是，以上很容易被玩坏！因为webapp模式不可避免的需要用到框架

jQuery入门(二)--jQuery操作DOM、jQuery动画

阅读更多关于 jQuery入门(二)--jQuery操作DOM、jQuery动画

jQuery操作样式 1. CSS操作功能：设置或者修改样式，操作的是style属性操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 css(name,value); // 使用案例 $("#one").css("background","gray"); //将背景修改为灰色设置多个样式 // 参数是一个对象，对象中包含了需要设置的样式名和样式值 css(obj); //使用案例 (key加不加双引号都可以) $("#one").css({ "background":"gray", "width" : "400px", "height" : "200px" }); 获取样式 // name ：需要获取的样式名称 CSS(name); //案例 $("div").css("backgroundColor"); 注意只会返回第一个元素对应的样式值。隐式迭代设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值获取操作的时候，如果是多个元素，那么只会返回第一个元素的值 1.2 CLASS 操作添加样式 // name:需要添加的样式，注意参数不要带点 addClass(name); // 例子，给所有div添加one的样式 $("div").addClass("one"); 移除样式类 // name：需要移除的样式类名

jQuery帮助文档

阅读更多关于 jQuery帮助文档

jQuery 库 - 特性基础 jQuery 实例 jQuery 是一个 JavaScript 函数库。下面的例子演示了 jQuery 的 hide jQuery 库包含以下特性：实例 HTML 元素选取 <html> HTML 元素操作 <head> CSS 操作 <script type="text/java HTML 事件函数 <script type="text/javascr JavaScript 特效和动画 $(document).ready(function HTML DOM 遍历和修改 $("button").click(function AJAX $("p").hide(); Utilities }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p <p>This is another paragra <button type="button">Clic </body> </html> jQuery 语法 jQuery 语法是为 HTML 元素的选取编制，可以对元素执行某些操作。基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery

2017年-Web前端面试题(HTML至Nodejs)

阅读更多关于 2017年-Web前端面试题(HTML至Nodejs)

【原】2017年-Web前端面试题（HTML → Nodejs）出自作者小矮人Web前端，博文地址： http://www.cnblogs.com/itlkNote/ 文中有少许重复问题！第一阶段 HTML、CSS、HTML5、CSS3 1、XHTML与HTML的有何异同？ 2、介绍一下CSS的盒子模型？弹性盒子模型是什么？ 3、Doctype的作用？标准模式与兼容模式各有什么区别? 4、HTML5 为什么只需要写 <!DOCTYPE HTML>？ 5、行内元素有哪些？块级元素有哪些？空(void)元素有那些？ 6、页面导入样式时，使用link和@import有什么区别？ 7、介绍一下你对浏览器内核的理解？ 8、常见的浏览器内核有哪些？ 9、HTML5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ 10、简述一下你对HTML语义化的理解？ 11、iframe有那些缺点？ 12、列出display的值，说明他们的作用？position的值， relative和absolute定位原点是？ 13、一个满屏品字布局如何设计? 14、常见兼容性问题？ 15、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里面试题） 16、列举IE 与其他浏览器不一样的特性？ 17、99%的网站都需要被重构是哪本书上写的？

jQuery Easing 动画效果扩展

阅读更多关于 jQuery Easing 动画效果扩展

官网： http://gsgd.co.uk/sandbox/jquery/easing/ jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果，一款jQuery动画效果扩展增强插件jquery.easing.js，使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。 jQuery Easing 是一款比较老的jQuery插件，在很多网站都有应用，尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧，且有多种动画方案供选择，使用简单，而且免费。引入Easing js文件该插件基于jQuery，所以需要同时引入jQuery库文件和Easing js文件。 < script type = "text/javascript" src = "js/jquery.min.js" ></ script > < script type = "text/javascript" src = "js/jquery.easing.min.js" ></ script > 使用jQuery Easing jQuery Easing是在jQuery原有的动画效果上进行了扩展，所以使用时可以根据jQuery原有的动画函数进行扩展。 1.jQuery默认动画支持toggle()、slideUp()、slideDown()、show()、hide(

Jquery操作一遍过

阅读更多关于 Jquery操作一遍过

什么是 jQuery 对象？ jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : $(“#test”).html(); $("#test").html() //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象 var variable = DOM 对象 $variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML 　　 jquery的基础语法： $(selector).action() 寻找元素(选择器和基本筛选器) 基本选择器 $("*") $("#id") $(".class") $("element"

新手如何学习jQuery

阅读更多关于新手如何学习jQuery

新手如何学习 jQuery？ 1、可以看张晓菲的《锋利的jQuery》，重点是自己理解函数用法并自行实现一些常用的效果。如果需要快速查阅可以用这个api,每个函数都附有简单的示例：http://api.jquery.com/browser/ （注：这个jQuery库的版本不是最新的delegate等函数在这儿查不到。欢迎补充别的api~） jQuery侧重点就是选择器和基本的DOM操作，还有一些动画操作，但是js中非DOM操作的部分基本没有涉及。其实jQuery的门槛很低，我在看jQuery的时候对原生js的东西也知之甚少，在看的过程中遇到不会的多求助搜索引擎，多尝试，当然最好做一下笔记。测试代码推荐直接在jsfiddle上测试，左侧你可以自行选择需要的jQuery库版本：http://jsfiddle.net/ 2、有一点需要注意，jQuery只是工具，jQuery学的再好也无法替代原生的js，比如jQuery翻遍了你也不会知道 JavaScript语言中共有几种基本类型什么是原型什么是闭包什么是原型链，作用域链 js只有函数作用域，没有块作用域该怎么理解之于上面的问题，需要再去阅读js的基础书籍：《JavaScript权威指南》，《JavaScript高级程序设计》，《JavaScript语言精粹》等 3、看官方的文档就行：http://docs.jquery

Jquery

阅读更多关于 Jquery

目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基本使用 1.2.1 jQuery 的下载 1.2.2. 体验jQuery 1.2.3. jQuery的入口函数 1.2.4. jQuery中的顶级对象$ 1.2.5. jQuery 对象和 DOM 对象 1.2.6. jQuery 对象和 DOM 对象转换 1.3. jQuery 选择器 1.3.1. 基础选择器 1.3.2. 层级选择器 1.3.3. 筛选选择器 1.3.4 知识铺垫 1.3.5 案例：淘宝服饰精品案例 1.4. jQuery 样式操作 1.4.1. 方法1: 操作 css 方法 1.4.2. 方法2: 设置类样式方法 1.4.3. 案例：tab 栏切换 1.5. jQuery 效果 1.5.1. 显示隐藏 1.5.2. 滑入滑出 1.5.3 淡入淡出 1.5.4 自定义动画 1.5.5 停止动画排队 1.5.6. 事件切换 1.5.7. 案例：王者荣耀手风琴效果 1.6. 今日总结 day02 - jQuery 1.1. jQuery 属性操作 1.1.1 元素固有属性值 prop() 1.1.2 元素自定义属性值 attr() 1.1.3 数据缓存 data() 1