I would like to introduce to you the entire collection of the most commonly used, most detailed jQuery
A little bit about its concept:
- jQuery is a javascript library.
- jQuery simplifies the code for javascript programming.
- The current version of this article is 3.5.0, released April 10, 2020
$ (document) .ready ()
- Often you can see every jQuery code is in there? So why is it in here?
- Normally our jQuery code will start executing if the js file has finished loading, but if it has finished loading but the DOM hasn’t finished loading then it won’t run.
- So when your jQuery code is in this function, it prevents the code from being executed before the DOM has not fully loaded.
Use :
1 2 3 4 5 6 7 8 9 | $(document).ready(function(){ // code jQuery ở đây }); // hoặc $(function(){ // code jQuery ở đây }); |
Selector
- The selector in jQuery is similar to the CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Đố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') ... |
Also there are many Selector you can mosaic at: https://www.w3schools.com/jquery/jquery_selectors.asp
Event
- So when we want to catch the event, how to do it?
- There are many jQuery events defined, I just listed the most commonly used:
.click (), dblclick ()
1 2 3 4 | $("button").click(function(){ // hàm này được thực thi khi t click vào selector được chỉ định vd của mình là button }); |
.mouseenter (), mouseleave (), mousedown (), mouseup ()
1 2 3 4 5 6 7 8 9 10 | $("button").mouseenter(function(){ // hàm này được thực thi khi t rê chuột vào selector được chỉ định vd của mình là button // ngược lại thì ta dùng mouseleave() }); $("button").mousedown(function(){ // hàm này được thực thi khi t rê chuột vào selector được chỉ định và nhấn chuột vào vd của mình là button // ngược lại thì ta dùng mouseup() nó sẽ thực thi khi t rê chuột vào element và tính khi ra đã click và thả ra }); |
- There are also a lot of mouse functions like: .mouseout (), .mouseover (), .mouseup ()
- You can see more at: https://api.jquery.com/category/events/
.trigger (), .toggle ()
- The next 2 events I use very often:
- trigger ()
1 2 3 4 5 6 7 8 9 | $('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 ()
1 2 3 4 5 6 7 8 9 10 11 12 | $('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 ko truyền mặc định nó sẽ toggle giữa ẩn và hiện element $( "button" ).click(function() { $( "p" ).toggle( "slow" ); // ta 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 t dùng slideToggle() $( "p" ).toggleClass( "class" ) // ngoài ra nó còn có thể thêm hoặc xóa class nếu ta 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 }) |
- There are many other events, I just mentioned a few things I often meet and use
Effect
- .hide (), show (), remove (), slideDown (), slideUp (), slideToggle ()
1 2 3 4 5 6 7 8 9 10 11 | $('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 t có thể dùng .stop() để dừng effect đang chạy }) |
- fadeIn (), fadeOut (), fadeToggle (), fadeTo (): These functions are similar to the usage of the above functions, but its effect is used to hide / show in a blurry way.
Interact with the DOM
- text () -> Set or return the element’s string
- html () – Set or return the string of the element (including the HTML tag)
- val () – Set or return the value of the form’s tags
1 2 3 4 | $('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 () – Insert text (possibly with an HTML tag) at the end of the selected element
- prepend () – Insert text (possibly with HTML tags) at the beginning of the selected element
- after () – Insert text (possibly with an HTML tag) after the selected element
- before () – Insert text (possibly with HTML tags) before the selected element
1 2 3 4 5 6 7 8 9 10 11 12 13 | $("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 //- 2 Caí kia tương tự |
- remove (), empty ()
1 2 3 | $("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 () – Add the class to the element
- removeClass () – Removes the class from the element
- css () – Set or return the style of that element
1 2 3 4 5 6 7 8 9 | $("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 ()
1 2 3 4 | $("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à k đượ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); |
Commonly used special cases:
- Have you ever been in the case of using append or appendTo (or related html tag functions) into the DOM and then capturing the event it didn’t:
1 2 3 4 5 6 7 | // Code bạn như thế này : $(document).ready(function(){ $('.test').click(function() { $(this).append('<div class="test"><div>')); // sau đó bạn click vào cái vừa sinh ra k thực hiện tiếp đc ? }) }) |
- That’s because when you use $ (document) .ready (), it will read the DOM that has been loaded from the beginning, and the later you will append later, the DOM does not understand whether the guy has loaded yet, or either force the DOM to reload or otherwise
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $(document).ready(function(){ $('body').on('click', '.test', function() { $(this).append('<div class="test"><div>')); // bạn thử như vậy đi chắc chắn sẽ thành công // Why? bởi vì khi bạn sử dụng như vậy, nó sẽ bắt đầu quét element bạn tương tác miễn sao nó nằm trong body, không cần biết nó được load từ đầu hay sau }); }); // Vậy .on() là gì, sao ko thấy nhắc tới ? Nó là một hàm dùng để hearing 1 hoặc nhiều sự kiện của element đó, vd: $('.test').on('click', function() { alert(1); }); // hoặc $('p').on({ click: function(){ console.log('clicked'); }, mouseenter: function(){ console.log('mouseentered'); }, mouseleave: function(){ console.log('mouseleaved'); } }); |
Get the props for an element:
1 2 3 4 5 6 7 8 9 10 11 | // Ví dụ ta có, và muốn khi click vào sẽ lấy href và data-id thì làm tn ? <a href="test.com" data-id="1" id="test"></a> // Đơn giản, chỉ cần làm như naỳ : $('#test').click(function() { const href = $(this).attr('href'); const id = $(this).attr('data-id'); // hoặc thế này để lấy id const id = $(this).data('id'); }); |
Other tips that I have accumulated and referenced in the course of my life
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | // kiểm tra nếu Element đó tồn tại : if ($("#someDiv").length) { // handle } // filter chồng nhau, chẳng hạn bạn muốn lấy ra ele không có class intro $("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata").filter(":not(.intro)") // bạn có thể dùng như này $(document).ready(function () { // ... }); // hoặc như này đều được $(function () { // ... }); // Bạn có thể excute với element cùng với forEach nếu set time ở tham số thứ 3 cuar nó $('.selector').forEach( function() {}, 1000 ); // Hoặc như này cũng có thể dùng loop qua từng element $('a').each(function() { // và như này để gắn element hiện tại vào 1 biến để tiện thực thi trên element đang được trỏ đến trong loop var $this = $(this); }); // Bạn muốn if(true) thì adđ class này else thì remove class này : $("selector")[true ? "addClass" : "removeClass"](".someClass"); // Muốn check element đó có như này hoặc như kia không : $('input').is(":checked") $('.selector').is(":hidden"); $('.selector').is(":visible"); // Vô hiệu hóa chuột phải trên 1 vùng nào đó $('someElement').bind("contextmenu", function(e) { return false; }); // Sao chép một element nào đó $('someElement').clone(); // Lấy element gần nhấn với element hiện tại : // $('someElement').closest('elementClosest'); |
There are many other jQuery functions that I would like to save P.2 for this series, please look forward to it. In P.2 I will introduce more about the options of functions, its callbacks and customizing, the functions lq to ajax, get, post .. I end here, thank you for reading, everything as well as his research and reference at jQuery, if there are errors please comment.