Hoạt động của hàm click () jQuery – nhấp vào nút chức năng jquery

Đây là hướng dẫn cách nhấp vào jQuery. Ở đây chúng ta thảo luận về giới thiệu, hoạt động của hàm click () jQuery và các ví dụ tương ứng.

Bạn đang xem : nhấp vào nút chức năng jquery

jQuery nhấp

Giới thiệu về nhấp chuột jQuery

Hàm jQuery click () được sử dụng để xử lý sự kiện nhấp chuột khi sự kiện nhấp chuột xảy ra cho phần tử cụ thể. Hàm jQuery click () là một hàm tích hợp sẵn trong jQuery. Hàm jQuery click () kích hoạt sự kiện nhấp chuột và thực thi hàm click () hoặc hàm đính kèm bất cứ khi nào sự kiện nhấp chuột xảy ra bằng cách nhấp vào một phần tử. Vì vậy, bằng cách này, chúng ta có thể thực hiện một số hành động mỗi khi phần tử nhấp vào. Hàm click () là biểu thức ngắn gọn của các biểu thức “.on (“ click ”, handler)” và “.trigger (“ click ”)”.

Cú pháp của hàm jQuery click ():

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

$ (selector) .click (function);

Thông số:

  • chức năng: Đây là một tham số tùy chọn. Nó chỉ định chức năng đính kèm sẽ được thực thi bất cứ khi nào sự kiện nhấp chuột xảy ra.

Giá trị trả lại:

Chúng không trả lại bất kỳ giá trị nào.

Hoạt động của hàm click () jQuery

  • Hàm jQuery click () chấp nhận một tham số là tên của hàm để chạy khi sự kiện nhấp chuột xảy ra và nó là tùy chọn.
  • Giả sử chúng ta có một phần tử div trong trang HTML có chứa một số nội dung.
  • Chúng tôi cần thực hiện xử lý sự kiện nhấp chuột trên phần tử div khi nhấp chuột, vì vậy, chúng tôi có thể sử dụng hàm click () dưới dạng “$ (“ div ”) .click (function () {alert (” đã nhấp vào “);} ); ” .
  • Giờ đây, khi chúng tôi nhấp vào bất kỳ phần tử div nào trên trang, sự kiện nhấp chuột sẽ được tạo và hiển thị thông báo cảnh báo “đã nhấp vào”.

Ví dụ về jQuery click ()

Dưới đây là các ví dụ về nhấp chuột jQuery:

Ví dụ # 1

Ví dụ về hàm click () của jQuery để xử lý sự kiện nhấp chuột mà không có bất kỳ hàm nào làm tham số.

Mã:

& lt;! doctype html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; script src = "https://code.jquery.com/jquery-3.5.0.js"> & lt; / script & gt;
& lt; title & gt; Đây là ví dụ cho hàm click () jQuery & lt; / title & gt;
& lt; / head & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
$ ("nút") .click ();
});
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h3 & gt; Đây là ví dụ về hàm click (): & lt; / h3 & gt;
& lt;! - nhấp vào phương pháp này - & gt;
& lt; button onclick = "alert ('Nút đã được nhấp');" style = "background-color: red;" & gt; Nhấp để tạo sự kiện nhấp chuột. & lt; / nút & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Xem Thêm  Python String.Replace () - Hàm trong Python để thay thế chuỗi con - python thay thế chuỗi con bằng chuỗi con

jQuery nhấp 1

Khi chúng tôi nhấp vào nút, kết quả đầu ra là:

jQuery nhấp 2

Trong đoạn mã trên, phần tử “nút” được tạo và nó được liên kết với sự kiện nhấp chuột bằng cách sử dụng hàm click () dưới dạng “$ (“ button ”) .click ();” không chấp nhận bất kỳ tham số nào. Thuộc tính “onclick” của nút được sử dụng để hiển thị thông báo cảnh báo khi nút được nhấp, như chúng ta có thể thấy trong đầu ra ở trên.

