首頁 > 網際網路

運用jquery框架實現節點的替換

2019-12-11 22:11:11

節點的替換就是通過某個事件,使得原來的內容被新的內容替換掉,例如文字的替換。

1

【第一步】開啟Dreamweaver cc  2014軟體,選擇建立html介面,裡面自動生成一些必要程式碼,節省了時間。




2

【第二步】準備好jquery 框架,鍵入<script src="jquery.js"></script>即按照路徑同一層級匯入框架。



3

【第三步】在body標籤內鍵入:

<div>姓名:<span class="span1">麗麗</span></div>

<div>性別:<span class="span2">女</span></div>


4

【第四步】儲存,回到介面摁F12,彈出頁面,觀察文字是:

姓名:麗麗

性別:女


5

【第五步】body標籤內最靠前位置輸入:

<script>

$(function(){

$(".span1").click(

   function(){

   $(".span1").replaceWith("<span title='replaceWith'>張三</span>")

   }

   

   )

$(".span2").click(

   function(){

   $("<span title='replaceAll'>男</span>").replaceAll(this)

   }

   

   )

})

</script>,

儲存,摁F12鍵,彈出頁面並分別單擊文字內容,文字被替換成:

姓名:張三

性別:男




IT145.com E-mail:sddin#qq.com