Scribd
Upload
2 views

JavaScript Notes 7

Uploaded by

gourabdas2128
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

JavaScript Notes 7

Uploaded by

gourabdas2128
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

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

You might also like