Ví dụ # 2

Ví dụ về hàm click () của jQuery để xử lý sự kiện nhấp chuột với hàm xử lý làm tham số.

Mã:

& lt;! doctype html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; script src = "https://code.jquery.com/jquery-3.5.0.js" & gt; & lt; / script & gt;
& lt; title & gt; Đây là ví dụ cho hàm click () jQuery & lt; / title & gt;
& lt; phong cách & gt;
p {
display: block;
chiều rộng: 310px;
đệm: 15px;
font-size: 30px;
border: 2px màu xanh lục đặc;
}
& lt; / style & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
$ ("p"). nhấp vào (function () {
$ (cái này) .css ({
"color": "red",
"border": "2px đặc đen"
});
});
});
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h3 & gt; Đây là ví dụ về hàm click (): & lt; / h3 & gt;
& lt; div & gt;
& lt; p & gt; Đây là một đoạn văn và nó là con của phần tử div. & lt; / p & gt;
& lt; span & gt; Đây là một hộp span và nó là con của phần tử div. & lt; / span & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

jQuery nhấp 3

Sau khi chúng tôi nhấp vào phần tử p, kết quả là:

trên phần tử p

Trong đoạn mã trên, có một phần tử “div” có “p” và “span” là các phần tử con. Tiếp theo, hàm click () được sử dụng để liên kết sự kiện nhấp chuột với phần tử “p” bằng hàm xử lý. Vì vậy, khi nội dung phần tử “p” được nhấp vào, sự kiện nhấp chuột sẽ được tạo ra và kiểu phông chữ của nội dung phần tử “p” sẽ thay đổi khi được hàm xử lý áp dụng.

Ví dụ # 3

Ví dụ về hàm click () của jQuery để xử lý sự kiện nhấp chuột cho nhiều phần tử có cùng chức năng xử lý làm tham số.

Mã:

& lt;! doctype html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; script src = "https://code.jquery.com/jquery-3.5.0.js" & gt; & lt; / script & gt;
& lt; title & gt; Đây là ví dụ cho hàm click () jQuery & lt; / title & gt;
& lt; phong cách & gt;
p {
display: block;
chiều rộng: 310px;
đệm: 15px;
font-size: 30px;
border: 2px màu xanh lục đặc;
màu: xanh lam;
}
h3 {
display: block;
chiều rộng: 310px;
đệm: 15px;
font-size: 30px;
border: 2px màu xanh lục đặc;
màu: xanh lá cây;
}
span {
display: block;
chiều rộng: 310px;
đệm: 15px;
font-size: 30px;
border: 2px màu xanh lục đặc;
màu: vàng;
}
& lt; / style & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
$ ("h3, p, span") .click (function () {
$ (cái này) .css ({
"color": "red",
"border": "2px đặc đen"
});
});
});
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h2 & gt; Đây là ví dụ về hàm click (): & lt; / h2 & gt;
& lt; h3 & gt; Đây là một tiêu đề sẽ biến mất. & lt; / h3 & gt;
& lt; p & gt; Đây là một đoạn để mờ dần. & lt; / p & gt;
& lt; span & gt; Đây là một hộp nhịp để mờ dần. & lt; / span & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Xem Thêm  Hoạt động của MySQL AUTO_INCREMENT - tăng tự động trong mysql

jQuery nhấp 5

Khi chúng tôi nhấp vào tiêu đề, kết quả đầu ra là:

trên tiêu đề

Khi chúng tôi nhấp vào đoạn văn, kết quả đầu ra là:

trên đoạn

Sau khi chúng tôi nhấp vào nhịp, kết quả là:

span

