爱站程序员基地jQuery的动画
-
show()
显示
//2000毫秒内显示div$(\"div\").show(2000);
hide()
隐藏
//2000毫秒内隐藏div$(\"div\").hide(2000);//先隐藏后显示$(\"div\").hide(2000).show(2000);
slideUp()
向上收起
//在2000毫秒内向上收起$(\"div\").slideUp(2000);
slideDown
向下展开
//在2000毫秒内向下展开$(\"div\").slideDown(2000);
fadeIn()
淡入 透明度逐渐到1
//在2000毫秒内div的透明度从0渐变为1$(\"div\").fadeIn(2000);
fadeOut()
淡出 透明度逐渐到0
//在2000毫秒内div的透明度从1渐变为0$(\"div\").fadeOut(2000);
fadeTo()
在一定时间内，透明到指定透明度
//在2000毫秒内div的透明度从1渐变为0.4$(\"div\").fadeTo(2000,0.4);
animate()
实现运动状态的位移动画
只要是数字显示的属性都可以设置
$(\"div\").animate({left:400,top:400,width:100,height:100,},2000)
通过连缀实现队列动画
$(\"div\").animate({left:100,},50).animate({top:100,},50).animate({left:0},50).animate({top:0},50)
jQuery的插件
-
插件
像jQuery的方法一样自己封装方法
插件的使用方法
$.fn.f=function(){}
需要返回this，供连缀调用使用
加入新的功能属性
//重构width()方法$.fn.widths=function(w){// console.log(this);//this是选择的jQuery对象// 获取宽度if(w===undefined) return parseFloat(this.css(\"width\"));// 设置宽度w=parseFloat(w)if(isNaN(w)) return;this.css({// width:String(w).includes(\"px\")?String(w):String(w)+\"px\",width:w+\"px\",})}$(\"div\").widths(1200);// 重构 获取和设置背景色$.fn.bgc=function(color){// 获取背景色if(color===undefined) return this.css(\"backgroundColor\");// 设置背景色this.css(\"backgroundColor\",color);return this;}
$.extend(){fn:{}}
不需要返回this，使用$.fn()调用使用
// 重构$.each();$.extend({eachs:function(list,fn){switch(list.constructor){case Array:case jQuery:case HTMLAllCollection:case NodeList:for(var i=0;i<list.length;i++){fn(i,list[i]);}break;case Object:for(var prop in list){fn(prop,list[prop]);}break;case Set:for(var value of list){fn(value,value);}break;case Map:for(var value of list){fn(value[0],value[1]);}break;}}})
JQuery插件开发步骤
- 使用闭包避免全局依赖
- JQuery提供了两个供用户扩展的基类——.extend和.extend和.extend和.fn.extend
- 尽量使用Id选择器
jQuery的ajax
-
最顶层
$.getJSON()
加载本地json文件，可以获取到json文件中的内容
$.getJSON(\"./config.json\",function(data){console.log(data);})
$.getScript()
加载本地js文件，加载完成后可以获取到js文件中的内容，并且能直接执行js文件中是代码
$.getScript(\"./a.js\",function(){obj.c();})
中间层
$.get()
使用GET方式请求服务
能获取到服务器返回的消息
$.get(\"http://localhost:4006?user=hm&age=18\",function(data){console.log(data);//data是服务器返回的消息})$.get(\"http://localhost:4006\",\"user=hm&age=18\",function(data){console.log(data);//data是服务器返回的消息})
$.post
使用POST方式请求服务
能够获取到服务器返回的消息
$.post(\"http://localhost:4006\",{user:\"hm\",age:18},function(data){console.log(data);data是服务器返回的消息})
$(“div”).load()
服务器的返回结果直接保存在div中
$(\"div\").load(\"http://localhost:4006\",{user:\"hm\",age:18});
将服务器的返回结果用函数接收
$(document).load(\"http://localhost:4006\",{user:\"hm\",age:18},function(data){console.log(data);//服务器返回的消息用函数接收});
加载其他页面
$(\"div\").load(\"./jQuery插件.html\");
将页面头部、底部写成一个页面加载到特定的标签中，避免多次重复创建，但是如果该标签内部修改样式，可能会影响全局样式，所以尽量避免使用标签选择器，尽量使用class和id选择器
加载js文件
- 加载出来的是js文件中是代码的字符串形式，不能直接使用，需要进行相应处理
$(document).load(\"./a.js\",function(data){var script=document.createElement(\"script\");script.innerHTML=data;document.body.appendChild(script);obj.c();})
加载json文件
加载出来的是json文件中是代码的字符串形式，不能直接使用，需要进行相应处理
$(document).load(\"./a.js\",function(data){console.log(JSON.parse(data));})
最底层
$.ajax()
$(\"form\").on(\"submit\",function(e){e.preventDefault();console.log($(\"[name=user]\").val());console.log($(\"[name=age]\").val());var fd=new FormData($(\"form\")[0]);console.log(fd);console.log($(\"form\").serialize());//queryString序列化})
