Stats

930 Contributors: 32
2017-06-12
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook

Selectors

Download jquery eBook

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')

Related Examples