03-jQuery操作DOM

原創 Yuanriver 2020-06-16 08:12

文本主要內容

  • 樣式和類操作

  • 節點操作

樣式操作和類操作

作用：設置或獲取元素的樣式屬性值。

樣式操作

1、設置樣式：


    //設置單個樣式：  css(屬性，值);
    $("div").css("background-color","red");

    //設置多個樣式：  css(json);
	 $("div").css({"width":100,"height":100,"background-color":"pink"});

2、獲取樣式：

    //獲取樣式：css(屬性);
    //獲取的時候如果有很多個，那麼獲取jquery對象中的第一個
    alert($("div").css("width"));

舉例如下：

在這裏插入圖片描述

類操作（className）

1、添加類樣式：

	$(selector).addClass("liItem");  //爲指定元素添加類className

注意：此處類名不帶點，所有類操作的方法類名都不帶點。

2、移除類樣式：

	$(selector).removeClass("liItem");  //爲指定元素移除類 className
	$(selector).removeClass();          //不指定參數，表示移除被選中元素的所有類

3、判斷有沒有類樣式：

	$(selector).hasClass("liItem");   //判斷指定元素是否包含類 className

此時，會返回true或false。jquery對象中，只要有一個帶有指定類名的就是true，所有都不帶纔是false。

舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .current {
            background-color: red;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                //添加類
                $("div").addClass("current");
                //判斷類
                alert($("div").hasClass("current"));
            });

            $("button").eq(1).click(function () {
                //刪除類
                $("div").removeClass("current");
                //判斷類
                alert($("div").hasClass("current"));
            });
            //alert($("div").hasClass("current"));//jquery對象中只要有一個帶有類名的就是true，所有都不帶纔是false。
        })
    </script>
</head>
<body>
<button>添加</button>
<button>刪除</button>
<div></div>
<div></div>
<div></div>
<div class="current"></div>
</body>
</html>

4、切換類樣式：

$(selector).toggleClass(“liItem”);    //爲指定元素切換類 className，該元素有類則移除，沒有指定類則添加。

解釋：爲指定元素切換類 className，該元素有類則移除，沒有指定類則添加。

如果採用採用正常的思路實現上面這句話，代碼是：

   if($("div").hasClass("current")){
       //如果有類名，那麼刪除
       $("div").removeClass("current")
   }else{
       //如果沒有類名，那麼添加
       $("div").addClass("current")
   }

現在有了toggleClass()方法，一行代碼即可實現。

舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .current {
            background-color: red;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                //需求：點擊按鈕 ，切換背景
                //切換類（toggleCLass）
                $("div").toggleClass("current");
            });
        })
    </script>
</head>
<body>
<button>切換背景</button>
<div></div>
</body>
</html>

實現的效果：

在這裏插入圖片描述

樣式操作和類操作的比較

  • 操作的樣式非常少，那麼可以通過.css()實現。

  • 操作的樣式很多，建議通過使用類 class 的方式來操作。

  • 如果考慮以後維護方便（把CSS從js中分離出來）的話，推薦使用類的方式來操作。

舉例：addClass+removeClass

