51 jquery 節點操作和 bootstrapt

阿新 • • 發佈：2018-12-29

jquery 和 bootstrapt
1.jquery each 函式

    1.each 迴圈方式一：
        可迴圈物件: var arr =["alex","deng","wang"] 或 var dic ={"name":"deng","age":18}
        $.each(可迴圈物件，function（index,value）{})

    2.each 迴圈方式二：
        $("選擇器").each(function(){})
        例子：

        $("p").each(function () {
            if ($(this).html()=="yuan"){ 

               // return false   // 類似break
                return    // 類似continue
            }
            //console.log(this.innerHTML);    //   this 當前迴圈的dom物件
            console.log($(this).html());   //   this 當前迴圈的dom物件
            //$(this).html($(this).html()+"!")

        })

        3.節點操作
            1.建立節點
                $("<p>") 

            2.新增節點
                $("父節點").append("<p></p>")  //可以直接新增標籤字串
                $("父節點").append($("<p>"))
            3.刪除節點
                $("p").remove()
            4.替換節點
                $("舊節點").replaceWith("新節點")

            5.克隆節點
                $("p").clone()

<! 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
</head>
<body>
    <div class="box">
         <div class="item">
                <button>+</button><input type="text">
        </div>
    </div>


    <script>
        $("button").click(function () {
            var obj = $(this).parent().clone();
            //box最後新增一個孩子，在把button中的按鈕的加號改為—
            $(".box").append(obj).children().last().children(":first").html("-").attr("class","rem");
        });
        $(".box").on("click",".rem",function () {
            $(this).parent().remove();
        })

    </script>


</body>
</html>

克隆節點事例


        4.獲取和設定query（input）物件的value值
            1. $("input").val() //獲取屬性值
            2. $("input").val("值") //設定屬性值 

　　　　　　　　$("td").html("<input type ='text'>")  //可以直接    替換的作用，標籤替換文字      便籤《======》文字
　　　　　　　　 

        5.輪播圖中涉及的知識點：
            1.定時器操作：
                設定定時器 var ID = setIntval(GO_R,1000); //自動輪播的時候開啟定時器
                清除定時器 clearInval(ID)  // 滑鼠懸停在大框上時，清除定時器，移開時又開起定時器
                該處用到 .hover 事件，接兩個函式，第一個函式為滑鼠在其上要進行的操作，第二個函式為滑鼠移開時要進行的操作
                      // 停止定時器 .hover 事件  括號中接兩個函式
                        $(".outer").hover(function(){},function(){})

                        $(".outer").hover(function () {
                            console.log(123);// 暫停定時器
                            clearInterval(ID)
                        },function () {
                            ID=setInterval(GO_R,2000);
                        })

            2.  淡入淡出

                fadeIn(時間) ：淡入
                fadeOut(時間)：淡出
                $("li").stop():表示停下之前的操作，直接跳到當前的操作。主要是防止使用者連續點選後，圖片跳轉不過來

                    $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);//淡入或淡出經過一秒完成
                    $(".num li").eq(index).addClass("active").siblings().removeClass("active")

            3.$(this).index() 獲取索引值，滑鼠放在li小圈上，可以用
                $(".num li").mouseover(function () {
                    console.log($(this).index());
                    $(".img li").eq($(this).index()).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
                    $(".num li").eq($(this).index()).addClass("active").siblings().removeClass("active")
                    index=$(this).index()
                })


