JQuery速成大法

什么是JQuery呢，很多都是只闻其名。

jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

要用JQuery，首先要有一定的JS基础，否则根本看不懂这是个嘛玩意。有了JS基础后，就会发现，哇，JS好复杂，JQuery好简单粗暴

下面就让我们来看一下如何来用JQuery

【Jquery语法】

       1.通过jQuery("选择器").action();通过选择器调用事件函数。

          但JQuery中jQuery可以用$符代替，$("选择器").action();

          ①选择器可以直接使用CSS选择器，选中元素

          ②action表示对元素执行的操作

ps:各种选择器的用法可以自己去查帮助文档

       2.文档就绪函数：防止了文档在完全加载(就绪)之前运行JQuery代码

           $(document).ready(function(){


            JQuery代码


        });


$(function(){})//这是文档就绪函数简写方式PS

看到文档就绪函数，不免就会想到JS中的window.onload。这里我们来说一下它们俩的区别

①.window.onload需在网页所有内容加载完成后执行，包括图片音频等。而文档就绪函数只需要在网页DOM结构加载以后便可执行。

②.window.onload只能写一个，写多个只会执行最后一个。文档就绪函数，可以写多个，也不会被覆盖。

当然，原生DOM对可以与JQuery对象可以相互转化

①原生DOM对象转JQuery对象： $(DOM对象)；

           var
p=document.getElementById("p");

           $(P);//转为JQuery对象

②JQuery对象转DOM对象

       $("p").get[0]   或者 $("p")[0]

       例子：$("p").get(0).style.color="red";

当然我们一般也不会这么干，容易弄混了。

JQuery中的事件绑定

时间绑定的快捷方式

$("button:first").click(function(){

})

使用on进行事件绑定

①使用on进行单事件绑定

$("button").on("click",function(){

　　//this取到当前调用函数的对象

　　console.log($(this).html());

})

②使用on同时为多个事件绑定同一函数

$("button").on("mouseover
click",function(){

　　console.log($(this).html());

})

③调用函数时传入自定义参数

$("button").on("click",{name:"lyx"},function(event){

　　//使用event.data.属性名找到传入的参数

　　console.log(event.data.name);

})

④使用on进行多函数多事件绑定

$("button").on({

　　click:function(){

　　console.log("click")

　　mouseover:function(){

　　console.log("mouseover")

}

})

⑤使用on进行事件委派

>>将原本应该绑定到某元素上的事件还为绑定在父元素乃至根节点上，然后委派给当前元素生效

eg:$("p").click(function({}));

$(document).on("click","p",function(){});

>>默认的绑定方式只能帮顶到页面初始时已有的p元素，当前页面新增p元素时。无法绑定到新元素上；

使用事件委派方式，当页面新增元素时，可以为所有新元素绑定事件

$("button").on("click",function(){

　　var
p=$("<p>44444</p>");

　　$("p").after(p);

})

$(document).on("click","p",function(){

　　alert("1");

})

这段程序中新增的P都会有alert（"1"）事件

off取消事件绑定

1.$("p").off(); 取消所有事件

2.$().off("click"); 取消点击事件

3.$("p").off("click mouseover")取消多个事件

4.$(document).off("click","p")取消事件委派

用.one绑定事件，只能执行一次

$("button").one("click",function(){

　　alert("1");

})

.trigger("event")自动触发某元素的事件

$("p").click(function(event,arg1,arg2){

　　alert("触发了p的click事件"+arg1+arg2);

})

$("button").click(function(){

　　$("p").trigger("click",["haha00","hehe"]);

})

JQuery中常见的动画效果

.show

①.不传参：让隐藏的元素直接显示，不进行动画

②传入时间：多少毫秒之间之内完成动画

③传入（时间，函数）：完成动画之后，执行回掉函数

.show()动画执行效果：同时修改元素的宽度，高度，opacity属性

.hide()让显示元素隐藏，与show()相反

.slideDown()让隐藏元素显示，效果为从上往下增加高度

.slideUp()让显示元素隐藏，效果，从下往上减小高度

.slideToggle()让现实的隐藏，让隐藏的显示

.fadeOut():让显示元素隐藏，淡出

.fadein();让隐藏元素显示，淡入

.fadeToggle();让现实的隐藏，让隐藏的显示，淡入淡出

.fadeTo(时间，透明度，函数)；同.fadeToggle()，但多了透明度参数，可以指定显示的最终透明度

.animate({最终样式属性键值对},动画时间，动画效果"linear"
"swing",回掉函数) 自定义动画

p{


width: 0px;


height: 100px;


background-color: green;


overflow:"hidden";


/*display: none;*/

           }

           $("p").animate({



width:"100px",



opacity:"0.5"






},3000,"linear",function(){



alert("hello")


        })

这段JQ代码的效果是使p的宽度在3秒内从0渐变为100px，透明度由1渐变为0.5，

动画效果完成后执行函数，alert("hello")

JQuery这种框架，最需要的是还是学会自己去查帮助文档，了解各种详细的用法这里推荐W3Cschool,有在线版，离线版，手机版，是不是很方便~

巴特西

JQuery速成大法

最新文章

热门文章