jQuery Selectors

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Introduction

A jQuery selectors selects or finds a DOM (document object model) element in an HTML document. It is used to select HTML elements based on id, name, types, attributes, class and etc. It is based on existing CSS selectors.

Syntax

  • Tag: No marker, use the tag directly
  • Id: #id
  • Class: .className
  • Attribute: [attributeName]
  • Attribute with value: [attributeName ='value']
  • Attribute starts with value ^=: [attributeName ^= 'value']
  • Attribute ends with value $=: [attributeName $='value']
  • Attribute contains value *= : [attributeName *= 'value']
  • Pseudo-selector: :pseudo-selector
  • Any descendant: Space between selectors
  • Direct children: > between selectors
  • Adjacent sibling following the first: +
  • Non-adjacent sibling following the first: ~
  • Or: , (comma) between selector

Remarks

When writing selectors for class or id or attribute which contains some special characters like

! " # $ % & ' ( ) * + , . / : ; < = > ? @ [ \ ] ^ { | } ~

the characters need to be escaped using two backslashes \\ .

eg.

<span id="temp.foobar"><span>

the selectors will be framed like,

$('#temp\\.foobar')


Got any jQuery Question?