Tiếp nối bài viết danh sách các Selector hay dùng trong jQuery, Hoàng An xin chia sẻ nội dung tiếp theo trong chuỗi bài học jQuery. Show
Chúng ta cùng tìm hiểu các hàm xử lý HTML trong jQuery  Hàm add()Hàm add() sẽ thêm các thành phần vào thành phần đã có để thực hiện hành động nào đó. Các thành phần thêm vào có thể là Selector, thẻ HTML, Object hoặc context (this) Trường hợp 1: Hàm add(selector) $('div').add('p').css('border','1px solid red'); Trường hợp này cả thẻ div và thẻ p phải có sẵn, hàm add() sẽ tạo ra object để cùng thực hiện hàm css() Trường hợp 2: Hàm add(html)$('div').add('<p class="test">Test Text</p>').appendTo('body');
Trường hợp này thẻ div có sẵn, còn thẻ p kia được tạo thông qua hàm add() và cùng thực hiện add vào thẻ body Trường hợp 3: Hàm add (Object)$('div').add($('p').css('color','red')).css('border','1px solid red');
Trường hợp này thẻ div và p có sẵn, kết quả thẻ p sẽ có màu đỏ, thẻ div và thẻ p có cùng viền đỏ Trường hợp 4: Hàm add(selector, context)$('div').click(function() {
$('div').add('p',this).addClass('item');
});
Trường hợp này, thẻ p sẽ nằm trong thẻ div. Khi click vào thẻ div thì thẻ p và div sẽ được add class là “item” - Một chuỗi sẽ có các phương thức và thuộc tính, với việc truy cập vào các phương thức và thuộc tính của chuỗi, ta có thể làm được những công việc như: đếm số lượng ký tự của chuỗi, chuyển toàn bộ ký tự của chuỗi về dạng chữ in hoa, chuyển toàn bộ ký tự của chuỗi về dạng chữ thường, trích xuất một chuỗi con bên trong chuỗi, .... - Tuy nhiên, để sử dụng được các phương thức và thuộc tính này thì trước hết bạn cần phải hiểu rõ khái niệm chỉ số của ký tự trong chuỗi - Trong một chuỗi, các ký tự được sắp xếp theo thứ tự vị trí tăng dần từ 1 đến hết, ví dụ: ChuỗiTÀILIỆUHỌCHTMLVị trí1234567891011121314151617- Nhưng khi làm việc với các phương thức thì không dùng đến vị trí mà là dùng đến chỉ số - Dưới đây là một số phương thức và thuộc tính thường được sử dụng nhất trong việc xử lý chuỗi: Phương thức / Thuộc tínhMô tả chức nănglengthTrả về số lượng ký tự của chuỗitoUpperCase()Chuyển toàn bộ ký tự của chuỗi về dạng chữ in hoatoLowerCase()Chuyển toàn bộ ký tự của chuỗi về dạng chữ thườngconcat()Nối các chuỗi lại với nhauindexOf()Trả về chỉ số của chuỗi trùng khớp được tìm thấy đầu tiên(Khi bạn muốn tìm một chuỗi con nào đó trong chuỗi)lastIndexOf()Trả về chỉ số của chuỗi trùng khớp được tìm thấy sau cùng (Khi bạn muốn tìm một chuỗi con nào đó trong chuỗi)charAt()Trích xuất một ký tự trong chuỗisubstring()Trích xuất một chuỗi con trong chuỗisubstr()Trích xuất một chuỗi con trong chuỗireplace()Thay thế một nội dung nào đó trong chuỗi bằng nội dung mới 1) Đếm số lượng ký tự của chuỗi- Để đếm số lượng ký tự của một chuỗi, ta truy cập vào thuộc tính length của chuỗi đó. 2) Chuyển chuỗi về dạng chữ in hoa- Để chuyển toàn bộ ký tự của một chuỗi về dạng chữ in hoa, ta truy cập vào phương thức toUpperCase() của chuỗi đó. 3) Chuyển chuỗi về dạng chữ thường- Để chuyển toàn bộ ký tự của một chuỗi về dạng chữ thường, ta truy cập vào phương thức toLowerCase() của chuỗi đó. 4) Nối các chuỗi lại với nhau- Thay vì sử dụng toán tử + để nối các chuỗi lại với nhau thì ta cũng có thể sử dụng phương thức concat() với cú pháp như sau để nối chuỗi: 5) Xác định chỉ số của một chuỗi con- Ta có thể xác định được chỉ số của một chuỗi con nào đó nằm bên trong chuỗi bằng cách sử dụng phương thức indexOf() hoặc lastIndexOf(). - Cú pháp: - Phương thức indexOf() sẽ trả về chỉ số của chuỗi trùng khớp được tìm thấy đầu tiên. - Phương thức lastIndexOf() sẽ trả về chỉ số của chuỗi trùng khớp được tìm thấy cuối cùng. - Ta có thể thêm vào phương thức indexOf() và lastIndexOf() tham số thứ hai để xác định vị trí bắt đầu tìm kiếm chuỗi. Xác định chỉ số của chuỗi học đầu tiên trong chuỗi Tài liệu học HTML và tài liệu học CSS Phương thức indexOf() và lastIndexOf() sẽ trả về -1 nếu như không tìm thấy chuỗi trùng khớp 6) Trích xuất một ký tự trong chuỗi- Ta có thể trích xuất một ký tự nào đó trong chuỗi bằng cách sử dụng phương thức charAt() với cú pháp như sau: Trích xuất ký tự có chỉ số là 4 trong chuỗi text 7) Trích xuất một chuỗi con- Ta có thể trích xuất được một chuỗi con bên trong chuỗi bằng phương thức substring() hoặc substr() 7.1) Phương thức substring()- Cú pháp:
- Dưới đây là ví dụ minh họa để giúp bạn thấy rõ cách trích xuất chuỗi của phương thức substring() Chỉ số012345678910111213141516ChuỗiTÀILIỆUHỌCHTML7.2) Phương thức substr()- Cú pháp:
- Dưới đây là ví dụ minh họa để giúp bạn thấy rõ cách trích xuất chuỗi của phương thức substr() Chỉ số012345678910111213141516ChuỗiTÀILIỆUHỌCHTML8) Thay thế nội dung trong chuỗi- Để thay thế một nội dung nào đó trong chuỗi bằng nội dung mới, ta sử dụng phương thức replace() với cú pháp như sau: Nội dung ở đây có thể là một ký tự hoặc một chuỗi ký tự. Thay thế chữ "học" thành chữ "tham khảo" 8.1) Thay thế tất cả nội dung trùng khớp- Mặc định, phương thức replace() chỉ thay thế nội dung trùng khớp được tìm thấy đầu tiên. Trong chuỗi text bên dưới có hai chữ "học", tuy nhiên chỉ có chữ học đầu tiên là được đổi thành chữ "tham khảo" - Để thay thế tất cả nội dung trùng khớp thì ta sử dụng biểu thức chính quy sau: 8.2) Thay thế nội dung không phân biệt trường hợp chữ hoa hay thường- Mặc định, phương thức replace() có phân biệt trường hợp chữ in hoa và chữ thường - Để thay thế nội dung trùng khớp mà không phân biệt trường hợp chữ in hoa hay chữ thường thì ta sử dụng biểu thức chính quy sau: - Và để thay thế tất cả nội dung trùng khớp mà không phân biệt trường hợp chữ in hoa hay chữ thường thì ta sử dụng biểu thức chính quy sau: |