Trong đoạn mã trên, có các phần tử “h2”, “h3”, “p” và “span” được sử dụng. Tiếp theo, hàm click () được sử dụng để liên kết sự kiện nhấp chuột với các phần tử “h3”, “p” và “span” bằng hàm xử lý. Vì vậy, khi nội dung phần tử “h3” hoặc “p” hoặc “span” được nhấp vào, sự kiện nhấp chuột sẽ được tạo ra và kiểu phông chữ của các phần tử nội dung phần tử tương ứng sẽ thay đổi khi được hàm xử lý áp dụng.

Kết luận

Hàm jQuery click () là một hàm tích hợp, được sử dụng để liên kết và xử lý sự kiện nhấp chuột khi sự kiện nhấp chuột xảy ra cho phần tử cụ thể.

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

Đây là hướng dẫn về nhấp chuột jQuery. Ở đây chúng ta thảo luận về giới thiệu, hoạt động của hàm click () jQuery và các ví dụ tương ứng. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề nhấp vào nút chức năng jquery

Switch Active Class For Nav Links in jQuery | jQuery Switch Class

alt

  • Tác giả: WebStylePress
  • Ngày đăng: 2020-02-04
  • Đánh giá: 4 ⭐ ( 6435 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In case of single page website navigation, we want to navigate to different sections of page by clicking navigation links. Because its a one page website, we do not want the links to change url in address bar. Also the links should change their state to active on click. In this tutorial we had a website with header navigation to scroll to sections of same page but our links were not indicating the current location of attention. So we are applying a simple method to change classes when a link is being clicked to enhance accessibility of webpage and overall user experience.

    Give this video a LIKE
    SUBSCRIBE to Channel if you haven’t already
    Hit BELL icon to receive updates
    Share your thoughts in comments
    Share our videos on social media platforms
    Give us feedback
    Follow us on social media

    Tell us what should we cover for you.
    Ask programming, web development, software engineering, frameworks related questions.
    Thanks for watching!
    Stay tuned!

    Channel: https://www.youtube.com/webstylepress
    Website: https://www.webstylepress.com
    FaceBook: https://www.facebook.com/webstylepress/
    Twitter: https://twitter.com/webstylepress
    Instagram: https://www.instagram.com/webstylepress
    LinkedIn: https://www.linkedin.com/company/webstylepress
    GitHub: https://github.com/webstylepress
    Discord Chat: https://discord.gg/nHFcBe8
    Special Offers: https://www.webstylepress.com/special-offers/

Cách dễ nhất để vô hiệu hóa / kích hoạt các nút và liên kết (jQuery + Bootstrap) là gì

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 1783 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] nút Các nút đơn giản để vô hiệu hóa disabledlà thuộc tính nút được trình duyệt…

Bắt sự kiện click trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 6432 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sự kiện click trong Javascript, click trong js là sự kiện xảy ra khi nhấp chuột vào một đối tượng HTML nào đó, sự kiện này áp dụng cho mọi thẻ HTML.

nút slideshow mã chức năng

  • Tác giả: vi.uwenku.com
  • Đánh giá: 5 ⭐ ( 9766 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có chiếu rất đơn giản này ở đây: fiddle mã Jquery: $(

Tạo nút back to top bằng jQuery

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

[Tutorial] Viết chức năng thêm, bớt text field nhập liệu với jQuery

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 7724 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi xây dựng những hệ thống, ví dụ như e-learning, bạn có thể sẽ bắt gặp chức năng nhập câu hỏi cho câu trả lời, thêm hoặc bớt số lượng câu hỏi, chọn câu trả lời đúng từ danh sách đã nhập rồi nhấn sub…

Cách tạo và sử dụng Action Button (nút hành động) trong PowerPoint

  • Tác giả: gitiho.com
  • Đánh giá: 4 ⭐ ( 4969 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, hãy tìm hiểu cách sử dụng nút hành động Action Button và vận dụng Action Button để tạo hiệu ứng chuyển slide cực kì độc đáo trong PowerPoint nhé

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Khắc phục: Nút Quay lại Không hoạt động trong Trình duyệt Web? - nút quay lại trên trình duyệt