jQuery
What is jQuery?
How to add jquery in HTML?
Go to : -> [Link]
Copy CDN link minified version.
Add below line before </body>
<script src="[Link]
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src='js/[Link]'></script>
</body>
Test jquery by running “hello world”
Add div in html
</div>
<div id="msgid">
</div>
Write below code in .js file -: in our case [Link]
$(document).ready(function(){
$("#msgid").html("This is Hello World by JQuery");
})
Select all header
/* Below line selects all of the <hl> - <h6> headings, and adds a value of
headline to their
class attributes */
$(':header').addClass('headline');
.css file
.headline{
color: #c8e810;
font-size: 300%;
}
Hide and FadeIn
/select first 3 list, then hide , then fadeIn
$('li:lt(3)').hide().fadeIn(3000);
FadeIn
// With the element initially hidden, we can show it slowly:
$("#clickme").click(function() {
$("#book").hide().fadeIn("slow", function() {
// Animation complete
[Link]('fade in')
});
});
Add below in HTML
<div id="clickme">
Click here
</div>
<img id="book" src="[Link]" alt="" width="200" height="250">
Why jQuery?
FINDING ELEMENTS Using jQuery
The ability to update all of the elements in the jQuery selection is known as implicit iteration.
GETTING THE ELEMENT CONTENT
[Link]($('ul').html());// display all list html
[Link]($('ul').text());// display only the content of lists
