jquery动画

jQuery

六眼飞鱼酱① 提交于 2019-11-30 01:48:18
jQuery jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的 JavaScript 库。 jQuery 库包含以下功能: 1234567 - HTML 元素选取- HTML 元素操作- CSS 操作- HTML 事件函数- JavaScript 特效和动画- HTML DOM 遍历和修改- AJAX 异步加载 jQuery介绍 jQuery 是目前使用最广泛的 javascript 函数库。据统计,全世界排名前 100 万的网站,有 46% 使用 jQuery ,远远超过其他库 微软公司甚至把 jQuery 作为他们的官方库 jQuery 的版本分为 1.x 系列和 2.x 、 3.x 系列, 1.x 系列兼容低版本的浏览器; 2.x 、 3.x 系列放弃支持低版本浏览器,目前使用最多的是 1.x 系列的 jquery 是一个函数库,一个 js 文件,页面用 script 标签引入这个 js 文件就可以使用 1 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 下载jQuery 官网: http://jquery.com/ 下载: https://code.jquery.com/ 基础语法 123456789101112 <script type=

day20190916notes

折月煮酒 提交于 2019-11-29 22:07:51
记得学完知识,趁热打铁。认真看3遍,写抄写模仿3遍。记不得,就罚抄3遍。奖罚分明。自知之明。最重要的是看懂和理解代码。能自己看懂代码,多花时间和功夫。 只要功夫深,铁杵磨成针。确定一个努力的方向,坚持和努力。物理学。 默写: jQuery_Chapter03_20190916/ css / style.css * { padding : 0 ; margin : 0 ; } html { color : #404040 ; font-size : 12px ; font-family : "Arial" , "微软雅黑" ; } a { text-decoration : none ; color : #1a66b3 ; } ul { list-style : none ; } .left { float : left ; } .right { float : right ; } .hide { display : none ; } .clearfix { clear : both ; overflow : hidden ; height : 0 ; } .wrap { width : 1200px ; margin : 0 auto ; } /**头部**/ .top { height : 32px ; background : #f9f9f9 ; padding-top :

【原创】我们还需要学jQuery吗?

南楼画角 提交于 2019-11-29 20:57:59
引言 最近撸Vue的项目,感觉的有点心累。恰巧近日,有读者来信,就是想咨询一下 烟哥,现在还有必要学习jQuery么? 我明白,现在MVVM框架逐渐占据了主要市场,很多老项目也逐渐的从jQuery转向了MVVM架构! 例如,知名网站github在2018-09-06发了一篇文章叫《Removing jQuery from GitHub.com frontend》就提到了,已经改版并放弃了jQuery。 于是一些读者就有此疑问啦! so,针对这个问题,想都不用想! jQuery必须学! 正文 jQuery的那些事 光阴似箭,岁月如梭...时间回到了2005年8月! 一个帅气的小伙子John Resig(不用说了,比烟哥帅多了,这是我男神),如下图所示 他在自己博客上发了一个文章,对Prototype的“Behavior”部分的一些语法改进意见。然后呢没过多久,他就开发出了jQuery,并迅速的风靡全球! ps: Prototype也是一个JavaScript基础类库。 OK,好,我们先来看看jQuery当时能迅速的风靡全球的原因有哪些! 我想了想,无外乎下面三条 (1)出色的DOM操作封装 例如原来你要修改样式,原生JavaScript是这么写的 var dom = document.getElementById('test'); dom.style.color = 'blue';

jQuery常用方法

无人久伴 提交于 2019-11-29 19:03:36
jQuery选择器 dom中获取元素的几个方式 document.getElementById() doucemnt.getElementByTagName() document.getElementByName() document.getElementByClassName() jQuery中获取DOM元素的方式 id选择器: $(’#id’) 标签选择器: $(‘tagName’) 类样式选择器: $(’.class’) 多条件选择器:$(‘li, span, p’) 层级选择器:$(‘li > span’) jQuery样式操作 添加样式: addClass(‘className’) 删除样式: removeClaa(‘className’) 不带参数时移除当前元素的所有css样式 切换样式: toggleClass(‘className’) 修改样式:css(‘height’: ‘200px’)也可以是一个对象 jQuery常用方法 HTML和CSS样式 $(’#id’).html() : 相当于InnerHTML,当html参数为空时是获取,有参数时是设置。 $(’#id’).text(): 相当于innerText,当text参数为空时是获取,有参数时是设置。 $(’#id’).val(): 相当于value,当val参数为空时获取,有参数时是设置。

jQuery基础知识总结

巧了我就是萌 提交于 2019-11-29 17:18:54
1. jQuery基本概念介绍 1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 1.2 为什么要学习jQuery write less do more 1.3 jQuery的使用 a.引包 b.入口函数 c.实现功能 1.4 版本介绍 3个版本 1.x 2.x 3.x 其中版本1兼容IE6/7/8,版本2和3实现的功能更多一些,版本3更适合最新的浏览器 每个大版本又分为压缩版(compressed)和非压缩版(uncompressed),由于其格式和体积不同:压缩版一般是在生产环境中,即项目上线时使用;非压缩版是在开发环境中 1.5 引包注意事项 1.忘记引包 2.引包顺序出错 3.引包路径出错 1.6 入口函数详细介绍 第一种: $("document").ready(function () { } ); 第二种: $(function () { } ); 和js的入口函数window.onload的区别: jQuery--文档树加载完成的时候执行,不会等待突破资源的加载完成 js--文档树加载完成后,必须等待图片等的资源加载完成才会执行 1.7 jQuery中的$符号 本质就是一个函数,且$ === jQuery,可分为3种功能: 1,$(function () { } );

jQuery

大兔子大兔子 提交于 2019-11-29 17:09:30
一. 简介 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程   jQuery产生的对象是jQuery独有的,只能自己调用,如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。他的意思是:获取id值为 i1 的元素的html代码。其中 html () 是jQuery里的方法。相当于: document . getElementById ( "i1" ). innerHTML ;   我们在声明一个jQuery对象变量的时候在变量名前面加上$: var $variable = jQuery对像 var variable = DOM对象 $variable[0]//jQuery对象转成DOM对象      获取jQuery:   jQuery不需要安装,把下载的jQuery库放到网站的一个公共位置,想要在某个页面上使用jQuery时,只需要在相关的HTML文档中引入该库文件即可。获得jQuery相关资源的网站地址如下:   官网: http://jquery.com/   源码: https://github.com/jquery/jquery   文档:

jQuery实现淘宝轮播图

三世轮回 提交于 2019-11-29 16:16:21
我爱撸码,撸码使我感到快乐 大家好,我是Counter 今天给大家分享的是利用jQuery来实现淘宝轮播图,揭开这层神秘的面纱,CSS样式就不做过多的赘述了,主要就是实现的原理,也就是jQuery,老样子,每行基本都打上了我理解的注释,表达的可能不是很好,但是理解理解就OK,欢迎一起技术探讨,一起成长。 再讲讲轮播图的需求吧,一打开网址,轮播图就会自己每3秒切换到下一张,总共5张,一直轮播,当你鼠标进入图片区域,那么图片不再自动轮播,你可以点击向左的按钮,也可以点击向右的按钮,你点左图片就切到上一张,点右就切到下一张,并且你可以点击下面的小原点,点哪跑那张,并且鼠标离开,轮播图又会自己每3秒跑起来,好了,废话不多说,先上效果,可以试试哦,应该没bug,嘿嘿。。。 效果如下: ps:如果效果出不来,那么请刷新下页面 代码给出: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘宝轮播图</title> <!-- CSS样式 --> <style>

05.前端之jQuery

喜夏-厌秋 提交于 2019-11-29 14:54:36
jQuery jQuery介绍     1.jQuery是一个轻量级的、兼容多浏览器的JavaScript库。     2.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实战教程即将面市

谁都会走 提交于 2019-11-29 12:16:58
作者 张富银,网名 ( 大漠孤烟 ) ,现任 源代码 教育重庆校区教学总监,拥有多年的开发经验,带领团队完成过多个项目的开发与设计,重庆电信职业学院软件工程教学名师。在技术方面精通 PHP 、 c++ 、 Mysql 、 Mongodb 、 hadoop 、云计算,热衷于主流 LAMP 网站解决方案,同时对 Linux 服务器系统配置有着丰富的经验。 一.编写本书的目的 市场上面 JQuery 的书籍全部都只写了基础的使用,并没有利用 JQuery 开发一套完整的 demo 案例,造成新手入门难,熟手不愿意看的局面。本书打破了传统编写手法,全部采用真实案例讲解,并且保证所有源代码均能正常运行。 二.本书主要讲解 本书详细的讲解了 JQuery 的各种方法和使用技巧,读者可以系统地掌握 JQuery 中关于 DOM 操作、事件、动画效果、表单操作、 Ajax 以及插入方面的知识点,并且在本书的第 16 章,我们会参考成熟案例讲解详细的 JQuery 项目开发,更好为上手入门打下坚实基础,。 本书一共分 16 章。 第一章首先介绍了什么是 jQuery 、学习 jQuery 的条件、 jQuery 的版本、 jQuery 的功能和优势、其他 JavaScript 库、是否兼容低版本 IE 、下载及运行 jQuery 。 第二章介绍了 JQuery 的基础核心内容,包含代码风格、加载模式

python day49

独自空忆成欢 提交于 2019-11-29 09:05:35
昨日内容回顾 BOM和DOM BOM浏览器对象模型 window.open(url,'','width=400px,height=400px') window.opener() 子页面能够直接通过该方法调用父页面中的函数 window.close() window.location.href 获取当前网页所在的url window.location.href = url 当前跳转到指定的url 通常是结合ajax一起使用 定时器相关 setTimeOut clearTimeOut setInterval clearInterval 弹出框 alert confirm prompt DOM文档对象模型与 DOM树的概念 如何查找标签 基本选择器: document.getElementById 标签对象本身 document.getElementsByClassName 数组 document.getElementsByTagName 数组 如何操作标签 变量名如果指代的是一个标签那么推荐书写格式为 xxxEle 如果指代的是一个jQuery对象那么建议在变量名前面加上一个$ 示例:P标签: pEle $pEle 节点操作: document.createElement('标签名') appendChild: 父标签.insertBefore(新创建的标签,本来就有的标签)