jQuery入門、jQuery選擇器、jQuery操做

時間  2019-11-07
標籤 jquery 入門 選擇器 欄目 JQuery 简体版
原文   原文鏈接

1、什麼是jQuery及如何使用

1.1 jQuery 簡介

jQuery是一個兼容多瀏覽器的javascript函數庫(把咱們經常使用的一些功能進行了封裝，方便咱們來調用，提升咱們的開發效率。)，核心理念是write less,do more(寫得更少,作得更多)

1.2 jQuery 和 Js 的區別

Javascript是一門編程語言，咱們用它來編寫客戶端瀏覽器腳本。
jQuery是javascript的一個庫（框架），包含多個可重用的函數，用來輔助咱們簡化javascript開發。javascript

圖片描述

注意：jQuery能作的javascipt都能作到，而javascript能作的事情，jQuer不必定能作到。css

2、jQuery 的基本使用

2.1 jQuery 的入口函數

  • 入口方式一
$(document).ready(function() {
     
    });
  • 入口方式二
$(function() {
    
    });

2.2 $(document).ready和window.onload 區別

windows.onload方法是在網頁中全部的元素（包括元素的全部關聯文件）徹底加載到瀏覽器後才執行，即Javascript此時才能夠訪問網頁中的任何元素。


jQuery中的$（document）.ready（）方法註冊的事件處理程序， 在DOM徹底就緒時就能夠被調用。此時，網頁的全部元素對jQuery而言都是能夠訪問的，可是，這並不意味着這些元素關聯的文件都已經下載完畢。

