SlideShare a Scribd company logo
Nikhil Kumar
Software Consultant
Knoldus Software LLP
Nikhil Kumar
Software Consultant
Knoldus Software LLP
Agenda
● Introduction of jQuery
● What is jQuery
● Getting started with jQuery
● Animation, Callback, Chaining
● DOM Manipulation, GET, SET, ADD, REMOVE
● DOM Traversing
● Managing events, contents and effects
Introduction to jQuery
“Jquery is easy
&
very useful”
Introduction to jQuery
●
jQuery is a lightweight, "write less, do more", 
JavaScript library.
●
Query is a fast, small, and feature­rich 
JavaScript library. 
●
It makes things like HTML document traversal 
and manipulation, event handling, animation, 
and Ajax much simpler.
Adding jQuery to a page
<script src="../dist/jquery-2.1.4.min.js"></script>
<script type="text/javascript”>
$(document).ready(function() {
Your code here…
});
</script>
Adding jQuery to a page
You might have noticed that all jQuery methods in our examples, are 
inside a document ready event:
$(document).ready(function(){
   // jQuery methods go here...
});
This is to prevent any jQuery code from running before the document is 
finished loading (is ready).
    Trying to hide an element that is not created yet
    Trying to get the size of an image that is not loaded yet
 $(function(){
   // jQuery methods go here...
});
Using Selector with jQuery
●
 In order to start manipulating an HTML page 
dynamically you first need to locate the desired 
items.
●
Id and Class
$('h1') //selects all h1 elements
$('.class-name') //selects all elements
with class of class-name
$('#id') //selects element with an id of ID
Attribute based selector
● To find elements in which an attribute is set to a
specific value, you use the equality syntax.
● Note that the value you wish to compare must be in
quotes.
// selects **all** elements that contains this attribute
$('[“href"]')
// selects all **h1** elements with an attribute matching the
specified value
$('h1[demo-attribute="demo-value"]')
More selectors
Attribute based selector cont...
● jQuery allows you to select items by searching inside of
attribute values for desired sub-strings.
● If you wish to find all elements where the value starts with a
string, use the ^= operator.
● If you wish to find all elements where the value contains a
string, use the *= operator.
$('[class^=”col”]') //selects all elements start with 'col'
$('[class*=”md”]') //selects all elements contain 'md'
Positional Selectors
●
Oftentimes you need to located elements based on where they are on the
page, or in relation to other elements in the DOM.
●
For example, an <a> element inside of a <nav> section may need to be
treated differently than <a> elements elsewhere on the page. CSS, and in turn
jQuery, offer the ability to find items based on their location.
● The > between selectors indicates the parent/child relationship.
$('nav > a') //Selects all <a> elements that are direct
//descendants nav element
$('nav a') //Selects all <a> elements that are
//descendants nav element The elements can
//appear anywhere inside of the element
//listed first
Adding/Removing classes
●
jQuery also makes it very easy to manipulate the classes an element is currently using.
●
In fact, you'll notice most libraries that use jQuery to manipulate the UI will also come with a
stylesheet that defines the set of classes their code will use to enable the functionality.
●
Adding a class to an element is just as easy as calling addClass.
●
Removing a class from an element is just as easy as calling removeClass.
var currentElement = $('#demo');
currentElement.addClass('class-name') //Add class
//'class-name' to selected element.
currentElement.removeClass('class-name') //removes class
//'class-name' from selected element.
Working with attributes
● To retrieve an attribute value, simply use the attr method with one parameter, the
name of the attribute you wish to retrieve.
● To update an attribute value, use the attr method with two parameters, the first being
the name of the attribute and the second the new value you wish to use.
var attribute = $('selector').attr('attribute-name');
//gets value of the attribute 'attribute-name' of 'selector'
$('selector').attr('attribute-name','new-value');
//changes value of the attribute 'attribute-name' to 'new-value'
//of 'selector'
Modifying Content
● Beyond just working with classes and attributes,
jQuery allows you to modify the content of an
element as well.
// update the text
$('selector').text('Hello, world!!');
// update the HTML
$('selector').html('Hello, world!!');
Event Handlers
●
jQuery provides several ways to register an event handler.
●
The term "fires/fired" is often used with events. Example: "The 
keypress event is fired, the moment you press a key".
●
 Mouse Events & Form Events etc
Basic event handlers
●
To register an event handler, you will call the jQuery 
method that matches the event handler you're looking for.
// click event
// raised when the item is clicked
$('selector').click(function() {
alert('clicked!!');
});
// hover event
// raised when the user moves their mouse over the item
$('selector').hover(function() {
alert('hover!!');
});
Some useful events
●
We have some useful events
– Click
– Double Click
– Blur
– Change
– Focus
– Mouse Enter and Mouse Leave
– Hover
 Event Example
