jQuery each、节点操作、动画演示、尺寸操作、扩展方法

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

View Code

　　扩展方式二:

　　　　扩展 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>

View Code