一、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>
each演示代码
二、节点操作（********）
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>