$("p").on({
    mouseenter: function(){
        $(this).css("background­color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background­color", "lightblue");
    },
    click: function(){
        $(this).css("background­color", "yellow");
    }
});
Jquery Effects
   Hide, Show, Toggle, Slide, Fade, and Animate. WOW!
Toggle
         $("button").click(function(){
             $("p").toggle();
         });
Animate       
         $("button").click(function(){
             $("div").animate({left: '250px'}); 
        });         
Callback Functions
A callback function ensures you that it will execute  after 
completing the previous action.
●
Syntax
$(selector).hide(speed,callback);
Example
       $("button").click(function(){
           $("p").hide("slow", function(){
               alert("The paragraph is now hidden");
            }); 
        });
                                                                                                    *Write without callback
Chaining
●
Chaining allows multiple events, actions etc to run in one 
go.
Example
      
        $("#p1").css("color", "red")
            .slideUp(2000)
            .slideDown(2000);
DOM Manipulation
– Get, Set, Add, Remove, Css, dimensions etc
Get Content:
Three methods:
● text() - Sets or returns the text content of selected elements
● html() - Sets or returns the content of selected elements (including HTML markup)
● val() - Sets or returns the value of form fields
&
● Attr()
Example
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
Example : attr()
● Complete this example
$("button").click(function(){
alert($("#id").attr("href"));
});
Dom Manipulation
● Set Content:
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
        $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){
        $("#test3").val("Dolly Duck");
    });
});
Dom Manipulation
ADD:
Majorly 4 methods:
● append() - Inserts content at the end of the selected elements
● prepend() - Inserts content at the beginning of the selected elements
● after() - Inserts content after the selected elements
● before() - Inserts content before the selected elements
● Examples
● $("p").append("Some appended text.");
● $("img").after("Some text after");
function afterText() {
var txt1 = "<b>I </b>"; // Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3); // Insert new elements after <img>
}
Dom Manipulation
● Remove
● $("div").remove(".test, .demo");
//remove app “div” that contains .test & .demo class
● Empty
● $("#div1").empty();
Dom Manipulation
● addClass() - Adds one or more classes to the selected elements
● removeClass() - Removes one or more classes from the selected
elements
● toggleClass() - Toggles between adding/removing classes from the
selected elements
● css() - Sets or returns the style attribute
● -Make Example for each
$("button").click(function(){
alert("Background= " + $("p").css("background-color"));
});
Jquery Traversing
● The <div> element is the parent of <ul>, and an ancestor of everything inside of it
● The <ul> element is the parent of both <li> elements, and a child of <div>
● The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>
● The <span> element is a child of the left <li> and a descendant of <ul> and <div>
● The two <li> elements are siblings (they share the same parent)
● The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>
● The <b> element is a child of the right <li> and a descendant of <ul> and <div>
Thank You !!Thank You !!
References:
1- jquery official documentation
2- Jquery communities
3- w3schools
Ad

More Related Content

What's hot (20)

Test-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsTest-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS Applications
FITC
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Yakov Fain
 
Unit testing of java script and angularjs application using Karma Jasmine Fra...
Unit testing of java script and angularjs application using Karma Jasmine Fra...Unit testing of java script and angularjs application using Karma Jasmine Fra...
Unit testing of java script and angularjs application using Karma Jasmine Fra...
Samyak Bhalerao
 
AngularJS Unit Testing
AngularJS Unit TestingAngularJS Unit Testing
AngularJS Unit Testing
Prince Norin
 
Intro to testing Javascript with jasmine
Intro to testing Javascript with jasmineIntro to testing Javascript with jasmine
Intro to testing Javascript with jasmine
Timothy Oxley
 
Angular Unit Testing
Angular Unit TestingAngular Unit Testing
Angular Unit Testing
Avi Engelshtein
 
Angular Unit Testing
Angular Unit TestingAngular Unit Testing
Angular Unit Testing
Alessandro Giorgetti
 
Unit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and KarmaUnit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and Karma
Andrey Kolodnitsky
 
JavaScript TDD with Jasmine and Karma
JavaScript TDD with Jasmine and KarmaJavaScript TDD with Jasmine and Karma
JavaScript TDD with Jasmine and Karma
Christopher Bartling
 
Quick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmineQuick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmine
Gil Fink
 
Automated Testing in Angular Slides
Automated Testing in Angular SlidesAutomated Testing in Angular Slides
Automated Testing in Angular Slides
Jim Lynch
 
Client side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karmaClient side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karma
Adam Klein
 
Advanced Jasmine - Front-End JavaScript Unit Testing
Advanced Jasmine - Front-End JavaScript Unit TestingAdvanced Jasmine - Front-End JavaScript Unit Testing
Advanced Jasmine - Front-End JavaScript Unit Testing
Lars Thorup
 
Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015
Morris Singer
 
Nicolas Embleton, Advanced Angular JS
Nicolas Embleton, Advanced Angular JSNicolas Embleton, Advanced Angular JS
Nicolas Embleton, Advanced Angular JS
JavaScript Meetup HCMC
 
