jQuery
What is jQuery?
How to add jquery in HTML?
Go to : -> https://releases.jquery.com/
Copy CDN link minified version.
Add below line before </body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src='js/JQuery-first.js'></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 JQuery-first.js
$(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
console.log('fade in')
});
});
Add below in HTML
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" 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
console.log($('ul').html());// display all list html
console.log($('ul').text());// display only the content of lists
