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.
.prev()
We call the .prev()
method to get the immediately preceding sibling of each element in the set of matched elements.
If a selector is provided, it gets the precious siblings only if it matches that selector.
For example, if we have:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
Then we get the li
that’s immediately before the li
with the class third-item
by writing:
$("li.third-item").prev().css("background-color", "red");
Then we add a red background to it.
.prevAll()
The .prevAll()
method gets all preceding siblings of each element in the set of matched elements.
For example, if we have:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
Then we get all the preceding siblings of the li
that has the class third-item
and add a background to them by writing:
$("li.third-item").prevAll().css("background-color", "red");
.prevUntil()
The .prevUntil()
gets all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.
For example, if we have:
<dl>
<dt id="term-1">term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt id="term-3">term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
Then we get all the dd
before the dt
with ID term-2
and up to but not including the first dt
by writing:
$("#term-2").prevUntil("dt")
.css("background-color", "red");
and we set their background to red.
.promise()
The .promise()
method returns a promise to observe when all actions of a certain type bound to the collection have finished.
For instance, if we have:
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>
Then we can show some text when we click on a button by writing:
$("button").on("click", function() {
$("p").append("Started...");
$("div").each(function(i) {
$(this).fadeIn().fadeOut(1000 * (i + 1));
});
$("div").promise().done(function() {
$("p").append(" Finished! ");
});
});
We loop through each div
and apply some fade effects with fadeIn
and fadeOut
.
Then we call promise
and run code when all the method calls are done with the promise().done()
method.
.prop()
We can use the prop
method to get the attribute value.
For example, if we have:
<input id="check1" type="checkbox" checked="checked">
Then we can write:
$("input").change(function() {
const $input = $(this);
console.log($input.prop("checked"));
}).change();
to watch for the changes to the checkbox input.
We get the checked
attribute’s value with the prop
method.
.pushStack()
We call the pushStack
method to add a collection of DOM elements onto the jQuery stack.
For example, if we have:
<div>
foo
</div>
Then we call pushStack
to add the div to the stack and remove it by writing:
jQuery([])
.pushStack(document.getElementsByTagName("div"))
.remove()
.end();
Conclusion
We can get previous elements and get property values with jQuery.