Painless JavaScript Testing with Jest
Painless JavaScript Testing with JestPainless JavaScript Testing with Jest
Painless JavaScript Testing with Jest
Michał Pierzchała
 
Full Stack Unit Testing
Full Stack Unit TestingFull Stack Unit Testing
Full Stack Unit Testing
GlobalLogic Ukraine
 
Dart for Java Developers
Dart for Java DevelopersDart for Java Developers
Dart for Java Developers
Yakov Fain
 
Angular Unit Testing NDC Minn 2018
Angular Unit Testing NDC Minn 2018Angular Unit Testing NDC Minn 2018
Angular Unit Testing NDC Minn 2018
Justin James
 
How AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design PatternsHow AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design Patterns
Ran Mizrahi
 
Test-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsTest-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS Applications
FITC
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Yakov Fain
 
Unit testing of java script and angularjs application using Karma Jasmine Fra...
Unit testing of java script and angularjs application using Karma Jasmine Fra...Unit testing of java script and angularjs application using Karma Jasmine Fra...
Unit testing of java script and angularjs application using Karma Jasmine Fra...
Samyak Bhalerao
 
AngularJS Unit Testing
AngularJS Unit TestingAngularJS Unit Testing
AngularJS Unit Testing
Prince Norin
 
Intro to testing Javascript with jasmine
Intro to testing Javascript with jasmineIntro to testing Javascript with jasmine
Intro to testing Javascript with jasmine
Timothy Oxley
 
Unit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and KarmaUnit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and Karma
Andrey Kolodnitsky
 
JavaScript TDD with Jasmine and Karma
JavaScript TDD with Jasmine and KarmaJavaScript TDD with Jasmine and Karma
JavaScript TDD with Jasmine and Karma
Christopher Bartling
 
Quick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmineQuick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmine
Gil Fink
 
Automated Testing in Angular Slides
Automated Testing in Angular SlidesAutomated Testing in Angular Slides
Automated Testing in Angular Slides
Jim Lynch
 
Client side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karmaClient side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karma
Adam Klein
 
Advanced Jasmine - Front-End JavaScript Unit Testing
Advanced Jasmine - Front-End JavaScript Unit TestingAdvanced Jasmine - Front-End JavaScript Unit Testing
Advanced Jasmine - Front-End JavaScript Unit Testing
Lars Thorup
 
Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015
Morris Singer
 
Painless JavaScript Testing with Jest
Painless JavaScript Testing with JestPainless JavaScript Testing with Jest
Painless JavaScript Testing with Jest
Michał Pierzchała
 
Dart for Java Developers
Dart for Java DevelopersDart for Java Developers
Dart for Java Developers
Yakov Fain
 
Angular Unit Testing NDC Minn 2018
Angular Unit Testing NDC Minn 2018Angular Unit Testing NDC Minn 2018
Angular Unit Testing NDC Minn 2018
Justin James
 
How AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design PatternsHow AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design Patterns
Ran Mizrahi
 