2.3 事件處理程序

  • 事件源

     JS方式：document.getElementById(「id」);html

     jQuery方式：$(「#id」);java

  • 事件

     Js方式 :document.getElementById(「id」).onclickjquery

     jQuery方式: $(「#id」).click編程

事件區別：jQuery 事件不帶on
  • 事件處理程序

     JS的書寫方式：windows

document.getElementById(「id」).onclick = function(){
                  // 語句
              }

      jQuery 的書寫方式：數組

$(「#id」).click(function(){
                // 語句
            });

2.4 jQuery 初探

jQuery 語法是主要爲 HTML元素的選取編制的，能夠對元素執行某些操做。瀏覽器

基本語法是：$(selector).action()app

  • 美圓符號定義 jQuery
  • 選擇器（selector）「查詢」和「查找」 HTML 元素
  • jQuery的action() 執行對元素的操做
<input type="text" id="username" value="請輸入用戶名">
    <!-- 引用外部jQuery -->
    <script src="js/jquery.js"></script>
        <script>
        // 需求 - 獲取id爲username元素,而且打印value屬性值
        // DOM對象
        var username = document.getElementById("username");
        console.log(username.value);
        // jQuery對象
        var username =$("#username")
        console.log(username.val());
  </script>

圖片描述

3、DOM對象與jQuery對象的轉換

3.1 DOM原生對象轉換爲jQuery對象

<input type="text" id="username" value="請輸入用戶名">
    <!-- 引用外部jQuery -->
    <script src="js/jquery.js"></script>
        <script>
        // DOM對象
        var username = document.getElementById("username");
        // DOM對象轉換成 jQueruy對象
        username = $(username);
        // 打印jQueruy對象
        console.log(username);
  </script>

圖片描述

3.2 jQuery對象轉換爲DOM原生對象

有兩種方式

  1. jQuery提供get(index)方法
<div>hello world!</div>
    <!-- 引用外部jQuery -->
    <script src="js/jquery.js"></script>
        <script>
        // jQuery對象轉換成DOM對象
        var myGet = $("div").get(0);
        // 打印DOM對象
        console.log(myGet);
  </script>

圖片描述

  1. jQuery對象是類數組對象($(selector)[index])
<div>hello world!</div>
    <!-- 引用外部jQuery -->
    <script src="js/jquery.js"></script>
        <script>
        // jQuery對象轉換成DOM對象
        var myGet = $("div")[0];
        // 打印DOM對象
        console.log(myGet);
  </script>

4、jQuery 選擇器

4.1 CSS基本選擇器

圖片描述

用法見下面的小例子：

<div id="demo1">Hello</div>
    <div class="demo">Hi</div>
    <h2>Good</h2>
    <div class="demo2">World!</div>
    <div id="demo3">Haha</div>
    <script src='js/jquery.js'></script>
    <script type="text/javascript">
        // 通用選擇器
        $("*").css("background","pink");
        // ID選擇器
        $("#demo1").css({
            "fontSize": 24,
            "color": "skyblue"
        });
        // class 選擇器
        $(".demo").css({
            "fontWeight":"bold",
            "color":"orange",
            "fontSize":36
        });
        // 標籤選擇器
        $("h2").css("color","red");
        // 並集選擇器
        $(".demo2,#demo3").css("fontSize","50px");
    </script>

圖片描述

4.2 層級選擇器

圖片描述

<div class="box"><span>hello world!</span></div>
    <ul style="list-style: none;">
        <li>Hi</li>
        <li>Ha</li>
        <li>God</li>
    </ul>
    <span><p id="demo">I</p><p>LOVE</p><P>YOU</P></span>
    <script src='js/jquery.js'></script>
    <script type="text/javascript">
    // 子元素選擇器
        $(".box>span").css({
            "fontSize":30,
            "color":"red"
        });
    // 後代選擇器
        $("ul li").css({
            "color":"skyblue",
            "fontWeight":"bold"
        });
    // 緊鄰同輩選擇器
    $("li+li").css("background","pink");
    // 相鄰同輩選擇器、
    $("#demo~p").css("color","orange");
    </script>

圖片描述

4.3 表單域選擇器

表單域指網頁中的input textarea select button元素。 jQuery中表單域選擇器專門用於從文檔中選擇表單域

圖片描述

這裏呢，小編就挑幾個重要的選擇器給你們演示一下就好了，其實，掌握前兩種的選擇器就夠用了

<input type="text" name="">
    <button>點擊</button>
    <input type="password" name="">
    <p hidden>Hello World！</p>
    <script src='js/jquery.js'></script>
    <script type="text/javascript">
    // :input
        $(":input").css("background","skyblue");
    // :text
        $(":text").val("你好");
    // :password
        $(":password").val("123");
    // :hide
        $("p:hidden").show();
    </script>

圖片描述

4.4 表單域屬性過濾選擇器

圖片描述

eg：

<button id="btn1">我能夠編輯</button>
   <button id="btn2">我不能編輯</button><br/><br/>
   <input type="text" name="on" value="在我這裏能夠編輯">
   <input type="text" name="off" value="在我這裏不能編輯" disabled>
   <!-- 多選框 -->
   <h2>個人愛好是:</h2>
   <input type="checkbox" name=""  value="">游泳
   <input type="checkbox" name=""  value="">畫畫
   <input type="checkbox" name=""  value="">敲代碼
   <div id="has-div"></div>
   <br/><br/>
   <!-- 下拉列表 -->
   <h2>喜歡的城市：</h2>
    <select>
       <option value="" >上海</option>
       <option value="" >北京</option>
       <option value="" selected="">蘇州</option>
       <option value="">深圳</option>
       <option value="">廣州</option>
       <option value="">杭州</option>
    </select>
    <br/><br/>
    <div id="has-div1"></div>
   <!-- 外部引用jQ -->
    <script src='js/jquery.js'></script>
    <script type="text/javascript">
    // 可以改變的input
    $("#btn1").click(function(){
        $("input[name='on']").val("我是能夠改變的");
        return fasle;
    });
    // 不能改變的input
      $("#btn2").click(function(){
        $("input[name='off']").val("我是不能改變的");
        return fasle;
    });
    // 多選框
    $(":checkbox").click(function(){
        // 選中的個數
        var n = $("input:checked").length;
        $("#has-div").css({
            "width":200,
            "height":200,
            "border":"1px solid red",
            "marginLeft":500

        }).html("您選中"+n+"愛好");
    });
    // 下拉列表
    $("select").click(function(){
        var str = $("select>option:selected").text();
        $("#has-div1").css({
            "width":100,
            "height":100,
            "border":"1px solid red",
            "marginLeft":100
        }).html("<strong>喜歡的城市："+str+"</strong>");
        return false;
    });
    </script>

圖片描述

4.5 僞類過濾選擇器

根據索引值對元素進行篩選，相似於CSS的僞類選擇器，以冒號(:)開頭；而且和另一個選擇器一塊兒使用（header animated除外）

圖片描述

<p>hello</p>
    <p>hi</p>
    <p>good</p>
    <ul style="list-style: none;">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
    <h2>你好</h2>
    <h3>我好</h3>
    <h4>你們好</h4>
    <script src='js/jquery.js'></script>
    <script type="text/javascript">
    // p:first 第一個p元素
    $("p:first").css("color","pink");
    // p:last  最後一個p 元素
    $("p:last").css("color","blue");
    // 全部偶數元素 索引值從零開始
    $("ul>li:even").css("color","yellow");
    // 全部的奇數元素 索引值從零開始
     $("ul>li:odd").css("color","red");
     // :header 選擇器 選取全部的標題元素
     $(":header").css("color","red");
    </script>

圖片描述

4.6 內容過濾選擇器

html文檔中，元素的內容能夠是文本或子元素

圖片描述

<div>he</div>
    <p >hello</p>
    <span>hehe</span>
    <p> <span></span></p>
    <p><span>123我愛你</span></p>
    <script src='js/jquery.js'></script>
    <script type="text/javascript">
    // :contains(string);
    $(":contains('he')").css("color","red");
    // :empty  爲空元素添加本身想要的樣式和內容
    $(":empty").text("nihao");
    // select1:has(select2);
    $("p:has(span)").css("background","black");
    </script>

圖片描述

4.7 簡單屬性過濾選擇器

圖片描述

<div id="box">hello </div>
    <div id="box">world </div>
    <p id="deom">小週末</p>
    <p id="deom">123我愛你</p>
    <input type="text" name="new" value="講真的">
    <input type="button" name="new" value="點擊">
    <div class="old">老男孩</div>
    <div class="old">明人不說暗話</div>
    <script src='js/jquery.js'></script>
    <script type="text/javascript">
        // 查找全部含有屬性id的div元素 div[id]
        $("div[id]").css('color','red');
        // 查找全部含有屬性id的p元素 p[id="demo"]
        $("p[id='deom']").css({
            "fontSize":30,
            "fontWeight":"bold",
            "color":"orange"
        });
        // 查找全部含有屬性 name='name' 的元素
        $("input*[name='new']").css("background",'red');
        // 查找全部含有屬性值爲old(單詞)的元素
        $("div~[class='old']").css("color","blue");
        // 查找全部含有 單詞 b 開始的元素
        $("div[id^='b']").css("background","skyblue");
    </script>

圖片描述

4.8 子元素過濾選擇器

注意：子元素過濾選擇器必須某個選擇器一塊兒使用
圖片描述

<ul style="list-style: none;">
        <li>悟空</li>
        <li>Alone</li>
        <li>滿滿</li>
        <li>黑白情書</li>
    </ul>
    <div id="box"><span>紙短情長</span></div>
    <script src='js/jquery.js'></script>
    <script>
        // :first-child 選擇器選取屬於其父元素的第一個子元素。
        $("li:first-child").css("color","orange");
        // :last-child 選擇器選取屬於其父元素的最後一個子元素。
        $("li:last-child").css("color","red");
        // :nth-child(inde/even/odd) 選取第幾個子元素 從1 開始
        $("li:nth-child(2)").css("background","skyblue");
        // only-child 只有一個孩子的父元素
        $("span:only-child").css("fontSize",50);
    </script>

圖片描述

5、小案例

5.1 實現多標籤頁效果

*{margin:0;padding:0;}
        ul li{float: left; list-style: none; width: 80px;height: 40px;line-height: 40px;cursor: pointer;text-align: center;}
        #container{position:relative;}
        #content1,#content2,#content3{position:absolute;top:40px;left: 0;width:300px;height:200px;padding:30px;}
        #tab1,#content1{background:pink;}
        #tab2,#content2{background:skyblue;}
        #tab3,#content3{background:orange;}
<h2>實現多頁標籤切換</h2><br/><br/>
   <ul id="tab">
       <li id="tab1" value="1">關於我</li>
       <li id="tab2" value="2">我的經歷</li>
       <li id="tab3" value="3">教育背景</li>
   </ul>
   <div id="container">
       <div id="content1" style="z-index: 1;"> 具備較強的用戶研究、市場分析能力，對中國用戶的社會形態、生活方式有豐富的認識和獨特的看法;對色彩、材質感受細膩而敏感，具備色彩、材質、表面處理的研究和趨勢分析能力，對當代中國的色彩具備深刻的理解和本身的觀點;可以準確把握社會文化、流行趨勢，對中國現代社會及傳統文化背景有仔細的研究和深入的理解;對設計工做充滿熱情，有較強的設計能力，設計的產品範圍普遍。</div>
       <div id="content2">
           2017年5月，具備設計愛好的三人在一次電話共同組建三人小組，暢談現現在設計行業發展趨勢，6月結交在一塊兒，共同協商千典品牌設計公司發展流程，7月正是註冊河南千典文化傳播有限公司成立。創定法定表明人,公司經營範圍包括：設計、製做、代理、發佈國內廣告，企業管理諮詢，企業營銷策劃，展覽展現策劃，文化藝術交流活動策劃，平面設計，包裝設計，企業形象策劃等。
       </div>
       <div id="content3">
           Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
       </div>
   </div>
   <script src='js/jquery.js'></script>
   <script>
       $("#tab>li").click(function(event){
           // 當點擊到某個元素上時，改變他的行內樣式，並讓他的兄弟元素沒有他的級別高
           $("#content"+this.value).attr("style", "z-index:1").siblings('div').css("z-index", 0);
       });
   </script>

圖片描述

6、dom的操做、事件

6.1 dom基本操做方法

html()，text()，val()，attr()，removeAttr()

6.1.1 html()

html() 方法返回或設置被選元素的內容 (inner HTML)

<ul style="list-style: none;">
    <li>從前從前</li>
    <li>由於愛因此愛</li>
    <li>兩顆再也不相遇的行星</li>
    <li>戀愛啦</li>
  </ul>
  <script src='js/jquery.js'></script>
  <script>
  // 打印ul下的全部的子元素
    console.log($("ul").html());
  </script>

圖片描述

6.1.2 text()

text()方法是取得或設置全部匹配元素的文本內容

<ul style="list-style: none;">
    <li>從前從前</li>
    <li>由於愛因此愛</li>
    <li>兩顆再也不相遇的行星</li>
    <li>戀愛啦</li>
  </ul>
  <script src='js/jquery.js'></script>
  <script>
  // 打印ul下的全部的子元素的文本
    console.log($("ul").text());
  </script>

圖片描述

6.1.3 text（）方法和html（）方法區別:

text()用來設置dom節點的文本內容時（不識別標籤元素，按照文本顯示）; html()用來設置dom節點內容時（識別標籤元素）。

6.1.4 val()

val()方法是設置或返回表單字段的值

  • $(selector).val(value)

爲標籤元素添加值，若是標籤元素有值，則修改相應的值
eg：

<input type="text" name="" value="hello">
  <script src='js/jquery.js'></script>
  <script>
    $("input[type='text']").val("你好");//input的中的value會改變成「你好」
  </script>
  • $(selector).val()

查找標籤元素的value值

<input type="text" name="" value="hello">
  <script src='js/jquery.js'></script>
  <script>
    console.log($("input[type='text']").val());// hello
  </script>

6.1.5 attr()

設置或返回被選元素的屬性值，會覆蓋原有屬性

  • $(selector).attr(attribute)

查找該屬性所對應的屬性值
eg：

<input type="text" name="name" value="hello">
  <script src='js/jquery.js'></script>
  <script>
    console.log($("input[type='text']").attr('name'));// name
  </script>
  • $(selector).attr(attribute,value) 設置被選元素的屬性和值

能夠爲該元素設置樣式或者增長屬性
eg：

<input type="text" name="name" value="hello">
  <script src='js/jquery.js'></script>
  <script>
  // 改變該表單的屬性
    $("input[type='text']").attr('style','background:red');
  </script>

圖片描述

6.1.6 removeAttr()

從字面意思解釋就是 移除相應屬性

eg：

<div class="box">helloworld</div>
  <script src='js/jquery.js'></script>
  <script>
  // 改變該表單的屬性
    $("div").removeAttr("class");// 把div的樣式移除掉
  </script>
.box{width: 100px;height:100px;background:pink;}

7、jQuery的操做樣式

7.1 $(selector).attr(attribute,value)

小編寄語：attr() 能夠改變元素的現有樣式，看下面的小例子

.one{width: 100px;height:100px;background:pink;}
      .two{width:200px;height:200px;background:orange;}
<div class="one"></div>
  <script src='js/jquery.js'></script>
  <script>
  // 讓div的樣式有 one 改變爲 two
    $("div").attr("class","two");
  </script>

圖片描述

7.2 $(selector).addClass(class)

小編寄語：這個意思就是在原有的基礎上再添加一些其餘的類，看例子：

.one{width: 100px;height:100px;background:pink;}
      /* 添加邊框 */
      .two{border:5px solid red;}
      /* 添加陰影 */
      .three{box-shadow:5px 5px orange;}
<div class="one"></div>
  <script src='js/jquery.js'></script>
  <script>
  // 這裏增長兩個類
    $("div").addClass("two three");
  </script>

圖片描述

7.3 $(selector).removeClass(class)

注意: 移除一個或多個類

  1. 不傳參 - 刪除全部樣式

eg：

<style>
      .one{width: 100px;height:100px;background:pink;}
      /* 添加邊框 */
      .two{border:5px solid red;}
      /* 添加陰影 */
      .three{box-shadow:5px 5px orange;}
    </style>
</head>
<body>
  <div class="one two three">hello world！</div>
  <script src='js/jquery.js'></script>
  <script>
  // 這裏把全部的樣式所有刪除
    $("div").removeClass();
  </script>

圖片描述

  1. 傳參 - 刪除指定樣式

看例子：
eg:

<style>
      .one{width: 100px;height:100px;background:pink;}
      /* 添加邊框 */
      .two{border:5px solid red;}
      /* 添加陰影 */
      .three{box-shadow:5px 5px orange;}
    </style>
</head>
<body>
  <div class="one two three">hello world！</div>
  <script src='js/jquery.js'></script>
  <script>
  // 這裏刪除類爲 two
    $("div").removeClass("two");
  </script>

圖片描述

7.4 $(selector).toggleClass(class)

給你們一個簡單的記法： 有這個東西就刪掉，沒有就加上
這裏就不舉例子了，有心的你能夠把 7.3 7.2 的東西 糅合一下就好了

7.5 $(selector).hasClass(class)

這個比較簡單，意思就是，檢查有沒有這個類，若是有返回true，沒有返回false，這個就不舉例子，大家能夠嘗試一下，這個不常常用.

7.6 css() 方法

設置或返回被選元素的一個或多個樣式屬性.前面小編也常常用這個方法來設置元素的屬性，這裏給出具體詳解.

  1. css("propertyname"); // 獲取樣式的屬性值
  2. css("propertyname", "value"); //設置單個樣式
  3. css({"propertyname":"value","propertyname":"value",...}); // 設置多個樣式

綜合上面三條的例子：

<style>
      .one{width: 100px;height:100px;background:pink;}
    </style>
</head>
<body>
  <div class="one "></div>
  <script src='js/jquery.js'></script>
  <script>
  // 打印div元素的寬度屬性值
   console.log( $("div").css('width'));
   // 爲div元素 增長一個樣式屬性
   $("div").css("border","5px solid red");
   // 爲div元素 增長多個樣式屬性
   $("div").css({
      "boxShadow":"0px 0px  15px  black",
      "borderRadius":"50%"
   });
  </script>

圖片描述

8、jQuery遍歷節點

8.1 parent() 方法

返回被選元素的直接父元素 
<div><span>hello world!</span></div>
  <script src='js/jquery.js'></script>
  <script>
    console.log($("span").parent());
  </script>

圖片描述

8.2 parents() 方法

返回被選元素的全部祖先元素，它一路向上直到文檔的根元素 (<html>) 
<div><span>hello world!</span></div>
  <script src='js/jquery.js'></script>
  <script>
    console.log($("span").parents());
  </script>

圖片描述

8.3 children() 方法

返回被選元素的全部直接子元素 
<div><span>hello world!</span><p>你好，世界！</p></div>
  <script src='js/jquery.js'></script>
  <script>
    console.log($("div").children());
  </script>

圖片描述

8.4 find(elem) 方法

返回被選元素的後代元素，一路向下直到最後一個後代 
<ul>
    <li>hello</li>
    <li>world</li>
    <li>hello world</li>
    <li>你好，世界！</li>
  </ul>
  <script src='js/jquery.js'></script>
  <script>
    console.log($("ul").find('li'));
  </script>

圖片描述

8.5 prev() 方法

返回被選元素的上一個同胞元素 
<ul>
    <li>hello</li>
    <li id="demo">world</li>
    <li>hello world</li>
    <li>你好，世界！</li>
  </ul>
  <script src='js/jquery.js'></script>
  <script>
    console.log($("#demo").prev());
  </script>

圖片描述

8.6 next() 方法

返回被選元素的下一個同胞元素 
<ul>
    <li>hello</li>
    <li id="demo">world</li>
    <li>hello world</li>
    <li>你好，世界！</li>
  </ul>
  <script src='js/jquery.js'></script>
  <script>
    console.log($("#demo").next());
  </script>

圖片描述

8.7 siblings() 方法

返回被選元素的全部同胞元素 
<ul>
    <li>hello</li>
    <li id="demo">world</li>
    <li>hello world</li>
    <li>你好，世界！</li>
  </ul>
  <script src='js/jquery.js'></script>
  <script>
    console.log($("#demo").siblings());
  </script>

圖片描述

9、操做DOM節點

9.1 DOM內部插入(或追加)數據

  • append(content) -向每一個匹配的元素內部追加內容或追加子節點
  • appendTo(content)把全部匹配的元素追加到另外一個指定的元素集合中
  • prepend(content) 在被選元素的開頭插入內容
  • prependTo(content) 把全部匹配的元素前置到指定的元素集合中

以上四種狀況的例子：

<div></div>
 <p>good！</p>
 <script src='js/jquery.js'></script>
 <script>
 // 在div元素裏添加子節點 <span></span>
 $("div").append('<span>hello world！</span>');
 // 把 p 添加到div中
 $("p").appendTo($("div"));
 // 在div開頭插入內容
 $("div").prepend($("<h2>123</h2>"));
 </script>

圖片描述

9.2 jQuery外部插入

  • after(content) 在每一個匹配的元素以後做爲兄弟節點插入內容
  • before(content) 方法在被選元素以前做爲兄弟節點插入內容
  • insertAfter(content) 把元素插入到全部匹配的元素的後面
  • insertBefore(content) 把元素插入到全部匹配的元素的後面

前兩個例子：

<ul>
    <li id="fruit">
      水果
      <ul id="demo1">
          <li>香蕉</li>
          <li>葡萄</li>
      </ul>
    </li>
    <li id="play">運動
        <ul id="demo">
            <li>跑步</li>
            <li>打籃球</li>
        </ul>
    </li>
    <li id="dir">方向
      <ul id="demo2">
          <li>東南</li>
          <li>西北</li>
      </ul>
    </li>
  </ul>
  <div></div>
  <script src='js/jquery.js'></script>
  <script>
  // 在"打籃球"以後插入"西北"節點
 $("#demo>li:last-child").after($("#demo2>li:last-child"));
 // 在"香蕉"以前插入"跑步"節點
 $("#demo1>li:first-child").before($("#demo>li:first-child"));
  </script>

圖片描述
後兩個例子：

<ul>
    <li id="fruit">
      水果
      <ul id="demo">
          <li>香蕉</li>
          <li>葡萄</li>
      </ul>
    </li>
    <li id="play">運動
        <ul id="demo">
            <li>跑步</li>
            <li>打籃球</li>
        </ul>
    </li>
    <li id="dir">方向
      <ul id="demo2">
          <li>東南</li>
          <li>西北</li>
      </ul>
    </li>
  </ul>
  <div></div>
  <script src='js/jquery.js'></script>
  <script>
  // 把符合demo的元素所有插入到demo2的最後一個元素的後面
  $("#demo>li:last-child").insertAfter($("#demo2>li:last-child"));
  // // 把符合demo的元素所有插入到demo2的最後一個元素的前面
  $("#demo>li:last-child").insertBefore($("#demo2>li:last-child"));
  </script>

圖片描述

9.3 jQuery刪除元素

remove() - 刪除被選元素（及其後代）
empty() - 從被選元素中刪除子元素，清空內容 
<ul>
    <li id="fruit">
      水果
      <ul id="demo">
          <li>香蕉</li>
          <li>葡萄</li>
      </ul>
    </li>
    <li id="play">運動
        <ul id="demo">
            <li>跑步</li>
            <li>打籃球</li>
        </ul>
    </li>
    <li id="dir">方向
      <ul id="demo2">
          <li>東南</li>
          <li>西北</li>
      </ul>
    </li>
  </ul>
  <div></div>
  <script src='js/jquery.js'></script>
  <script>
  //$("#fruit").remove();
  $("#fruit").empty();
  </script>

圖片描述
圖片描述

小編分析：乍一看兩張照片沒什麼區別，實際上是不同滴，remove 刪除的比較完全，而empty 刪除的不是很完全，第一張是remove刪除後的結果，而另外一張是empty刪除的結果

9.4 jQuery替換元素

  • replaceWith(content) 將匹配元素替換成指定的HTML或DOM元素
前面的元素是被替換元素,後面的元素是替換元素
  • replaceAll(selector) 將元素替換掉 selector匹配到的元素
前面的元素是替換元素,後面的元素是被替換元素

eg：

<div>Hi</div>
  <span>Good！</span>
  <script src='js/jquery.js'></script>
  <script>
  // 元素div被替換成了 標題標籤 h2
  $("div").replaceWith($("<h2>Hello</h2>"));
  // 把span替換成h3
  $("<h3>你好，世界！</h3>").replaceAll($("span"));
  </script>

圖片描述

9.5 jQuery克隆元素

  • 語法： clone([Even1], [Even2])
  • 解釋一：無參數，只複製元素，不復制該元素的事件處理函數，
  • 用法：$("p").clone().appendTo('.box1');
  • 解釋二： 有一個參數，true，複製元素及其自己的事件處理函數
  • 用法：$("p").clone(true).appendTo('.box1');
  • 解釋三：有兩個參數，true（第二個默認爲true）不只複製元素及其自己的事件處理函數並且會複製子元素
  • 用法：$("p").clone(true, true).appendTo('.box1');

無參的例子：

<div></div><br/><br/><br/>
  <span>Hello</span>
  <script src='js/jquery.js'></script>
  <script>
    $("span").click(function(){alert("我被複制了")});
    $("span").clone().appendTo($("div"));
    //$("span").clone(true).appendTo($("div"));
  </script>

圖片描述

一個參數的例子：

<div></div><br/><br/><br/>
  <span>Hello</span>
  <script src='js/jquery.js'></script>
  <script>
    $("span").click(function(){alert("我被複制了")});
    //$("span").clone().appendTo($("div"));
    $("span").clone(true).appendTo($("div"));
  </script>

圖片描述

兩個參數的例子：

<div></div><br/><br/><br/>
  <p>Hello <span>你是個人小可愛</span></p>
  <script src='js/jquery.js'></script>
  <script>
    $("span").click(function(){alert("小可愛也被複制了")});
    //$("span").clone().appendTo($("div"));
    //$("span").clone(true).appendTo($("div"));
    $("span").clone(true,true).appendTo($("div"));
  </script>

圖片描述

10、小案例

10.1 實現開關門效果

<style type="text/css">
        div {float: left;height: 100px;line-height: 100px;
        }
        #d1, #d3 {background-color: #ccff00;}
        #d2 { cursor: pointer;background-color: #ffcc00;}
    </style>
</head>
<body>
    <div id="d1">樹形列表</div>
    <div id="d2">&lt;&lt;</div>
    <div id="d3">內容的主體</div>
    <script src='js/jquery.js'></script>
    <script>
    $("#d2").click(function(){
        if($("#d1").is(":hidden")){
            // if #d1 的元素隱藏，則讓他顯示，並改變相應的方向，不然相反
            $("#d1").show();
            $("#d2").text("<<");
        }else{
            $("#d1").hide();
            $("#d2").text(">>");
        }
    });
    </script>
</body>

圖片描述

11、總結

確實有點多，不過不要緊，慢慢來！相信本身！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程