jquery动画

前端-JQuery

由 元气小坏坏 提交于 2019-12-01 12:50:49
目录 前端-JQuery jQuery的对象 选择器 筛选器 样式操作 位置操作 文本操作 属性操作 文档处理 事件 常用事件 事件绑定 移除事件 前端-JQuery 在我们学习过HTML,CSS,JavaScript之后,就可以完成网页的制作了,而JQuery只是一种轻量级的JavaScript库,可以让我们更方便的写JavaScript代码,用以完成我们的需求. jQuery的优势在于: 文件非常小,不会影响页面的加载速度 选择器使用非常方便,比直接调用JavaScript要更方便 支持事务,样式和动画,可以把界面写的更加生动. 跨浏览器兼容,比JavaScript兼容的浏览器更多更广 插件的扩展,jQuery的第三方插件非常多,调用和修改都十分方便. 我们简略介绍以下jQuery的各方面内容,包括选择器,筛选器,样式和文本操作,属性操作,文档处理,事件等. jQuery的对象 jQuery的对象就是通过jquer包装DOM后产生的一个对象,是jQuery独有的,并且可以和JavaScript的对象互相转换. 我们在定义jQuery对象的时候,要在变量名前面加上 $ ,包括后面在调用jQuery语句的时候,也可以直接用 $ 来表示jQuery对象的操作,比如 var $a = jQuery对象 # jQuery的基本语法为: $(selector).action() 另外

利用JQuery实现轮播图

