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
-
location.href :获取或设置当前窗口显示的url地址
-
location.seach：快速获取url中搜索内容
-
三大系列
-
client：可视
-
元素的可视宽高：标签.clientWidth/clientHeight content+padding
-
屏幕的可视宽高：document.documentElement.clientWidth/clientHeight
-
-
offset：占位
-
元素的占位宽高：标签.offsetWidth/offestHeight content+padding+border
-
元素的位置：标签.offsetTop/offsetLeft 当前元素的顶部到定位父元素的距离，如果没有定位父元素到body的距离
-
-
scroll：滚动
-
页面被卷去的高：document.documentElement.scrollTop || document.body.scrollTop
-
-
onload:页面加载，onresize：窗口大小发生变化 onscroll：滚动条滚动
-
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
-
查找：
-
找父节点
-
==直接父节点：子节点.parentNode==
-
定位父节点：子节点.offsetParent
-
-
找子节点
-
==子元素：父节点.children==
-
子节点：父节点.childNodes （文本节点，标签节点，属性节点，注释节点）
-
-
首尾节点
-
首节点：父节点.firstElementChild || 父节点.firstChild
-
尾节点：父节点.lastElementChild || 父节点.lastChild
-
-
兄弟节点
-
上：参考节点.previousElementSibling || 参考节点.previousSibling
-
下：参考节点.nextElementSibling || 参考节点.nextSibling
-
-
-
创建
-
==创建标签节点：document.createElement("标签名")==
-
创建文本节点：document.createTextNode("文本内容")
-
-
添加
-
==追加：父节点.appendChild(子节点)==
-
==插入：父节点.insertBefore(newChild,refChild)==
-
-
删除
-
删除元素本身：元素.remove()
-
==删除子节点：父节点.removeChild(子节点)==
-
-
替换：父节点.replaceChild(newChild,refChild)
-
拷贝：参考节点.cloneNode(true/false)
4.2 jQuery
4.2.1 查找
-
找父节点
-
找直接父节点：$().parent(selector);
-
找父辈：$().parents(selector);
-
-
找子节点
-
找子代：$().children(selector)
-
找后代：$().find("selector")
-
-
找兄弟
-
上面的兄弟：$().prev(selector)/prevAll(selector)
-
下面的兄弟：$().next(selector)/nextAll(selector)
-
所有的兄弟：$().siblings(selector)
-
4.2.2 创建节点
-
语法：$("节点")
//1.创建节点 var $li = $("<li>我是内容</li>"); console.log($li);
4.2.3 添加节点
-
追加节点
-
语法1：$(父节点).append(子节点)
-
语法2：$(子节点).appendTo(父节点)
//2.追加：在父元素末尾添加 //语法1：$(父节点).append(子节点) $("ul").append($li); //添加已经创建好的标签 $("ul").append("<li>iphone13</li>"); //直接添加字符串形式的标签 //语法2：$(子节点).appendTo(父节点) $("<li>华为保时捷</li>").appendTo("ul");
-
-
前置：在父元素的头部添加
-
$("父元素").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"); } });
-
-
插入：在某个元素之前
-
$("参考元素").before(“新元素”)
-
$(“新元素”).insertBefore("参考元素")
//3.插入：在某个元素之前插入 //3.1 $("参考节点").before("新节点"); $("li:eq(3)").before("<li>总结、复习</li>"); //3.2 $("新节点").insertBefore("参考节点") $("<li>总结、复习</li>").insertBefore("li:eq(3)");
-
-
插入：在某个元素之后
-
$("参考元素").after(“新元素”)
-
$(“新元素”).insertAfter("参考元素")
//3.插入：在某个元素之后插入 //3.1 $("参考节点").after("新节点"); $("li:eq(3)").after("<li>总结、复习</li>"); //3.2 $("新节点").insertAfter("参考节点") $("<li>总结、复习</li>").insertAfter("li:eq(3)");
-
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事件流：事件发生时的执行过程
-
事件捕获机制：事件发生的时候先从window开始，依次向子元素传递，一直到目标元素（从外到内传递)
-
事件冒泡机制：目标元素处理事件，将事件依次传递给父元素，如果父元素也有对应类型的事件也会触发，一直传递到window(从里到外传递)
-
-
阻止事件冒泡：
原生：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>")
-
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
