jQuery2
动画
-
hide:隐藏
-
show:显示
-
toggle:切换
-
slidedown:向下切
-
slideup: 向上切 下拉菜单效果
-
fadeIn:逐渐显示
-
fadeOut“逐渐消失
-
fadeTo:透明到多少
-
animate:
$(document).on("click",function(e){ $("div").animate({ left:e.clientX-25, top:e.clientY-25, width:100, height:100//变到指定位置 },500) })
jQuery插件
1.遍历jQuery对象,必须用this返回
-
重构宽度
$.fn.widths=function(w){ if(w===undefined) return parseFloat(this.css("width")); w=parseFloat(w) if(isNaN(w)) return; this.css({ width:w+"px" }) }
-
重构颜色
$.fn.bgc=function(color){
if(color===undefined) return this.css("backgroundColor");
this.css("backgroundColor",color);
return this;
}
2.使用$each,可以不用this返回
-
$each的封装
$.extend({ eachs:function(list,fn){//要遍历的对象,函数 switch(list.constructor){ case Array://数组 case jQuery://jQuery对象 case HTMLCollection://需要数组遍历 case NodeList: for(var i=0;i<list.length;i++){ fn(i,list[i]);//遍历先放index后放item } break; case Object://遍历对象用for in for(var prop in list){ fn(prop,list[prop]); } break; case Set:// set没有key值 for(var value of list){ fn(value,value); } break; case Map: for(var value of list){ fn(value[0],value[1]); } break; } } })
3.自执行函数:轮播图
轮播图
(function () {
$.fn.carousel = function () {
var index = 0;
var num = 0;
this.width(900).height(300).css({
position: "relative",
margin: "auto",
overflow:"hidden"
});
this.children(".imgCon").width(1800).height(300).css({
position: "absolute",
left: 0
}).children().width(900).height(300).eq(0)
//设置所有图片CSS样式,第一个设置为块元素
.css({
display: "block"//块元素
}).siblings().css("display", "none");//剩余的设为none
var dotList = this.children(".dotList");
dotList.css({
listStyle: "none",
cursor: "pointer",//光标呈现为指示链接的指针(一只手)
margin: 0,
padding: 0,
position: "absolute",
bottom: 20
}).children().css({
width: 15,
height: 15,
borderRadius: 15,
border: "1px solid #FF0000",
marginLeft: 10,
float: "left"
}).on("click", function () {
Array.from(dotList.children()).forEach((item, index1) => {
if (this == item) {
index = index1;
$("this").set(index);
};
});
});
$(".dotList").children().eq(0).css({//小圆点第一个元素
"backgroundColor": "rgba(255,0,0,0.4)",
"marginLeft": "0px"
});
dotList.css("left", (900 - dotList.width()) / 2);//小圆点位置
this.children(".leftBn").css({
display: "block",
cursor: "pointer",
fontSize: 60,
height: 60,
top:-40,
bottom:0,
margin:'auto',
left: 10,
lineHeight: "60px",
position: "absolute",
color: "white",
backgroudColor: "rgba(0,0,0,0.1)"
}).on("click", function () {
index--;//点击向左移动
if (index < 0) index = $(".imgCon").children().length - 1;
$("this").set(index);
})
this.children(".rightBn").css({
display: "block",
cursor: "pointer",
fontSize: 60,
height: 60,
top:-40,
bottom:0,
margin:'auto',
position: "absolute",
color: "white",
right: 10,
backgroudColor: "rgba(0,0,0,0.1)"
}).on("click", function () {
index++;//点击向右移动
if (index > 5) index = 0;
$("this").set(index);
})
}
})();
$.fn.set = function (index) {
$(".dotList").children().eq(index).css({
"backgroundColor": "rgba(255,0,0,0.4)"
}).siblings().css("backgroundColor", "rgba(0,0,0,0)");
$(".imgCon").children().eq(index)
.css({
display: "block",
}).siblings().css("display", "none");
}
$(".carousel").carousel();
jQuery的Ajax
-
最顶层
-
$.getJSON();
$.getJSON("./config.json",function(data){ console.log(data); })// 加载json
-
$.getScript();
$.getScript("./a.js",function(){ obj.c(); }) // 加载js
-
-
中间层
-
$(“div”).load();
//加载本地文件 $("div").load("http://localhost:4006",{user:"cyj",age:23});//返回结果直接放div中 $(document).load("http://localhost:4006",{user:"cyj",age:23},function(data){ console.log(data); }) //加载页面 $("div").load("./2、jQuery插件.html") $(document).load("./a.js",function(data){ var script=document.createElement("script"); script.innerHTML=data; document.body.appendChild(script); obj.c(); }) $(document).load("./config.json",function(data){ console.log(JSON.parse(data));//将data转为对象 })
-
$.get();
/* $.get("http://localhost:4006?user=cyj&age=23",function(data){ console.log(data); }); */ /* $.get("http://localhost:4006","user=cyj&age=23",function(data,success,xhr){ // console.log(data,success,xhr); }); */ // 通过GET方式请求服务
-
$.post()
/* $.post("http://localhost:4006",{user:"cyj",age:23},function(data){ console.log(data); }) // 通过POST方式请求服务
-
-
最底层
-
$.ajax();
//POST $.ajax({ url:"http://localhost:4006", type:"POST", data:{user:"xietian",age:30}, success:function(data){ console.log(data); } }) //GET jsonp写法 $.ajax({ url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=cyj &json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback", type:"GET", dataType:"jsonp", }) function callback(data){ console.log(data); }
PS:如果想获取更多的知识视频,加QQ好友10398975免费送给大家
-