day051jQuery的操作（2），boostrap的介绍、学习

本节内容:

1、jQuery的each循环
2、jQuery的节点操作
3、jquery命令查看css尺寸
4、jQuery的扩展方法
5、bootstrap的介绍
6、bootstrap的格栅
7、boostrap的样式

一、jQuery相关操作（2）

1、each循环（jquery支持两种循环方式：）

我们知道，

$("p").css("color","red")　
　
是将css操作加到所有的标签上，内部维持一个循环；
但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦

1、each方式一

格式：$.each(obj,fn)

// each循环方式1:($.each(obj,fn)：通过类方法)
let arr=["111", "222","333"];     // 创建数组对象
let obj={"name":"shuying","age":18};  // 创建object对象
for (var i=0;i<arr.length;i++){
    console.log(i);     // for循环的话我们无法直接拿到值
}

$.each(arr,function (i,j) {
    console.log(i,j)   // each循环可以直接拿到索引和值
});

$.each(obj,function (i,j) {
    if (j=="shuying"){
        console.log("真溜")
    }
    console.log(j)  // 直接可以拿到值
});
Js
Copy

2、each方式二

格式：$("").each(fn)

// each循环的方式2：（$("").each()：对象方法）

$("p").each(function () {

    if ($(this).html()=="yuan"){
        // return false   // 类似break，each循环内会识别
        return   // 类似continue
    }
    // console.log(this.innerHTML);  // 这时循环拿到的this是DOM对象，不是jQuery对象
    console.log($(this).html());  // this转换成jQuery对象，使用jQuery方法

    // 给标签文本赋值，$("").html("新内容")
    // $(this).html($(this).html()+"!")
Js
Copy

3、each扩展

关于each循环的跳出循环，和跳出本次循环。

return false   // 类似break，each循环内会识别
return   // 类似continue

代码示例

/*
        function f(){

        for(var i=0;i<4;i++){

            if (i==2){
                return
            }
            console.log(i)
        }

    }
    f();  // 这个例子大家应该不会有问题吧!!!
//-----------------------------------------------------------------------


    li=[11,22,33,44];
    $.each(li,function(i,v){

        if (v==33){
                return ;   //  ===试一试 return false会怎样?
            }
            console.log(v)
    });

//------------------------------------------


    // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行

    //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,
    //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:
         for(var i in obj){

             ret=func(i,obj[i]) ;
             if(ret==false){
                 return ;
             }

         }
    // 这样就很灵活了:
    // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
    // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false


// ---------------------------------------------------------------------
Js
Copy

2、jQuery的文档节点处理

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").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");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()
    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])
Js
Copy

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>  // 本地jQuery文件
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">  // 本地bootstrap.css文件
</head>
<body>

<h3>员工表格</h3>
<div class="container">
    <button class="add_btn btn btn-primary">添加</button>
    <table class="table table-hover table-striped table-bordered">
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>部门</th>
            <th>薪水</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="tbody">
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td>保安</td>
            <td>2000</td>
            <td>
                <button class="del btn btn-danger btn-sm">删除</button>
                <button class="edit btn btn-info btn-sm">编辑</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>23</td>
            <td>保安</td>
            <td>2000</td>
            <td>
                <button class="del btn btn-danger btn-sm">删除</button>
                <button class="edit btn btn-info btn-sm">编辑</button>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="add hide">
        <hr>
        <form id="form">
            <div>
                姓名:
                <input type="text">
            </div>
            <div>
                年龄:
                <input type="text">
            </div>
            <div>
                部门:
                <input type="text">
            </div>

            <div>
                薪水:
                <input type="text">
            </div>
            提交
            <input type="button" value="submit" class="submit_btn edit_btn">
        </form>
    </div>
</div>

<script>
    // 绑定添加的事件按钮
    $(".add_btn").click(function () {
        $(".add").removeClass("hide");  // 显示添加输入框
    });

    // 绑定提交事件
    $(".submit_btn").click(function () {
        // 创建jquery对象（将内容放入tr标签，最后添加到tbody里就行了）
        let $tr=$("<tr>");  // 创建一个tr标签的jQuery对象
        // 使ID自增
        let ID=$(".tbody tr:last td:first").html();  // 拿到最后一个ID值，自增ID
        ID=parseInt(ID)+1;  // 把字符串ID转换成int，加一
        let $td1=$("<td>"+ID+"</td>");  // 创建td标签ID文本的jQuery对象
        $tr.append($td1);   // 将td1对象添加到tr标签内作为子标签

        // 构建动态的td数据（获取到输入的内容（值）,添加到tr标签里，）
        $("#form :text").each(function () {
            let val=$(this).val();  // jquery对象拿值，$("").val()
            let $td_temp=$("<td>"+val+"</td>");  // 创建td标签，把值放入td中
            // console.log($td_temp);
            $tr.append($td_temp);  // 把td标签添加到tr标签中
            // 清空已取值的文本框（输入框）
            // $(this).val(); // 这样是取值
            $(this).val("");  // 这样才是清空，赋值为空

        });
        // 构建删除按钮标签、编辑标签
        $tr.append('<td><button class="del btn btn-danger btn-sm">删除</button>  ' +
            '<button class="edit btn btn-info btn-sm">编辑</button></td>'); // 注意子标签间空格

        // 将tr标签添加到tbody标签中
        // console.log($tr.html())
        $(".tbody").append($tr); // append参数可以使jQuery对象，也可以是标签，字符串
        // $(".tbody").prepend($tr);  // 添加到父节点的第一个，最为大儿子
        // $(".tbody").appendTo($tr);  // 反过来添加，将前面的节点添加到后面节点

        // 提交后，隐藏输入框
        $(".add").addClass("hide");  // 添加一个class属性，hide
    });


    // 删除事件

    // $(".del").click(function () {   // 这样只有原先的有删除事件，新添加的没有，要用事件委派
    //     $(this).parent().parent().remove();
    // })


    // 删除事件委派（保证所有的删除事件都可以触发）
    $("tbody").on("click","button.del",function () {  // 记住类是.类名，不是:类名
        $(this).parent().parent().remove();

        // 删除后动态改变ID
        let ID1=0;
        $("tbody tr").each(function () {
            ID1=ID1+1;
            $(this).children().first().text(ID1); // 重新给ID赋值
        })
    });

    // 编辑事件委派

</script>

</body>
</html>
HTML
Copy

3、动画效果

fe1:显示隐藏

代码示例

<!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>
HTML
Copy

fe2:滑动

代码示例

<!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(){
     $("#slideDown").click(function(){
         $("#content").slideDown(1000);
     });
      $("#slideUp").click(function(){
         $("#content").slideUp(1000);
     });
      $("#slideToggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>

        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            display: none;
            padding: 50px;
        }
    </style>
</head>
<body>

    <div id="slideDown">出现</div>
    <div id="slideUp">隐藏</div>
    <div id="slideToggle">toggle</div>

    <div id="content">helloworld</div>

</body>
</html>
HTML
Copy

fe3:淡入淡出

代码示例

<!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>
HTML
Copy

fe4:回调函数

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>

</head>
<body>
  <button>hide</button>
  <p>helloworld helloworld helloworld</p>



 <script>
   $("button").click(function(){
       $("p").hide(1000,function(){
           alert($(this).html())
       })

   })
    </script>
</body>
</html>
HTML
Copy

4、css操作

1、css位置操作

("").offset([coordinates]) ("").position()
("").scrollTop([val]) ("").scrollLeft([val])

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test1{
             200px;
            height: 200px;
            background-color: wheat;
        }
    </style>
</head>
<body>


<h1>this is offset</h1>
<div class="test1"></div>
<p></p>
<button>change</button>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
    var $offset=$(".test1").offset();
    var lefts=$offset.left;
    var tops=$offset.top;

    $("p").text("Top:"+tops+" Left:"+lefts);
    $("button").click(function(){

        $(".test1").offset({left:200,top:400})
    })
</script>
</html>
HTML
Copy

2、css尺寸操作

("").height([val|fn]) ("").width([val|fn])
("").innerHeight() ("").innerWidth()
("").outerHeight([soptions]) ("").outerWidth([options])

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
    <script>
    $(document).ready(function(){

             console.log($(".c1").height());  // 内边距
             console.log($(".c1").width());  // 内边距
            console.log($(".c1").innerHeight()); // 内边距+padding
            console.log($(".c1").outerHeight())  // 内边距 + padding + border
        });


    </script>
    <style>
        .c1{
             200px;
            height: 200px;
            background-color: skyblue;
            padding: 50px;
            border:30px solid red;
            margin: 20px;
        }
    </style>
</head>
<body>
     <div class="c1"></div>

</body>
</html>
HTML
Copy

5、扩展方法 (插件机制)

1、jQuery.extend(object)

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

2、jQuery.fn.extend(object)

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

二、bootstrap的介绍

Bootstrap，将一些css样式封装好在模块了，我们引入模块后
使用其命名好的class类的类名，就可以直接使用其定义好的css样式。
从而达到快速开发的目的。

详细了解

1、bootstrap的格栅

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <style>
        .item {
            border: 1px solid red;  // 设置边框线，方便查看
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <h3>栅格系统</h3>

    <div class="row">

        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>

    </div>

    <div class="row">
        <div class="col-md-8 item">.col-md-8</div>
        <div class="col-md-4 item">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4 item">.col-md-4</div>
        <div class="col-md-4 item">.col-md-4</div>
        <div class="col-md-4 item">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-8 item">.col-md-6</div>
        <div class="col-md-6 col-sm-4 item">.col-md-6</div>
    </div>

</div>


<hr>

<h4> 列偏移</h4>

 <div class="row ">
     <div class="col-md-3 item col-md-offset-3">Yuan</div>
 </div>

<h4>嵌套列</h4>
<div class="row">
    <div class="col-md-6 item">666</div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6 item">123</div>
             <div class="col-md-6 item">234</div>
        </div>
    </div>
</div>

<h4>列排序</h4>
<div class="row">       <!-- 定义一行  -->
  <div class="col-md-9 item  col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 item col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

<hr>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <button class="btn btn-primary add_btn"> 添加</button>
            <table class="table table-hover table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>部门</th>
                    <th>薪水</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="tbody">
                <tr class="danger">
                    <td>1</td>
                    <td>张三</td>
                    <td>23</td>
                    <td>保安</td>
                    <td>20000</td>
                    <td>
                        <button class="del btn btn-danger btn-sm">删除</button>
                        <button class="edit btn btn-info btn-sm">编辑</button>
                    </td>
                </tr>
                <tr class="success">
                    <td>2</td>
                    <td>李四</td>
                    <td>23</td>
                    <td>保安</td>
                    <td>20000</td>
                    <td>
                        <button class="del btn btn-danger btn-sm">删除</button>
                        <button class="edit btn btn-info btn-sm">编辑</button>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>24</td>
                    <td>销售</td>
                    <td>20000</td>
                    <td>
                        <button class="del btn btn-danger btn-sm">删除</button>
                        <button class="edit btn btn-info btn-sm">编辑</button>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>

    </div>
</div>


</body>
</html>
HTML
Copy

2、boostrap的样式

boostrap中文网站

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yipianshuying/p/10187325.html