关于JQuery简单介绍
jQuery是一个兼容多浏览器的javascript库,核心理念是写得更少,做得更多。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
特点:
通过插件来扩展
多浏览器支持,解决了IE6,7,8的兼容性问题
简单小巧,使用方便
关于版本
版本号:v1....兼容IE6,7,8及其他的浏览器
版本号:v2....不兼容IE6,7,8,支持模块化开发
得到JQuery对象
要想的到JQuery很简单,只需在找到的元素前加上$符号即可,JQuery强大的选择功能可以让我们很容易的获取到我们需要的对象,下面看几个简单的例子:
<div id="div1"><div class="main1"></div><div class="main2"></div><div class="main3"></div><div class="main4"></div>
</div>
$("#div1") //找到了id为div1的元素
$(".main1") //找到了class为main1的元素
$(".main1").next()//找到了class为main2的元素
$(".main1").nextAll() //找到了class为main2,main3,main4的元素
$(".main2").prev()//找到了class为main1的元素
$(".main4").prevAll() //找到了class为main1,main2,main3的元素
以上是最简单,最常用的几个选择元素的方法
动画的简单介绍:
show(speed,fn);
speed:指定显示完成的时间
fn:在动画完成时执行的函数,每个元素执行一次。
$("p").show("fast",function(){$(this).text("Animation Done!");});
以上代码的执行结果是p元素显示的内容为Animation Done!
让事先隐藏的对象缓慢的显示出来;
hide(speed,fn );
$("p").hide("fast",function(){alert("Animation Done.");});
以上代码的执行结果是p元素隐藏,并弹出提示框,提示内容为Animation Done
toggle();元素在显示和隐藏之间来回切换
slideDown();//以向下划的方式显示
快速将段落滑下,之后弹出一个对话框
jQuery 代码:
$("p").slideDown("fast",function(){alert("Animation Done.");});
slideUP();//以向上滑的方式显示:
缓慢的将段落滑上jQuery 代码: $("p").slideUp("slow");描述: 快速将段落滑上,之后弹出一个对话框jQuery 代码: $("p").slideUp("fast",function(){alert("Animation Done.");});
fadeIn()//淡入
用600毫秒缓慢的将段落淡入
jQuery 代码:
$("p").fadeIn("slow");
快速将段落淡入,之后弹出一个对话框
jQuery 代码:
("p").fadeIn("fast",function(){alert("Animation Done.");});
fadeOut();//淡出
缓慢的将段落淡出
jQuery 代码:
$("p").fadeOut("slow");
快速将段落淡出,之后弹出一个对话框
jQuery 代码:
$("p").fadeOut("fast",function(){alert("Animation Done.");});
fadeTo()//把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
使用淡入效果来显示一个隐藏的 <p> 元素:
jQuery 代码:
$(".btn2").click(function(){$("p").fadeIn();
});
缓慢的将段落的透明度调整到0.66,大约2/3的可见度
jQuery 代码:
$("p").fadeTo("slow", 0.66);
快速将段落的透明度调整到0.25,大约1/4的可见度,之后弹出一个对话框
jQuery 代码:
$("p").fadeTo("fast", 0.25, function(){alert("Animation Done.");});
animate()
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
$("#block").animate({ width: "90%",height: "100%", fontSize: "10em", borderWidth: 10}, 1000 );
后面还可以跟动画完成后执行的函数:
$("#block").animate({ width: "90%",height: "100%", fontSize: "10em", borderWidth: 10}, 1000, function(){backgroundColor:"black"); }
stop([clearQueue],[jumpToEnd])
停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行;
stop();
中止当前动画,继续队列中的下一个动画。
stop(true);
表示清除动画队列,并在当前位置终止动画。
stop(true,true);
清除动画队列,并终止在当前动画的最终位置处。
finish();
清空所有队列,并停止在最后的动画的最终位置处
转载于:https://www.cnblogs.com/hongxuejiao/p/4967434.html
关于JQuery简单介绍相关推荐
- jQuery简单介绍
一.jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...
- jQuery的简单介绍
jQuery的简单介绍 /* *JavaScript框架库:就是一个普通的js文件,封装了很多的函数,封装了很多兼容的代码 *jQuery是JavaScript框架库中的一种 *jQuery的 ...
- jQuery框架简单介绍
jQuery框架介绍 1. jQuery框架与javaScript之间的有什么关系? 2. jQuery与原生javaSript对比,有什么优点? 3. jQuery与javaScript之间的区别是 ...
- jQuery课程介绍、Query的介绍、Query初次体验、jQuery再次体验、jQuery中的顶级对象
jQuery课程介绍 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- php $rs1- gt eof,PHP_PHP速成大法,简单介绍一下PHP的语法
1、嵌 - phpStudy
PHP速成大法 简单介绍一下PHP的语法 1.嵌入方法: 类似ASP的,当然您也可以自己指定. 2.引用文件: 引用文件的方法有两种:require 及 include. require 的使用方法如 ...
- jQuery简单插件开发
jQuery简单插件开发 jQuery有非常强大的扩展性,开发者可以简单的使用jQuery开发自己的插件运用于应用中.jQuery可以理解为一个强大的JavaScript类,jQuery选择器选择到的 ...
- bankbone 模型简单介绍
bankbone 模型简单介绍 backbone是基于MVC模型实现的一款前端框架,在backbone中强化了模型和视图模块,弱化了控制器模块. backbone中用户可以通过控制视图触发事件,可以通 ...
- 简单介绍Javascript匿名函数和面向对象编程
忙里偷闲,简单介绍一下Javascript中匿名函数和闭包函数以及面向对象编程.首先简单介绍一下Javascript中的密名函数. 在Javascript中函数有以下3中定义方式: 1.最常用的定义方 ...
- jQuery基本介绍
typora-copy-images-to: images typora-root-url: images jQuery基本介绍 什么是jQuery? jQuery是一个快速的.轻量的.功能丰富的js ...
最新文章
- MinkowskiPooling池化(下)
- Docker制作dotnet core控制台程序镜像
- Java中Map, List, Set和Queue的区别和使用场景
- 异步fifo_【推荐】数字芯片异步FIFO设计经典论文
- windows签名证书流程
- Linux CGLIB升级,cglib升级建议
- 项目工作总结——人脸建模方法研究
- Android--应用开发1(应用程序框架)
- sql连接本地数据库
- PBJ | 华南农大联合中科院东北地理所发表植物功能基因与根际微生物互作综述...
- 校验码(循环冗余校验码)
- excel VBA会说话的工作表
- mysql怎么设置id自动编号_MySQL中实现ID编号自动增加的方法
- 实习期间的一些思考整理(2)2018.4.10~4.11
- 微信直播监控服务器,HTML5微信网页调用监控直播代码接口文档v3.02
- office2016与visio2016冲突的解决方法
- 论文学习——洪水预报实时校正技术研究进展
- SSIS(数据流任务)
- 猫,路由器,宽带(光纤,ADSL),带宽的区别和联系
- 用php编写多项选择题_php 多选框问题(类似一道多选题)多选题的答案 以及正确答案都记录到数据库里了,读取修改问题...
热门文章
- opencv均值滤波_python+opencv图像处理(二十)
- unef螺纹_这十一种螺纹,你知道几种呢?
- c语言刷新输出_在fx-9860系列上用C语言编程
- 安装 |GitBash闪退问题解决方案及Git安装教程( win10系统安装Git后)
- 用C语言写一个球的程序,12个球的程序.....
- 云南省计算机一级理论知识试卷,云南省计算机一级考试模拟试题理论题型
- 基因分子生物学~强和弱化学键
- Python业务分析实战|共享单车数据挖掘
- 【SLAM】gradslam(∇SLAM)开源:论文、代码全都有
- 技术圈鄙视链形成的真实原因?