二.bootstrapt
    1.注意事項：
        1. bootstrapt 是基於jquery的，所有在匯入bootstrapt 檔案時，需要先匯入jquery
        2.bootstrapt 中文文件地址：https://v3.bootcss.com

    2.Bootstrapt 尺寸控制
        1.寬度的控制
            柵格系統 ：需要用層div,外層設定class ="row" 屬性，內層div 設定class ="col-md-num"屬性，內層div裝input標籤
                <div class="row">
                  <div class="col-xs-2">
                    <input type="text" class="form-control" placeholder=".col-xs-2">
                  </div>
                  <div class="col-xs-3">
                    <input type="text" class="form-control" placeholder=".col-xs-3">
                  </div>
                  <div class="col-xs-4">
                    <input type="text" class="form-control" placeholder=".col-xs-4">
                  </div>
                </div>

        2.高度
        
        3.大小的控制
            -lg , -md ,-sm , -xs
            <input type="button" class="btn btn-danger btn-xs" value="anwo">
            <input type="button" class="btn btn-danger btn-sm" value="anwo">
            <input type="button" class="btn btn-danger btn-md" value="anwo">
            <input type="button" class="btn btn-danger btn-lg" value="anwo">

    3.顏色控制
        文字顏色  text-muted , -primary ,-success ,-info ,-warning, -danger
        情境背景色： bg-primary, bg-success, -info,-warning,-danger
        按鈕色 ：btn-primary  ,  ......

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可選的 Bootstrap 主題檔案（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <style>

        .container .row td{
            padding: 10px;
        }

        #box{

          padding-top:50px;
        }

       .add{
           margin:20px 0;
       }

        td{
            width: 15%;
        }

    </style>
</head>
<body>




<div class="container-fluid">
    <div class="row">

        <div class="col-md-10 col-lg-offset-1" id="box" >
            <div>
                <button type="button" class="btn btn-success add" data-toggle="modal" data-target="#myModal">
                新增員工資訊
                </button>
            </div>

            <table class="table table-striped">
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年齡</th>
                    <th>部門</th>
                    <th>薪水</th>
                    <th>操作</th>
                </tr>

                <tr>
                    <td>1</td>
                    <td>張三</td>
                    <td>23</td>
                    <td>銷售部</td>
                    <td>3000</td>
                    <td>
                        <button class="btn btn-danger btn-sm del">刪除</button>
                        <button class="btn btn-info btn-sm edit">編輯</button>
                        <button class="btn btn-primary btn-sm">檢視</button>
                    </td>
                </tr>

                 <tr class="handle">
                    <td>2</td>
                    <td>李四</td>
                    <td>32</td>
                    <td>保安部</td>
                    <td>5000</td>
                    <td>
                        <button class="btn btn-danger btn-sm del">刪除</button>
                        <button class="btn btn-info btn-sm edit">編輯</button>
                        <button class="btn btn-primary btn-sm">檢視</button>
                    </td>
                </tr>
            </table>
        </div>

    </div>

</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">

          <div class="row">

              <div class="col-md-5 col-lg-offset-3">
                        <form class="add_form edit_form">
                              <div class="form-group">
                                <label for="username">姓名</label>
                                <input type="text" class="form-control" id="username" placeholder="username">
                              </div>
                              <div class="form-group">
                                <label for="age">年齡</label>
                                <input type="text" class="form-control" id="age" placeholder="age">
                              </div>
                              <div class="form-group">
                                <label for="dep">部門</label>
                                <input type="text" id="dep" placeholder="dep" class="form-control">

                              </div>

                               <div class="form-group">
                                <label for="salary">薪水</label>
                                <input type="text" class="form-control" id="salary" placeholder="salary">
                              </div>
                          </form>
              </div>
          </div>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary add_save">Save changes</button>
        <button type="button" class="btn btn-primary edit_save" style="display: none">Save changes</button>

      </div>
    </div>
  </div>
</div>


