一、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; width: 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>