Similar to Jquery- One slide completing all JQuery (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
EPAM Systems
 
How to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQueryHow to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQuery
kolkatageeks
 
JQuery_and_Ajax.pptx
JQuery_and_Ajax.pptxJQuery_and_Ajax.pptx
JQuery_and_Ajax.pptx
AditiPawale1
 
Jquery tutorial-beginners
Jquery tutorial-beginnersJquery tutorial-beginners
Jquery tutorial-beginners
Isfand yar Khan
 
jQuery
jQueryjQuery
jQuery
Ivano Malavolta
 
jQuery -Chapter 2 - Selectors and Events
jQuery -Chapter 2 - Selectors and Events jQuery -Chapter 2 - Selectors and Events
jQuery -Chapter 2 - Selectors and Events
WebStackAcademy
 
Jquery Basics
Jquery BasicsJquery Basics
Jquery Basics
Umeshwaran V
 
Introducing jQuery
Introducing jQueryIntroducing jQuery
Introducing jQuery
Wildan Maulana
 
Unit3.pptx
Unit3.pptxUnit3.pptx
Unit3.pptx
AnamikaRai59
 
UNIT 1 (7).pptx
UNIT 1 (7).pptxUNIT 1 (7).pptx
UNIT 1 (7).pptx
DrDhivyaaCRAssistant
 
J query
J queryJ query
J query
Ramakrishna kapa
 
Jquery library
Jquery libraryJquery library
Jquery library
baabtra.com - No. 1 supplier of quality freshers
 
Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...
Thinqloud
 
J query training
J query trainingJ query training
J query training
FIS - Fidelity Information Services
 
jQuery
jQueryjQuery
jQuery
Vishwa Mohan
 
Jquery
JqueryJquery
Jquery
Pankaj Srivastava
 
JQuery
JQueryJQuery
JQuery
baabtra.com - No. 1 supplier of quality freshers
 
JQuery
JQueryJQuery
JQuery
baabtra.com - No. 1 supplier of quality freshers
 
Jquery
JqueryJquery
Jquery
Zoya Shaikh
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
Muhammad Ehtisham Siddiqui
 
Ad

More from Knoldus Inc. (20)

Angular Hydration Presentation (FrontEnd)
Angular Hydration Presentation (FrontEnd)Angular Hydration Presentation (FrontEnd)
Angular Hydration Presentation (FrontEnd)
Knoldus Inc.
 
Optimizing Test Execution: Heuristic Algorithm for Self-Healing
Optimizing Test Execution: Heuristic Algorithm for Self-HealingOptimizing Test Execution: Heuristic Algorithm for Self-Healing
Optimizing Test Execution: Heuristic Algorithm for Self-Healing
Knoldus Inc.
 
Self-Healing Test Automation Framework - Healenium
Self-Healing Test Automation Framework - HealeniumSelf-Healing Test Automation Framework - Healenium
Self-Healing Test Automation Framework - Healenium
Knoldus Inc.
 
Kanban Metrics Presentation (Project Management)
Kanban Metrics Presentation (Project Management)Kanban Metrics Presentation (Project Management)
Kanban Metrics Presentation (Project Management)
Knoldus Inc.
 
Java 17 features and implementation.pptx
Java 17 features and implementation.pptxJava 17 features and implementation.pptx
Java 17 features and implementation.pptx
Knoldus Inc.
 
Chaos Mesh Introducing Chaos in Kubernetes
Chaos Mesh Introducing Chaos in KubernetesChaos Mesh Introducing Chaos in Kubernetes
Chaos Mesh Introducing Chaos in Kubernetes
Knoldus Inc.
 
GraalVM - A Step Ahead of JVM Presentation
GraalVM - A Step Ahead of JVM PresentationGraalVM - A Step Ahead of JVM Presentation
GraalVM - A Step Ahead of JVM Presentation
Knoldus Inc.
 
Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)
Knoldus Inc.
 
Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)
Knoldus Inc.
 
DAPR - Distributed Application Runtime Presentation
DAPR - Distributed Application Runtime PresentationDAPR - Distributed Application Runtime Presentation
DAPR - Distributed Application Runtime Presentation
Knoldus Inc.
 
Introduction to Azure Virtual WAN Presentation
Introduction to Azure Virtual WAN PresentationIntroduction to Azure Virtual WAN Presentation
Introduction to Azure Virtual WAN Presentation
Knoldus Inc.
 
Introduction to Argo Rollouts Presentation
Introduction to Argo Rollouts PresentationIntroduction to Argo Rollouts Presentation
Introduction to Argo Rollouts Presentation
Knoldus Inc.
 
Intro to Azure Container App Presentation
Intro to Azure Container App PresentationIntro to Azure Container App Presentation
Intro to Azure Container App Presentation
Knoldus Inc.
 
Insights Unveiled Test Reporting and Observability Excellence
Insights Unveiled Test Reporting and Observability ExcellenceInsights Unveiled Test Reporting and Observability Excellence
Insights Unveiled Test Reporting and Observability Excellence
Knoldus Inc.
 
Introduction to Splunk Presentation (DevOps)
Introduction to Splunk Presentation (DevOps)Introduction to Splunk Presentation (DevOps)
Introduction to Splunk Presentation (DevOps)
Knoldus Inc.
 
Code Camp - Data Profiling and Quality Analysis Framework
Code Camp - Data Profiling and Quality Analysis FrameworkCode Camp - Data Profiling and Quality Analysis Framework
Code Camp - Data Profiling and Quality Analysis Framework
Knoldus Inc.
 
AWS: Messaging Services in AWS Presentation
AWS: Messaging Services in AWS PresentationAWS: Messaging Services in AWS Presentation
AWS: Messaging Services in AWS Presentation
Knoldus Inc.
 
Amazon Cognito: A Primer on Authentication and Authorization
Amazon Cognito: A Primer on Authentication and AuthorizationAmazon Cognito: A Primer on Authentication and Authorization
Amazon Cognito: A Primer on Authentication and Authorization
Knoldus Inc.
 
ZIO Http A Functional Approach to Scalable and Type-Safe Web Development
ZIO Http A Functional Approach to Scalable and Type-Safe Web DevelopmentZIO Http A Functional Approach to Scalable and Type-Safe Web Development
ZIO Http A Functional Approach to Scalable and Type-Safe Web Development
Knoldus Inc.
 
Managing State & HTTP Requests In Ionic.
Managing State & HTTP Requests In Ionic.Managing State & HTTP Requests In Ionic.
Managing State & HTTP Requests In Ionic.
Knoldus Inc.
 
Angular Hydration Presentation (FrontEnd)
Angular Hydration Presentation (FrontEnd)Angular Hydration Presentation (FrontEnd)
Angular Hydration Presentation (FrontEnd)
Knoldus Inc.
 