代碼實現：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }

    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(window).ready(function () {
            //需求:鼠標放到那個li上，讓該li添加active類，下面的對應的.main的div添加selected
            $(".tab>li").mouseenter(function () {
                //不用判斷，當前的li添加active類，其他的刪除active類
                $(this).addClass("active").siblings("li").removeClass("active");
                //對應索引值的div添加selected類，其他的刪除selected類
                //【重要】根據tab的索引值獲取下方圖片div的索引值
                $(".products>div").eq($(this).index()).addClass("selected").siblings("div").removeClass("selected");
            });
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">國際大牌<span>◆</span></li>
        <li class="tab-item">國妝名牌<span>◆</span></li>
        <li class="tab-item">清潔用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <a href="###"><img src="images/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a>
        </div>
    </div>
</div>

</body>
</html>

上方代碼中，我們注意，tab欄和下方圖片欄的index值，一一對應，這裏用得很巧妙。

效果：
在這裏插入圖片描述

jQuery 的節點操作

動態創建元素

原生 js 有三種動態創建元素的方式。這裏我們學一下 jQuery 動態創建元素。注意，創建的是 jQuery 對象。

方式一：

	var $spanNode1 = $("<span>我是一個span元素</span>");  // 返回的是 jQuery對象

此方法類似於 原生 js 中的document.createElement("標籤名");

方式二：（推薦）

	var node = $("#box").html("<li>我是li</li>");

此方法類似於 原生 js 中的innerHTML。

舉例：

    //方式一：      $("標籤")             :類比於js中的document.createElement("li");
    console.log($("<li class='aaa'>我是li標籤</li>"));

    //方式二：      $("ul").html("");     :類比innerHTML屬性。因爲此屬性，識別標籤。
    $("ul").html("<li>我是html方法穿件出來的li標籤</li>")

添加元素

jQuery 添加元素的方法非常多，最重要的方法是append()。格式如下：

// 方式一：在$(selector)中追加$node
$(selector).append($node);   //參數是 jQuery對象

// 方式二：在$(selector)中追加div元素，
$(selector).append('<div></div>');  //參數是 htmlString

作用：在被選元素內部的最後一個子元素（或內容）後面插入內容（存在或者創建出來的元素都可以）。

通俗的解釋：在盒子裏的最末尾添加元素。

  • 如果是頁面中存在的元素，那調用append()後，會把這個元素放到相應的目標元素裏面去；但是，原來的這個元素，就不存在了。

  • 如果是給多個目標追加元素，那麼方法的內部會複製多份這個元素，然後追加到多個目標裏面去。

舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            $("button").click(function () {
                //創建一個新的jquery對象li
                var jqNewLi = $("<li>我是jquery創建出來的li。用的是append方法添加</li>");

                //append();  在盒子裏的最末尾添加與嚴肅
                $("ul").append(jqNewLi);    //把新創建的 li 塞進已知的 ul 中
                //jqNewLi.appendTo($("ul")); //方式二：把新創建的li塞進ul中。作用同上
            })
        });
    </script>
</head>
<body>
<button>添加li</button>

<ul>
    <li>我是土著li</li>
</ul>

</body>
</html>

效果：

在這裏插入圖片描述

其他的添加元素的方法：

方法2：

	$(selector).appendTo(node);

作用：同append()，只不過是反着寫的。

方法3：

	$(selector).prepend(node);

作用：在元素的第一個子元素前面追加內容或節點。

方法4：

	$(selector).after(node);

作用：在被選元素之後，作爲兄弟元素插入內容或節點。

方法5：

	$(selector).before(node);

作用：在被選元素之前，作爲兄弟元素插入內容或節點。

清空元素

方式一：沒有參數

	$(selector).empty();
	$(selector).html("");

解釋：清空指定元素的所有子元素（光桿司令）。

方式二：

//

	$(selector).remove();

解釋：“自殺” 。把自己以及所有的內部元素從文檔中刪除掉。

複製元素

格式：

	複製的新元素 = $(selector).clone();

解釋：複製$(selector)這個元素。是深層複製。

總結

推薦使用 html("<span></span>") 方法來創建元素或者 html("") 清空元素。

案例：選擇水果

完整版代碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 170px;
            height: 240px;
            font-size: 18px;
            background-color: #a4ff34;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {

            //步驟：
            //1.將左側的子標籤全部移動到右側。
            $("button").eq(0).click(function () {
                //右側標籤.append(左側標籤);
                $("#sel2").append($("#sel1 option"));
            });

            //2.將右側的子標籤全部移動到左側。
            $("button").eq(1).click(function () {
                //左側標籤.append(右側標籤);
                $("#sel1").append($("#sel2 option"));
            });

            //第二步：獲取子元素的時候要注意，獲取的必須是，被選中的元素。
            //技術點：怎麼獲取被選中的子元素呢？？？答案：option:selected;
            //1.將左側被選中的子標籤移動到右側
            $("button").eq(2).click(function () {
                //右側標籤.append(左側標籤);
                $("#sel2").append($("#sel1 option:selected"));
            });

            //2.將右側被選中的子標籤移動到左側
            $("button").eq(3).click(function () {
                //右側標籤.append(左側標籤);
                $("#sel1").append($("#sel2 option:selected"));
            });

        })
    </script>
