Jquey là một trong những thư viện được sử dụng khá là rộng rãi, jquery và javascript nó có thể được hiểu là có cùng một chức năng như nhau vì jquery là thư viện của javascript mà.

Cách viết của jquery đơn giản hơn rất nhiều so với javascript chính vì thế nó được khá nhiều người dùng.

Với một người có kiến thức cóp nhặt như mình thì định nghĩa và hiểu jquery như trên có thể chưa đầy đủ, mong các pro bỏ qua.

Hôm này mình sẽ giới thiệu các bạn một số hàm cơ bản đơn giản mà ai cũng có thể tự làm được để giúp cho website của mình được hiển thị theo ý mình.

Lưu ý trước khi thêm jquery vào wordpress

Khi thêm jquery vào wordpress, thường sẽ gặp 1 số lỗi liên quan đến việc khai báo. Mình thường sẽ copy các lỗi đó và tra google để tìm cách fix, các bạn nên sử dụng đoạn code sau trước mỗi lần muốn thêm jquery.

<script>
(function($){
/*Hành động mà bạn muốn thêm*/
})(jQuery);
</script>

Thường thì các đoạn script khi thêm vào sẽ nằm ở footer, nên các bạn có thể sử dụng hook wp_footer nhé.

<?php
function addjs_pttuan410(){;?>
    <script>
(function($){
    /*Hành động mà bạn muốn thêm*/
})(jQuery);
</script>
<?php }
add_action('wp_footer','addjs_pttuan410');

Thêm class vào một phần tử

Việc này khá là đơn giản với hàm addClass() của jquery. cách sử dụng sẽ như sau, các bạn chỉ cần thêm đoạn code dưới. Dưới đây là ví dụ mình thêm 1 class thanhtuan vào thẻ div với class donate.

<script>
(function($){
    $('.donate').addClass('thanhtuan')
})(jQuery);
</script>

Và kết quả sẽ như thế này.

Sau khi addClass vào thẻ div donate kết quả sẽ như thế này

Đề mà đúng không ^^.

Remove class ra khỏi một phần tử

Sau khi thêm class thì bạn muốn remove class đi thì sẽ làm như thế nào.

Dưới đây mình sẽ remove class thanhtuan ra khỏi class donate nhé.

<script>
(function($){
    $('.donate').removeClass('thanhtuan')
})(jQuery);
</script>

Và kết quả như sau

Mình đã remove class thanhtuan ra khỏi class donate

Bạn muốn ẩn hiện một class hoặc id nào đó

Để có thể ẩn hiện (Ở đây là thêm display none cho class, id) thì các bạn có thể sử dụng hàm show() và hide(). Cách sử dụng sẽ như sau, ví dụ dưới đây mình sẽ thêm display none và class donate nhé.

<script>
(function($){
    $('.donate').hide();
})(jQuery);
</script>

Và kết quả sẽ như sau:

Thêm display none vào thẻ div donate

Muốn xóa display none và thêm display block thì bạn dùng show() nhé.

<script>
(function($){
    $('.donate').show();
})(jQuery);
</script>

Kết quả sau khi thêm đoạn code trên.

Thêm display block bằng jquery

Sự kiện click trong jquery

Để có thể sử dụng sự kiện click trong jquery, các bạn có thể dùng đoạn script sau. Ở đây mình sẽ đưa ra ví dụ khi click vào nút với class là donate thì sẽ add thêm class 50k vào class guiban nhé.

<script>
(function($){
    $(".donate").click(function(){
    $('.guiban').addClass('50k');
    });
})(jQuery);
</script>

và kết quả sau khi thêm script này là

Add class 50k vào class guiban khi sử dụng sự kiện click

Add và remove class trong một nút click

Để có thể add và remove class chỉ với 1 nút click thì các bạn có thể sử dụng toggleClass(). Script này dùng khá nhiều trong việc thiết lập sự kiện cho các nút menu.

<script>
(function($){
    $(".donate").click(function(){
    $('.guiban').toggleClass('50k');
    });
})(jQuery);
</script>

Các bạn hãy thử và xem kết quả nhé.

Vậy thôi để có thể ứng dụng được nhiều hơn và theo ý thích của mình thì các bạn nên trang bị cho mình một ít kiến thức về jquery. Chúc các bạn thành công.

Donate ủng hộ tinh thần

Có bất kì câu hỏi nào thì hãy gửi về cho mình nhé, mình sẽ cố gắng giải đáp trong thời gian sớm nhất

Ủng hộ mình một ly cà phê nhé: http://unghotoi.com/pttuan410 Vì đầy là động lực để mình có thể giúp đỡ mọi người nhé.

Ủng hộ bằng momo:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *