Basics

Include

Download JQuery Library: Download


<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

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

Selectors | Attributes/CSS | Manipulation | Traversing | Events | Effects | AJAX | CORE

Selectors

Basics

$("*") //Selects all Elements
$(".class") //Selects all Elements with the given class
$("element") //Selects all Elements with the given tag name
$("#id") //Selects a single Elements with the given id attribute
$("selector1, selectorN, ...") //Selects the combine results of all the specified slectors

Hierarchy

$("parent > child") //Selects all direct child elments specified by 'child' of elements specified by 'parents'
ancestor descendant
prev + next
prev ~ siblings

Basic Filters

:animated
:eq()
:even
:first
:gt()
:header
:lang()
:last
:lt()
:not()
:odd
:root
:target

Content Filters

:contains()
:empty
:has()
:parent
Visibility Filters
:hidden
:visible
[name|="value"]
[name*="value"]
[name~="value"]
[name$="value"]
[name="value"]
[name!="value"]
[name^="value"]
[name]
[name="value"][name2="value2"]

Child Filters

:first-child
:first-of-type
:last-child
:last-of-type
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type()

Forms

:button
:checkbox
:checked
:disabled
:enabled
:focus
:file
:image
:input
:password
:radio
:reset
:selected
:submit
:text

All Selector $(“*”)

Description: Selects all elements.

Example #1

Find every element (including head, body, etc) in the document. Note that if your browser has an extension/add-on enabled that inserts a <script> or <link> element into the DOM, that element will be counted as well.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>all demo</title>
  <style>
  h3 {
    margin: 0;
  }
  div, span, p {
    width: 80px;
    height: 40px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
 
<script>
var elementCount = $( "*" ).css( "border", "3px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
</script>
 
</body>
</html>

Result:

Example #2

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>all demo</title>
  <style>
  h3 {
    margin: 0;
  }
  div, span, p {
    width: 80px;
    height: 40px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  #test {
    width: auto;
    height: auto;
    background-color: transparent;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="test">
  <div>DIV</div>
  <span>SPAN</span>
  <p>P <button>Button</button></p>
</div>
 
<script>
var elementCount = $( "#test" ).find( "*" ).css( "border", "3px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
</script>
 
</body>
</html>

Result:

a class Selector $(“.class”)

Description: Selects all elements with the given class.

For class selectors, jQuery uses JavaScript's native getElementsByClassName() function if the browser supports it.

Example #1

Finds the element with the class "myClass".

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class demo</title>
  <style>
  div, span {
    width: 120px;
    height: 40px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
 
<script>
$( ".myClass" ).css( "border", "3px solid red" );
</script>
 
</body>
</html>

Result:

Example #2

Finds the element with both myclass" and "otherclass" classes.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class demo</title>
  <style>
  div, span {
    width: 120px;
    height: 40px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="myclass">div class="notMe"</div>
<div class="myclass otherclass">div class="myClass"</div>
<span class="myclass otherclass">span class="myClass"</span>
 
<script>
$( ".myclass.otherclass" ).css( "border", "13px solid red" );
</script>
 
</body>
</html>

JQuery Basic Cheatsheet

Basics

Include

Selectors | Attributes/CSS | Manipulation | Traversing | Events | Effects | AJAX | CORE

Selectors

Basics

Hierarchy

All Selector $(“*”)

Example #1

Result:

Example #2

Result:

a class Selector $(“.class”)

Example #1

Result:

Example #2

Result:

1 Comments

Contact Form