jQuery

     目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。

1、调用jQuery库

<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

2、函数在ready下进行

$(document).ready(function(){
 $("button").click(function(){  //所有的按钮点击触发

   $("p").hide(1000); //在1s内,所有的p隐藏 ;

 });

});

3、常用的几种触发事件

双击事件:$("p").dblclick(function(){});

获取焦点:$("input").focus(function(){});

失去焦点:$("input").blur(function(){});

鼠标悬停$("input").hover()(function(){});

隐藏显现:   $("p").toggle();

4、动画效果

淡入: $("#div3").fadeIn(3000);//3000代表淡入的时间

淡出: $("#div3").fadeOut(3000);//3000代表淡出的时间

淡入淡出:$("#div3").fadeToggle(3000);//3000代表淡入淡出的时间

颜色变淡:  $("#div1").fadeTo("slow",0.15); //“slow”表示变淡,0.15代表变淡的程度越小越淡

向下滑动:$("#panel").slideDown(3000);//需要给id威panel 这个css属性display:none;代表一开始是不显示的。

向上滑动: $("#panel").slideUp(3000);

上下滑动: $("#panel").slideToggle(3000);

向左滑动:$("div").animate({left:'250px'});//left代表方向,250px代表距离

动画效果:$("div").animate({//里面可以加css的各种属性变化
                      left:'250px',
                      opacity:'0.5',//颜色变淡
                      height:'150px',
                      width:'150px'

                });

动画队列:$("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},3000); //第一个执行,3000代表时间
    div.animate({width:'300px',opacity:'0.8'});
    div.animate({height:'100px',opacity:'0.4'});
    div.animate({width:'100px',opacity:'0.8'});
  });

停止动画: $("#panel").stop();//停止当前动画,如果有下一个动画将执行下一个

                  $("div").stop(true);//停止所有动画队列里的动画

                  $("div").stop(true,ture);//停止所有动画,但直接变成动画后的样子

回调函数:在动画完成后添加触发事情,

            $("p").hide(3000,function(){

                 alert("段落现在被隐藏了");
             });

常用的效果:

animate() 	对被选元素应用"自定义"的动画
clearQueue() 	对被选元素移除所有排队函数(仍未运行的)
delay() 	对被选元素的所有排队函数(仍未运行)设置延迟
dequeue() 	移除下一个排队函数,然后执行函数
fadeIn() 	逐渐改变被选元素的不透明度,从隐藏到可见
fadeOut() 	逐渐改变被选元素的不透明度,从可见到隐藏
fadeTo() 	把被选元素逐渐改变至给定的不透明度
fadeToggle() 	在 fadeIn() 和 fadeOut() 方法之间进行切换
finish() 	对被选元素停止、移除并完成所有排队动画
hide() 	隐藏被选元素
queue() 	显示被选元素的排队函数
show() 	显示被选元素
slideDown() 	通过调整高度来滑动显示被选元素
slideToggle() 	slideUp() 和 slideDown() 方法之间的切换
slideUp() 	通过调整高度来滑动隐藏被选元素
stop() 	停止被选元素上当前正在运行的动画
toggle() 	hide() 和 show() 方法之间的切换

5、获取元素

获取文本:$("#test").text() //()这里面可以写上值,即可设置值,也可写上回调函数,下同;

获取html:$("#test").html()

获取文本框里的值:$("#test").val()

获取超链接里的地址:$("#runoob").attr("href")

6、添加(删除)元素

在被选元素的结尾插入内容:$("p").append("Some appended text.");

在被选元素的开头插入内容:$("p").prepend("<b>在开头追加文本</b>。 ");

在被选元素之后插入内容:$("img").after("<i>之后</i>");

在被选元素之前插入内容 :$("img").before("<b>之前</b>");

删除元素:$("#div1").remove();//删除元素本身

                 $("#div1").empty();//删除元素里的子元素,本身不删

7、操作css

向不同的元素添加 class 属性:$("h1,h2,p").addClass("blue"); //也可以是多个类;

删除class属性:$("h1,h2,p").removeClass("blue");

添加删除class属性:$("h1,h2,p").toggleClass("blue");

直接操作css:$("p").css("background-color","yellow");//也可以设置多个css属性 ({"x":"x","x":"x"})

8、设置尺寸

获取宽度:$("#div1").width()  //()里面可以设置宽度的值,下同;

获取高度:$("#div1").height();

9、AJAX

AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

//必需的 URL 参数规定您希望加载的 URL。

//可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

//可选的 callback 参数是 load() 方法完成后所执行的函数名称。

GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

$.get(URL,callback);

$.post(URL,data,callback);


阅读更多
个人分类: Web jQuery
上一篇Html编程后篇
下一篇Css学习
想对作者说点什么? 我来说一句

史上最好最新的JqueryApi

2009年05月25日 72KB 下载

jquery ui-1.12.1.custom

2017年12月29日 427KB 下载

jquery CODE.zip

2011年11月16日 3.38MB 下载

jquery动画jquery动画

2011年07月08日 1KB 下载

JQuery学习资料

2011年08月31日 37KB 下载

jquery 进度条

2008年11月04日 30KB 下载

jquery文档jquery文档jquery文档

2009年10月26日 421KB 下载

jquery手册(jquery_documentation.pdf)

2009年06月16日 124KB 下载

没有更多推荐了,返回首页

关闭
关闭