</head>
<body>
<select id="sel1" size="10" multiple>
    <option value="0">香蕉</option>
    <option value="1">蘋果</option>
    <option value="2">鴨梨</option>
    <option value="3">葡萄</option>
</select>
<button>>>></button>
<button><<<</button>
<button>></button>
<button><</button>
<select id="sel2" size="10" multiple>

</select>
</body>
</html>

效果：
在這裏插入圖片描述

案例：動態添加表格項

代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }

        td {
            font: 14px "微軟雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            // 模擬從後臺拿到的數據
            var data = [{
                name: "博客園",
                url: "http://www.cnblogs.com/smyhvae/",
                type: "程序員的精神家園"
            }, {
                name: "簡書",
                url: "https://www.jianshu.com/u/4d2e6b4bf117",
                type: "寫作平臺"
            }, {
                name: "百度",
                url: "https://www.baidu.com/",
                type: "你就知道"
            }];

            //需求:點擊按鈕，然後生成tr裏面生成三個td.數組元素個數個tr。然後放入tbody中
            //步驟：
            //1.綁定事件
            //2.利用for循環,把數組中的所有數據組合成一個字符串。
            //3.把生成的字符串設置爲html內容添加進tbody中。


            //1.綁定事件
            $("input").click(function () {
                //寫入到click事件中，每次點擊以後把之前的str清空【重要】
                var str = "";
                //2.利用for循環,把數組中的所有數據組合成一個字符串。
                for(var i=0;i<data.length;i++){
                    //如何生成3組？？？
//                    str += "<tr><td>1</td><td>2</td><td>3</td></tr>";
                    //data[i] = 數組中的每一個json
                    //data[i].name = 數組中的每一個json的name屬性值
                    str += "<tr><td>"+data[i].name+"</td><td>"+data[i].url+"</td><td>"+data[i].type+"</td></tr>";
                }

                //3.把生成的字符串設置爲html內容添加進tbody中。
                $("#j_tbData").html(str);
            })
        })
    </script>
</head>

<body>
<input type="button" value="獲取數據" id="j_btnGetData"/>
<table>
    <thead>
    <tr>
        <th>標題</th>
        <th>地址</th>
        <th>說明</th>
    </tr>
    </thead>
    <tbody id="j_tbData">
    <!--<tr>-->
    <!--<td>1</td>-->
    <!--<td>2</td>-->
    <!--<td>3</td>-->
    <!--</tr>-->
    </tbody>
</table>
</body>

</html>

實現的效果：

在這裏插入圖片描述

代碼解釋：每次生成字符串str之前，記得先把之前的str清空，不然每次點擊按鈕，都會繼續添加表格項。

jQuery 設置和獲取屬性

jQuery 無法直接操作節點的屬性和src等，我們需要藉助attr()方法。下面介紹。

屬性操作

（1）設置屬性：

	$(selector).attr("title", "生命壹號");

參數解釋：第一個參數表示：要設置的屬性名稱。第二個參數表示：該屬性名稱對應的值。

（2）獲取屬性：

	$(selector).attr("title");

參數爲：要獲取的屬性的名稱，返回指定屬性對應的值。

總結：兩個參數是給屬性賦值，單個參數是獲取屬性值。

（3）移除屬性：

	$(selector).removeAttr("title");

參數爲：要移除的屬性的名稱。

（4）form表單中的 prop()方法：

針對checked、selected、disabled屬性，要使用 prop()方法，而不是其他的方法。

prop方法通常用來影響DOM元素的動態狀態，而不是改變的HTML屬性。例如：input和button的disabled特性，以及checkbox的checked特性。

總結：細節可以參考：http://api.jquery.com/prop/。

