facebook@jsbanktwitter@js_bankgoogle+javascriptbanknewsletterrss@jsbank






ieoBIN.com - The Best IEO List to Discover, Invest in 2019

Các thủ thuật JavaScript và jQuery hữu ích Bài viết JavaScript này cung cấp cho bạn danh sách hơn 45 thủ thuật JavaScript và jQuery để có thể viết mã JavaScript tốt hơn. Vài thủ thuật JavaScript bạn có thể xem sơ qua là:

- Hủy một truy vấn AJAX
- Kiểm tra một hình ảnh có được tải rồi hay chưa
- Kiểm tra một điều khiển HTML có tồn tại hay không
- Tìm kiếm chuỗi với jQuery

Vui lòng vào trang chi tiết để xem đầy đủ danh sách các thủ thuật và ví dụ JavaScript mẫu.


  • How to refresh the src of an image with jQuery?
  • 1.$(imageobj).attr('src', $(imageobj)
    2.           .attr('src') + '?' + Math.random() );
  • How to see if an image is loaded or not with jquery
  • 1.var imgsrc = 'img/image1.png';
    2.$('<img/>').load(function () {
    3.    alert('image loaded');
    4.}).error(function () {
    5.    alert('error loading image');
    6.}).attr('src', imgsrc);
  • And if a set (example : 10 images) of images are loaded
  • 1.var totalimages  = 10;
    2.var loadedimages = 0;
    3.$("<img/>").load(function() {
    4.    ++loadedimages;
    5.    if(loadedimages == totalimages){
    6.        //All 10 images are loaded
    7.    }
    8.});
  • How to remove selected text after mouse double click event
  • 01.clearSelection      : function () {
    02.    if(document.selection && document.selection.empty) {
    03.        document.selection.empty();
    04.    } else if(window.getSelection) {
    05.        var sel = window.getSelection();
    06.        sel.removeAllRanges();
    07.    }
    08.}
    09.$(element).bind('dblclick',function(event){
    10.    //do something
    11.    clearSelection();
    12.});
  • Validate email address:
  • 1.var email = 'info@tympanus.net'
    2.if(!(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(email)))
    3.alert('Invalid Email');
  • How to order a <ul> element using jQuery
  • 01.<ul>
    02.<li>cloud</li>
    03.<li>sun</li>
    04.<li>rain</li>
    05.<li>snow</li>
    06.</ul
    07. 
    08.var items = $('.to_order li').get();
    09.items.sort(function(a,b){
    10.    var keyA = $(a).text();
    11.    var keyB = $(b).text();
    12. 
    13.    if (keyA < keyB) return -1;
    14.    if (keyA > keyB) return 1;
    15.    return 0;
    16.});
    17.var ul = $('.to_order');
    18.$.each(items, function(i, li){
    19.    ul.append(li);
    20.});
  • Passing parameters to a function called with setTimeout
  • 1.timeout = setTimeout(function(){myFunction(param)},time);
  • Disable right mouse click
  • 1.$(document).ready(function(){
    2.    $(document).bind("contextmenu",function(e){
    3.        return false;
    4.    });
    5.});
  • Fade out an image, and fade in another one (replacing the previous one)
  • 1.$('imageelement').fadeOut(function() {
    2.    $(this).load(function() {
    3.        $(this).fadeIn();
    4.    }).attr('src', AnotherSource);
    5.});
  • Write your own selectors
  • 01.//extend the jQuery functionality
    02.$.extend($.expr[':'], {
    03. 
    04.    //name of your special selector
    05.    moreThanAThousand : function (a){
    06.        //Matching element
    07.        return parseInt($(a).html()) > 1000;
    08.    }
    09.});
    10. 
    11.$(document).ready(function() {
    12.    $('td:moreThanAThousand').css('background-color', '#ff0000');
    13.});

    JavaScript theo ngày


    Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web