CÁC PHƯƠNG THỨC HAY SỬ DỤNG TRONG JQUERY

Trang chủ » Cách Viết Hàm Trong Jquery » CÁC PHƯƠNG THỨC HAY SỬ DỤNG TRONG JQUERY

Có thể bạn quan tâm

Khái niệm về jQuery:

  • jQuery là một thư viện Javascript.
  • jQuery đơn giản hóa code cho lập trình Javascript.

$(document).ready()

Các bạn có thể thấy mọi code jQuery đều nằm trong này? Tại sao lại như vậy?

  • Thông thường code jQuery của ta sẽ bắt đầu thực thi nếu file js được tải xong, nhưng nếu nó đã được tải xong mà các DOM chưa tải xong thì nó không thể chạy.

  • Do vậy khi code jQuery của bạn nằm ở trong hàm này, nó ngăn chặn code được thực thi trước khi các DOM chưa được load xong.

Sử dụng:

$(document).ready(function(){ // code jQuery ở đây }); // hoặc $(function(){ // code jQuery ở đây });

Selector

  • Selector trong jQuery tương tự như trong CSS :

// Đối với các tag html

$('[ten_tag]')

$('*') tất cả các elements

$(this) thực thi với element hiện tại đang trỏ tới

$('p') -> lấy tất cả các element <p></p> $('p.test') lấy tất cả các element của <p></p> có class là test

$('p:first') lấy element đầu tiên được tìm thấy của <p></p>

$("a[target='_blank']") lấy ra các tag <a></a> có target là _blank

// Đặc biệt sử dụng nhiều thì chắc là hai cái này chắc ai cũng biết sử dụng khi làm việc với jQuery nhỉ:

$('#id_element')

$('.class_element') ...

Ngoài ra có rất nhiều Selector các bạn có thể tham khảo tại : https://www.w3schools.com/jquery/jquery_selectors.asp

Event

  • Vậy khi ta muốn bắt sự kiện thì làm thế nào?

  • Có rất nhiều sự kiện trong jQuery được định nghĩa, Hybrid Technologies liệt kê những cái hay sử dụng nhất:

.click(), dblclick()

$("button").click(function(){

// hàm này được thực thi khi click vào selector được chỉ định

});

.mouseenter(), mouseleave(), mousedown(), mouseup()

$("button").mouseenter(function(){

// hàm này được thực thi khi rê chuột vào selector được chỉ định

// ngược lại thì dùng mouseleave() });

$("button").mousedown(function(){

// hàm này được thực thi khi rê chuột vào selector được chỉ định và nhấn chuột vào

// ngược lại thì dùng mouseup() nó sẽ thực thi khi rê chuột vào element và tính khi ra đã click và thả ra });

Ngoài ra còn rất nhiều về các hàm mouse như : .mouseout() , .mouseover(), .mouseup()

  • Các bạn có thể xem thêm tại : https://api.jquery.com/category/events/

.trigger(), .toggle()

  • 2 event tiếp theo hay được sử dụng :

  • trigger()

$('element').trigger('action_nao_do'); hàm này có tác dụng thực thi một action được chỉ định lên element :

$("button").click(function(){

$('#trigger').trigger('click'); // Sau khi click vào button thì element #trigger sẽ thực hiện event click, chúng ta có thể trigger bất kì event nào mà muốn nó thực thi});   

Ngoài ra trigger rất đa dạng cách sử dụng:

$( "p" ).click(function( event, a, b ) {

// ở đây khi click vào thẻ p thì a,b sẽ undefined, nhưng t thêm trigger phía sau nó sẽ gán ["a","b"] vào tham số tương ứng sau tham số event

}).trigger( "click", [ "a", "b" ] );

  • toggle()

$('element').toggle(); hàm này giúp chuyển đổi animation hay đại loại như vậy được truyền vào trong function nếu không truyền mặc định nó sẽ toggle giữa ẩn và hiện element

$( "button" ).click(function() {

$( "p" ).toggle( "slow" ); // truyền vào slow thì khi click button nó sẽ cho thẻ p show từ từ và ẩn từ từ

$( "p" ).slideToggle( "slow" ) // ngoài ra nó còn có thể ẩn/hiện thị theo dạng slide nếu dùng slideToggle()

$( "p" ).toggleClass( "class" ) // ngoài ra nó còn có thể thêm hoặc xóa class nếu dùng toggleClass });

// Cách sử dụng rất nhiều $(selector).toggle(speed,easing,callback); với các tham số lần lượt truyền vào chúng ta sẽ custom đc nhiều hiệu ứng khác nhau

$(selector).toggle("slow", "swing", function() {

// code callback here

})

Effect

  • .hide(), show(), remove(), slideDown(), slideUp(), slideToggle()

$('button').click(function() {

$( "#p" ).hide(speed, callback); // dùng để ẩn đi element

$( "#p1" ).show(speed, callback); // dùng để hiển thị element 

$( "#p3" ).remove(speed, callback); // dùng để xóa đi element khỏi DOM

$( "#p" ).slideDown(speed, callback); // dùng để hiển thị element theo dạng slide xuống              

$( "#p1" ).slideUp(speed, callback); // dùng để ẩn thị element theo dạng slide lên

$( "#p3" ).slideToggle(speed, callback); // chuyển đổi ẩn/hiện theo dạng slide

// ngoài ra có thể dùng .stop() để dừng effect đang chạy

})

  • fadeIn(), fadeOut(), fadeToggle(), fadeTo(): Các hàm này tương tự cách sử dụng của các hàm trên, mà hiệu ứng của nó thì dùng để ẩn/hiện theo cách mờ ảo

Tương tác với DOM

  • text() -> Set hoặc return về chuỗi của element

  • html() – Set hoặc return về chuỗi của element (bao hồm cả HTML tag)

  • val() – Set hoặc return value của các thẻ trong form

$('p').text() || $('p').text('set new text');

$('p').html() || $('p').html('<p>set new text with html tag<p>');

$('input#test').val() || $('input#test').val(10);

  • append() – Chèn thêm văn bản (có thể có HTML tag) vào trong cuối của element được chọn

  • prepend() – Chèn thêm văn bản (có thể có HTML tag) vào trong đầu của element được chọn

  • after() – Chèn thêm văn bản (có thể có HTML tag) vào sau element được chọn

  • before() – Chèn thêm văn bản (có thể có HTML tag) vào trước element được chọn

$("div.a").append("<div class='c'>C</div>");

<div class='a'>

<div class='b'>b</div>

<div class='c'>C</div> // nó sẽ được chèn vào đây

</div>

$("div.a").after("<div class='c'>C</div>");

<div class='a'>

<div class='b'>b</div>

</div>

<div class='c'>C</div> // nó sẽ được chèn vào đây

//- tương tự

  • remove(), empty()

$("selector").remove(); // dùng để remove element khỏi DOM

$("selector").empty(); // dùng để xóa toàn bộ element con ra khỏi DOM

  • addClass() – Thêm class vào element

  • removeClass() – Xóa class khỏi element

  • css() – Set hoặc trả về style của element đó

$("selector").addClass('test-class');

$("selector").removeClass('test-class');

$("selector").css(); $("selector").css("background-color", "yellow");

$("selector").css({

"background-color": "yellow", "font-size": "200%"

});

  • index(), clone()

$("selector").index(); // trả về index hiện tại của element đối với các select tương đương nó, nếu có tham số truyền vào mà không được tìm thấy sẽ trả về -1

$("selector").clone(); // trả về một bản sao của element hiện tại

VD : $("#selector").clone().appendTo(#selector);

Còn rất nhiều những hàm khác của jQuery, nếu bạn quan tâm, đừng ngần ngại đóng góp ý kiến bằng cách comment bên dưới bài viết nhé. Hy vọng bài viết này sẽ có ích với bạn!

Nguồn: Sưu Tầm. 

Từ khóa » Cách Viết Hàm Trong Jquery