jQuery学习笔记
Posted 可可西里的海
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习笔记相关的知识，希望对你有一定的参考价值。
动画效果
显示和隐藏效果
无动画效果
- 显示：show()
- 隐藏：hide()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>004_动画 -- 显示与隐藏</title> 6 <script src="jquery-1.11.3.js"></script> 7 </head> 8 <body> 9 <input type="button" id="start" value="显示"> 10 <input type="button" id="stop" value="隐藏"> 11 <div style="width: 200px;height: 200px;background-color: #fbb;"></div> 12 13 <script> 14 15 $("#stop").click(function(){ 16 $("div").hide(); 17 }); 18 19 $("#start").click(function(){ 20 $("div").show(); 21 }); 22 23 </script> 24 </body> 25 </html>
有动画效果
- 显示：show(speed,callback)
- speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback：动画执行完毕后的回调函数。
- 隐藏：hide(speed,callback)
- speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback：动画执行完毕后的回调函数。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>004_动画 -- 显示与隐藏</title> 6 <script src="jquery-1.11.3.js"></script> 7 </head> 8 <body> 9 <input type="button" id="start" value="显示"> 10 <input type="button" id="stop" value="隐藏"> 11 <div style="width: 200px;height: 200px;background-color: #fbb;"></div> 12 13 <script> 14 15 $("#stop").click(function(){ 16 $("div").hide(2000, function(){ 17 alert("动画执行完毕"); 18 }); 19 }); 20 21 $("#start").click(function(){ 22 $("div").show(3000); 23 }); 24 25 </script> 26 </body> 27 </html>
滑动式动画效果
通过改变高度来实现显示或者隐藏的效果。
- 向上滑动：slideUp(speed,callback)
- speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback：动画执行完毕后的回调函数。
- 向下滑动：slideDown(speed,callback)
- speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback：动画执行完毕后的回调函数。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>005_动画 -- 滑动</title> 6 <script src="jquery-1.11.3.js"></script> 7 </head> 8 <body> 9 <input type="button" id="start" value="显示"> 10 <input type="button" id="stop" value="隐藏"> 11 <div style="width: 200px;height: 200px;background-color: #fbb;"></div> 12 13 <script> 14 15 $("#stop").click(function(){ 16 $("div").slideUp(3000); 17 }); 18 19 $("#start").click(function(){ 20 $("div").slideDown(3000); 21 }); 22 23 </script> 24 </body> 25 </html>
淡入淡出动画效果
通过改变不透明度opacity来实现显示或者隐藏。
- 淡入效果：fadeIn(speed,callback)
- speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback：动画执行完毕后的回调函数。
- 淡出效果：fadeOut(speed,callback)
- speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback：动画执行完毕后的回调函数。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>006_动画 -- 淡入淡出</title> 6 <script src="jquery-1.11.3.js"></script> 7 </head> 8 <body> 9 <input type="button" id="start" value="显示"> 10 <input type="button" id="stop" value="隐藏"> 11 <div style="width: 200px;height: 200px;background-color: #fbb;"></div> 12 13 <script> 14 15 $("#start").click(function(){ 16 $("div").fadeIn(3000); 17 }); 18 19 $("#stop").click(function(){ 20 $("div").fadeOut(3000); 21 }); 22 23 </script> 24 </body> 25 </html>
动画切换效果
- toggle(duration,complete)：显示或隐藏匹配元素。
- duration：一个字符串或者数字决定动画将运行多久。
- complete：在动画完成时执行的回调函数。
- slideToggle(duration,complete)：用滑动动画显示或隐藏一个匹配元素。
- duration：一个字符串或者数字决定动画将运行多久。
- complete：在动画完成时执行的回调函数。
自定义动画效果
- animate(properties,duration[,easing][,complete])
- properties：一个CSS属性和值的对象,动画将根据这组对象移动。
- duration：一个字符串或者数字决定动画将运行多久。
- easing：一个字符串，表示过渡使用哪种缓动函数。
- complete：在动画完成时执行的回调函数。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>007_动画 -- 自定义</title> 6 <script src="jquery-1.11.3.js"></script> 7 <style> 8 div{ 9 width: 300px; 10 height: 300px; 11 border: 1px solid black; 12 background-color: #fbb; 13 position: relative; 14 top: 100px; 15 left: 100px; 16 font-size: 40px; 17 } 18 </style> 19 </head> 20 <body> 21 22 <div></div> 23 24 <script> 25 $("div").animate({ 26 width: 100, 27 height: 100, 28 top: 400, 29 left: 500, 30 fontSize: 15 31 }, 3000); 32 </script> 33 </body> 34 </html>
- aniamte(properties,options)
- properties：一个CSS属性和值的对象,动画将根据这组对象移动。
- options：一组包含动画选项的值的集合。 支持的选项：
- duration：一个字符串或者数字决定动画将运行多久。
- easing：一个字符串，表示过渡使用哪种缓动函数。
- queue：一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。
- complete：在动画完成时执行的回调函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>007_动画 -- 自定义</title> <script src="jquery-1.11.3.js"></script> <style> div{ width: 300px; height: 300px; border: 1px solid black; background-color: #fbb; position: relative; top: 100px; left: 100px; font-size: 40px; } </style> </head> <body> <div></div> <script> $("div").animate({ width: 100, height: 100, top: 400, left: 500, fontSize: 15 }, { duration: 3000 }); </script> </body> </html>
注意：animate方法不接受以下属性：
- backgroundColor
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- Color
- outlineColor
并发与排队效果
- 并发效果：指的就是多个动画效果同时执行。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>007_动画 -- 自定义</title> 6 <script src="jquery-1.11.3.js"></script> 7 <style> 8 div{ 9 width: 300px; 10 height: 300px; 11 border: 1px solid black; 12 background-color: #fbb; 13 position: relative; 14 top: 100px; 15 left: 100px; 16 font-size: 40px; 17 } 18 </style> 19 </head> 20 <body> 21 22 <div></div> 23 24 <script> 25 $("div").animate({ 26 width: 100, 27 height: 100, 28 left: 500, 29 top: 500 30 }, 3000); 31 </script> 32 </body> 33 </html>
- 排队效果：指的就是多个动画按照先后顺序执行。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>007_动画 -- 自定义</title> 6 <script src="jquery-1.11.3.js"></script> 7 <style> 8 div{ 9 width: 300px; 10 height: 300px; 11 border: 1px solid black; 12 background-color: #fbb; 13 position: relative; 14 top: 100px; 15 left: 100px; 16 font-size: 40px; 17 } 18 </style> 19 </head> 20 <body> 21 22 <div></div> 23 24 <script> 25 $("div").animate({ 26 width: 100, 27 height: 100 28 }, 3000).animate({ 29 left: 500 30 }, 3000).animate({ 31 top: 500 32 }, 3000).hide(3000); 33 </script> 34 </body> 35 </html>
类数组操作
什么是类数组对象？？
就是结构上类似于数组的对象，该对象具备数组的一些特性属性或方法，同时具有自己独特的一些属性或方法
数组与类数组对象的区别
- 数组的类型是Array
- 类数组对象的类型是Object
jQuery的类数组特性属性或方法
length属性 - 获取当前jQuery对象包含DOM对象的个数
get(index)方法 - 根据index的值返回对应的DOM对象
eq(index)方法 - 根据index的值返回对应的jQuery对象
index(obj)方法 - 根据对象返回该对象对应的索引值
jQuery中的隐式迭代
隐式迭代 - 只关注迭代的开始和结束,不关注迭代过程
方法
$(selector).each(callback) - (jQuery)对象方法
callback - 回调函数,function(index,domEle){}
index - 遍历过程中的索引值
domEle - 遍历得到的每个DOM对象(元素)
$.each(obj,callback) - (jQuery)全局函数
obj - 需要遍历的对象或数组
callback - 回调函数,function(index,domEle){}
index - 遍历过程中的索引值
domEle - 遍历得到的每个DOM对象(元素)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>008_隐式迭代 </title> 6 <script src="jquery-1.11.3.js"></script> 7 </head> 8 <body> 9 <input type="text" id="user1" value="user1"> 10 <input type="text" id="user2" value="user2"> 11 <input type="text" id="user3" value="user3"> 12 <input type="text" id="user4" value="user4"> 13 <input type="text" id="user5" value="user5"> 14 15 <script> 16 /*$(selector).each(callback)*/ 17 /*$("input").each(function(index, domEle){ 18 console.log(domEle.value); 19 });*/ 20 21 /*$.each(obj,callback)*/ 22 $.each($("input"), function(index, domEle){ 23 // console.log(domEle.value); 24 // console.log($(domEle).val()); 25 // console.log(this.value); 26 console.log($(this).val()); 27 }); 28 29 </script> 30 31 </body> 32 </html>
以上是关于jQuery学习笔记的主要内容，如果未能解决你的问题，请参考以下文章
[原创]java WEB学习笔记61：Struts2学习之路--通用标签 property，uri，param,set,push,if-else,itertor,sort,date,a标签等(代码片段
jQuery源代码学习笔记：jQuery.fn.init(selector,context,rootjQuery)代码具体解释