jquery动画

Web开发（五）jQuery

阅读更多关于 Web开发（五）jQuery

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 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : $(“#test”).html(); $("#test").html() //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码： document.getElementById(" test ")

阅读更多关于 jQuery动画

jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 $( selector ).animate({ params } ,speed,callback ); 必需的 params 参数定义形成动画的 CSS 属性。实例： $ ( " button " ) . click ( function ( ) { 　　$ ( " div " ) . animate ( { left : ' 250px ' } ) ; } ) ; 注：点击按钮，div元素向右移动250px 使用相对值也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=： $ ( " button " ) . click ( function ( ) { 　　$ ( " div " ) . animate ( { 　　　　 left : ' 250px ' , 　　　　 height : ' +=150px ' , 　　　　 width : ' +=150px ' 　　 } ) ; } ) ; 使用预定义的值您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：注：这样设置的效果为元素上下滑动至隐藏或显示。来源： https://www.cnblogs.com/1016391912pm/p/11923037

jQuery简介

阅读更多关于 jQuery简介

什么是 jQuery ？ jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities jQuery是第三方开发的、执行DOM操作的、极简化的函数库。 jQuery一切都用函数解决。为什么要用jQuery? 1.终极简化 2.屏蔽了大量兼容性问题：只要jQuery让用的，都用没兼容性问题。如何学习一门新技术 1.找官网：是什么 2.看DEMO：快速入门 3.下手册：备查 jQuery下载安装 jQuery-xxx.js 未压缩版　　包括完整的注释，代码格式，见名知意的变量名，体积大，可读性好，学习或开发时使用。 jQuery-xxx-min.js 压缩版　　去掉所有注释、空字符，简化变量名，体积小，可读性差，用于实际网站中。部署： 1.将js部署在服务器本地（可去官网jquery.com下载）　　 < script src = " jquery-1.10.2.min.js " > </ script > 2.利用CDN网络　　网络中的多态服务器，智能判断客户端到某台服务器的网络状态，选择最优服务器下载资源。　

锋利的jQuery -第四章 jQuery中的事件和动画【读书笔记】

阅读更多关于锋利的jQuery -第四章 jQuery中的事件和动画【读书笔记】

#锋利的jQuery #第四章 jQuery中的事件和动画 ##4.1 jQuery中的事件 ###4.1.1 加载DOM 页面加载完毕后，浏览器会通过JavaScript为DOM元素添加事件。常规的JavaScript代码通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。执行时机 windo.onload是网页中的所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。 jQuery代码： $(window).load(funciton(){ //编写代码 }) 等价于JavaScript中的以下代码： window.onload = functions(){ //编写代码 } 多次使用假设网页中有两个函数，JavaScript代码如下： function(){ alert("one"); } function(){ alert("two"); } 当页面加载完毕后，通过如下JavaSript代码分别来调用one函数和two函数：

jQuery 47

阅读更多关于 jQuery 47

目录 jQuery jQuery介绍 jQuery的特性 jQuery对象 jQuery基础语法查找标签基本选择器层级选择器基本筛选器属性选择器表单筛选器筛选器方法操作标签样式操作位置操作尺寸文本操作属性操作文档处理事件常用事件移除事件阻止后续事件执行阻止事件冒泡页面载入事件委托动画效果补充 each .data() jQuery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。 Write less, do more jQuery的特性一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。跨浏览器兼容。插件扩展开发，jQuery有着丰富的第三方的插件。 jQuery对象 jQuery对象是包装DOM对象后产生的,但是jQuery对象不能使用DOM对象的任何方法 var $variable =

CSS和jQuery分别实现图片无缝滚动效果

阅读更多关于 CSS和jQuery分别实现图片无缝滚动效果

一、效果图二、使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片无缝滚动</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #con{ width: 800px; margin: auto; margin-top: 100px; /* 超出div的部分隐藏 */ overflow: hidden; height: 158px; } li{ list-style: none; float: left; } img{ width: 240px; height: 150px; margin: 5px; border-radius: 5px; } ul{ width: 2500px; } /* 动画播放状态 */ ul:hover{ cursor: pointer; /* 当鼠标移动到图片上时动画停止 */ animation-play-state:paused; } /* 实现动画 */ #ul{ /* 动画名称，在定义关键帧动画时需要使用*/ animation-name: moveleft; /* 动画持续时间 */ animation-duration: 10s; /* 设置动画速度曲线:线性 */

前端 jQuery 基础

阅读更多关于前端 jQuery 基础

目录 jQuery介绍优势： jQuery内容： jQuery对象 jQuery基本语法：$(selector).action() jQuery选择器基本选择器 id选择器： $("#id") 标签选择器： $("tagName") class选择器： $(".className") 结合使用： $("div.c1") // 找到有c1 class类的div标签所有元素选择器： $("*") 组合选择器： $("#id, .className, tagName") 层级选择器：基本筛选器：属性选择器：表单筛选器：筛选器方法下一个元素：上一个元素：父亲元素：儿子和兄弟元素：查找筛选补充操作标签样式操作样式类 CSS 位置操作尺寸：文本操作属性操作文档处理添加到指定元素内部的后面添加到指定元素内部的前面添加到指定元素外部的后面添加到指定元素外部的前面移除和清空元素替换克隆事件常用事件事件绑定移除事件阻止后续事件执行阻止事件冒泡页面载入事件委托动画效果 each .each(function(index, Element))： jQuery介绍 1、jQuery是一个轻量级的、兼容多浏览器的JavaScript类库。 2、jQuery使用户能够更方便地处理HTML Document、Events

JQuery：

阅读更多关于 JQuery：

一 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 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : $(“#test”).html(); $("#test").html() //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码： document.getElementById("

jQuery后续和前端框架Bootstrap

阅读更多关于 jQuery后续和前端框架Bootstrap

目录一、jQuery后续 1. 动画效果（1）自定义点赞动画实例 2. jQuery的自带方法（1） each （类似for循环）（2） data() （存放隐形的数据）二、前端框架之Bootstrap 1. CDN 2. Bootstrap中常用的全局CSS样式（1）栅格系统（2）表格（3）表单（4）按钮 3. Bootstrap中常用的组件（1）字体图标（也可通过其他网站获取图标）（2）导航条（3）巨幕（4）面板一、jQuery后续 1. 动画效果 // 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) // 自定义（了解即可） animate(p,[s],[e],[fn]) （1）自定义点赞动画实例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8

前端之jQuery

阅读更多关于前端之jQuery

目录一、jQuery介绍 1.1jQuery的优势 1.2jQuery的内容： 1.3jQuery版本二、jQuery对象三、jQuery基础语法 3.1查找标签 3.1.1基本选择器 3.1.2 层级选择器： 3.1.3基本筛选器： 3.1.4属性选择器： 3.2单表筛选器表单筛选器： 3.3筛选器方法 3.4操作标签 3.4.1样式操作 3.1.2位置操作 3.4.3文本操作 3.4.4属性操作 3.5文档处理 3.6事件 3.6.1常用事件 3.6.2绑定事件 3.6.3移除事件 3.6.4阻止后续事件执行 3.6.5阻止冒泡事件 3.6.6事件委托 3.7页面载入 3.7.1与window.onload的区别一、jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 1.1jQuery的优势一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了

订阅 jquery动画