Jquery_tutorial

A. Introduction 🧑‍💻

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 takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

B. jQuery CDN path

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

C. 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:::

You might have noticed that all jQuery methods in our examples, are inside a document ready event:

type1:

  $(document).ready(function(){

   // jQuery methods go here...

   });

type2:

  $(function(){

   // jQuery methods go here...

   });

Examples:

$(this).hide() - hides the current element.

$("p").hide() - hides all elements.

::: https://youtu.be/HE_4DjvvJGs

D. Selectors

ALL selector $(*)

Current selector $(this)

Class selector $(".class")

Element selector $("p")

Id selector $("#id")

Attribute selector $("input[type="text"]")

Example:

RunCode/////////// SourceCode

:::https://youtu.be/Pw9i4H2PsYI

E. What are Events?

   All the different visitors' actions that a web page can respond to are called events.
   An event represents the precise moment when something happens.
  
   Examples:

   moving a mouse over an element
   selecting a radio button
   clicking on an element

Here are Various Types?

blur()

click()

dbclick()

focus()

focusin()

focusout()

hover()

mousedown()

mouseleave()

mousemove()

mouseout()

mouseover()

mouseup()

toggle()

submit()

scroll()

keyup()

keydown()

keypress()

select()

Example:

RunCode/////////// SourceCode

::part-1: https://youtu.be/wV08YuMpzCA

::part-2: https://youtu.be/L0rfjYdvWzg

::part-3: https://youtu.be/B3q0FPB8R3w

F. Jquery Effects?

Show/Hide

Show()

Hide()

Toggle()

Example:

RunCode/////////// SourceCode

::: https://youtu.be/OoCZBg1HY_M

Fade

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

Example:

RunCode/////////// SourceCode

::: https://youtu.be/vkPULgC8Ulo

Slide

slideDown()

slideUp()

slideToggle()

Example:

RunCode/////////// SourceCode

::: https://youtu.be/RrSgsSqvZVw

animate

jQuery animate() - Manipulate Multiple Properties

jQuery animate() - Using Relative Values

jQuery animate() - Using Pre-defined Values

jQuery animate() - Uses Queue Functionality

Example:

RunCode/////////// SourceCode

::: https://youtu.be/pgs_boB89Xo

stop

stop() sliding

stop() animation

Example:

RunCode/////////// SourceCode

::: https://youtu.be/gQbdc_bmA3s

callback

with callback

without callback

Example:

RunCode/////////// SourceCode

::: https://youtu.be/IJ08Bn0Ca5Y

Chaining

.css().slideup().slidedown().........

Example:

RunCode/////////// SourceCode

::: https://youtu.be/yxTCE5I_dos

G. Jquery HTML

Jquery Get

html()

text()

val()

attr()

Example:

RunCode/////////// SourceCode

::: https://youtu.be/_Svt22ozoYg

Jquery Set

html()

text()

val()

attr()

Example:

RunCode/////////// SourceCode

::: https://youtu.be/YaiEIASC2Uw

Jquery Add

append()

prepend()

after()

before()

Example:

RunCode/////////// SourceCode

::: https://youtu.be/PTM-yl4qqfc

Jquery Remove

remove()

empty()

Example:

RunCode/////////// SourceCode

::: https://youtu.be/9VXj8yMpkcg

Jquery Css Classes

addClass()

removeClass()

toggleClass()

css()

Example:

RunCode/////////// SourceCode

::: https://youtu.be/0qwTkW2CzH8

Jquery css()

Return a CSS Property

Set a CSS Property

Set Multiple CSS Properties

Example:

RunCode/////////// SourceCode

::: https://youtu.be/Dx3gV9nxt5o

Jquery Dimension

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

Example:

RunCode/////////// SourceCode

::: https://youtu.be/LK2xOgaqPyc

H. Jquery noConflict() Method

The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use

Example: RunCode/////////// SourceCode

::: https://youtu.be/8wStwd56BOA

I. Jquery Traversing

jQuery traversing, means accessing a particular type of element according to their relation with other elements such as child,parent,grandparent etc.

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 <li> element is the parent of <span>, child of <ul> and a descendant of <div>
 
 👉 The two left and right <span> element is a child of the <li> and a descendant of <ul> and <div>
 
 👉  left and right <span> are siblings childs which is  childs  of its same parent <li>

:::https://youtu.be/b_EVovod_Mk

JQuery Ancestors : An ancestor is a parent, grandparent, great-grandparent, and so on.

parent()

parents()

parentsUntil()

Example:

RunCode/////////// SourceCode

::: https://youtu.be/4DNmreUSTaU

JQuery Descendants : A descendant is a child, grandchild, great-grandchild, and so on.

children()

find()

Example:

RunCode/////////// SourceCode
::: https://youtu.be/BNVozn6BqWg

JQuery Sibling : Siblings share the same parent.

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

Example:

RunCode/////////// SourceCode

Jquery Filtering : in which allow you to select a specific element based on its position in a group of elements.

first()- method returns the first element of the specified elements.

last()-method returns the last element of the specified elements.

eq()-method returns an element with a specific index number of the selected elements.

filter()-method returns an element that you have to choose and match the criteria

not()- method returns all elements that do not match the criteria.

Example:

RunCode/////////// SourceCode