Despite its age, jQuery is still a popular library for manipulating the DOM.
In this article, we’ll look at some tips for working with jQuery.
Scroll to Element with jQuery
jQuery has a scrollTo method to scroll to a given element without trouble.
This is a jQuery plugin that we can add from http://demos.flesler.com/jquery/scrollTo/
We can install by writing:
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
or:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
in our HTML.
Or we can download it manually from those locations or from the releases page (https://github.com/flesler/jquery.scrollTo/releases).
For instance, we can write:
$('body').scrollTo('#target');
to scroll to the element with the ID target .
We can also scroll to a given distance by writing:
$('body').scrollTo(500);
to scroll down to the given number of pixels.
There are various options we can set the control the scrolling.
scrollTarget is an element, string, or number that indicates the scroll position.
offsetTop is the number that indicates the additional spacing above the scroll target.
duration is the duration of the scrolling animation.
easing is a string that indicates the easing function for use with the function.
complete is a function to call once the animation is done.
Get Selected Text from a Drop-Down List (select Element) Using jQuery
We can call the text method to get the selected text from a drop-down list of the selected element.
For instance, we can write:
$("#drop-down option:selected").text();
We get the selected option with the selected pseudoelement and call the text method to get the text content of the option.
We can also write:
$("option:selected", $("#drop-down")).text();
to get the selected option from the same dropdown.
Also, we can call find with the patent to get the child element we want:
$('#drop-down').find('option:selected').text();
There’s also the children method to do the same thing:
$("#drop-down").children(":selected").text();
We get the same child element with children .
Also, we can watch for changes with the change method.
For example, we can write:
$("#drop-down").change(function(){
console.log($('option:selected', $(this)).text());
});
We watch the dropdown for changes and log the selected value from the dropdown by getting the dropdown and watching the selected option child element.
.prop() vs .attr()
prop is preferable to attr in most cases.
prop does what attr used to do.
So it should work in most cases if we replace attr with prop .
Properties are simple to deal with than attributes.
attributes can only be a string but properties can be of any type.
checked would be a boolean for example.
With both the property and attribute exist, then updating one will also update the other.
With the prop method, we don’t have to check attributes using the attr method anymore.
Disable or Enable Input with jQuery
We can disable or enable an input with jQuery.
To do that, we can use the prop method to do so.
For instance, we can write:
$("input").prop('disabled', true);
to disable the input and:
$("input").prop('disabled', false);
to enable it.
We can also write:
$("input")[0].disabled = true;
or:
$("input")[0].disabled = false;
to disable or enable an input element.
Get the Children of the $(this) Selector
To get the children of the this selector, we can use the find method.
For instance, to get all the divs of this , we can write:
$(this).find('div');
If we want to get an element right next to whatever element is set as this , we can write:
$(this).next();
To get the direct children of this, we can also write:
$('> .child-class', this)
or we can use children to get the children:
$(this).children('div')
We can also get the n-th child by writing:
$(this).children('div:nth(n)')
To get the last child, we can write:
$(this).find("div:last-child")
Select an Element with Multiple Classes in jQuery
We can get an element with multiple classes by passing the string with the given selector.
For instance, we can write:
$('.a.b')
We get the class with both classes a and b without spaces.
We can do the same thing with the filter method:
$(".a").filter(".b")
We get the items with class a and then we call filter to get the elements with class b .
Conclusion
We can use a scroll to plugin to help us scroll to an element easier.
Also, we can get the text of a dropdown list.
prop is preferred to attr .
And we can get elements that have multiple classes added to it in multiple ways.