由 走远了吗. 提交于 2019-12-01 11:20:49
上一篇文章写了利用初级JS实现无缝轮播图，但是实际写起来有点费劲，量有些大，如果改用jQuery写无缝轮播图的话，写起来比较便捷，而已逻辑比较清晰，简单，实现起来比较快捷，性能相对于初级JS来说也会高很多。以下为代码，供大家学习和参考。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin: 0;padding: 0;} li{list-style-type: none;} .carousel-wrap{ position: relative;overflow: hidden;height: 454px; width: 1200px; margin: 100px auto; } .carousel{width: 8400px;z-index: 9;position: absolute;left: -1200px;top: 0;} .carousel li {float: left;width: 1200px;} .carousel img{width: 100%;} .arrow{z-index: 10;position: absolute;width: 30px;height: 50px;text-align: center;line-height:

jQuery实现轮播图（无缝轮播，附效果图），代码有详解。

由 本小妞迷上赌 提交于 2019-12-01 11:19:55
jQuery实现轮播图 这里用了一些有颜色的div块当做图片，复制之后可以直接用，有需要的话再根据自己的需求替换就可以了。 功能： （1）左右无缝轮播。 （2）鼠标移上去会停止，移走继续动。 （3）点击圆点切换到对应的图片。 （4）点击箭头向对应的方向移动。 效果图： jQuery代码 （要引入jQuery文件）： <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Document </ title > < style > * { margin : 0 ; padding : 0 ; } .banner { width : 600 px ; height : 400 px ; border : 5 px solid black ; margin : 100 px auto ; overflow : hidden ; cursor : pointer ; position : relative ; } .banner .slide { width : 4000 px ; height : 400 px ; position : absolute ; left : - 600 px ; } .banner .slide .pic { width : 600 px ;

前端之JQuery（待补充）

由 ◇◆丶佛笑我妖孽 提交于 2019-12-01 10:24:40
Jquery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫

前端之Jquery

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

jQuery源码分析(九) 异步队列模块 Deferred 详解

由 我与影子孤独终老i 提交于 2019-12-01 05:21:07
deferred对象就是jQuery的回调函数解决方案，它解决了如何处理耗时操作的问题,比如一些Ajax操作，动画操作等。(P.s:紧跟上一节:https://www.cnblogs.com/greatdesert/p/11433365.html的内容) 异步队列有三种状态:待定(pending)、成功(resolved)和失败(rejected),初始时处于pending状态 我们可以使用jQuery.Deferred创建一个异步队列，返回一个对象，该对象含有如下操作: 　　done(fn/arr) 　　　　　　　　;添加成功回调函数，当异步队列处于成功状态时被调用,参数同:jQuery.Callbacks(flags).add(fn/arr) 　　fail(fn/arr) 　　　　　　　 ;添加失败回调函数，参数同上 　　progress(fn/arr) 　　　　 ;添加消息回调函数，参数同上 　　then(donefn/arr,failfn/arr,profn/arr) ;同时添加成功回调函数、失败回调函数和消息回调函数 　　always(fn/arr) 　　　　　　 ;添加回调函数到doneList和failList中，即保存两份引用，当异步队列处于成功或失败状态时被调用 ;参数可以是函数、函数列表 　　state() 　　　　　　 ;返回异步队列的当前状态

jquery基础学习

由 安稳与你 提交于 2019-11-30 21:29:17
1.jquery 1 WHAT :轻量级功能强大的 javascript 库 2.选择器 ： $ 是构造函数，就是 jquery ， $('body') 返回的是一个伪数组，不是一个数组，是一个 jquery 的一个实例，可以使用单引号和双引号,但是 html 和 body 只能用单引号，否则无法选中。 var b = $("body");b instanceof Array;//false var b = $("body");b instanceof jQuery; jquery 对象的方法是定义在 jquery 构造函数的原型之上的， jquery.prototype.addClass(); 也有直接构造在 jquery 上的方法 jquery.ajax(); 3.属性 html,val,prop,attr html 对应 innerHtml , val 对应 value , $("input").keyup = function (){ var v= this .val(); this .val(v + "px");} prop 对应 property 指的是树上选取下来的节点它对象的属性, attr 对应 attribute 指的是元素标签内的属性,通常情况下他们的值是一一对应的。比如 attr 的 class 和 prop 上的 className ,他们的名字虽然不同

jQuery学习笔记1

由 冷暖自知 提交于 2019-11-30 16:59:37
1. 了解 jQuery * 是什么 : What? * 一个 JS 函数库 : write less, do more * 封装简化 DOM 操作 (CRUD) / Ajax * 为什么用它 : why? * 强大选择器 : 方便快速查找 DOM 元素 * 隐式遍历 ( 迭代 ): 一次操作多个元素 * 读写合一 : 读数据 / 写数据用的是一个函数 * 链式调用 : 可以通过 . 不断调用 jQuery 对象的方法 * 事件处理 * DOM 操作 (CUD) * 样式操作 * 动画 * 浏览器兼容 * 如何使用 : How? * 引入 jQuery 库 * 本地引入与 CDN 远程引入 * 测试版与生产版 ( 压缩版 ) * 使用 jQuery * 使用 jQuery 函数 : $/jQuery * 使用 jQuery 对象 : $xxx( 执行 $() 得到的 ) 2. jQuery 的 2 把利器 * jQuery 函数 : $/jQuery * jQuery 向外暴露的就是 jQuery 函数 , 可以直接使用 * 当成一般函数使用人 : $(param) * param 是 function: 相当于 window.onload = function( 文档加载完成的监听 ) * param 是选择器字符串 : 查找所有匹配的 DOM 元素 , 返回包含所有 DOM

jQuery学习笔记3

由 女生的网名这么多〃 提交于 2019-11-30 16:59:33
* 动画效果 * 在一定的时间内 , 不断改变元素样式 * slideDown()/slideUp()/slideToggle() * fadeOut()/fadeIn()/fadeToggle() * show()/hide()/toggle() * animate({ 结束时的样式 }, time, fun) * stop() * 插件机制 * 扩展 jQuery 函数对象的方法 $.extend({ xxx: fuction () {} // this 是 $ }) $.xxx() * 扩展 jQuery 对象的方法 $.fn.extend({ xxx: function(){} // this 是 jQuery 对象 }) $obj.xxx() * jQuery 文档的结构图 来源： https://www.cnblogs.com/Jiang-jiang936098227/p/11605429.html

jQuery基础

由 浪子不回头ぞ 提交于 2019-11-30 14:50:09
jQuery基本概念 学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。 为什么要学习jQuery？ 【01-让div显示与设置内容.html】 使用javascript开发过程中，有许多的缺点： 查找元素的方法太少，麻烦。 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。 有兼容性问题。 想要实现简单的动画效果，也很麻烦 代码冗余。 jQuery初体验 【02-让div显示与设置内容.html】 $(document).ready(function () { $("#btn1").click(function () { //隐式迭代：偷偷的遍历，在jQuery中，不需要手动写for循环了，会自动进行遍历。 $("div").show(200); }); $("#btn2").click(function () { $("div").text("我是内容"); }); }); 优点总结： 查找元素的方法多种多样，非常灵活 拥有隐式迭代特性，因此不再需要手写for循环了。 完全没有兼容性问题。 实现动画非常简单，而且功能更加的强大。 代码简单、粗暴。 没有对比，就没有伤害，有了对比，处处戳中要害。 什么是jQuery? jQuery的官网 http://jquery.com/ jQuery就是一个js库，使用jQuery的话
订阅 jquery动画