SlideShare a Scribd company logo
Introduction
to
jQuery
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
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Select First li from Groups
$(document).ready(function(){
$("button").click(function(){
$("ul li:first").hide();
});
});
Class Selector
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Select all href Attributes
$(document).ready(function(){
$("button").click(function(){
$("[href]").hide();
});
});
Select First P from Groups
$(document).ready(function(){
$("button").click(function(){
$("p:first").hide();
});
});
Select even rows from a Table
$(document).ready(function(){
$("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
$("button").click(function(){
$("#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();
});
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
jQuery - Get & Set
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
<p><a href="https://www.w3schools.com"
id="w3s">W3Schools</a></p>
<button>Show href Value</button>
$(document).ready(function(){
$("#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>
$(document).ready(function(){
$("#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>
$(document).ready(function(){
$("button").click(function(){
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
$("button").click(function(){
$("p").toggleClass(“design");
});
$("p").css("background-color", "yellow");
$("p").css({"background-color": "yellow",
"font-size": “20px"});
.design {
font-weight: bold;
font-size: xx-large;
}
$("button").click(function(){
$("h1, h2, p").addClass("design");
//.addClass("important blue");
$("div").addClass(“design");
});
$("button").click(function(){
$("h2").removeClass(“design");
});
jQuery - Dimensions
jQuery has several important methods for working with dimensions:
• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()
$(document).ready(function(){
$("button").click(function(){
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>

More Related Content

What's hot

Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
manugoel2003
 
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
NexThoughts Technologies
 
Slashdot Tags
Slashdot TagsSlashdot Tags
Slashdot Tags
jamiemccarthy
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
 
Introducing jQuery
Introducing jQueryIntroducing jQuery
Introducing jQuery
Wildan Maulana
 
jQuery
jQueryjQuery
jQuery
Jay Poojara
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
Gil Fink
 
Jquery
JqueryJquery
Jquery
Zoya Shaikh
 
jQuery
jQueryjQuery
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
Bedis ElAchèche
 
Dollar symbol
Dollar symbolDollar symbol
Dollar symbol
Aaron Huang
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
Marc Grabanski
 
Introduzione JQuery
Introduzione JQueryIntroduzione JQuery
Introduzione JQuery
orestJump
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison
 
J query
J queryJ query
J query
Manav Prasad
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery Presentation
Rod Johnson
 
jQuery
jQueryjQuery
J query1
J query1J query1
J query1
Manav Prasad
 
Pemrograman Web 8 - MySQL
Pemrograman Web 8 - MySQLPemrograman Web 8 - MySQL
Pemrograman Web 8 - MySQL
Nur Fadli Utomo
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Siva Arunachalam
 

What's hot (20)

Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
 
Slashdot Tags
Slashdot TagsSlashdot Tags
Slashdot Tags
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
Introducing jQuery
Introducing jQueryIntroducing jQuery
Introducing jQuery
 
jQuery
jQueryjQuery
jQuery
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
Jquery
JqueryJquery
Jquery
 
jQuery
jQueryjQuery
jQuery
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
Dollar symbol
Dollar symbolDollar symbol
Dollar symbol
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
Introduzione JQuery
Introduzione JQueryIntroduzione JQuery
Introduzione JQuery
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 
J query
J queryJ query
J query
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery Presentation
 
jQuery
jQueryjQuery
jQuery
 
J query1
J query1J query1
J query1
 
Pemrograman Web 8 - MySQL
Pemrograman Web 8 - MySQLPemrograman Web 8 - MySQL
Pemrograman Web 8 - MySQL
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 

Similar to Introduction to jQuery - The basics

Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
EPAM Systems
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
Rakesh Jha
 
jQuery Rescue Adventure
jQuery Rescue AdventurejQuery Rescue Adventure
jQuery Rescue Adventure
Allegient
 
JQuery
JQueryJQuery
jQuery
jQueryjQuery
JQuery
JQueryJQuery
JQuery
DevTalk
 
Jquery
JqueryJquery
jQuery for web development
jQuery for web developmentjQuery for web development
jQuery for web development
iFour Institute - Sustainable Learning
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Gunjan Kumar
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Seble Nigussie
 
jQuery - Tips And Tricks
jQuery - Tips And TricksjQuery - Tips And Tricks
jQuery - Tips And Tricks
Lester Lievens
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
Salvatore Fazio
 
JQuery_and_Ajax.pptx
JQuery_and_Ajax.pptxJQuery_and_Ajax.pptx
JQuery_and_Ajax.pptx
AditiPawale1
 
Jquery Basics
Jquery BasicsJquery Basics
Jquery Basics
Umeshwaran V
 
jQuery
jQueryjQuery
jQuery
Vishwa Mohan
 
JQuery
JQueryJQuery
JQuery
JQueryJQuery
jQuery Basic API
jQuery Basic APIjQuery Basic API
jQuery Basic API
Hyeonseok Shin
 
jQuery
jQueryjQuery
J Query Public
J Query PublicJ Query Public
J Query Public
pradeepsilamkoti
 

Similar to Introduction to jQuery - The basics (20)

Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
 
jQuery Rescue Adventure
jQuery Rescue AdventurejQuery Rescue Adventure
jQuery Rescue Adventure
 
JQuery
JQueryJQuery
JQuery
 
jQuery
jQueryjQuery
jQuery
 
JQuery
JQueryJQuery
JQuery
 
Jquery
JqueryJquery
Jquery
 
jQuery for web development
jQuery for web developmentjQuery for web development
jQuery for web development
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
jQuery - Tips And Tricks
jQuery - Tips And TricksjQuery - Tips And Tricks
jQuery - Tips And Tricks
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
 
JQuery_and_Ajax.pptx
JQuery_and_Ajax.pptxJQuery_and_Ajax.pptx
JQuery_and_Ajax.pptx
 
Jquery Basics
Jquery BasicsJquery Basics
Jquery Basics
 
jQuery
jQueryjQuery
jQuery
 
JQuery
JQueryJQuery
JQuery
 
JQuery
JQueryJQuery
JQuery
 
jQuery Basic API
jQuery Basic APIjQuery Basic API
jQuery Basic API
 
jQuery
jQueryjQuery
jQuery
 
J Query Public
J Query PublicJ Query Public
J Query Public
 

Recently uploaded

20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
CAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on BlockchainCAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on Blockchain
Claudio Di Ciccio
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
Techgropse Pvt.Ltd.
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 

Recently uploaded (20)

20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
CAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on BlockchainCAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on Blockchain
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 

Introduction to jQuery - The basics

  • 2. 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
  • 3. 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>
  • 4. 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... });
  • 5. 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
  • 6. Id Selector $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); Select First li from Groups $(document).ready(function(){ $("button").click(function(){ $("ul li:first").hide(); }); }); Class Selector $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); Select all href Attributes $(document).ready(function(){ $("button").click(function(){ $("[href]").hide(); }); }); Select First P from Groups $(document).ready(function(){ $("button").click(function(){ $("p:first").hide(); }); }); Select even rows from a Table $(document).ready(function(){ $("tr:even").css("background- color", "yellow"); });
  • 7. 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"); });
  • 8. jQuery Effects Hide & Show Effect $("#hide").click(function(){ $("p").hide(); //.hide(1000); //.toggle(); }); $("#show").click(function(){ $("p").show(); }); FadeOut & FadeIn Effect $("button").click(function(){ $("#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(); }); $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); });
  • 9. jQuery - Get & Set $(document).ready(function(){ $("button").click(function(){ alert($("#w3s").attr("href")); }); }); <p><a href="https://www.w3schools.com" id="w3s">W3Schools</a></p> <button>Show href Value</button> $(document).ready(function(){ $("#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> $(document).ready(function(){ $("#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> $(document).ready(function(){ $("button").click(function(){ alert( $("#test").val() ); }); //.val(“Jquery is best"); }); <p>Name: <input type="text" id="test" value="Mickey Mouse"> </p>
  • 10. 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");
  • 11. jQuery - CSS Manipulation $("button").click(function(){ $("p").toggleClass(“design"); }); $("p").css("background-color", "yellow"); $("p").css({"background-color": "yellow", "font-size": “20px"}); .design { font-weight: bold; font-size: xx-large; } $("button").click(function(){ $("h1, h2, p").addClass("design"); //.addClass("important blue"); $("div").addClass(“design"); }); $("button").click(function(){ $("h2").removeClass(“design"); });
  • 12. jQuery - Dimensions jQuery has several important methods for working with dimensions: • width() • height() • innerWidth() • innerHeight() • outerWidth() • outerHeight() $(document).ready(function(){ $("button").click(function(){ 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>