iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0

jQuery用簡單的方式,取代原生Javascript的語法。
今天介紹幾個jQuery常用的語法

text()

jQuery提供了text()方法,讀取元素中的純文字

// 建立一個<p>元素
<p id="msg">這是一個段落</p>

// 調用 text() 方法即可取得其中的文字「這是一個段落」
$('#msg').text()

// 如果將一字串參數傳入,則會取代其中的內容
$('#msg').text('這是一個修改後的段落')

html()

由於text()僅提供純文字的操作,但若想要完整讀寫元素的HTML標籤,就要使用html()

// 建立一個粗體文字段落
<p id="msg"><b>這是一個粗體文字</b></p>

// 調用html可回傳完整的標籤內容
$('#msg').html()  //回傳 <b>這是一個粗體文字</b>

// 調用 html(),寫入完整的標籤文字
$('#msg').html('<b>這是調整後的粗體文字</b>')  

val()

val() 方法返回或設定被選元素的值

// 建立一個input
<input type="text" id="user" value="Hello girl" />

// 返回 Hello girl
$('#user').val()

// 設定 value="Kitty"
$('#user').val("Kitty")

attr()

attr()取得符合的元素集合中的第一个元素的屬性的值

// 建立一個 img
<img src="http://xxx.jpg" width="200px">

// 取得圖片寬度 200px
$("img").attr("width");  

// 設定圖片寬度為 500px
$("img").attr("width", "500");  

addClass(), removeClass()

addClass()將特定元素加上class

// 建立一個h1元素
<h1>this is a h1 text</h1>

// 設定 class="h1Element"
$('h1').addClass('h1Element')

// 移除 class
$('h1').removeClass('h1Element')

上一篇
Day18_jQuery-selector&css
下一篇
Day20_jQuery-Event
系列文
前端網頁設計學習旅程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言