DEV Community

BC
BC

Posted on

7 jQuery Practical Tips - Javascript Tips

#javascript #jquery #webdev

1, Create "back to top" scroll animation 

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

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);
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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();
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (4)

Collapse
 
antonmelnyk profile image
Anton Melnyk • • Edited

0: Do not use jQuery

Collapse
 
bitecode profile image
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.

Collapse
 
antonmelnyk profile image
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.

Thread Thread
 
bitecode profile image
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.

Read next

thepracticaldev profile image

Join Us For The Next Frontend Challenge: Earth Day Edition!

dev.to staff -

itsjp profile image

Difference between Func() , ()=>Func() , {Func} , ()=>Func in JS

Jaydeep Pipaliya -

sanskritiharmukh profile image

Bypass CORS errors while testing your APIs using Hoppscotch 🔧

Sanskriti Harmukh -

paulbratslavsky profile image

Epic Next JS 14 Tutorial Part 7: Next.js and Strapi CRUD Permissions

Paul Bratslavsky -