Đây là phần 3 của bài viết “Sửa đổi cấu trúc HTML trong jQuery”, bài học hôm nay chúng ta sẽ cùng tìm hiểu cách thức jQuery làm việc với các thuộc tính của HTML và các phần tử Form
1, Làm việc với các thuộc tính của thẻ HTML
.attr()
Phương thức .attr() cho phép chúng ta lấy giá trị của một thuộc tính nào đó của thẻ HTML, đồng thời nó cũng cho phép chúng ta thêm vào các thuộc tính cho một thành phần nào đó cùng với giá trị của nó
a, Lấy giá trị của các thuộc tính
<a class="home" href="index.html">Home</a> |
Đoạn mã sau sẽ lấy được giá trị của thuộc tính href trong thẻ có class là home
var index_link = $("a.home").attr("href"); |
Kết quả biến index_link sẽ có giá trị là index.html chính là giá trị của thuộc tính href
b, Thêm thuộc tính vào các thẻ HTML
Khi có thêm một giá trị phía sau tên thuộc tính trong phương thức .attr(), lúc này attr() sẽ có tác dụng thêm vào một thuộc tính nếu như chưa tồn tại, nếu đã tồn tại thuộc tính này trong thành phần HTML thì giá trị của nó sẽ được thay thế bằng giá trị mới.
$("a.home").attr("title", "Home"); |
Khi đó thẻ a.home sẽ được thêm vào thuộc tính title với giá trị Home như sau:
<a class="home" title="Home" href="index.html">Home</a> |
Xét tiếp đoạn mã sau:
$("a.home").attr("href", "http://www.ewebvn.com"); |
Kết quả thẻ giá trị của thuộc tính href trong thẻ đã bị thay từ index.html sang http://www.ewebvn.com
c, Thêm nhiều giá trị cùng lúc
Ta có thêm nhiều thuộc tính cùng lúc vào một thành phần HTML nào đó như sau:
$("a.home").attr({ |
title: "Home", |
rel: "nofollow" |
}); |
Kết quả trả về như sau:
<a class="home" title="Home" href="index.html" rel="nofollow">Home</a> |
2, Làm việc với các phần tử Form
.val()
Cũng tương tự như phương thức .attr(), phương thức .val() cho phép lấy hoặc gán giá trị cho phần tử form
Giả sử chúng ta có Form sau:
<form name="contact">Họ tên: <input class="name" type="text" name="name" value="Nguyễn văn A" /></form> |
Sử dụng phương thức .val() để lấy giá trị của text box trên như sau:
var fullname = $(".name").val(); |
Kết quả biến fullname có giá trị là Nguyễn Văn A
Gán giá trị cho textbox và textarea
Để gán giá trị cho textbox và textarea ta chỉ việc thêm giá trị vào phương thức .val()
Chúng ta sẽ gán giá trị cho textbox ở ví dụ trên như sau:
$(".name").val("Nguyễn Văn B") |
Chọn phần tử radio button và checkbox
Ví dụ chúng ta có 2 thành phần radio button và một thành phần checkbox như sau:
<input type="radio" name="genders" value="male" /> Male |
<input type="radio" name="genders" value="female" /> Female |
<input type="radio" name="checkbox" value="check /> Female |
Chúng ra sẽ sử dụng jQuery để chọn thành phần radio có giá trị là female và thành phần checkbox có giá trị là check như sau:
$("input").val(["female","check"]); |
Bạn có thể chọn nhiều thành phần radio và checkbox bằng cách thêm vào giá trị tương ứng của các thành phần đó như sau:
$("input").val(["radio1","radio2","checkbox1","checkbox2","…","checkbox có giá trị n"]) |
Chọn phần tử combobox (select)
Trong HTML, combobox được chia thành 2 loại
- Combobox cho phép chọn một phần tử (single)
- Combobox cho phép chọn nhiều phần tử (multiple) khi thành phần
a, Chọn phần tử trong single combobox
<select class="single"> |
<option value="gd">Giáo dục</option> |
<option value="kh">Khoa học</option> |
<option value="ts">Thời sự</option> |
</select> |
Đoạn mã sau cho phép chọn phần tử có giá trị Thời sự trong combobox
$(".single").val("ts"); |
Hoặc
$(".single").val(["ts"]); |
b, Chọn phần tử trong multiple combobox
Ta có multiple combobox như sau:
<select class="multi" multiple="multiple"> |
<option value="gd">Giáo dục</option> |
<option value="kh">Khoa học</option> |
<option value="ts">Thời sự</option> |
</select> |
Đoạn mã sau sẽ chọn phần tử Khoa Học và Thời sự trong Combobox
$(".multi").val(["kh","ts"]); |
Bạn có thể nhận thấy rằng nó giống với cách chọn các thành phần radio button và checkbox
KẾT LUẬN
Qua bài này chúng ta đã nắm được cách thức hoạt động của 2 phương thức .attr() và .val(). Đặc biệt là phương thức .val() được ứng dụng rất nhiều.
