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.
How to Apply !important Using .css()?
We can apply the !important in various ways.
One way to apply it is to create our own CSS rule for a class and then apply that class to our element.
For instance, we can write:
.important { width: 100px !important; }
To add a CSS property with the !important directive.
Then we call addClass to add the class.
For instance, we can write:
$('#foo').addClass('important');
We applied the important class to an element with ID foo .
Likewise, we can call attr to add the style attribute value to our element.
For example, we can write:
$('#foo').attr('style', 'width: 100px !important');
We set the style attribute with our own rule and the !important directive with the CSS rule.
Also, we can pass in 'cssText' as the first argument of css to apply the CSS rule with !important .
For instance, we can write:
$('#foo').css('cssText', 'width: 100px !important');
With 'cssText' as the first argument, we can apply !important .
Detect Pressing Enter on Keyboard Using jQuery
We can detect the pressing of the Enter key by listening to the keypress event when jQuery.
For instance, we can write:
$(document).on('keypress', (e) => {
if (e.which === 13) {
console.log('enter is pressed');
}
});
We get the key that’s pressed with the which property.
13 is the code for the Enter key, so we can compare it against that.
There’s also the keycode property that may be available in some browsers.
So we can write:
$(document).on('keypress', (e) => {
if (e.which === 13 || e.keyCode === 13) {
console.log('enter is pressed');
}
});
A more modern alternative, which is probably the best choice, is to use the key property.
For instance, we can write:
$(document).keypress((event) => {
if (event.key === "Enter") {
// ...
}
});
The key property has the text of the key that’s pressed, rather than the numerical code.
This is clearer than the other alternatives.
jQuery Ajax Error Handling and Show Custom Exception Messages
We can get the error in the error handler.
For instance, we can write:
$.ajax({
type: "post",
url: "/login",
success: data, text) => {
//...
},
error: (request, status, error) => {
console.log(request.responseText);
}
});
We make the request with the ajax method.
type has the request type.
url is the URL.
success is the success handler.
error is the error handler.
request has the responseText property with the response text of the request.
status has the status code.
error has the errors from making the request.
Errors only appear when there’s a network error when making a request.
Select a Particular Option in a Select Element in jQuery
To select a particular option in a select element, we can get the option with the value attribute.
For instance, we can write:
$('select option[value="foo"]')
We get the option with the value attribute set to foo .
If we want to get the option by index, we can use the eq pseudoelement.
We can write:
$('select option:eq(1)')
Also, we can get an option element by text by using the contains pseudoelement.
For instance, we can write:
$('select option:contains("foo")')
We use the contains pseudoelement to search for an element with the given text.
And we can call filter to return the option elements with the given text.
For instance, we can write:
$('select option')
.filter((e, i) => {
return $(e).text() === "foo"
})
We get the option elements.
In the callback, we have the parameter e , which is the option element object for the select element.
The text method returns the text of the option element.
To make the item with the given value selected, we can do it in various ways.
For instance, we can write:
$('select option[value="foo"]').attr("selected", "selected");
We add the selected attribute to the option element.
To make our lives easier, we can use the val method to set the value of the select element.
For example, we can write:
$('select').val('foo');
We set the value to foo so that the option element with the value foo is selected.
Conclusion
There are ways to apply the !important directive to our CSS.
Also, there’re many ways to select an option element with the value or text.
And we can get the key that’s pressed by listening to the keypress event.
