【jQuery】點擊事件+改變標籤

html、prepend、append、text、after、css、attr、val、data、remove、empty

 發表於 2024-01-20  |  2 分鐘  |  252 個字

【jQuery】點擊事件+改變標籤

html、prepend、append、text、after、css、attr、val、data、remove、empty

 發表於 2024-01-20  |  2 分鐘  |  252 個字

jQuery起手式

1
2
3

$(document).ready(function(){
    //在此處編寫執行的code
});

function(參數){執行的動作}

改變標籤結構

1
2
3
4

<button type="button">按鈕</button>
<ul>
  <li>蘋果</li>
</ul>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

//替換蘋果
$("button").click(function(){
  $("ul").html('<li>香蕉</li>')
});

//加在<標籤>前面
$("button").click(function(){
  $("ul").prepend('<li>香蕉</li>')
});

//加在<標籤>後面
$("button").click(function(){
  $("ul").append('<li>香蕉</li>')
});

改變標籤文字

1
2

<button type="button">按鈕</button>
<p>蘋果</p>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

//取代<標籤>裡的文字
$("button").click(function(){
  $("p").text('香蕉')
});

//直接在<標籤>前面加上文字
$("button").click(function(){
  $("p").before('香蕉')
});

//直接在<標籤>後面加上文字
$("button").click(function(){
  $("p").after('香蕉')
});

改變標籤樣式

1
2

<button type="button">按鈕</button>
<p>蘋果</p>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

//一個樣式寫法
$("button").click(function(){
  $("p").css("backgroundColor","red")
});

//多個樣式寫法
$("button").click(function(){
  $("p").css({"backgroundColor":"red","fontSize":"24px"})
});

//使用.attr()方法
$("button").click(function(){
  $("p").attr("style","background-color:red");
});

改變標籤屬性

  • $(selector).attr(attribute,value)
    • attribute(必填):要抓取的屬性
    • attribute(選填):要給予的值，若不給值則為抓取

1
2

<button type="button">按鈕</button>
<p style="background-color:red">蘋果</p>


1
2
3

$("button").click(function(){
  $("p").attr("style","background-color:blue");
});

抓取a連結的網址

1
2

<button type="button">按鈕</button>
<a href="https://www.google.com.tw/">連結</a>


1
2
3
4

$("button").click(function(){
  let link = $("a").attr("href");
  console.log(link); //https://www.google.com.tw/
});

抓取input裡的值

1
2

<button type="button">按鈕</button>
<input type="text" value="蘋果">


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

//使用.attr()方法
$("button").click(function(){
  let inputValue =  $("input").attr("value");
  console.log(inputValue); //蘋果
});

//使用.val()方法
$("button").click(function(){
  let inputValue =  $("input").val();
  console.log(inputValue); //蘋果
});

抓取標籤data值

1
2

<button type="button">按鈕</button>
<p data-num="3">蘋果</p>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

//使用.data()方法
$("button").click(function(){
  let dataNum = $("p").data("num");
  console.log(dataNum); //3
});

//使用.attr()方法
$("button").click(function(){
  let dataNum = $("p").attr("data-num");
  console.log(dataNum); //3
});

移除標籤

1
2
3
4

<button type="button">按鈕</button>
<ul>
  <li>蘋果</li>
</ul>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

//刪除整個<ul>
$("button").click(function(){
  $("ul").remove();
});

//刪除<ul>裡面的全部
$("button").click(function(){
  $("ul").empty();
});

//使用.html()方法，刪除<ul>裡面的全部
$("button").click(function(){
  $("ul").html();
});

jquery 

其他相關