jQuery入門、jQuery選擇器、jQuery操作
# 一、什麼是jQuery及如何使用
## 1.1 jQuery 簡介
jQuery是一個相容多瀏覽器的javascript函式庫(把我們常用的一些功能進行了封裝，方便我們來呼叫，提高我們的開發效率。)，核心理念是write less,do more(寫得更少,做得更多)
## 1.2 jQuery 和 Js 的區別
**Javascript是一門程式語言，我們用它來編寫客戶端瀏覽器指令碼。**
**jQuery是javascript的一個庫（框架），包含多個可重用的函式，用來輔助我們簡化javascript開發。**
注意：jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery 不一定能做到。
# 二、jQuery 的基本使用
## 2.1 jQuery 的入口函式
- 入口方式一
```javascript
$(document).ready(function() {
});
```
- 入口方式二
```javascript
$(function() {
});
```
## 2.2 $(document).ready和window.onload 區別
windows.onload方法是在網頁中所有的元素（包括元素的所有關聯檔案）完全載入到瀏覽器後才執行，即Javascript此時才可以訪問網頁中的任何元素。
jQuery中的$（document）.ready（）方法註冊的事件處理程式， 在DOM完全就緒時就可以被呼叫。此時，網頁的所有元素對jQuery而言都是可以訪問的，但是，這並不意味著這些元素關聯的檔案都已經下載完 畢。
## 2.3 事件處理程式
- 事件源
JS方式：document.getElementById(“id”);
jQuery方式：$(“#id”);
- 事件
Js方式 :document.getElementById(“id”).onclick
jQuery方式: $(“#id”).click
> 事件區別：jQuery 事件不帶on
- 事件處理程式
JS的書寫方式：
```javascript
document.getElementById(“id”).onclick = function(){
// 語句
}
```
jQuery 的書寫方式：
```javascript
$(“#id”).click(function(){
// 語句
});
```
## 2.4 jQuery 初探
jQuery 語法是主要為 HTML元素的選取編制的，可以對元素執行某些操作。
基本語法是：$(selector).action()
- 美元符號定義 jQuery
- 選擇器（selector）“查詢”和“查詢” HTML 元素
- jQuery的action() 執行對元素的操作
```javascript
<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>
```
# 三、DOM物件與jQuery物件的轉換
## 3.1 DOM原生物件轉換為jQuery物件
```javascript
<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)方法
```javascript
<div>hello world!</div>
<!-- 引用外部jQuery -->
<script src="js/jquery.js"></script>
<script>
// jQuery物件轉換成DOM物件
var myGet = $("div").get(0);
// 列印DOM物件
console.log(myGet);
</script>
```
2. jQuery物件是類陣列物件($(selector)[index])
```javascript
<div>hello world!</div>
<!-- 引用外部jQuery -->
<script src="js/jquery.js"></script>
<script>
// jQuery物件轉換成DOM物件
var myGet = $("div")[0];
// 列印DOM物件
console.log(myGet);
</script>
```
# 四、jQuery 選擇器
## 4.1 CSS基本選擇器
用法見下面的小例子：
```javascript
<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 層級選擇器
```javascript
<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>
```
![enter description here][8]
## 4.3 表單域選擇器
表單域指網頁中的input textarea select button元素。 jQuery中表單域選擇器專門用於從文件中選擇表單域
這裡呢，小編就挑幾個重要的選擇器給大家演示一下就行了，其實，掌握前兩種的選擇器就夠用了
```javascript
<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：
```javascript
<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除外）
```javascript
<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文件中，元素的內容可以是文字或子元素
```javascript
<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 簡單屬性過濾選擇器
```javascript
<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 子元素過濾選擇器
注意：子元素過濾選擇器必須某個選擇器一起使用
```javascript
<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.1 實現多標籤頁效果
```css
*{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;}
```
```javascript
<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>
```
# 六、dom的操作、事件
## 6.1 dom基本操作方法
html()，text()，val()，attr()，removeAttr()
### 6.1.1 html()
html() 方法返回或設定被選元素的內容 (inner HTML)
```javascript
<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()方法是取得或設定所有匹配元素的文字內容
```javascript
<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：
```javascript
<input type="text" name="" value="hello">
<script src='js/jquery.js'></script>
<script>
$("input[type='text']").val("你好");//input的中的value會改變成“你好”
</script>
```
- $(selector).val()
**查詢標籤元素的value值**
```javascript
<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：
```javascript
<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：
```javascript
<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：
```javascript
<div class="box">helloworld</div>
<script src='js/jquery.js'></script>
<script>
// 改變該表單的屬性
$("div").removeAttr("class");// 把div的樣式移除掉
</script>
```
```css
.box{width: 100px;height:100px;background:pink;}
```
# 七、jQuery的操作樣式
## 7.1 $(selector).attr(attribute,value)
小編寄語：attr() 可以改變元素的現有樣式，看下面的小例子
```css
.one{width: 100px;height:100px;background:pink;}
.two{width:200px;height:200px;background:orange;}
```
```javascript
<div class="one"></div>
<script src='js/jquery.js'></script>
<script>
// 讓div的樣式有 one 改變為 two
$("div").attr("class","two");
</script>
```
## 7.2 $(selector).addClass(class)
小編寄語：這個意思就是在原有的基礎上再新增一些其他的類，看例子：
```css
.one{width: 100px;height:100px;background:pink;}
/* 新增邊框 */
.two{border:5px solid red;}
/* 新增陰影 */
.three{box-shadow:5px 5px orange;}
```
```javascript
<div class="one"></div>
<script src='js/jquery.js'></script>
<script>
// 這裡增加兩個類
$("div").addClass("two three");
</script>
```
## 7.3 $(selector).removeClass(class)
注意: 移除一個或多個類
1. 不傳參 - 刪除所有樣式
eg：
```javascript
<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>
```
2. 傳參 - 刪除指定樣式
看例子：
eg:
```javascript
<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",...}); // 設定多個樣式
綜合上面三條的例子：
```javascript
<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>
```
# 八、jQuery遍歷節點
## 8.1 parent() 方法
> 返回被選元素的直接父元素
```javascript
<div><span>hello world!</span></div>
<script src='js/jquery.js'></script>
<script>
console.log($("span").parent());
</script>
```
## 8.2 parents() 方法
> 返回被選元素的所有祖先元素，它一路向上直到文件的根元素 (<html>)
```javascript
<div><span>hello world!</span></div>
<script src='js/jquery.js'></script>
<script>
console.log($("span").parents());
</script>
```
## 8.3 children() 方法
> 返回被選元素的所有直接子元素
```javascript
<div><span>hello world!</span><p>你好，世界！</p></div>
<script src='js/jquery.js'></script>
<script>
console.log($("div").children());
</script>
```
## 8.4 find(elem) 方法
> 返回被選元素的後代元素，一路向下直到最後一個後代
```javascript
<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() 方法
> 返回被選元素的上一個同胞元素
```javascript
<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() 方法
> 返回被選元素的下一個同胞元素
```javascript
<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() 方法
> 返回被選元素的所有同胞元素
```javascript
<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>
```
# 九、操作DOM節點
## 9.1 DOM內部插入(或追加)資料
- append(content) -向每個匹配的元素內部追加內容或追加子節點
- appendTo(content)把所有匹配的元素追加到另一個指定的元素集合中
- prepend(content) 在被選元素的開頭插入內容
- prependTo(content) 把所有匹配的元素前置到指定的元素集合中
以上四種情況的例子：
```javascript
<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) 把元素插入到所有匹配的元素的後面
前兩個例子：
```javascript
<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>
```
後兩個例子：
```javascript
<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() - 從被選元素中刪除子元素，清空內容
```javascript
<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：
```javascript
<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');
無參的例子：
```javascript
<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>
```
一個引數的例子：
```javascript
<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>
```
兩個引數的例子：
```javascript
<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.1 實現開關門效果
```javascript
<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"><<</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>
```
# 十一、總結
確實有點多，不過沒關係，慢慢來！相信自己！