捕鱼机有解码器吗

書名： 15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）
作者名：劉鑫
本章字數： 554字
更新時間： 2020-11-28 16:21:45

3.3 在頁面中添加元素

表3-1列出了在HTML文檔中添加元素需要用到的jQuery方法。

表3-1 動態添加方法列表

append和appendTo、prepend和prependTo具有相同的描述，不同之處在于內容和選擇器的位置。

【示例3-3】insert_elements.html

        01    <style type="text/css">
        02    body, td, th, input {
        03         font-size: 9pt;
        04    }
        05    </style>
        06    </head>
        07    <body>
        08    <div id="idbtn">
        09   <input type="button" name="idAppend" id="idAppend" value="append方法" />
        10    &nbsp;
        11    <input type="button" name="idappendTo" id="idappendTo" value="appendTo
    方法" />
        12    &nbsp;
        13   <input type="button" name="idpredend" id="idpredend" value="predend方法"
    />
        14    &nbsp;
        15    <input type="button" name="idpredendTo" id="idpredendTo" value="predendTo
    方法" />
        16    &nbsp;
        17   <input type="button" name="idbefore" id="idbefore" value="before方法" />
        18    &nbsp;
        19   <input type="button" name="idafter" id="idafter" value="after方法" />
        20    &nbsp;
        21    <input type="button" name="idinsbefore" id="idinsbefore"
    value="insertBefore方法" />
        22    &nbsp;
        23    <input type="button" name="idinsafter" id="idinsafter" value="insertAfter
    方法" />
        24    </div>
        25   <div id="idcontent">使用不同的按鈕，用不同的方法插入頁面<br/></div>
        26    </body>

代碼中構建了多個不同的按鈕，其中每個按鈕將對應不同的插入方法。為每個按鈕關聯的事件處理語句如下：

        01    <script type="text/javascript">
        02       $(document).ready(function(e) {
        03          $("#idAppend").click(
        04             function(){
        05                //追加內容
        06                $("#idcontent").append("<b>使用append添加元素</b><br/>");
        07             }
        08          );
        09          $("#idappendTo").click(
        10             function(){
        11                //追加內容，語法與append顛倒
        12               $("<b>使用appendto添加元素</b><br/>").appendTo("#idcontent");
        13             }
        14          );
        15          $("#idpredend").click(
        16             function(){
        17                //插入前置內容
        18                $("#idcontent").prepend("<b>使用prepend插入前置內容
    </b><br/>");
        19             }
        20          );
        21          $("#idpredendTo").click(
        22             function(){
        23                //在元素中插入前綴元素，與prepend的操作語法顛倒
        24                $("<b>使用prependTo添加元素
    </b><br/>").prependTo("#idcontent");
        25             }
        26          );
        27          $("#idbefore").click(
        28             function(){
        29                //在指定元素的前面插入內容
        30                $("#idcontent").before("<b>使用before添加元素</b><br/>");
        31             }
        32          );
        33          $("#idafter").click(
        34             function(){
        35                //在指定元素的后面插入內容
        36                $("#idcontent").after("<b>使用after添加元素</b><br/>");
        37             }
        38          );
        39          $("#idinsbefore").click(
        40             function(){
        41             //在指定元素前面插入內容，與before語法顛倒
        42             $("<b>使用insertBefore添加元素</b><br/>").insertBefore("#idcontent");
        43             }
        44          );
        45          $("#idinsafter").click(
        46             function(){
        47             //在指定元素的后面插入內容，與after的語法顛倒
        48             $("<b>使用insertAfter添加元素</b><br/>").insertAfter("#idcontent");
        49             }
        50          );
        51    });
        52    </script>

可以看到，每個按鈕的事件處理代碼中分別調用了不同的插入方法。通過這個示例可以看到各種不同的插入語句的使用方式和語法結構，如append和appendTo、prepend和prependTo就只是選擇器不同。示例的運行效果如圖3.4所示。

圖3.4 不同插入語句的示例效果

官术网_书友最值得收藏!

15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）

3.3 在頁面中添加元素

15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）