jQuery

11人阅读 评论(1) 收藏 举报
分类:

     目前网络上有大量开源的 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);


查看评论

Jquery中的on()使用理解,无法使用on方法

jquery中利用了on方法给未来元素绑定方法。 利用on方法可以方便的对将生成的元素标签进行方法绑定。 本例中使用的是jquery.min.js 是2.1版本,低版本的jquery使用的是liv...
  • a748448660
  • a748448660
  • 2016年10月09日 12:38
  • 973

jQuery的发展史,你知道吗?

每天多学一点知识,就少写一行代码 2006年1月,jQuery的第一个版本面世,至今已经有6年多了(注:这个时间点是截止至出书时间)。虽然过了这么久,但它依然以其简洁、灵活的编程风格让人一见倾心。在本...
  • zuoninger
  • zuoninger
  • 2014年01月21日 08:39
  • 5401

【jQuery】关于jQuery中$(function() {});

因为一直以来都是在进行后端开发,对前端开发接触得极少,其实是从心里面觉得那个既浪费时间又没啥成就感,所以也不太愿意花时间在那上面了。 最近因为工作的原因,不得不要接触到一些前端页面的东西,发现前端开发...
  • blue225
  • blue225
  • 2016年05月07日 10:54
  • 5241

在线jquery编辑调试的网站

无意中找到一个在线的jquery编辑调试的网站,可能选择jquery版本。好处可能还不止于此,有空看看吧 https://jsfiddle.net/ sample: http://jsfiddl...
  • hotdust
  • hotdust
  • 2016年06月15日 09:41
  • 1215

html怎么引入jQuery,即怎么使用jQuery框架?

  • Ideality_hunter
  • Ideality_hunter
  • 2016年12月09日 12:39
  • 4441

还有人不知道嘛?jquery和jQuery Mobile的区别

因为最近连载《跨平台构建》 jquerymobile是以jquery为基础的. 其相关的接口和使用的页面样式都是为了达到让web app更趋向于native app的目的. 你可以理解为jq...
  • bookzhaopin
  • bookzhaopin
  • 2014年07月18日 15:38
  • 2568

5款移动开发轻量jQuery的替代品

我们都爱jQuery的。这个网站甚至专门为建设美丽的例子,使用该库。但也有情况下,jQuery是不是一个明智的选择。如果您使用的是它只有简单的DOM操作或一个AJAX请求或两个,为什么放慢你的页面加载...
  • Gavid0124
  • Gavid0124
  • 2016年12月29日 11:44
  • 2036

JQuery基础(一):JQuery 常用的字符串处理函数

1.去掉空格 var txt=$.trim($("txt1").val()); 2.转为数字 txtNum=Number($.trim(txt)) + 1...
  • yinjingyu_bisheng
  • yinjingyu_bisheng
  • 2013年05月02日 12:48
  • 3994

jquery 移除css样式

解决办法 · 1、移除全部使用removeattr(“style”); 2、移除单个使用css(“属性”,“”);...
  • u013766398
  • u013766398
  • 2017年03月21日 09:35
  • 10785

jQuery - 参考资料 - close Method (window):

jQuery - 参考资料 - close Method (window): [close Method (window): - 文档]http://msdn2.microsoft.com/en...
  • hu_zhenghui
  • hu_zhenghui
  • 2007年12月02日 18:17
  • 4554
    个人资料
    持之以恒
    等级:
    访问量: 660
    积分: 192
    排名: 91万+
    文章存档
    最新评论