jQuery is a popular JavaScript for creating dynamic web pages.
In this article, we’ll look at how to using jQuery in our web apps.
.keypress()
We can use the keypress method to listen to keypress events or trigger it.
For example, if we have:
<form>
<fieldset>
<input id="target" type="text" value="Hello there">
</fieldset>
</form>
<div id="other">
Trigger the handler
</div>
Then we can listen to the keypress event on the input by writing:
$("#target").keypress(function() {
console.log("Handler for .keypress() called.");
});
We can also trigger the keypress event when we click on the div with ID other by writing:
$("#target").keypress(function() {
console.log("Handler for .keypress() called.");
});$("#other").click(function() {
$("#target").keypress();
});
.keyup()
The .keyup() method lets us listen to the keyup event or trigger it.
For instance, if we have:
<form>
<fieldset>
<input id="target" type="text" value="Hello there">
</fieldset>
</form>
<div id="other">
Trigger the handler
</div>
Then we can listen to the keyup event on the input by writing:
$("#target").keyup(function() {
console.log("Handler for .keypress() called.");
});
We can also trigger the keyup event when we click on the div with ID other by writing:
$("#target").keyup(function() {
console.log("Handler for .keypress() called.");
});$("#other").click(function() {
$("#target").keyup();
});
:lang() Selector
The :lang selector lets us select all elements of the specified language.
For example, if we have the following HTML:
<div lang="en-us">red
<div>white
<div>and blue</div>
</div>
</div>
<div lang="es-es">rojo
<div>amarillo
<div>y rojo</div>
</div>
</div>
And CSS:
.spain {
background-color: red;
color: #ff0;
}.usa {
background-color: red;
color: #fff;
}
Then we can add the different classes to the div with different lang attribute values by writing:
$("div:lang(en-us)").addClass("usa");
$("div:lang(es-es)").addClass("spain");
.last()
We can get the last element in a set of matched elements with the .last method.
For example, if we have:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
Then we add a red background to the last li by writing:
$("li").last().css("background-color", "red");
We get the li's and then call last to get the last one.
:last-child Selector
The :last-child selector selects all elements that are the last child of the parent.
For example, if we have the following HTML:
<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon,</span>
<span>Sam</span>
</div>
<div>
<span>James,</span>
<span>Mary,</span>
<span>Ralph,</span>
<span>David</span>
</div>
and CSS:
span.solast {
text-decoration: line-through;
}
Then we can make the last span of each div red and add a strikethrough when web hover over them by writing:
$("div span:last-child")
.css({
color: "red",
fontSize: "80%"
})
.hover(function() {
$(this).addClass("solast");
}, function() {
$(this).removeClass("solast");
});
:last-of-type Selector
We can get the last element of a given type with the :last-pf-type selector.
For example, if we have the following HTML:
<div>
<span>Corey,</span>
<span>Yehuda,</span>
<span>Adam,</span>
<span>Todd</span>
</div>
<div>
<span>James,</span>
<span>Mary,</span>
<span>Tim,</span>
<b>Nobody</b>
</div>
and CSS:
span.solast {
text-decoration: line-through;
}
Then we can make the last span of each div red and add a strikethrough when web hover over them by writing:
$("span:last-of-type")
.css({
color: "red",
fontSize: "80%"
})
.hover(function() {
$(this).addClass("solast");
}, function() {
$(this).removeClass("solast");
});
Conclusion
We can listen to key events and get elements by type with jQuery.