Optimizing Test Execution: Heuristic Algorithm for Self-Healing
Optimizing Test Execution: Heuristic Algorithm for Self-HealingOptimizing Test Execution: Heuristic Algorithm for Self-Healing
Optimizing Test Execution: Heuristic Algorithm for Self-Healing
Knoldus Inc.
 
Self-Healing Test Automation Framework - Healenium
Self-Healing Test Automation Framework - HealeniumSelf-Healing Test Automation Framework - Healenium
Self-Healing Test Automation Framework - Healenium
Knoldus Inc.
 
Kanban Metrics Presentation (Project Management)
Kanban Metrics Presentation (Project Management)Kanban Metrics Presentation (Project Management)
Kanban Metrics Presentation (Project Management)
Knoldus Inc.
 
Java 17 features and implementation.pptx
Java 17 features and implementation.pptxJava 17 features and implementation.pptx
Java 17 features and implementation.pptx
Knoldus Inc.
 
Chaos Mesh Introducing Chaos in Kubernetes
Chaos Mesh Introducing Chaos in KubernetesChaos Mesh Introducing Chaos in Kubernetes
Chaos Mesh Introducing Chaos in Kubernetes
Knoldus Inc.
 
GraalVM - A Step Ahead of JVM Presentation
GraalVM - A Step Ahead of JVM PresentationGraalVM - A Step Ahead of JVM Presentation
GraalVM - A Step Ahead of JVM Presentation
Knoldus Inc.
 
Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)
Knoldus Inc.
 
Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)
Knoldus Inc.
 
DAPR - Distributed Application Runtime Presentation
DAPR - Distributed Application Runtime PresentationDAPR - Distributed Application Runtime Presentation
DAPR - Distributed Application Runtime Presentation
Knoldus Inc.
 
Introduction to Azure Virtual WAN Presentation
Introduction to Azure Virtual WAN PresentationIntroduction to Azure Virtual WAN Presentation
Introduction to Azure Virtual WAN Presentation
Knoldus Inc.
 
Introduction to Argo Rollouts Presentation
Introduction to Argo Rollouts PresentationIntroduction to Argo Rollouts Presentation
Introduction to Argo Rollouts Presentation
Knoldus Inc.
 
Intro to Azure Container App Presentation
Intro to Azure Container App PresentationIntro to Azure Container App Presentation
Intro to Azure Container App Presentation
Knoldus Inc.
 
Insights Unveiled Test Reporting and Observability Excellence
Insights Unveiled Test Reporting and Observability ExcellenceInsights Unveiled Test Reporting and Observability Excellence
Insights Unveiled Test Reporting and Observability Excellence
Knoldus Inc.
 
Introduction to Splunk Presentation (DevOps)
Introduction to Splunk Presentation (DevOps)Introduction to Splunk Presentation (DevOps)
Introduction to Splunk Presentation (DevOps)
Knoldus Inc.
 
Code Camp - Data Profiling and Quality Analysis Framework
Code Camp - Data Profiling and Quality Analysis FrameworkCode Camp - Data Profiling and Quality Analysis Framework
Code Camp - Data Profiling and Quality Analysis Framework
Knoldus Inc.
 
AWS: Messaging Services in AWS Presentation
AWS: Messaging Services in AWS PresentationAWS: Messaging Services in AWS Presentation
AWS: Messaging Services in AWS Presentation
Knoldus Inc.
 
Amazon Cognito: A Primer on Authentication and Authorization
Amazon Cognito: A Primer on Authentication and AuthorizationAmazon Cognito: A Primer on Authentication and Authorization
Amazon Cognito: A Primer on Authentication and Authorization
Knoldus Inc.
 
ZIO Http A Functional Approach to Scalable and Type-Safe Web Development
ZIO Http A Functional Approach to Scalable and Type-Safe Web DevelopmentZIO Http A Functional Approach to Scalable and Type-Safe Web Development
ZIO Http A Functional Approach to Scalable and Type-Safe Web Development
Knoldus Inc.
 
Managing State & HTTP Requests In Ionic.
Managing State & HTTP Requests In Ionic.Managing State & HTTP Requests In Ionic.
Managing State & HTTP Requests In Ionic.
Knoldus Inc.
 
Ad

Recently uploaded (20)

Furniture design for projects-vol-3-brochure.pdf
Furniture design for projects-vol-3-brochure.pdfFurniture design for projects-vol-3-brochure.pdf
Furniture design for projects-vol-3-brochure.pdf
AjayBhonge1
 
"Dino World: The Ultimate Dinosaur Coloring Book for Kids"
"Dino World: The Ultimate Dinosaur Coloring Book for Kids""Dino World: The Ultimate Dinosaur Coloring Book for Kids"
"Dino World: The Ultimate Dinosaur Coloring Book for Kids"
Ijaz Ahmad
 
