Introduction to jQuery - The basics

About jQuery
• jQuery is a JavaScript Library.
• jQuery simplifies JavaScript programming.
• jQuery is a lightweight, "write less, do more", JavaScript library
• The purpose of jQuery is to make it much easier to use JavaScript on
your website.
• jQuery was originally released in January 2006 at BarCamp NYC
by John Resig

How to use jQuery?
There are several ways to start using jQuery on your web site.
• Download the jQuery library from jQuery.com
• Include jQuery from a CDN, like Google
<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

jQuery Syntax
Basic syntax is: $(selector).action()
• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)
The Document Ready Event
$(document).ready(function(){
// jQuery methods go here...
});
$(function(){
// jQuery methods go here...
});

jQuery Selectors
Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements

Id Selector
$("button").click(function(){
$("#test").hide();
});
});
Select First li from Groups
$("ul li:first").hide();
});
});
Class Selector
$(".test").hide();
});
});
Select all href Attributes
$("[href]").hide();
});
});
Select First P from Groups
$("p:first").hide();
});
});
Select even rows from a Table
$("tr:even").css("background-
color", "yellow");
});

jQuery Event Methods
Mouse Events Keyboard Events Form Events Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
$("p").click(function(){
$(this).hide();
});
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
$("input").blur(function(){
$(this).css("background-
color", "#ffffff");
});
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
$("input").focus(function(){
$(this).css("background-color",
"#cccccc");
});

jQuery Effects
Hide & Show Effect
$("#hide").click(function(){
$("p").hide(); //.hide(1000); //.toggle();
});
$("#show").click(function(){
$("p").show();
});
FadeOut & FadeIn Effect
$("#div1").fadeIn(); //.fadeOut();//.fadeToggle();
$("#div2").fadeIn("slow"); //.fadeTo("slow", 0.5);
$("#div3").fadeIn(3000);
});
Slide up and Slide down Effect
$("#flip").click(function(){
$("#panel").slideDown();
});
$("#flip").click(function(){
$("#panel").slideToggle();
});
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});

jQuery - Get & Set
alert($("#w3s").attr("href"));
});
});
<p><a href="https://www.w3schools.com"
id="w3s">W3Schools</a></p>
<button>Show href Value</button>
$("#btn2").click(function(){
alert("HTML: " + $("#test").html() );
}); //.html("<b>Hello world!</b>");
});
<p id="test">This is some <b>bold</b> text in a
paragraph.</p>
<button id="btn2">Show HTML</button>
$("#btn1").click(function(){
alert( $("#test").text() ); //.text(“setting the txt”);
});
})
<p id="test">This is some <b>bold</b> text in a
paragraph.</p>
<button id="btn1">Show Text</button>
alert( $("#test").val() );
}); //.val(“Jquery is best");
});
<p>Name:
<input type="text" id="test" value="Mickey Mouse">
</p>

jQuery - Add & Remove
$("#div1").remove();
$("p").remove(".test");
$("p").remove(".test, .demo");
$("#div1").empty();
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("img").after("Some text after");
$("img").before("Some text before");

jQuery - CSS Manipulation
$("p").toggleClass(“design");
});
$("p").css("background-color", "yellow");
$("p").css({"background-color": "yellow",
"font-size": “20px"});
.design {
font-weight: bold;
font-size: xx-large;
}
$("h1, h2, p").addClass("design");
//.addClass("important blue");
$("div").addClass(“design");
});
$("h2").removeClass(“design");
});

jQuery - Dimensions
jQuery has several important methods for working with dimensions:
• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()
var msg = "";
msg += "Width of div: " + $("#div1").width() + "</br>";
msg += "Height of div: " + $("#div1").height() + "</br>";
msg += "Inner width of div: " + $("#div1").innerWidth() + "</br>";
msg += "Inner height of div: " + $("#div1").innerHeight();
$("#div1").html(msg );
});
});
<div style=“width:300px; height:100px; background:blue;” id="div1"></div>
<button>click me </button>

Introduction to jQuery - The basics

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction to jQuery - The basics

Similar to Introduction to jQuery - The basics (20)

Recently uploaded

Recently uploaded (20)

Introduction to jQuery - The basics