Tổng họp những hàm Jquery thường dùng

Page Top

var topBtn = $('#page-top'); // Nhập id hoặc class
topBtn.hide();
$(window).scroll(function() {
   if ($(this).scrollTop() > 300) {
       topBtn.fadeIn();
   } else {
       topBtn.fadeOut();
   }
});
topBtn.click(function() {
   $('body,html').animate({
      scrollTop: 0
   }, 500);
   return false;
});

var topBtn = $('#page-top'); // Nhập id hoặc class

topBtn.hide();

$(window).scroll(function() {

if ($(this).scrollTop() > 300) {

topBtn.fadeIn();

} else {

topBtn.fadeOut();

}

});

topBtn.click(function() {

$('body,html').animate({

scrollTop: 0

}, 500);

return false;

});

Click scroll page theo ID

$('.text-slide a').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top - 50
            }, 900);
            return false;
        } else {
            $('html,body').animate({
                scrollTop: target.offset().top - 0
            }, 900);
        }
    }
});

$('.text-slide a').click(function () {

if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

var target = $(this.hash);

target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

if (target.length) {

$('html,body').animate({

scrollTop: target.offset().top - 50

}, 900);

return false;

} else {

$('html,body').animate({

scrollTop: target.offset().top - 0

}, 900);

}

});

Menu toogle

$('.icon-menu-sp').click(function() {
   $('.menu').slideToggle('blind');
});

$('.icon-menu-sp').click(function() {

$('.menu').slideToggle('blind');

});

Đặt height bằng nhau cho div

// Các thẻ div có class được khai báo sẽ có chiều cao bằng nhau.
 
equalheight = function(container) {
    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array(),
        $el,
        topPosition = 0;
    $(container).each(function() {
        $el = $(this);
        $($el).height('auto')
        topPostion = $el.position().top;
        if (currentRowStart != topPostion) {
            for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                rowDivs[currentDiv].height(currentTallest);
            }
            rowDivs.length = 0; 
            currentRowStart = topPostion;
            currentTallest = $el.height();
            rowDivs.push($el);
        } else {
            rowDivs.push($el);
            currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
        }
        for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
            rowDivs[currentDiv].height(currentTallest);
        }
    });
}
 
// Khi load lại cửa sổ thì thực hiện hàm.
$(window).load(function() {
 equalheight('.row-plan'); // Nhập class
});
 
// Khi resize cửa sổ thì thực hiện hàm.
$(window).resize(function() {
 equalheight('.row-plan'); // Nhập class
});

// Các thẻ div có class được khai báo sẽ có chiều cao bằng nhau.

equalheight = function(container) {

var currentTallest = 0,

currentRowStart = 0,

rowDivs = new Array(),

$el,

topPosition = 0;

$(container).each(function() {

$el = $(this);

$($el).height('auto')

topPostion = $el.position().top;

if (currentRowStart != topPostion) {

for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {

rowDivs[currentDiv].height(currentTallest);

}

rowDivs.length = 0;

currentRowStart = topPostion;

currentTallest = $el.height();

rowDivs.push($el);

} else {

rowDivs.push($el);

currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

}

for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {

rowDivs[currentDiv].height(currentTallest);

}

});

}

// Khi load lại cửa sổ thì thực hiện hàm.

$(window).load(function() {

equalheight('.row-plan'); // Nhập class

});

// Khi resize cửa sổ thì thực hiện hàm.

$(window).resize(function() {

equalheight('.row-plan'); // Nhập class

});

Kiểm tra trình duyệt với Js

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

if(isChrome) {alert('Chrome');}
if(isOpera) {alert('Opera');}
if(isFirefox) {alert('Firefox');}
if(isSafari) {alert('Safari');}
if(isIE) {alert('IE');}
if(isEdge) {alert('Edge');}
if(isBlink) {alert('Blink');}

// Opera 8.0+

var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+

var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]"

var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

// Internet Explorer 6-11

var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+

var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+

var isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection

var isBlink = (isChrome || isOpera) && !!window.CSS;

if(isChrome) {alert('Chrome');}

if(isOpera) {alert('Opera');}

if(isFirefox) {alert('Firefox');}

if(isSafari) {alert('Safari');}

if(isIE) {alert('IE');}

if(isEdge) {alert('Edge');}

if(isBlink) {alert('Blink');}

Css ::beffore or ::after trong Jquery

$('tenDoiTuong').append("<style>.viTriChen::before{ thuocTinhCss}</style>");

