关于JQuery简单介绍

时间：2022-05-01 15:30:14

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:

  },  );

后面还可以跟动画完成后执行的函数：

 $("#block").animate({

    width: "90%",

    height: "100%",

    fontSize: "10em",

    borderWidth:

  }, ,
　　function(){

    backgroundColor:"black"

     );
　　}

stop([clearQueue],[jumpToEnd]）

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行;

stop（）；

中止当前动画，继续队列中的下一个动画。

stop(true);

表示清除动画队列，并在当前位置终止动画。

stop（true，true）；

清除动画队列，并终止在当前动画的最终位置处。

finish（）；

清空所有队列，并停止在最后的动画的最终位置处

相关文章