7 jQuery Practical Tips - Javascript Tips

1, Create "back to top" scroll animation

$('a.top').click(function (e) {
    e.preventDefault();
    $(document.body).animate({scrollTop: 0}, 800);
});

2, Use detach to detach element first if you have heavy DOM operations

$ele = $container.first().detach();
// a lot operation on this $ele
// then append it back
$container.append($ele);

3, Add disabled and enabled function to jQuery element object

$.fn.disabled = function () {
    return this.prop("disabled", true);
}
$.fn.enabled = function () {
    return this.prop("disabled", false);
}
// To use it:
$btn.disabled();
$btn.enabled();

4, If an image failed to load, show a customized broken image

$('img').on('error', function () {
    $(this).prop('src', 'img/broken.png');
});

5, Set global error (404, 500 response) handler for ajax request

$(document).ajaxError(function (e, xhr, settings, error) {
    console.log(error);
});

6, Forbid user select text inside an element

$.fn.disableSelection = function() {
    return this.attr('unselectable', 'on')
               .css('user-select', 'none')
               .on('selectstart', false);
}
// To use it:
$txt.disableSelection();

7, In page search: hide DIVs which doesn't contain searched keyword

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

Comments

[Anton Melnyk]

0: Do not use jQuery

[BC]

While the new framework like react and vue are more and more popular, for small project, if people don’t want to introduce the blackhole of npm install or webpack, jQuery is still a good choice. Chasing new framework is enticing, but remember one day they will be outdated too. As developer, use the right tool for the project is more important. So really, use jQuery when you need it.

[Anton Melnyk]

There is actually no blackhole in using React or Webpack, the jQuery spaghetti code is a much bigger black hole. jQuery is not a framework but rather a library to simplify DOM operations, and a lot of that "simplification" is already built inside ES6.

So I personally would discourage people from using jQuery, but that is just my opinion.

[BC]

Thank you for sharing your opinion, Anton. Here is my thought:

1, Not saying React is a blackhole, the node_modules by npm install is. Don't take my word, check Node.js creator Ryan Dahl's talk here
2, jQuery itself is not spaghetti code, but people who use it may produce some spaghetti code. But no matter which framework you use, if you don't struct code well, you will always ends with mess code, React won't help that.
3, ES6 is great, but if you consider the compatibility, you may use babel/babel-preset with it, and if you do the pre-compilation, now you use npm install and webpack. Including all of those to do a small project is an overkill. Besides, like an example in this post, how do you do the "scroll to top" animation with one line in ES6?
4, I won't just discourage people using jQuery, I'll first ask what project they are trying to make. If they are making a landing page with features like "scroll to top" and 1 or 2 ajax call for the "contact" form, then jQuery is perfect fit. If they are making an online editor, using jQuery will be a disaster, React or Vue will definitely be the to-go choice.

The most important thing is choosing right tool for the right problem, my two cents.