Jquery cơ bản - Cú pháp

Trong bài viết trước mình đã giới thiệu một chút cơ bản về Jquery là gì , nó được sử như thế nào và để làm những gì. Hôm nay mình xin đi chi tiết vào cách chúng ta sử dụng chúng. Để sử dụng được Jquery điều đầu tiên chúng ta cần biết là cú pháp trong Jquery. Cú pháp trong Jquery được dùng để lựa chọn và thao tác trên các thành phần HTML

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

Chúng ta hãy cùng phân tích cú pháp này một chút:
$: dấu dollar này được dùng để định nghĩa rằng chúng ta sẽ sử dụng jquery cho đoạn script này.
selector: là thành phần mà chúng ta sẽ truy cập đến như document, p, h1,a..
action: là phương thức mà chúng ta sẽ dùng cho selector bên trên ví dụ như read(),click(),hide()...
Ví dụ:

$(document).ready(function(){
// thực hiện câu lệnh hoặc gọi hàm thao tác với các thành phần HTML ở đây.
});

Đây là câu lệnh mà chúng ta sử dụng nhiều nhất trong jquery. Ý nghĩa của câu lệnh này là khi toàn bộ tài liệu đã load xong thì chúng ta mới tiến hành thao tác cho các thành phần HTML. Điều này sẽ giúp bạn tránh được việc thực thi các câu lệnh jquery trước khi tài liệu được load toàn bộ. Đây là một ví dụ đơn giản mà mình làm để demo cách sử dụng cú pháp trong jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
         
            $("#btnShow").click(function () {
                $("#imgBrave").show(1000);
            });
            $("#btnHide").click(function () {
                $("#imgBrave").hide(1000);
            });
        });
    </script>

Và đây là phần trong body:

<center><button id="btnShow" value="Show Image" type="button">Show Image</button>
    <button id="btnHide" value="Hide Image" type="button">Hide Image</button></center><br />
    <img id="imgBrave" alt="brave logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8-YrGZem9q-qUiEWv1WuW4N_yKherd_WBsAvRYkACJBS3Bcj9oBGeGA31VoBk6z799bA-UaE9WN5dJjgnsSGYFRfrMA5xE029-NI8DnwVq8y9_BYRAa6BMwt8aeYC09IcrpDKB8kWeGY/s1600/fade+image+jquery.jpg" />

Và đây là kết quả demo:

Ví dụ này chỉ mang tính chất demo cho việc sử dụng cú pháp nên mình sẽ không giải thích thêm nhiều vì nó liên quan đến các bài viết sau này nên sau này mình sẽ giải thích rõ hơn.