1	$('tenDoiTuong').append("<style>.viTriChen::before{ thuocTinhCss}</style>");

Bọc Html xung quanh nội dung bằng .wrapInner()

Html

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

Jquery

$( ".inner" ).wrapInner( "<div class='new'></div>");

1	$( ".inner" ).wrapInner( "<div class='new'></div>");

Thay thế hình khi vào giao diện SP để đối ứng màn hình Retina

// Tự động thay thế các hình, không cần phải nhập 2 hình hoặc css nhiều lần.
// Hình muốn thay phải có đuôi là _pc.
// VD: img1_pc.jpg ...v.v
// Lưu ý: đối ứng màn hình Retina:
// Hình _pc: kích thước 100% - hình _sp: kích thước gấp đôi (nói chung lớn hơn hình _pc).
 
replace_img = function(target_img) {
   var width = $(window).width();
   console.log(width);
   $(target_img).each(function() {
      $el = $(this);
      if (width <= 1024) { // Bắt width để thực hiện link thay hình
         $el.attr('src', $el.attr('src').replace('_pc', '_sp')); // Kiểm tra thuộc tính src nếu có "_pc" thì thay bằng "_sp".
      } else {
         $el.attr('src', $el.attr('src').replace('_sp', '_pc')); // Kiểm tra thuộc tính src nếu có "_sp" thì thay bằng "_pc".
      }
   });
}
 
// Khi load lại cửa sổ thì thực hiện hàm.
$(window).load(function() {
   replace_img('img'); // Nhập id, class hoặc img để thay thế tất cả thẻ tag img
});
 
// Khi resize cửa sổ thì thực hiện hàm.
$(window).resize(function() {
   replace_img('img'); // Nhập id, class hoặc img để thay thế tất cả thẻ tag img
});

// Tự động thay thế các hình, không cần phải nhập 2 hình hoặc css nhiều lần.

// Hình muốn thay phải có đuôi là _pc.

// VD: img1_pc.jpg ...v.v

// Lưu ý: đối ứng màn hình Retina:

// Hình _pc: kích thước 100% - hình _sp: kích thước gấp đôi (nói chung lớn hơn hình _pc).

replace_img = function(target_img) {

var width = $(window).width();

console.log(width);

$(target_img).each(function() {

$el = $(this);

if (width <= 1024) { // Bắt width để thực hiện link thay hình

$el.attr('src', $el.attr('src').replace('_pc', '_sp')); // Kiểm tra thuộc tính src nếu có "_pc" thì thay bằng "_sp".

} else {

$el.attr('src', $el.attr('src').replace('_sp', '_pc')); // Kiểm tra thuộc tính src nếu có "_sp" thì thay bằng "_pc".

}

});

}

// Khi load lại cửa sổ thì thực hiện hàm.

$(window).load(function() {

replace_img('img'); // Nhập id, class hoặc img để thay thế tất cả thẻ tag img

});

// Khi resize cửa sổ thì thực hiện hàm.

$(window).resize(function() {

replace_img('img'); // Nhập id, class hoặc img để thay thế tất cả thẻ tag img

});

Khắc phục lỗi double trên SP

if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
   var elements = document.getElementsByTagName('a');
       for (var i = 0; i < elements.length; i++) {
       elements[i].addEventListener('touchend', function() {});
   }
}

if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {

var elements = document.getElementsByTagName('a');

for (var i = 0; i < elements.length; i++) {

elements[i].addEventListener('touchend', function() {});

}

Scorll menu head ẩn hiện

//Header scroll up hide scroll down show header
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event) {
    didScroll = true;
});
setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    if (Math.abs(lastScrollTop - st) <= delta) return; if (st > lastScrollTop && st > navbarHeight) {
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if (st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

//Header scroll up hide scroll down show header

// Hide Header on on scroll down

var didScroll;

var lastScrollTop = 0;

var delta = 5;

var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event) {

didScroll = true;

});

setInterval(function() {

if (didScroll) {

hasScrolled();

didScroll = false;

}

}, 250);

function hasScrolled() {

var st = $(this).scrollTop();

if (Math.abs(lastScrollTop - st) <= delta) return; if (st > lastScrollTop && st > navbarHeight) {

// Scroll Down

$('header').removeClass('nav-down').addClass('nav-up');

} else {

// Scroll Up

if (st + $(window).height() < $(document).height()) {

$('header').removeClass('nav-up').addClass('nav-down');

}

lastScrollTop = st;

}