day21 jQuery进阶
2.jQuery循环
2.1 each ：没有返回值
-
语法1：$.each(循环对象，function(index,value){}) -
语法2：$(循环对象).each(function(index,value){}) -
循环数组 //1.循环数组
var arr = ["a","b","c"];
$.each(arr,function(index,value){
? ?console.log(index +"--------------"+value);
}); -
循环对象 //2.循环对象
var teacher = {
? ?"name":"梁进",
? ?"age":32,
? ?"height":175,
? ?"sex":"男",
? ?"skill":function(){
? ? ? ?console.log("教三阶段");
? }
}
$.each(teacher,function(key,value){
? ?console.log(key +"----------"+value);
}) -
循环标签 //3.循环标签
var sum = 0;
$("li").each(function(index,elem){
? ?console.log(elem); ?//<li>9.9</li>
? ?console.log($(elem));
? ?sum += Number($(elem).text());
});
console.log(sum);
一般使用$().each() 这种语法
2.2 map：有返回值
-
语法1：$.map(循环对象，function(value,index){}) -
语法2：$(循环对象).map(function(index,value){}) //$.map:循环有有返回值
//语法1：$.map(循环对象，function(value,index){})
//语法2：$(循环对象).map(function(index,value){})
var arr = ["a","b","c"];
$.map(arr,function(value,index){
? ?console.log(index);
})
3.jQuery的BOM操作
3.1 原生js
3.2 jQuery
-
获取元素宽高
-
内容宽高：$().width()/height() -
可视宽高：$().innerWidth()/innerHeight() content+padding -
占位宽高：$().outerWidth().outerHeight() content+padding+border true:加margin //1.1 获取元素的内容宽高
var w = $("div").width(); ?//height
console.log(w); ?//100
?
//1.2 获取元素的可视宽高 content+padding
var inner = $("div").innerWidth(); //innerHeight
console.log(inner);
?
//1.3 获取元素的占位宽高 content+padding+border
var outer = $("div").outerWidth(true); //outerHeight
console.log(outer); //false:不加margin ? true：加margin
?
//1.4. 获取屏幕
console.log($(window).width()); ?//获取屏幕的可视宽高
-
获取元素位置
-
到body的距离：$().offset(); -
到定位父元素距离：$().position() -
页面的滚动距离：$(window).scrollTop(); //1.offset ： 获取当前元素顶部到body距离
var offset = ?$("p").offset();
console.log(offset); ?//{top: 110, left: 118}
console.log(offset.top); //110
?
?
//2.position： 获取当前元素顶部到定位父元素的距离
var position = $("p").position();
console.log(position); //{top: 0, left: 0}
?
//3.scrollTop：获取页面的滚动距离
$(window).scroll(function(){
? ?console.log($(window).scrollTop());
})
4.jQuery的DOM操作
4.1 原生js
4.2 jQuery
4.2.1 查找
-
找父节点
-
找子节点
-
找兄弟
-
上面的兄弟：$().prev(selector)/prevAll(selector) -
下面的兄弟：$().next(selector)/nextAll(selector) -
所有的兄弟：$().siblings(selector)
4.2.2 创建节点
4.2.3 添加节点
-
追加节点
-
前置：在父元素的头部添加
-
$("父元素").prepend(“子元素”) -
$("子元素”).prependTo(“父元素”) //2.前置添加：父元素的头部
$("input").keydown(function(ev){
if(ev.keyCode == 13){
//2.1 $("父节点").prepend("子节点")
$("ul").prepend("<li>"+$("input").val()+"</li>");
//2.2 $("子节点").prepend("父节点")
$("<li>"+$("input").val()+"</li>").prependTo("ul");
}
});
-
插入：在某个元素之前
-
插入：在某个元素之后
4.2.4 删除节点
-
$().detach():删除元素，返回被删除元素的引用，方便下次使用,保留事件 -
$().remove():删除元素，返回被删除元素的引用，方便下次使用,不保留事件 -
$().empty():清空子元素 $("li").click(function(){alert(this)});
// $().detach():删除元素，返回被删除元素的引用，方便下次使用,保留事件
$("button:eq(0)").click(function(){
var detLi = $("li").detach();
setTimeout(function(){
$("ul").append(detLi);
},500);
})
//$().remove():删除元素，返回被删除元素的引用，方便下次使用,不保留事件
$("button:eq(1)").click(function(){
var detLi = $("li").remove();
setTimeout(function(){
$("ul").append(detLi);
},500);
});
$("ul").empty();
4.2.5 替换节点
//1.替换
//$("被替换的节点").replaceWith("替换的")
$("li:last").replaceWith("<li>下班</li>");
//$("替换的").replaceAll("被替换的")
$("<li>工作</li>").replaceAll("li:eq(4)");
4.2.6 复制节点
//2.复制
$("li:first").click(function(){alert("开心")})
$("li:first").clone(false).appendTo("ul"); //复制标签
$("li:first").clone(true).appendTo("ul"); //复制标签和js中的事件
5.事件
5.1 事件对象
-
原生js： window.event:事件对象，事件触发时浏览器会将事件相关的信息存储的事件对象中 var ev = window.event || eve -
jQ 直接通过事件处理函数的第一个参数传入（不需要兼容） /*原生js：
事件对象：event，事件发生时浏览器将所有和事件相关的信息存储在事件对象中
事件处理函数：事件发生时调用的函数
事件对象的属性：
type：事件类型
target||srcElement : 事件目标
clientX+clientY : 鼠标位置
jQuery的事件对象
事件对象：从事件处理函数的第一个参数传入
*/
$(document).click(function(ev){ //从事件处理函数的第一个参数传入 jq处理过的
console.log(ev); //jQ处理过的事件对象
console.log(ev.originalEvent); //原生事件对象
console.log(ev.type); //事件类型
console.log(ev.target); //事件目标
console.log(ev.clientX); //鼠标位置
});
5.2 DOM事件流
-
DOM事件流：事件发生时的执行过程
-
阻止事件冒泡：
原生：event.stopPropagation ? event.stopPropagation():event.cancelBubble=true;
jQ: ev.stopPropagation(); return false
/*
原生js阻止事件冒泡：
ev.stopPropagation : ev.stopPropagation() ? ev.cancelBubble = true
jQ阻止事件冒泡：
ev.stopPropagation()
*/
$("button").click(function(event){
console.log("button被点击了");
event.stopPropagation();
})
原生：return false event.preventDefault?event.preventDefault():event.returnValue = false;
jQ: return false event.preventDefault();
/*
原生阻止默认行为
return false
ev.preventDefault?ev.preventDefault():ev.returnValue = false
jQ：
return false: 阻止事件默认行为，阻止冒泡
ev.preventDefault()
*/
$("a").click(function(event){
return false;
event.preventDefault();
})
5.3 事件绑定
5.3.1 原生js
-
解决问题：给一个标签添加相同事件，后面的会覆盖前面的
-
标准浏览器：标签.addEventListener(事件类型(不加on),事件处理函数) -
IE浏览器：标签.attachEvent(事件类型(加on),事件处理函数)
if(标签.addEventListene){
标签.addEventListener(事件类型(不加on),事件处理函数)
}else{
标签.attachEvent(事件类型(加on),事件处理函数)
}
if(标签.removeEventListene){
标签.removeEventListene(事件类型(不加on),事件处理函数)
}else{
标签.detachEvent(事件类型(加on),事件处理函数)
}
5.3.2 jQ
-
jQuery事件绑定 jQ添加事件
普通添加：$().事件名()
绑定： $().on(事件类型，事件处理函数) //1.基本绑定,给一个标签添加多个相同事件
$("div").on("click",fun1);
$("div").on("click",fun2);
//2.给一个标签的多个事件添加同样的处理函数
$("div").on("click mouseover",fun1);
//3.批量添加事件
$("div").on({
"click":fun1,
"mouseover":fun2
});
//4.使用命名空间
//开发一个大型网站，使用了大量的第三方框架，命名冲突，就可以使用命名空间
// var index = {};
// index.name = "fd";
// var detail = {};
// detail.name = "teail";
$("div").on("click.login",fun1);
$("div").on("click.jump",fun2);
//5.自定义事件
$("div").on("sleep",fun1);
setTimeout(function(){
$("div").trigger("sleep");
},1000); -
事件代理
-
原理：事件代理：将事件添加给父元素，子元素发生事件的时候，会通过事件冒泡将事件传递给父元素，在事件处理函数中，找到具体的子元素去处理事件 好处：提高效率，节约性能，事件可以发生在未来 -
原生js实现 var oUl = document.getElementsByTagName("ul")[0];
oUl.onclick = function(ev){
var ev = window.event || ev;
var target = ev.target || ev.srcElement; //找到具体的子元素去触发事件
target.style.background = "red";
}
oUl.innerHTML += "<li>1111</li>"; -
jQ实现 //jQ事件绑定：$(父元素).on(事件类型,"子元素",事件处理函数)
$("ul").on("click","li",function(){
console.log(this); //this就是触发事件的子元素
$(this).css("background","red").siblings().css("background","");
});
$("ul").append("<li>222222</li>")
|