<script>
         // 提煉出一個建立tr的函式
         function createTr(){
             var $tr=$("<tr>");
             var l=$("tr").length;
             $tr.append("<td>"+l+"</td>")
             $(".add_form :text").each(function(){

                 $tr.append($("<td>").html($(this).val()))
             });


             $handle="<td><button class=\"btn btn-danger btn-sm del\">刪除</button> <button class=\"btn btn-info btn-sm edit\">編輯</button> <button class=\"btn btn-primary btn-sm\">檢視</button></td>"

             $tr.append($handle);

             return $tr
         }

         // 新增按鈕

         $(".add_save").click(function(){



             $("#myModal").modal("hide");

             var $tr=createTr();

             $(".table tbody").append($tr);

             $(".add_form :text").val("");
         });

         // 刪除按鈕
         $("table").on("click",".del",function(){
            $(this).parent().parent().nextAll().children(":first").each(function () {
                $(this).html(parseInt( $(this).html())-1)
            });
            $(this).parent().parent().remove();

         });

         //編輯按鈕

         $("table").on("click",".edit",function(){

             $(this).attr("class","btn btn-warning btn-sm keep").html("儲存");

             console.log($(this).parent().prevAll(":lt(4)"));
             $(this).parent().prevAll(":lt(4)").each(function () {
                 let val=$("<input type='text' class='edit_input'>").val($(this).html())
                 $(this).html(val)
             })



         });

         /*
         $("table").on("click",".edit",function(){
             var $edit_obj=$(this).parent().parent();
             var arr=[];
             $(this).parent().siblings().each(function(){
                 arr.push($(this).text())

             });

             $(".edit_form :text").each(function(i){
                  $(this).val(arr[i])
             });

             $("#myModal").modal("show");


              $(".edit_save").show().prev().hide();
              $(".edit_save").click(function(){
                  $("#myModal").modal("hide");

                  // 建立tr標籤
                 var $tr=createTr();
                 $edit_obj.replaceWith($tr);
                 $(".edit_save").hide().prev().show();
             });

          })

          */
         // 儲存事件
          $("table").on("click",".keep",function(){
              $(this).parent().prevAll(":lt(4)").each(function () {
                 let val=$(this).children("input").val();
                 $(this).html(val)
             });
              $(this).attr("class","btn btn-info btn-sm edit").html("編輯");


          });

          /*
          $("table").on("blur",".edit_input",function(){
              console.log(">>>",$(".edit_input").parent())

              $(this).parent().parent().find(".keep").attr("class","btn btn-info btn-sm edit").html("編輯");
              $(".edit_input").parent().each(function () {
                 let val=$(this).children("input").val();
                 $(this).html(val)
              });

          })

          */



</script>




</body>
</html>

