快速回顾jQuery的个人笔记(总结)
写在前面:学习任何一个库或者框架,不能盲目的学习,而是要首先了解这个库或者这个框架是干什么的,库和框架基于不同的目的提供给大家灵活使用,而不是以一概全,所有的项目都是用一样的东西。
很早就学习过一遍jQuery,但是对于我这样的小白来说,很多东西都未尽未透。而jQuery作为js最广泛流行的库,决定逞还在放暑假对jQuery进行一次复习和梳理。
1.jQuery的作用
首先对于jQuery来说,jQuery有如下的功能:
1.HTML元素的操作
2.CSS元素的操作
3.HTML的事件函数(譬如:对HTML元素的onclick事件)
4.Js的特效和动画
5.Ajax
6.Uitilities
2.jQuery的优势
知道了jQuery的使用场景,那么面对纷繁复杂的js前端库中,jQuery的优势又在哪里呢
1.jQuery提供了大量的扩展和插件
2.jQuery兼容几乎所有的浏览器
3.jQuery大大简化了js本身的语法,比如选取html对象的语句就缩减很短了
3.jQuery的基本语法
$(selector).action();
$:表示美元符号来定义jQuery,告诉你,从这里开始就是jQuery的语法了。
selector:选择器,用来选择HTML元素。这句话就是js的document.getElementById();这样的语句。
action:要执行的动作
4.文件就绪事件
$(document).ready(function(){ //jQuery代码 });
形如这样的形式就是文件就绪事件。它的作用是防止文档在加载完之前,就执行jQuery的代码。比如我们在写js的时候会用到window.onload,来使整个页面加载完在执行js的代码。
$(function(){ //jQuery代码 });
这是上面的简写版。
5.jQuery的选择器
jQuery的选择器是基于Css的选择器,也就是在selector的位置,你可以像使用CSS的选择器一样,方便的使用jQuery的选择器。
比如,以id作为选择:
$('#id').hide();
这里就是找到id为id的元素并将它隐藏(hide()).
6.jQuery的事件
什么是事件呢,就是执行的动作,比如点击一个按钮,按下你的键盘都叫事件。
jQuery常见的事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
jQuery事件的语法:
$('#id').click(function(){ $('id').hide(); });
比如上面这段代码就是,当点击id为id的元素的时候,id就会隐藏。
7.jQuery的效果
jQuery支持的常见效果有:出现,隐藏,淡入,淡出,滑动,动画等。
1.出现和隐藏
基本语法:
hide(speed,callback); show(speed,callback);
两个可选参数分别是速度(可以是fast,slow或者具体的毫秒),callback(表示执行完hide或者show后要执行的函数)。
实 例:
$('p').click(function(){ $('p').hide(); });
使用toggle()方法简化操作:有时候我们设置按钮可以来回切换两种出现和隐藏状态,那么就可以使用toggle。
$('p').click(function(){ $('p').toggle(); });
2.淡入和淡出
淡入和淡出的基本语法形式和参数都和上面的一样,我们直接来看实例:
$('p').click(function(){ $('p').fadeIn(); //使用slow或者fast描述的时候需要加上"" });
同理fadeToggle是实现fadeIn和fadeOut的两种形式的切换。
$('p').click(function(){ $('p').fadeToggle(); });
此外还有一个多的fadeTo()方法,该方法的作用是将颜色变淡,如果你的元素需要设置颜色的话。
它的基本语法中多了一个opacity,值的范围在0-1之间,表示透明度。
$('p').click(function(){ $('p').fadeTo("fast"0.7); });
PS:在这里,speed是必选,必须要设置时长。
3.滑动
jQuery的滑动同上面的一样,因为是总结这里就不再赘述了。
4.动画
首先来看动画的基本语法;
$(selector).animate({params},speed,callback);
其中必选的params是提供相对于本来元素,要改变的css样式。speed和callback与之前一样是可选选项。
实 例:
$(‘div’).animate({left:'300px'});
以上代码的含义是,div标签的HTMl元素的位置相对于原来的位置,变换300px。(PS:这里需要对position进行设置)。params的部分采用的是键值对的方式书写。
实 例-同一个对象同时执行多个动画(比如:同时改变宽高,透明度和位置),只需要用","隔开
$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });
PS:jQuery的动画几乎可以操纵css的所有属性,但是在书写的时候,必须使用骆驼标记法。比如在css中的margin-left,在jQuery中就是marginLeft。
实 例:动画中的计算
$("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });
实 例:使用动画的队列功能。如果想要实现动画按顺序执行,那么jQuery还提供了队列的功能。
$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); });
8.添加元素
使用append()和prepend()方法可以从后和前添加元素
$("p").append("Some appended text.");
使用append或者prepend可以追加多个元素
$(document).ready(function(){ var a = 1; var b = 2; var c = 3; var d = 4; $('p').append(a,b).prepend(c,d); });
使用after或者before可以从前后添加多个元素
$(document).ready(function(){ $('img').before('hi').after('bye'); });
也可以追加多个元素
function afterText() { var txt1="<b>I </b>"; // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 }
9.jQuery的遍历
1.向上遍历
1.parent():返回被选元素的直接父元素
<style> div{ width:100px; height:100px; border:1px solid lightgrey; } p{ width:50px; height:50px; border:1px solid lightgrey; } </style> <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $('p').parent().css("border","1px solid red"); }); </script> </head> <body> <div> <p></p> </div> </body>
2.parents():遍历所有的父元素,包括根元素
<style> .div1{ width:200px; height:200px; border:1px solid lightgrey; } .div2{ width:100px; height:100px; border:1px solid lightgrey; } p{ width:50px; height:50px; border:1px solid lightgrey; } </style> <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $('p').parents().css("border","1px solid red"); }); </script> </head> <body> <div class='div1'> <div class='div2'> <p></p> </div> </div> </body>
可以在parents()中设置参数,该参数可以过滤想要的祖先元素。
<style> .div1{ width:200px; height:200px; border:1px solid lightgrey; } .div2{ width:100px; height:100px; border:1px solid lightgrey; } p{ width:50px; height:50px; border:1px solid lightgrey; } </style> <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $('p').parents('ul').css("border","1px solid red"); }); </script> </head> <body> <div class='div1'> <div class='div2'> <ul> <p></p> </ul> </div> </div> </body>
3.parentsUntil()这个方法是返回两者之间的父元素
.ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors"> body (曾曾祖父元素) <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> </body>
2.向下遍历
children():返回的是直接子元素。
<style> .div1,.div2,.p1{ border:1px solid lightgrey; } .div1{ width:100px; height:100px; margin: auto; } .div2{ width:50px; height:50px; margin:auto; } .p1{ width:25px; height:25px; margin:auto; } </style> <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $('.div1').children().css("border-color","red"); }); </script> </head> <body> <div class="div1"> <div class="div2"> <p class="p1"> </p> </div> </div> </body>
PS:同样可以用过滤器进行设置。
2.find():该方法可以返回所过滤的元素。如果过滤元素是"*",则返回所有的子元素。
.descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("div").find("*").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div (当前元素) <p>p (儿子元素) <span>span (孙子元素)</span> </p> <p>p (儿子元素) <span>span (孙子元素)</span> </p> </div> </body>
3.水平遍历
siblings():返回所有的同胞元素。可以使用选择器。
next():下一个同胞元素,只返回一个。
nextAll():所有跟随的同胞元素。
nextUtil():返回介于两者之间的同胞元素。
prev(),prevAll(),prevUtil():用法和上边一样,但是是向前遍历同胞元素.
4.过滤器
first():返回第一个被选元素。last()则是返回最后一个。
<script> $(document).ready(function(){ $("div").first().css("background-color","yellow"); }); </script> </head> <body> <h1>欢迎访问我的主页</h1> <div> 这是第一个div </div> <div> <p>这是 div 中的一个段落。</p> </div> <div> <p>这是另外一个 div 中的一个段落。</p> </div> <p>这是一个段落。</p> </body>
eq():由于first和last只能返回开头和结束,那么eq就可以弥补这个问题,可以选择中间的某项。
<script> $(document).ready(function(){ $("p").eq(2).css("background-color","yellow"); }); </script> </head> <body> <h1>欢迎访问我的主页</h1> <p>W3Cschool教程 (index 0).</p> <p>http://www.w3cschool.cn (index 1)。</p> <p>google (index 2).</p> <p>http://www.google.com (index 3)。</p> </body>
filter():该方法可以自定义过滤的方法,并且返回过滤器中的元素。not():方法与filter相反,返回不是某个(些)自定义标准的元素
<script> $(document).ready(function(){ $("p").filter("p").css("background-color","yellow"); }); </script> </head> <body> <h1>欢迎访问我的主页</h1> <p>W3Cschool教程 (index 0).</p> <p class="url">http://www.w3cschool.cn (index 1)。</p> <p>google (index 2).</p> <p class="url">http://www.google.com (index 3)。</p> </body>