The Role of Structure and Materials in Design.pptx
The Role of Structure and Materials in Design.pptxThe Role of Structure and Materials in Design.pptx
The Role of Structure and Materials in Design.pptx
Prof. Hany El-Said
 
CORPORATE OFFICE INTERNAL BRANDING OF A LEADING INDO-JAPANESE AUTOMOTIVE BRAND
CORPORATE OFFICE INTERNAL BRANDING OF A LEADING INDO-JAPANESE AUTOMOTIVE BRANDCORPORATE OFFICE INTERNAL BRANDING OF A LEADING INDO-JAPANESE AUTOMOTIVE BRAND
CORPORATE OFFICE INTERNAL BRANDING OF A LEADING INDO-JAPANESE AUTOMOTIVE BRAND
aonbanerjee
 
Carte d'indentité1 a model for a nes country
Carte d'indentité1 a model for a nes countryCarte d'indentité1 a model for a nes country
Carte d'indentité1 a model for a nes country
stephaniethomas940921
 
BCG’s Evolution of Travel: Rethinking Business Travel in a Post-Pandemic World
BCG’s Evolution of Travel: Rethinking Business Travel in a Post-Pandemic WorldBCG’s Evolution of Travel: Rethinking Business Travel in a Post-Pandemic World
BCG’s Evolution of Travel: Rethinking Business Travel in a Post-Pandemic World
INKPPT
 
Digital Marketing Mock Project - Client Testimonial
Digital Marketing Mock Project - Client TestimonialDigital Marketing Mock Project - Client Testimonial
Digital Marketing Mock Project - Client Testimonial
Adeline Yeo
 
BHSIWIKJHDCU.pptx MCXDT789OKNBVCDRT678IOLKNBVCXDRTYUIOKMN
BHSIWIKJHDCU.pptx MCXDT789OKNBVCDRT678IOLKNBVCXDRTYUIOKMNBHSIWIKJHDCU.pptx MCXDT789OKNBVCDRT678IOLKNBVCXDRTYUIOKMN
BHSIWIKJHDCU.pptx MCXDT789OKNBVCDRT678IOLKNBVCXDRTYUIOKMN
05241146
 
PPT -MBI_07 .pptx final to present today
PPT -MBI_07 .pptx final to present todayPPT -MBI_07 .pptx final to present today
PPT -MBI_07 .pptx final to present today
nikhilpanchal510
 
KPMG – ESG Predictions 2030 | Future Trends in Sustainability & Governance
KPMG – ESG Predictions 2030 | Future Trends in Sustainability & GovernanceKPMG – ESG Predictions 2030 | Future Trends in Sustainability & Governance
KPMG – ESG Predictions 2030 | Future Trends in Sustainability & Governance
INKPPT
 
Presentation1asdghjhgggfhgfghfvbndj.pptx
Presentation1asdghjhgggfhgfghfvbndj.pptxPresentation1asdghjhgggfhgfghfvbndj.pptx
Presentation1asdghjhgggfhgfghfvbndj.pptx
sandeepkushwahag2000
 
‘Everybody is a designer’ revisited: 
A Retrospective on Design’s Power, Posi...
‘Everybody is a designer’ revisited: 
A Retrospective on Design’s Power, Posi...‘Everybody is a designer’ revisited: 
A Retrospective on Design’s Power, Posi...
‘Everybody is a designer’ revisited: 
A Retrospective on Design’s Power, Posi...
Lou Susi
 
EY – The Future of Assurance | How Technology is Transforming the Audit
EY – The Future of Assurance | How Technology is Transforming the AuditEY – The Future of Assurance | How Technology is Transforming the Audit
EY – The Future of Assurance | How Technology is Transforming the Audit
INKPPT
 
soc114-igfiebruvbupibvịbelỉbvch22-2024.pptx
soc114-igfiebruvbupibvịbelỉbvch22-2024.pptxsoc114-igfiebruvbupibvịbelỉbvch22-2024.pptx
soc114-igfiebruvbupibvịbelỉbvch22-2024.pptx
duongvd12c4bc1718
 
最新版加拿大莱斯桥学院毕业证(Lethbridge毕业证书)原版定制
最新版加拿大莱斯桥学院毕业证(Lethbridge毕业证书)原版定制最新版加拿大莱斯桥学院毕业证(Lethbridge毕业证书)原版定制
最新版加拿大莱斯桥学院毕业证(Lethbridge毕业证书)原版定制
Taqyea
 
Presentation 11.pptx presentation.......
Presentation 11.pptx presentation.......Presentation 11.pptx presentation.......
Presentation 11.pptx presentation.......
aashrithakondapalli8
 
FLOOR-PLAN Junior high school architecture planning.docx
FLOOR-PLAN Junior high school architecture planning.docxFLOOR-PLAN Junior high school architecture planning.docx
FLOOR-PLAN Junior high school architecture planning.docx
JamelaTeo
 