表格的增刪改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            margin: 100px auto;
            width: 70%;


        }

        ul{
            list-style: none;
            background-color: gray;
            height: 40px;
            line-height: 40px;
        }
        ul li{
             display: inline-block;
             width: 80px;
             margin-left: 40px;
        }
        .content{
            margin-top: -15px;
        }
        .content div{
            height: 200px;
            background-color: lightgoldenrodyellow;
        }

        .active{
            background-color: #e4393c;
            color: white;
            text-align: center;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>


<div class="box">
    <ul>
        <li rel="introduce" class="active"> 商品介紹</li>
        <li rel="after-sale"> 售後</li>
        <li rel="comment"> 評價</li>
    </ul>

    <div class="content">
        <div class="introduce">商品介紹....</div>
        <div class="after-sale hide">售後....</div>
        <div class="comment hide">評價....</div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    /*
    $("ul li").click(function () {
          $(this).addClass("active").siblings().removeClass("active");
          let val=$(this).attr("rel");
         $("."+val).removeClass("hide").siblings().addClass("hide");
    });

    */

    // JS版本

    let lis=document.getElementsByTagName("li");
    for (var i=0;i<lis.length;i++){
        lis[i].onclick=function () {
            this.classList.add("active");

             let val=this.getAttribute("rel");
             let rel2=document.getElementsByClassName(val)[0];
             rel2.classList.remove("hide");

              for (var j=0;j<lis.length;j++){
                 if(lis[j]!=this){
                     //  去除樣式
                     lis[j].classList.remove("active");
                     // 隱藏內容
                     let val=lis[j].getAttribute("rel");
                     let rel_sib=document.getElementsByClassName(val)[0];
                     rel_sib.classList.add("hide");

                 }
             };


        }
    }




</script>
</body>
</html>

tab欄 jquery 實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <style>
        .outer{
            margin: 100px auto;
            width: 590px;
            height:470px ;
            border: solid red 1px;
            position: relative;
        }

        .outer ul{
            list-style: none;
        }
        ul.img li{
            position: absolute;
            top: 0;
            left: 0;

        }

        .num {
            width: 100%;
            position: absolute;
            left: 40px;
            bottom: 20px;
            list-style: none;
        ;}
        .num li{
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: gray;
            margin-left: 40px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
        }

        .btn{
            position: absolute;
            top: 50%;
            width: 60px;
            height: 90px;
            background-color: darkgray;
            font-size: 36px;
            text-align: center;
            line-height: 70px;
            margin-top: -45px;
            opacity: 0.4;

        }
         .btn:hover{
             opacity: 1;
         }

        .left{
            left:0;
        }
        .right{
            right:0
        }

        .hide{
            display: none;
        }
        .active{
            background-color: red!important;
        }

    </style>

</head>
<body>


<div class="outer">
      <ul class="img">
          <li><a href=""><img src="img/1.jpg" alt=""></a></li>
          <li class="hide"><a href=""><img src="img/2.jpg" alt=""></a></li>
          <li class="hide"><a href=""><img src="img/3.jpg" alt=""></a></li>
          <li class="hide"><a href=""><img src="img/4.jpg" alt=""></a></li>
          <li class="hide"><a href=""><img src="img/5.jpg" alt=""></a></li>
      </ul>

    <ul class="num">

    </ul>

    <div class="action">
        <div class="left btn"> < </div>
        <div class="right btn"> > </div>
    </div>
</div>


<script>
    //  動態新增num li
    let img_num=$("ul.img li").length;
    let s
    for(var i=0;i<img_num;i++){
        if (i==0){
            s="<li class='active'></li>"
        }else{
            s="<li></li>"
        }
        $(".num").append(s)
    }

    // 自動輪播
    var ID=setInterval(GO_R,2000);
    var index=0;
    function GO_R() {
        if(index==img_num-1){
            index=-1;
        }
        index++;
        $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        $(".num li").eq(index).addClass("active").siblings().removeClass("active")
    }

       function GO_L() {
        if(index==0){
            index=img_num;
        }
        index--;
         $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        $(".num li").eq(index).addClass("active").siblings().removeClass("active")
    }
    // 停止定時器
    
    $(".outer").hover(function () {
        console.log(123)// 暫停定時器
        clearInterval(ID)
    },function () {
        ID=setInterval(GO_R,2000);
    })
    
    //  手動輪播
    
    $(".right").click(function () {
        GO_R()
    });
     $(".left").click(function () {
        GO_L()
    })
    
    // 懸浮顯示
    
    $(".num li").mouseover(function () {
        console.log($(this).index());
        $(".img li").eq($(this).index()).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        $(".num li").eq($(this).index()).addClass("active").siblings().removeClass("active")
        index=$(this).index()
    })



</script>

</body>
</html>

輪播圖定時器 fadeIn/fadeOut

51 jquery 節點操作和 bootstrapt

jquery 和 bootstrapt1.jquery each 函式 1.each 迴圈方式一：可迴圈物件: var arr =["alex","deng","wang"] 或 var dic ={"name":"deng","age":18} $.each(可迴圈物件，

jQuery節點操作

jquery創建節點　　創建節點的流程比較簡單，包括創建節點、添加屬性和添加文本。若應用原生方法，一般地，包括document.createElement()、setAttribute()和innerHTMLvar ele = document.createElement(‘div‘); ele.innerH

jQuery屬性操作和快捷操作

1.屬性操作 <body> <input type="text" class="apple" id="username" value="tom" address="beijing" /> </body>

jQuery教程-DOM節點操作及位置和大小 - 04

1. jQuery建立DOM標籤 1.1 DOM動態建立標籤的方法 DOM時代我們通過document的createElement方法動態建立標籤。建立標籤後，動態的給他新增屬性。例如程式碼： // 動態建立標籤 var domDiv = document.createElment('d

jQuery教程-DOM節點操作及位置和大小

1. jQuery建立DOM標籤 1.1 DOM動態建立標籤的方法 DOM時代我們通過document的createElement方法動態建立標籤。建立標籤後，動態的給他新增屬性。例如程式碼： // 動態建立標籤 var domDiv = document.create

jQuery 之 DOM節點操作及位置和大小

1. jQuery建立DOM標籤 1.1 DOM動態建立標籤的方法 DOM時代我們通過document的createElement方法動態建立標籤。建立標籤後，動態的給他新增屬性。例如程式碼： // 動態建立標籤 var domDiv = document.createElment(

jQuery-DOM操作之復制、替換、包裹節點

code 操作所有喜歡傳遞 pen 傳遞參數含義新元素 1、復制節點 clone() $(function(){ $(‘ul li‘).click(function() { $(this).clone().

JQuery中的Dom操作和事件

表單 lba app 選擇 ava return server pen log （一）JQuery中的事件 1.常規事件，把js事件中的on去掉　　復合事件：hover(function(){},function(){}) ---- 相當於把鼠標移入移出事件和在一起執行

jQuery DOM節點操作

使用 strong cti html ndt pty index all taf 一、創建節點 var box = $(‘<div id =box>節點</div>‘); //創建一個節點 $(‘body‘).appended(box);　　　　　

JQuery---選擇器、DOM節點操作練習

span gif .text ide none tle pre splay body 一、練習一 1、需求效果分析： 2、代碼示例： 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/

jQuery DOM節點操作方法大全

dom jquery 元素操作 append(content | fn)：向每個匹配的元素內部追加內容。參考：http://jquery.cuishifeng.cn/append.html例如：向所有段落中追加一些HTML標記。<p>I would like to say: </

JQuery 中this和$(this)獲取對象、操作DOM對象的元素屬性

class 獲取對象 clas details 對象 query 操作 active html $(‘.button‘).click(function () { var active = $(‘.buttons-tab a‘).children(‘input‘).at

JS節點操作（表格在js中添加行和單元格，並有一個刪除鍵）

sed doc nod lis 姓名 ins func play 移除 1 <div id="div"> 2 <table id="tab"> 3 <tr> 4 <th&g

jQuery基礎——節點操作

() 生成 for 視頻原生循環新的 value clone() 一、html標簽追加 ·　　1、音頻標簽　　　　<audio src="" controls></audio> //src：引入文件 controls：顯示進度條　　　

jQuery設置和獲取以及修改class name值操作

ID 分隔 class post add 添加第一個元素 css屬性翻譯在Web程序開發中、很多時候會用需要修改Html標簽的class名稱、來達到修改標簽樣式的效果、那麽在代碼中一般是怎麽操作的呢、本文將為你詳細講解一下class的使用、在jQuery中可以使用at

jquery——元素節點操作

span jquery asc nbsp insert pen text class strong 插入節點： 1.append（）和appendTo（）：在現存元素的內部，從後面插入元素 <script type="text/javascript">

JQuery元素屬性和樣式操作、以及設置元素和內容

ava 例如 term wid 集合遍歷內容 ssd each 一、JQury元素屬性操作通過JQuery可以對元素本身的屬性進行操作，包括獲取屬性的屬性值，設置屬性的屬性值，並且可以刪除屬性值（attr()和removeAttr()）。二、JQuery樣式操作元素樣式

【轉】JavaScript 節點操作以及DOMDocument屬性和方法

表示位置 clas 句柄 doc elements nta XML sele 最近發現DOMDocument對象很重要,還有XMLHTTP也很重要註意大小寫一定不能弄錯. 屬性: 1Attributes 存儲節點的屬性列表(只讀) 2childNodes 存儲節點的子

jQuery之事件和批量操作、事件委託示例

一、常用事件 click(function(){...}) // 點選時觸發 focus(function(){...}) // 獲得焦點觸發 blur(function(){...}) // 失去焦點觸發 change(function(){...}) // 內容改變後觸發

jQuery初識之選擇器、樣式操作和篩選器(模態框和選單示例)

一、jQuery 1、介紹 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫（或JavaScript框架）。 jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。它封裝J

51 jquery 節點操作和 bootstrapt

相關推薦