jQuery
- jQuery实现了一套与原生js一样的方法处理，只不过方法缩短内容，更简易，适用多个浏览器
- 要想使用jquery方法就必须是jquery对象。不能使用DOM对象操作jquery方法
- 在jQuery中 $就是jQuery对象
function jQuery(){
}
var $=jQuery;
jQuery对象和DOM对象 (页首)
var divs = document.querySelectorAll("div")
$("div")
DOM 转换为jQuery (页首)
var div=document.querySelector("div");
console.log( $(div))
jQuery变成DOM元素 (页首)
console.log($("div")[0])
console.log($("div").get(0));
var arr=Array.from($("div"));
console.log(arr)
选择器 (页首)
$("div");
$(".div1");
$("#div1");
$("div.div1");
$("div .div1");
$(".div1+.div2");
$(".div1~div");
$(".div1>.div2");
属性选择器 (页首)
在HTML和CSS中不区分大小写，所以所有标签属性命名通常不能使用驼峰式命名法
必须使用单词与-连接 box-aa
$("div[name]")
$("div[name=a]")
$("div[name!=a]")
$("div[name^=a]")
$("div[name$=a]")
$("div[name*=a]")
$("div[name|=a]")
$("div[name~=a]")
$("li:first").css("color","red");
$("li").first()
$("li:first-child").css("color","red");
$("li:first-of-type").css("color","red");
$("li:last")
$("li").last()
$("li:last-child")
$("li:last-of-type")
$("li:nth-child(1)")
$("li:nth-of-type(1)")
$("li:nth-child(odd)").css("color","red");
$("li:nth-child(even)").css("color","red");
$("li:nth-of-type(odd)")
$("li:nth-of-type(even)")
$("li:even").css("color","red");
$("li:odd").css("color","red");
$("li:only-child")
$("li:only-of-type")
$("li:not(.li0)").css("color","red");
$("li").not(".li0")
$("li:eq(3)").css("color","red");
$("li").eq(3).css("color","red");
$("li:gt(2)").css("color","red");
$("li:lt(2)").css("color","red");
$("li.li0").siblings().css("color","red");
$("li.li0").next()
$("li.li0").nextAll()
$("li.li0").nextUntil(".li1").css("color","red");
$("li.li0").prev();
$("li.li0").prevAll();
$("li.li1").prevUntil(".li0")
$("ul").children()
$(".li0").parent();
$(".li0").parents();
$(".li0").parentsUntil("body");
$(":header")
$(":animated")
$(":focus")
console.log( $("li:empty"))
console.log($("li:parent"))
console.log($("ul:has(.li0)"))
console.log( $("li:contains(3)"))
$(":hidden")
$("visible")
$("li").slice(3,5)
console.log($("li").hasClass("li0"))
console.log($("li").is(".li0"))
表单选择器：
遍历
var arr=[3,4,5,6,7];
$.each(arr,function(index,value){
console.log(index,value)
})
var obj={a:1,b:2,c:3,d:4};
$.each(obj,function(key,value){
console.log(key,value)
})
var divs=document.querySelectorAll("div");
$.each(divs,function(index,elem){
console.log(index,elem)
})
$.each($("div"),function(index,item){
console.log(index,item)
})
$("div").each(function(index,item){
console.log(index,item)
})
设置文本内容
$("div").text("你好");
var arr=["a","b","c","d"];
$("div").text(function(index,item){
return arr[index];
})
console.log($("div").text());
$("div").html("<span></span>")
var arr=[
{site:"网易",url:"http://www.163.com"},
{site:"淘宝",url:"http://www.taobao.com"},
{site:"腾讯",url:"http://www.qq.com"},
{site:"京东",url:"http://www.jd.com"},
{site:"什么值得买",url:"http://www.smzdm.com"},
]
$("div").html(function(index,item){
return `<a href='${arr[index].url}'>${arr[index].site}</a>`
})
console.log($("div").html())
$("input").val("a");
$("input").val(function(index,value){
return index;
});
console.log($("input").val())
设置数据
$("div").attr();
$("div").prop();
$("div").data();
var div=document.querySelector("div");
div.ab=10;
div["data-ab"]
$('div')是个函数，每次返回的结果引用时不同的
$("div").attr("a","10");
$("div").attr("a",function(index,item){
return index;
});
$("div").attr({
a:1,
b:2,
c:3
});
$("div").attr({
a:function(index){
return index;
},
b:function(index){
return index+10;
},
c:function(index){
return index+100;
}
});
$("div").removeAttr("a")
$("div")
console.log( $("div")===$("div"))
$(elem).prop 对象属性 (页首)
$("div").prop("ab",3);
console.log($("div").prop("ab"))
console.log($("div")[2].ab)
$("div").prop({
a:1,
b:2
})
$("div").removeProp("a")
$(elem).data 设置数据属性 (页首)
$("div").data("id","aaa");
console.log($("div"))
$("div").removeData("id");
jQuery (页首)
jQuery中文API文档
https://jquery.cuishifeng.cn/
1、css (页首)
给div jQuery对象设置字体颜色为红色
$("div").css("color","red")
给div jQuery对象索引为0的字体设置为绿色，其他为红色
$("div").css("color",function(index,value){
return index ? "red" :"green";
})
给div jQuery对象列表设置宽度50px，高度50px，背景颜色红色
$("div").css({
width:50,
height:"50px",
backgroundColor:"red"
})
给div jQuery对象列表索引为0的设置宽高为50px,背景颜色为绿色，其他宽高100px，背景色为红色
$("div").css({
width:function(index,value){
return index ? 100 : 50
},
height:function(index,value){
return index ? 100 : 50
},
backgroundColor:function(index,value){
return index ? "red" :"green";
}
})
获取div jQuery对象列表内的第一个div
获取当前元素的样式，可以获取行内样式，也可以获取css样式
console.log($("div").css("width"));
console.log($("div").css(["width","height","backgroundColor"]))
给div jQuery对象列表添加div1类名，然后移除
$("div").addClass("div1").removeClass("div1");
点击div jQuery对象，如果点击的目标有类名div2，移除，否则添加
$("div").click(function(){
$(this).toggleClass("div2");
})
css获取的是字符串，width获取的是数值
console.log( $("div").width())
innerWidth获取到的是width-padding，
获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。
$("div").innerWidth(200);
console.log($("div").innerWidth())
outerWidth获取到的是width-padding-border
获取第一个匹配元素外部宽度（默认包括补白和边框）。
$("div").outerWidth(200)
console.log($("div").outerWidth())
outerWidth参数设置为true时，获取的是width+padding+border+margin,只能获取不能设置
参数设置为 true 时，计算边距在内。默认值是false
console.log($("div").outerWidth(true));
如果有绝对定位就是left和top
console.log($(".div1").position())
不能设置 错误
$(".div1").position({left:200,top:200});
相对页面的左上角位置
console.log($(".div1").offset());
可以设置
$(".div1").offset({left:50,top:50});
获取和设置滚动条
console.log($(document).scrollTop())
$(document).click(function(){
$(document).scrollTop(100);
})
2、DOM操作 (页首)
创建一个DOM的jQuery对象
var div=$("<div></div>");
console.log(div)
给body中添加一个div，返回body
$("body").append("<div></div>")
给body中添加一个div，返回这个添加的div
$("<div></div>").appendTo("body").width(50).height(50).css("backgroundColor","red");
把div添加在body的最前面
$("body").prepend("<div></div>");
$("<div></div>").prependTo("body");
给兄弟元素的上面插入
$("div").before("<p></p>")
$("<p></p>").insertBefore("div");
给兄弟元素的下面插入
$("div").after("<p>111</p>");
$("<p></p>").insertAfter("div");
给span包裹一层div
$("span").wrap("<div></div>")
索引为0的包裹p，其他包裹div
$("span").wrap(function(index){
return index ? "<div></div>" : "<p></p>"
})
给所有span外面包裹一层div
$("span").wrapAll("<div></div>")
给span中的所有子元素包裹一层a标签
$("span").wrapInner("<a href='#'>111</a>")
clone(是否复制事件和数据,是否复制后代元素的事件和数据)
这个clone不管是否true和false都是深复制
默认值是clone(false,true)
$("div").data("a","1").click(function(){
$(this).width(200);
}).clone(true).appendTo("body").mouseover(function(){
console.log($(this).data("a"));
})
$("div").data("a",1).click(function(){
$(this).width(200);
}).children().click(function(){
$(this).css("color","black")
}).data("b","2");
$("div").clone(true,false).appendTo("body")
var div=$("div").click(function(){
console.log("aaa")
})
除了将元素删除外，还将元素的事件删除
div.remove();
仅删除元素，不删除事件
div.detach();
删除div中的所有子代元素 清空子元素
div.empty();
div.appendTo("body");
原生js，remove仅仅删除元素，并没有删除事件
var div=document.querySelector("div");
div.addEventListener("click",clickHandler);
div.remove();
document.body.appendChild(div);
function clickHandler(e){
console.log("aa")
}
将div替换为p标签
$("div").replaceWith("<p></p>");
$("<p><p>").replaceAll("div");
3、事件 (页首)
事件默认行为 (页首)
表单的提交submit 跳转页面
表单的重置reset 清除表单内容
右键菜单contextmenu 弹出右键菜单
图片禁拖标记 mousedown 设置e.preventDefault();就不会有禁拖标记
文本禁拖标记
addEventListener (页首)
capture 捕获阶段触发
once 只调用一次
passive 禁止使用preventDefault
div1.addEventListener("click",clickhandler1,{capture:true,once:true,passive:true});
阻止冒泡
e.stopPropagation();
同一个DOM对象，同一个事件，多个函数时，阻止同事件后续函数的触发
e.stopImmediatePropagation();
jQuery中的事件 (页首)
点击后清除div的事件
$("div").on("click",clickHandler);
function clickHandler(e){
$(this).off("click",clickHandler)
}
原生js中 (页首)
函数中arguments
function fn(){
console.log(arguments.callee.caller);
}
function fn1(){
fn();
}
fn1();
回调函数中，如果直接执行参数函数，那么在回调函数中的this指向window或者undefined
如果使用arguments[下标]() 这种使用arguments调用回调函数方法后，回调函数中this执行这个arguments
function fn(f){
arguments[0]();
}
function fn1(){
console.log(this);
}
fn(fn1);
fn.length 形参列表长度
arguments.length 实参列表长度
arguments.callee 当前函数
arguments.callee.caller 调用当前函数的函数
点击div后打印aaa并移除div的点击事件
var div=document.querySelector("div");
div.addEventListener("click",function(){
fns();
})
function fns(){
console.log("aaa")
div.removeEventListener("click",fns.caller)
}
jQuery中 (页首)
直接删除
$("div").on("click",function(){
console.log("aa")
$("div").off("click");
})
使用这种方式会将所有的click事件删除
$("div").on("click",function(){
console.log("aa")
$("div").off("click");
})
$("div").on("click",function(){
console.log("bb")
})
可以给事件增加别名,命名空间
$("div").on("click.a",function(){
console.log("aa")
$("div").off("click.a");
})
$("div").on("click.b",function(){
console.log("bb")
})
var obj={
init:function(){
var a=1;
$("div").on("click",{a},this.clickHandler);
},
clickHandler:function(e){
console.log(e)
}
}
obj.init();
$("div").on("xietian",function(e,o){
console.log("aaa")
console.log(o)
})
$("div").trigger("xietian",{a:1,b:2});
$("div").on("xietian",function(e,a,b,c){
return 10;
})
$("div").trigger("xietian",[5,6,7]);
var a=$("div").triggerHandler("xietian",[5,6,7]);
console.log(a)
triggerHandler 不会冒泡，
不会激活默认事件行为，
只针对jQuery对象列表的第一个抛发事件
可以获取返回值
trigger 会冒泡，
激活默认事件行为，
针对jQuery对象列表的所有元素抛发事件
jQuery事件简写
$("div").click(function(){
})
$("div").mousedown(function(){
})
$("form").input(function(){
})
网页加载顺序 (页首)
1、DOM树生成
2、CSS树生成
3、DOM和CSS合并形成DOM渲染树
4、加载图片等资源完成
DOM和CSS合并形成DOM渲染树以后触发
$(document).ready(function(){
})
判断window加载完成，加载图片等资源完成以后触发
window.onload=function(){
}
一些事件 (页首)
focus blur 是针对input，不能冒泡
$("form").on("focus",function(){
console.log("aa")
})
focusin focusout 事件冒泡，可以针对父元素或者input都可以使用
$("form").on("focusin",function(){
console.log("aa")
})
select 针对input和textArea中文本选中时激活
$("input").on("select",function(e){
console.log(this.selectionStart)
console.log(this.selectionEnd)
console.log(this.selectionDirection)
})
change 是针对所有表单元素，当value值被修改后，并且失去焦距时触发
4、动画 (页首)
隐藏 ，隐藏需要毫秒数,函数是执行完成动画后调用的函数
$("div").hide(2000);
$("div").hide(2000,function(){
console.log("aaaa")
});
连缀时，先隐藏再显示
$("div").hide(2000).show(2000);
$("div").click(function(){
$(this).toggle(2000);
})
maxheight减到0再加到原来的
通过高度变化隐藏和显示元素
$("div").slideUp(2000).slideDown(2000).slideToggle(2000);
通过透明变化隐藏和显示元素
$("div").fadeOut(500).fadeIn(500);
$("div").fadeTo(2000,0.5);
$("div").fadeToggle(2000);
用于创建自定义动画的函数
$("div").animate({
left:500,
top:300,
width:200
},2000)
$("div").animate({
left:300
},1000).animate({
top:300
},1000).animate({
left:0
},1000).animate({
top:0
},1000)
5、插件 (页首)
jQuery实例化方法插件
(function(){
$.fn.bgc=function(color){
if(!color)return this.css("backgroundColor");
this.css("backgroundColor",color);
return this;
}
})();
$("div").width(50).height(50).bgc("red").on("click",function(){
console.log("aaa")
})
console.log($("div").width())
jQuery静态方法插件
$.extend({
randomColor:function(){
return Array(6).fill(1).reduce((v,t)=>v+(~~(Math.random()*16)).toString(16),"#");
}
})
console.log( $.randomColor())
jsonp (页首)
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$("<div></div>").css({
width:50,
height:50,
backgroundColor:"red"
}).appendTo("body");
</script>
jsonp 不需要写跨域请求
function fn(a,b){
console.log(a,b)
}
var script=document.createElement("script");
script.src="http://localhost:4001?a=1&b=2&cb=fn";
document.body.appendChild(script);
$.getJSON();
$.getScript();
$.get();
$.post();
$().load();
$.ajax()
加载JSON文件并且转换为对象
$.getJSON("./a.json",function(data){
console.log(data);
})
加载js文件
$.getScript("./a.js",function(script){
console.log(script);
})
jsonp通信
$.getScript("http://localhost:4001?a=1&b=2&cb=fn");
function fn(a,b){
console.log(a,b);
}
get方法通信
$.get("http://localhost:4010/news?a=1&b=2",function(data){
console.log(data);
})
$.get("http://localhost:4010/news",{a:1,b:2},function(data){
console.log(data);
})
post方法通信
$.post("http://localhost:4010/news",{a:10,b:20},function(data){
console.log(data);
})
等同于post传参
$(document).load("http://localhost:4010/news",{a:10,b:20},function(data){
console.log(data)
})
加载页面放入某个元素中
$("div").load("./菜单.html");
jQuery中的ajax (页首)
$.ajax({
url:"http://localhost:4010/news",
type:"post",
data:JSON.stringify({a:1,b:2}),
success:function(data){
console.log(data)
}
})
ajax执行jsonp
function fn(a,b){
console.log(a,b)
}
$.ajax({
url:"http://localhost:4001?a=2&b=3&cb=fn",
dataType:"jsonp"
})
4604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
