Cú pháp của jQuery – 02

Cách thức làm việc của jQuery là bạn sẽ dùng các bộ chọn (Selectors) để chọn ra các phần tử HTML mà mình muốn xử lý, sau đó dùng các hàm (được cung cấp bởi thư viện jQuery) để xử lý các phần tử HTML đó.

Cấu trúc cơ bản

Dưới đây là cấu trúc cơ bản của một chức năng jQuery

$(document).ready(function(){
    //Các phương thức jQuery nằm trong này
});

 

Hoặc cú pháp rút gọn

$(function(){
    //Các phương thức jQuery nằm trong này
});

Hai cú pháp trên bạn thích dùng cái nào cũng được. Tuy nhiên, khuyến khích sử dụng cú pháp đầy đủ
(Vì nó sẽ dễ nhìn hơn trong trường hợp các dòng lệnh của bạn quá lùm xùm)

Phương thức jQuery đơn giản

Phương thức được gọi là đơn giản khi bạn chỉ cần chọn ra một phần tử HTML rồi dùng một hành động xử lý nó.

Cú pháp: $(selector).action();

$(selector).action();

Ví dụ:

Đoạn mã dưới đây ta chọn các phần tử HTML có class là hello với hành động hide() để ẩn các phẩn từ đó.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
</head>
<body>
    <div class="hello">Xin Chào thế giới</div>
    <div class="hello">Hello World</div>
    <div>Div 3</div>
    <script>
        $(document).ready(function(){
            $('.hello').hide();
        })
    </script>
</body>
</html>

Phương thức jQuery phức tạp

Phương thức được gọi là thức tạp khi bạn chọn một phần tử HTML rồi dùng hành động xử lý nó, trong hành động đó lại bao gồm các phương thức jQuery khác.

Cú pháp: $(selector).action(function(){     // Các phương thức jQuery khác nằm trong này });

Ví dụ:

Đoạn mã dưới đây ta chọn phần tử HTML là nút button với hành động là click() thì nó sẽ ẩn các phần tử HTML có class là hello rồi hiện thông báo là “Đã ẩn phần tử có class là hello”.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
</head>
<body>
    <div class="hello">Xin chào thế giới</div>
    <div class="hello">Hello World</div>
    <div>Xin chào - Thế giới </div>
    <input type="button" value="Click vào đây">
    <script>
        $("input[type='button']").click(function(){
            $(".hello").hide();
            alert("Đã ẩn phần tử có class là hello");
        });
    </script>
</body>
</html>

Cách chèn mã jQuery vào trang web

Ở Bài 01: Tổng quan về jQuery, tôi có hướng dẫn cách nhúng tập tin jQuery vào trang web. Lưu ý, đó chỉ là cái thư viện giúp bạn viết mã, nếu bạn muốn nhúng các mã vào trang web thì có hai cách tương tự như nhúng mã JavaScript.

Cách 1: Nhúng mã trực tiếp vào trang web

Đặt vào trang web thẻ <script>

Cú pháp: <script>     //Các mã jQuery trong này </script>

Cách 2: Liên kết đến một tập tin .js

Bạn tạo một tập tin .js rồi đặt các đoạn mã vào đó (Trong tập tin .js không được dùng thẻ <script>). Rồi từ trang web liên kết đến tập tin .js bằng cú pháp: <script src=”đường dẫn đến tập tin .js“></script>

Dù là cách 1 hay cách 2, bạn vẫn phải đặt các đoạn mã đó ở phía dưới tập tin thư viên của jQuery (Vì phải load thư viện trước thì các đoạn mã của bạn mới chạy được)

 

BÀI VIẾT LIÊN QUAN

Liên hệ ngay