Scribd
Upload
2 views

JavaScript Notes 7

Uploaded by

gourabdas2128
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

JavaScript Notes 7

Uploaded by

gourabdas2128
Copyright
© © All Rights Reserved
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