以上四項的代碼演示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .aaa {
            border: 1px solid red;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //獲取元素，綁定屬性
            var jqinp = $("input").eq(0);
            var jqinp2 = $("input:checkbox");
            var jqbtn = $("button");

            jqbtn.click(function () {
                //是綁定到jquery的衣服上，而不是標籤上。所以沒達到效果
//                jqinp.title = 111;
//                console.log(jqinp.title);

                //綁定到標籤上
                jqinp.attr("title", 111);
                console.log(jqinp.attr("title"));

                jqinp.attr("aaa", 111);
                console.log(jqinp.attr("aaa"));

                //兩個參數是給屬性賦值，單個參數是獲取屬性值。
                jqinp.attr("class", "aaa");
                console.log(jqinp.attr("class"));

                jqinp.removeAttr("class");
                console.log(jqinp.attr("class"));

                //form中的特殊屬性，用prop
                jqinp2.prop("checked", true);
//                jqinp2.attr("checked",true);//一次性的。鼠標多點擊幾次，就失效了。

            });
        })
    </script>
</head>
<body>
<button>綁定</button>
<input type="text"/>
<input type="checkbox"/>

</body>
</html>

效果：

在這裏插入圖片描述

案例：表格案例全選反選

完整版代碼：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }

        td {
            font: 14px "微軟雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //需求1：點擊上面的多選按鈕，下面的所有多選按鈕都和上面的一致
            //需求2：點擊下面的多選按鈕，判斷下面的所有多選按鈕都是否全部被選定只有全部被選定上面的才被選定


            //需求1：點擊上面的多選按鈕，下面的所有多選按鈕都和上面的一致
            //步驟：綁定事件，直接讓下面的所有按鈕和上面的按鈕屬性值一模一樣
            $("#j_cbAll").click(function () {
                //直接讓下面的所有按鈕和上面的按鈕屬性值一模一樣
                $("#j_tb input:checkbox").prop("checked", $(this).prop("checked"));
            });

            //需求2：點擊下面的多選按鈕，判斷下面的所有多選按鈕都是否全部被選定只有全部被選定上面的才被選定
            //需求2：點擊下面的多選按鈕，判斷下面的所有多選按鈕都是否全部被選定只有全部被選定上面的才被選定
            $("#j_tb input:checkbox").click(function () {
                //判斷，只有所有都背選定，上面的才被選定
                //技術點：帶有checked屬性的標籤和checkbox個數一樣多的時候
                if ($("#j_tb input:checkbox").length === $("#j_tb input:checked").length) {
                    //只有所有的都有checked屬性，上面的才被選定
                    $("#j_cbAll").prop("checked", true);
                } else {
                    $("#j_cbAll").prop("checked", false);
                }
            });


        })
    </script>
</head>

<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll"/>
            </th>
            <th>課程名稱</th>
            <th>所屬團隊</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>JavaScript</td>
            <td>網頁動作</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>css</td>
            <td>網頁樣式</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>html</td>
            <td>網頁代碼</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>jQuery</td>
            <td>js庫</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

</html>

val()方法和 text()方法

	$(selector).val();

作用：設置或返回 form 表單元素的value值，例如：input、select、textarea 的值。

	$(selector).text();

作用：設置或獲取匹配元素的文本內容。不帶參數表示，會把所有匹配到的元素內容拼接爲一個字符串，不同於其他獲取操作。

	$(selector).text("我是內容");

作用：設置的內容包含html標籤，那麼text()方法會把他們當作純文本內容輸出。

總結：

  • text() 不識別標籤。

  • html() 識別標籤。

舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            //val();   獲取標籤中的value屬性的值。帶有參數是賦值(類比js中的value屬性)
            console.log($("input").val());

            $("input").val("我是value()賦值的input內容");
            console.log($("input").val());

            console.log("-----------------");

            //text();  獲取雙閉合標籤中的文本值。（不識別標籤）(類比js中的innerText)
            console.log($("div").text());
            $("div").text("<li>我是text()賦值的</li>")
            console.log($("div").text());

            console.log("-----------------");

            //html();  獲取雙閉合標籤中的文本值。（識別標籤）(類比js中的innerHTML)
            console.log($("div").html());
            $("div").html("<li>我是html()賦值的</li>");
            console.log($("div").html());
        })
    </script>
</head>
<body>
<input type="text" value="我是input中已存在的 value內容"/>
<div>
    <li>你好</li>