Beautiful Motherhood (Kal-el's Shows Slideshow)
Beautiful Motherhood (Kal-el's Shows Slideshow)Beautiful Motherhood (Kal-el's Shows Slideshow)
Beautiful Motherhood (Kal-el's Shows Slideshow)
Kal-el's Shows
 
Using AI to Streamline Personas and Journey Map Creation
Using AI to Streamline Personas and Journey Map CreationUsing AI to Streamline Personas and Journey Map Creation
Using AI to Streamline Personas and Journey Map Creation
Kyle Soucy
 
Tempalte Corporate BUsines Promotion news
Tempalte Corporate BUsines Promotion newsTempalte Corporate BUsines Promotion news
Tempalte Corporate BUsines Promotion news
AditiaAfifArfiansyah
 
Furniture design for projects-vol-3-brochure.pdf
Furniture design for projects-vol-3-brochure.pdfFurniture design for projects-vol-3-brochure.pdf
Furniture design for projects-vol-3-brochure.pdf
AjayBhonge1
 
"Dino World: The Ultimate Dinosaur Coloring Book for Kids"
"Dino World: The Ultimate Dinosaur Coloring Book for Kids""Dino World: The Ultimate Dinosaur Coloring Book for Kids"
"Dino World: The Ultimate Dinosaur Coloring Book for Kids"
Ijaz Ahmad
 
The Role of Structure and Materials in Design.pptx
The Role of Structure and Materials in Design.pptxThe Role of Structure and Materials in Design.pptx
The Role of Structure and Materials in Design.pptx
Prof. Hany El-Said
 
CORPORATE OFFICE INTERNAL BRANDING OF A LEADING INDO-JAPANESE AUTOMOTIVE BRAND
CORPORATE OFFICE INTERNAL BRANDING OF A LEADING INDO-JAPANESE AUTOMOTIVE BRANDCORPORATE OFFICE INTERNAL BRANDING OF A LEADING INDO-JAPANESE AUTOMOTIVE BRAND
CORPORATE OFFICE INTERNAL BRANDING OF A LEADING INDO-JAPANESE AUTOMOTIVE BRAND
aonbanerjee
 
Carte d'indentité1 a model for a nes country
Carte d'indentité1 a model for a nes countryCarte d'indentité1 a model for a nes country
Carte d'indentité1 a model for a nes country
stephaniethomas940921
 
BCG’s Evolution of Travel: Rethinking Business Travel in a Post-Pandemic World
BCG’s Evolution of Travel: Rethinking Business Travel in a Post-Pandemic WorldBCG’s Evolution of Travel: Rethinking Business Travel in a Post-Pandemic World
BCG’s Evolution of Travel: Rethinking Business Travel in a Post-Pandemic World
INKPPT
 
Digital Marketing Mock Project - Client Testimonial
Digital Marketing Mock Project - Client TestimonialDigital Marketing Mock Project - Client Testimonial
Digital Marketing Mock Project - Client Testimonial
Adeline Yeo
 
BHSIWIKJHDCU.pptx MCXDT789OKNBVCDRT678IOLKNBVCXDRTYUIOKMN
BHSIWIKJHDCU.pptx MCXDT789OKNBVCDRT678IOLKNBVCXDRTYUIOKMNBHSIWIKJHDCU.pptx MCXDT789OKNBVCDRT678IOLKNBVCXDRTYUIOKMN
BHSIWIKJHDCU.pptx MCXDT789OKNBVCDRT678IOLKNBVCXDRTYUIOKMN
05241146
 
PPT -MBI_07 .pptx final to present today
PPT -MBI_07 .pptx final to present todayPPT -MBI_07 .pptx final to present today
PPT -MBI_07 .pptx final to present today
nikhilpanchal510
 
KPMG – ESG Predictions 2030 | Future Trends in Sustainability & Governance
KPMG – ESG Predictions 2030 | Future Trends in Sustainability & GovernanceKPMG – ESG Predictions 2030 | Future Trends in Sustainability & Governance
KPMG – ESG Predictions 2030 | Future Trends in Sustainability & Governance
INKPPT
 
Presentation1asdghjhgggfhgfghfvbndj.pptx
Presentation1asdghjhgggfhgfghfvbndj.pptxPresentation1asdghjhgggfhgfghfvbndj.pptx
Presentation1asdghjhgggfhgfghfvbndj.pptx
sandeepkushwahag2000
 
‘Everybody is a designer’ revisited: 
A Retrospective on Design’s Power, Posi...
‘Everybody is a designer’ revisited: 
A Retrospective on Design’s Power, Posi...‘Everybody is a designer’ revisited: 
A Retrospective on Design’s Power, Posi...
‘Everybody is a designer’ revisited: 
A Retrospective on Design’s Power, Posi...
Lou Susi
 
EY – The Future of Assurance | How Technology is Transforming the Audit
EY – The Future of Assurance | How Technology is Transforming the AuditEY – The Future of Assurance | How Technology is Transforming the Audit
EY – The Future of Assurance | How Technology is Transforming the Audit
INKPPT
 
soc114-igfiebruvbupibvịbelỉbvch22-2024.pptx
soc114-igfiebruvbupibvịbelỉbvch22-2024.pptxsoc114-igfiebruvbupibvịbelỉbvch22-2024.pptx
soc114-igfiebruvbupibvịbelỉbvch22-2024.pptx
duongvd12c4bc1718
 
最新版加拿大莱斯桥学院毕业证(Lethbridge毕业证书)原版定制
最新版加拿大莱斯桥学院毕业证(Lethbridge毕业证书)原版定制最新版加拿大莱斯桥学院毕业证(Lethbridge毕业证书)原版定制
最新版加拿大莱斯桥学院毕业证(Lethbridge毕业证书)原版定制
Taqyea
 
Presentation 11.pptx presentation.......
Presentation 11.pptx presentation.......Presentation 11.pptx presentation.......
Presentation 11.pptx presentation.......
aashrithakondapalli8
 
FLOOR-PLAN Junior high school architecture planning.docx
FLOOR-PLAN Junior high school architecture planning.docxFLOOR-PLAN Junior high school architecture planning.docx
FLOOR-PLAN Junior high school architecture planning.docx
JamelaTeo
 
Beautiful Motherhood (Kal-el's Shows Slideshow)
Beautiful Motherhood (Kal-el's Shows Slideshow)Beautiful Motherhood (Kal-el's Shows Slideshow)
Beautiful Motherhood (Kal-el's Shows Slideshow)
Kal-el's Shows
 
Using AI to Streamline Personas and Journey Map Creation
Using AI to Streamline Personas and Journey Map CreationUsing AI to Streamline Personas and Journey Map Creation
Using AI to Streamline Personas and Journey Map Creation
Kyle Soucy
 
Tempalte Corporate BUsines Promotion news
Tempalte Corporate BUsines Promotion newsTempalte Corporate BUsines Promotion news
Tempalte Corporate BUsines Promotion news
AditiaAfifArfiansyah
 

Jquery- One slide completing all JQuery

Editor's Notes

  • #10: Many frameworks, such as Bootstrap, make their magic happen by having developers add certain classes or other attributes to their HTML. Often, the values you&amp;apos;ll use for classes or attributes have consistent patterns or prefixes. jQuery allows you to select items by searching inside of attribute values for desired sub-strings.
  • #11: For example, an a element inside of a nav section may need to be treated differently than a elements elsewhere on the page. CSS, and in turn jQuery, offer the ability to find items based on their location. $(&amp;apos;nav &amp;gt; a&amp;apos;) &amp;lt;nav&amp;gt; &amp;lt;a href=”#”&amp;gt;(First) This will be selected&amp;lt;/a&amp;gt; &amp;lt;div&amp;gt; &amp;lt;a href=”#”&amp;gt;(Second) This will **not** be selected&amp;lt;/a&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/nav&amp;gt;
  • #14: jQuery offers you the ability to update the text inside of an element by using the text method, and the HTML inside of an element by using the html method. Both methods will replace all of the content of an element. The main difference between the two methods is html will update (and parse) the HTML that&amp;apos;s passed into the method, while text will be text only. If you pass markup into the text method, it will be HTML encoded, meaning all tags will be converted into the appropriate syntax to just display text, rather than markup. In other words, &amp;lt; will become &amp;lt; and just display as &amp;lt; in the browser. By using text when you&amp;apos;re only expecting text, you can mitigate cross-site scripting attacks.
  • #15: Web pages are typically built using an event based architecture. An event is something that occurs where we, as the developer, don&amp;apos;t have direct control over its timing. Unlike a classic console application, where you provide a list of options to the user, in a time and order that you choose, a web page presents the user with a set of controls, such as buttons and textboxes, that the user can typically click around on whenever they see fit. As a result, being able to manage what happens when an event occurs is critical. Fortunately, in case you hadn&amp;apos;t already guessed, jQuery provides a robust API for registering and managing event handlers, which is the code that will be executed when an event is raised. Event handlers are, at the end of the day, simply JavaScript functions.
  • #16: To register an event handler, you will call the jQuery method that matches the event handler you&amp;apos;re looking for. For example, if you wanted the click event, you&amp;apos;d use the click method. Methods for wiring up event handlers allow you to pass either an existing function, or create an anonymous method. Most developers prefer to use an anonymous method, as it makes it easier to keep the namespace clean and not have to name another item. Inside of the event handler code, you can access the object that raised the event by using this. One important note about this is it is not a jQuery object but rather a DOM object; you can convert it by using the jQuery constructor as we&amp;apos;ve seen before: $(this)
  翻译: