Hướng dẫn thay đổi jQuery (). Ở đây chúng ta thảo luận về hoạt động của Phương thức jQuery change () và các Ví dụ của nó cùng với việc Triển khai mã của nó.

Bạn đang xem : jquery khi thay đổi biểu mẫu

jQuery change ()

Giới thiệu về jQuery change ()

Sự kiện thay đổi jQuery diễn ra bất cứ khi nào giá trị của phần tử bị thay đổi. Sự kiện change () được giới hạn ở & lt; input & gt; phần tử & lt; textarea & gt; và & lt; chọn & gt; các yếu tố. Phương thức jQuery change () thêm các phần tử html này vào phương thức xử lý sự kiện và thực thi hàm xử lý sự kiện khi sự kiện thay đổi được kích hoạt. Phương thức change () sẽ được kích hoạt ngay lập tức bất cứ khi nào người dùng thực hiện lựa chọn bằng chuột cho các hộp chọn, hộp kiểm và nút radio. Sự kiện sẽ xảy ra khi trường bỏ lỡ tiêu điểm cho các loại phần tử khác. Đính kèm trình xử lý sự kiện vào sự kiện JavaScript change () hoặc kích hoạt sự kiện trên một phần tử.

Cú pháp:

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

  • Nó tạo ra một sự kiện thay đổi cho phần tử đã chọn như được hiển thị bên dưới:
  $ (selector) .change ()  
  • Nó cung cấp một sự kiện thay đổi cho phần tử đã chọn bằng cách thêm chức năng cho phần tử đó như được hiển thị bên dưới:
  $ (selector) .change (content)  

Phương thức này nhận tham số dưới đây như đã đề cập ở trên:

  • Hàm : Đây là một tham số tùy chọn quy định hàm chạy khi sự kiện thay đổi xảy ra cho các phần tử đã chọn. Giá trị trả về sẽ là một phần tử kèm theo sửa đổi.

Cú pháp có thể được viết như hình dưới đây:

  $ (selector) .change (function () {
// xác định mã của bạn ở đây để thực thi khi sự kiện thay đổi xảy ra.
});  

Các ví dụ để triển khai phương thức jQuery change ()

Chúng tôi thường gặp những trường hợp mà chúng tôi cần những thay đổi được thực hiện đối với hộp văn bản hoặc danh sách thả xuống để được xác định hoặc phát hiện. Phương thức jQuery change () method sẽ cho phép bạn xác định hoặc phát hiện bất kỳ sửa đổi nào trong phần tử đầu vào. Sự kiện thay đổi jQuery chỉ hoạt động khi có sự thay đổi trong giá trị phần tử. Nó chỉ hoạt động trong các trường có dạng Sau khi sự kiện thay đổi xảy ra, phương thức change () sẽ thêm một hàm để chạy với nó.

Dưới đây là các ví dụ về phương thức jQuery change ():

Ví dụ # 1

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; jQuery change () phương thức & lt; / title & gt;
& lt; phong cách & gt;
div {
màu xanh lá cây;
}
& lt; / style & gt;
& lt; script src = "https://code.jquery.com/jquery-1.10.2.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; select id = "mytxt" name = "list" & gt;
& lt; option & gt; Nam Phi & lt; / option & gt;
& lt; option select = "selected" & gt; India & lt; / option & gt;
& lt; option & gt; Úc & lt; / option & gt;
& lt; option & gt; New Zealand & lt; / option & gt;
& lt; option & gt; Srilanka & lt; / option & gt;
& lt; option & gt; England & lt; / option & gt;
& lt; / select & gt;
& lt; div id = "mytxt1" & gt; & lt; / div & gt;
& lt; script & gt;
$ ("select") .change (function () {
document.getElementById ("mytxt1"). innerHTML = "Phần tử được chọn từ danh sách là:" + document.getElementById ("mytxt"). value;
});
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

See also  Bot đánh giá của Google? : làm phiền - google xem xét bot spam

Khi bạn chạy đoạn mã trên, bạn sẽ thấy tên phần tử đã chọn có màu xanh lục. Phần tử sẽ được chọn từ danh sách sử dụng & lt; select & gt; thẻ được liên kết với ‘id’ của phần tử và thẻ đó phải được khớp trong cả & lt; select & gt; thẻ và & lt; script & gt; phần tử.

Đầu ra sẽ được hiển thị như trong hình dưới đây:

jQuery change () Example1

Ví dụ # 2

Mã:

 & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; Phương thức jQuery change () & lt; / title & gt;
& lt; phong cách & gt;
div {
màu xanh lá cây;
}
& lt; / style & gt;
& lt; script src = "https://code.jquery.com/jquery-1.10.2.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; select name = "list" multiple = "nhiều" & gt;
& lt; option & gt; India & lt; / option & gt;
& lt; option selected = "đã chọn" & gt; Nam Phi & lt; / option & gt;
& lt; option & gt; England & lt; / option & gt;
& lt; option select = "selected" & gt; New Zealand & lt; / option & gt;
& lt; option & gt; Srilanka & lt; / option & gt;
& lt; option & gt; Úc & lt; / option & gt;
& lt; / select & gt;
& lt; div & gt; & lt; / div & gt;
& lt; script & gt;
$ ("chọn")
.change (function () {
var str_val = "";
$ ("select option: đã chọn") .each (function () {
str_val + = $ (this) .text () + "";
});
$ ("div") .text (str_val);
})
.biến đổi();
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

jQuery change () Example2

Trong ví dụ trên, nhiều phần tử có thể được chọn từ danh sách.

Ví dụ # 3

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; Phương thức jQuery change () & lt; / title & gt;
& lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" & gt;
& lt; / script & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
$ ("textarea"). change (function () {
alert ("Giá trị của vùng văn bản đã được thay đổi ...");
});
});
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; textarea type = "text" & gt; & lt; / textarea & gt;
& lt; p & gt; Bạn có thể viết một cái gì đó trong vùng văn bản trên và nhấp vào bên ngoài hộp văn bản. & lt; / p & gt;
& lt; p & gt; Khi bạn nhấp vào bên ngoài vùng văn bản, hộp cảnh báo sẽ được hiển thị khi giá trị của vùng văn bản thay đổi ... & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Khi bạn tải đoạn mã trên, kết quả bên dưới sẽ được hiển thị. Kết quả bên dưới hiển thị trước khi giá trị vùng văn bản thay đổi:

Ví dụ về giá trị vùng văn bản 3

Khi bạn nhập văn bản vào vùng văn bản và nhấp vào bên ngoài vùng văn bản. Điều này sẽ thay đổi giá trị của vùng văn bản và do đó nó kích hoạt sự kiện thay đổi. Hộp cảnh báo sẽ được hiển thị trên đầu ra và sau đó có thể đặt chức năng xử lý sự kiện thay đổi.

Ví dụ # 4

Mã:

  & lt;! doctype html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Phương thức jQuery change () & lt; / title & gt;
& lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; select id = "txt" style = "width: auto;" & gt;
& lt; tùy chọn & gt; Vui lòng chọn giá trị ... & lt; / option & gt;
& lt; option value = "red" & gt; Màu đỏ & lt; / option & gt;
& lt; option value = "cam" & gt; Màu cam & lt; / option & gt;
& lt; option value = "green" & gt; Màu xanh lá cây & lt; / option & gt;
& lt; / chọn & gt; & lt; br / & gt;
& lt; p id = "myElement" style = "width: 150px; height: 150px;" & gt; & lt; / p & gt;
& lt; / body & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
$ ('# txt'). change (function () {
switch (this.value) {
trường hợp "đỏ":
trường hợp "màu cam":
trường hợp "xanh lá cây":
$ ('# myElement'). css ('background-color', this.value); phá vỡ;
default: $ ('# myElement'). css ('background-color', '#FFF'); phá vỡ;
}
});
});
& lt; / script & gt;
& lt; / html & gt;  

Đầu ra:

See also  Chính sách quyền riêng tư của Blog - blog của tôi có cần chính sách bảo mật không

jQuery change () Ví dụ 4

Trong kết quả trên, khi bạn chọn tên màu cụ thể từ danh sách, thì màu tương ứng sẽ được hiển thị trong hộp.

jQuery change () Ví dụ 5

Ví dụ # 5

Mã:

 & lt;! doctype html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; Phương thức jQuery change () & lt; / title & gt;
& lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; p & gt; Vui lòng nhập văn bản vào phần tử đầu vào và xem văn bản đã nhập trong cửa sổ cảnh báo ... & lt; / p & gt;
& lt; p & gt; Nhập tên & lt; input type = "text" id = "fname" value = "" / & gt; & lt; / p & gt;
& lt; p & gt; Nhập họ & lt; input type = "text" id = "lname" value = "" / & gt; & lt; / p & gt;
& lt; / body & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
$ ('# fname'). change (function () {
alert ($ (this) .attr ('id') + ':' + $ (this) .val ());
});
$ ('# lname'). change (function () {
alert ($ (this) .attr ('id') + ':' + $ (this) .val ());
});
});
& lt; / script & gt;
& lt; / html & gt;  

Đầu ra:

Khi bạn chạy mã, bạn sẽ nhận được kết quả bên dưới.

jQuery change () Ví dụ 6

Nhập văn bản vào các trường văn bản như được hiển thị bên dưới:

Ví dụ về trường văn bản 7

Nhập văn bản vào các trường nhập và nhấp chuột bên ngoài thành phần đầu vào và văn bản sẽ được hiển thị trong hộp cảnh báo.

Ví dụ về trường nhập liệu

Kết luận

Cho đến nay, chúng tôi đã thấy cách bạn có thể dễ dàng nắm bắt các thay đổi trong các phần tử bằng phương thức jQuery change (). Đây chắc chắn là một phương pháp rất hữu ích, vì nó giúp chúng tôi thu thập các giá trị ở phía khách hàng và tiến hành một số xác nhận cho đến khi gửi thông tin. Phương thức jQuery change () phải thực thi sự kiện thay đổi hoặc kết hợp hàm để triển khai khi thay đổi xảy ra. Sự kiện thay đổi diễn ra trong khi chọn một tùy chọn menu. Sự kiện thay đổi xảy ra khi trường mất tiêu điểm đối với trường văn bản hoặc vùng văn bản sau khi thông tin đã được thay đổi. Phương thức jQuery change () là một phương thức thay thế cho việc sử dụng cả hai phương thức on () hoặc trigger () với sự kiện thay đổi là tham số đầu tiên.

Các bài báo được đề xuất

Đây là hướng dẫn về jQuery change (). Ở đây chúng ta thảo luận về hoạt động của Phương thức jQuery change () và các Ví dụ của nó cùng với việc Triển khai mã của nó. Bạn cũng có thể xem qua các bài viết đề xuất khác của chúng tôi để tìm hiểu thêm –

See also  Khắc phục: Lỗi SSH "không thể giải quyết máy chủ tên máy chủ" - đã không thể tái quyết tên máy chủ

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề jquery về thay đổi biểu mẫu

jQuery Tutorial #4 – DOM Traversal with jQuery

alt

  • Tác giả: LearnCode.academy
  • Ngày đăng: 2014-06-10
  • Đánh giá: 4 ⭐ ( 8772 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lots of jobs require you to be good at DOM traversal. This jQuery tutorial focuses on using jQuery as a DOM traversal library – which is where jQuery really shines.

    The DOM (Document Object Model) is all of the html elements that get generated when your browser reads the html file. DOM traversal is finding elements or groups of elements and manipulating them to change the state of the web page.

    You may read job posts looking for a “DOM traversal ninja”, or someone who’s “skilled at advanced DOM traversal” or “Bends the DOM to your will”…that’s what we’ll be learning in this jQuery tutorial for beginners.

    Lesson 1: jQuery Tutorial for Beginners
    https://www.youtube.com/watch?v=hMxGhHNOkCU

    Lesson 2: Listen to user events and respond with jQuery actions!
    https://www.youtube.com/watch?v=G-POtu9J-m4

    Lesson 3: Clean up the jQuery by putting some data in the HTML
    https://www.youtube.com/watch?v=Cc3K2jDdKTo

    Lesson 5: Build a jQuery Panel Widget
    https://www.youtube.com/watch?v=1nWrIBB_bMA

    -~-~~-~~~-~~-~-
    Also watch: “Responsive Design Tutorial – Tips for making web sites look great on any device”
    https://www.youtube.com/watch?v=fgOO9YUFlGI
    -~-~~-~~~-~~-~-

Sử dụng jQuery, làm cách nào để biết biểu mẫu đã thay đổi hay chưa? [bản sao]

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 5286 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Câu hỏi này đã có câu trả lời ở đây : Làm thế nào…

  • Tác giả: vi.oktemplate.com
  • Đánh giá: 5 ⭐ ( 9521 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Danh sách tất cả các sự kiện (event) trong jQuery

  • Tác giả: webcoban.vn
  • Đánh giá: 5 ⭐ ( 1531 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Danh sách tất cả các sự kiện trong jQuery

Chuyển đổi dữ liệu biểu mẫu sang đối tượng JavaScript với jQuery

  • Tác giả: vie.nickfish2008.com
  • Đánh giá: 4 ⭐ ( 7943 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm cách nào để chuyển đổi tất cả các phần tử của biểu mẫu thành một đối tượng JavaScript? Tôi muốn có một số cách tự động tạo một đối tượng JavaScript từ biểu mẫu của mình mà không cần phải lặp lại từng phần tử. TÔI …

Chuyển đổi dữ liệu biểu mẫu sang đối tượng JavaScript với jQuery

  • Tác giả: vi.waldorf-am-see.org
  • Đánh giá: 5 ⭐ ( 9782 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm cách nào để chuyển đổi tất cả các phần tử của biểu mẫu thành một đối tượng JavaScript? Tôi muốn có một số cách tự động tạo một đối tượng JavaScript từ biểu mẫu của mình mà không cần phải lặp lại từng phần tử. TÔI …

Chuyển đổi dữ liệu biểu mẫu sang đối tượng JavaScript với jQuery

  • Tác giả: vi.lakejesup.org
  • Đánh giá: 3 ⭐ ( 3682 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm cách nào để chuyển đổi tất cả các phần tử của biểu mẫu thành một đối tượng JavaScript? Tôi muốn có một số cách tự động tạo một đối tượng JavaScript từ biểu mẫu của mình mà không cần phải lặp lại từng phần tử. TÔI …

Xem thêm các bài viết khác thuộc chuyên mục: WordPress