一、each
1、方式一：$.each(数组或者自定义对象，function（i，j）{console.log(i,j)})
$.each(li,function(i,j){
console.log(i,j)
});
2、方式二：
$('选择器').each(function(){
执行相应的代码;
})
3、each的中的退出循环
return ---->continue
return false --->break
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src='https://cdn.bootcss.com/jquery/3.3.1/jquery.js'></script> <body> <div class='container'> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </div> <script type="text/javascript"> //each方法一 // let li=['张','李','赵','日']; // let arr={'张':'三','李':'四','赵':'五','日':'天'}; // $.each(li,function(i,j){ // console.log(i,j); // }) // $.each(arr,function(i,j){ // console.log(i,j); // }) // //each方法二 // $('li').each(function(){ // console.log($(this).html()); // }) //each的退出循环 $('li').each(function(){ if ($(this).html()==='222') { // return; //相当于continue,跳过当前循环 return false; //相当于break,终止循环 } console.log($(this).html()); }) </script> </body> </html>
二、节点操作（********）
1、创建标签
$("<p>") ;创建p标签:<p></p>
2、添加节点
(1)内部插入
父节点在最后添加一个子节点 : $("父节点").append('子节点') ----->$("p").append("<b>Hello</b>"); 一个子节点插入到父节点的末尾: $("子节点").appendTo('定位到父节点') ----->$("p").appendTo("div"); 父节点下第一个位置添加一个节点 $("父节点").prepend('子节点') ----->$("p").prepend("<b>Hello</b>"); 一个新节点添加的父节点的第一个位置: $("子节点").prependTo('定位到父节点') ----->$("p").prependTo("#foo");
(2)外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
3、删除节点:定位到需要删除的节点后面直接.remove()
$("").empty() ; //清空标签,标签还保留;
$("").remove([expr]);//删除标签,无残留
4、替换节点
$("旧节点").replaceWith('新节点') ----->$("p").replaceWith("<b>Paragraph. </b>");
5、节点克隆（clone）
$("").clone([Even[,deepEven]])
三、动画演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> <script> $(document).ready(function() { $("#hide").click(function () { $("p").hide(1000); }); $("#show").click(function () { $("p").show(1000); }); //用于切换被选元素的 hide() 与 show() 方法。 $("#toggle").click(function () { $("p").toggle(); }); }) </script> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <p>hello</p> <button id="hide">隐藏</button> <button id="show">显示</button> <button id="toggle">切换</button> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> <script> $(document).ready(function(){ $("#in").click(function(){ $("#id1").fadeIn(1000); }); $("#out").click(function(){ $("#id1").fadeOut(1000); }); $("#toggle").click(function(){ $("#id1").fadeToggle(1000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); }); }); </script> </head> <body> <button id="in">fadein</button> <button id="out">fadeout</button> <button id="toggle">fadetoggle</button> <button id="fadeto">fadeto</button> <div id="id1" style="display:none; 80px;height: 80px;background-color: blueviolet"></div> </body> </html>
四、尺寸操作
$("").height([val|fn]) 内容高度
$("").width([val|fn])内容宽度
$("").innerHeight() 内边框的高度
$("").innerWidth() 内边框的宽度
$("").outerHeight([soptions]) 外边框高度(+border);option=ture 表示包括margin
$("").outerWidth([options]) 外边框宽度(+border);option=ture 表示包括margin
五、扩展方法
扩展方式一:
扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。
在jQuery命名空间上增加两个函数:
<script> jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5 </script>
扩展方式二:
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
增加两个插件方法：
<body> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <script src="jquery.min.js"></script> <script> jQuery.fn.extend({ check: function() { $(this).attr("checked",true); }, uncheck: function() { $(this).attr("checked",false); } }); $(":checkbox:gt(0)").check() </script> </body>