<script>
$(doc).prepared(operate(){
$('#btn').click on( operate(){
$('li').textual content("jQuery is new Boss");
//this grabs all <li> parts and modifications there textual content
});
});
</script>
As normal, the code is written contained in the doc.prepared() operate. Within the first line, we now have hooked up an occasion handler with a button, chosen utilizing id selector. When a button with id “btn” will click on, jQuery will discover all <li> tags by utilizing tag jQuery tag selector $(‘li’) after which modifications their textual content.
jQuery Instance to Modify A number of DOM parts in a single click on
Right here is full HTML + jQuery code in your follow, you’ll be able to both write it all the way down to an HTML file or simply copy-paste to rapidly run on a browser
<html>
<head>
<title> Modify A number of aspect in a single line
- jQuery Tutorials and Ideas for Newbies</title>
<meta http-equiv="Content material-Kind" content material="textual content/html; charset=UTF-8">
<!-- loading jQuery from Google's CDN -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
></script>
<script>
$(doc).prepared(operate(){
$('#btn').click on( operate(){
$('li').textual content("jQuery is new Boss");
});
});
</script>
</head>
<physique>
<div id="top-laguanges">
<h1>Prime 10 Programming languages</h1>
<ol id="languages">
<li>Java</li>
<li>C</li>
<li>C++</li>
<li>JavaScript</li>
<li>Ruby</li>
<li>Python</li>
<li>PHP</li>
<li>Haskel</li>
<li>Scala</li>
<li>C#</li>
</ol>
<button id="btn">Click on Me</button>
</div>
</physique>
</html>
How one can run and take a look at this jQuery program?
You may simply copy and paste this HTML code right into a textual content file and put it aside as HTML just like the jquerydemo.html. After that, simply open that file in a browser e.g. Google Chrome, Mozilla Firefox, or Microsoft’s Edge browser. In case you are a Java Developer you may also use Eclipse IDE’s built-in internet browser.
While you open the HTML file in an internet browser it’ll appear like beneath:
You may see that we now have a listing of 10 parts and now once you click on the button, jQuery code will run as a result of it’s bonded with click on occasion fired once you click on the button. The jQuery will then use the tag selector $(“li”) to seize all listing parts and modifications its textual content as “jQuery is the brand new boss” by calling the textual content() methodology.
This manner, you’ll be able to change the a number of HTML parts in a single go utilizing jQuery. All that energy comes from the CSS-like selector, the tag selector right here. The online web page will appear like the next after this variation:
That is all on this a part of jQuery newcomers’ tutorials and suggestions. As normal, a activity solely required a few traces of jQuery code, moderately than 10 traces of uncooked JavaScript code. Now we have seen methods to modify a number of parts in a single go, you’ll be able to choose a number of parts utilizing a jQuery tag selector, which takes a tag and selects all parts. You can even be part of these jQuery on-line programs to be taught extra in regards to the various kinds of selectors out there in jQuery.
Different jQuery tutorials and articles it’s possible you’ll like
- 5 Books to be taught jQuery for Internet builders (books)
- How one can get the present URL, Parameters, and Hash utilizing jQuery? (answer)
- jQuery Howdy World Instance (program)
- How one can use multiple jQuery UI DatePicker on the JSP web page? (instance)
- How one can create tab-based UI utilizing jQuery? (instance)
- How one can redirect a web page URL utilizing jQuery and JavaScript? (answer)
- How one can write HelloWorld in jQuery? (answer)
- 20 jQuery Interview Questions for Java Internet Builders (listing)
- How one can load jQuery on an internet web page? (answer)
Reference
https://api.jquery.com/class/selectors/
Thanks for studying this text thus far. In the event you like this jQuery tutorial then please share it with your folks and colleagues. When you have any questions or suggestions then please drop a remark.