</div>
</body>
</html>

打印結果：
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

web前端小白經常出現“四”個錯誤，關乎你是否能成爲一個優秀的前端工程師

錯誤一轉件所謂“應該能行”的代碼 錯誤：無論是JavaScript，還是在服務器上運行的代碼，開發人員都需要測試並確認它是否可以正常工作，而不是在部署了之後，就認爲它應該就能從一而終地運行。 影響：不經過適當錯誤檢查的網站就是對最終用戶耍

原創 2023-10-10 11:11:44

JavaScript 本地存儲

本地存儲簡介 在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作爲本地存儲來使用的 web 應用程序能夠在用戶瀏覽器中對數據進行本地的存儲 解決了cookie存儲空間不足的問題（cookie的存儲

OliGit 2020-07-08 12:27:32

微信alert去除默認的提示

原文鏈接：https://blog.csdn.net/qq_32307891/article/details/98953960 微信下alert會多顯示個標題欄，會顯示當前網址。用jQuery下的彈出框，在顯示軟鍵盤情況下點不到“確認”按

felix 2020-07-08 09:14:02

標籤點擊事件後的操作

其實，也不知道怎麼去給文章命名，就簡單的記錄下我遇到的問題吧，不多說，上代碼。 <a id="tab1" href="https://www.baidu.com">測試連接</a> <br/>

just_coming_here 2020-07-08 02:54:27

自用省市級聯及定位

省市二級級聯===========================***///初始化省級聯==============================

iteye_3912 2020-07-08 01:01:43

複製剪貼板功能

複製剪貼板功能 html代碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stri

athrunzero 2020-07-07 22:29:39

@RequestBody 參數是對象數組列表，前後臺傳參

後臺 @Data public class OrderMap { private Long id;//訂單標識 private Long pId;//商品標識 private Long sId;//規格id

我爱圆溜溜 2020-07-07 20:22:56

jQuery ajax請求json數據

一、數組類型json數據 html部分： <table id="table" border="1" cellspacing="0" cellpadding="5"> <tr> <th>訂單號</th> <th>購買產品</th

soosgo 2020-07-07 17:29:53

jquery AJAX應用

load(url[,data][,callback])------------->通常用來從WEB服務器上獲取靜態的數據文件 url: string類型 請求HTML頁面的URL地址 data(可選): object 發送至服務器的key

wangbaojun52024029 2020-07-07 16:09:04

JQuery的基礎知識和選擇器

JQUERY官方網站   http://jquery.com/ jquery-1.4.min.js和jquery-1.4.js的區別？ jquery-1.4.min.js--》如果服務器開啓GZip壓縮後，大小將變爲18KB，主要應用於產

wangbaojun52024029 2020-07-07 15:27:16

jq 全選，全不選 ，反選 獲取選取項的值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>反選、全選、全不選</title> <script type="text/javascri

望月归乡 2020-07-07 14:36:15

EasyUI Datagrid 數據網格

網絡示例一： 擴展自 $.fn.panel.defaults。通過 $.fn.datagrid.defaults 重寫默認的 defaults。 數據網格（datagrid）以表格格式顯示數據，併爲選擇、排序、分組和編輯數據提供了豐富的

-水中月- 2020-07-07 14:08:41

如何使用jquery的cloudcoursel

  如何使用Cloudcoursel，整理如下： 建議和slimbox2同時使用，這樣效果比較好   引入JS： <script type="text/javascript" src="http://ajax.googleapis.com

chensyabc 2020-07-07 11:49:53

jQuery使用手冊(1) - 核心部分

全部內容詳見 http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html   翻譯整理：Young.J官方網站：http://jquery.com    jQuery是一款

iteye_5568 2020-07-07 11:21:36

JQuery學習日記（1）

就從jQuery開始吧，js哪些以後補上~ jQuery中的頂級對象就是jQuery，也可以用$表示； jQuery的頁面加載事件（一般是所有html標籤加載成功後，立刻執行js文件，三種寫法，下面寫出最簡單的） $（function()

qqxi 2020-07-07 10:53:21