Off the Ridge code

Off the Ridge Code Newsletter

Search

Starting with jQuery – Part 2

Published April 24, 2014 in jQuery - 0Comments

What is selector in jQuery?

Selectors allow you to select elements on the page or in other words identify an HTML element on the page so that you can manipulate it with jQuery.
The basic syntax is:

jQuery(selector) or $(selector)

Selecting:
1. By Tag Name:

                  $(‘p’) – selects all <p> elements
                  $(‘a’) – selects all <a> elements
– reference multiple tags use comma, to separate the elements:
                $(‘a,p,div’) – selects all anchors, paragraphs and div elements.
– selecting descendants: 
      $(‘ancestor descendant’) – selects all descendants of the ancestor:
      $(‘table tr’) – selects all tr elements that are descendants of the table element
2. By ID:
   $(‘#myID’) – # hash tag indicates to jQuery that we’re looking for the ID.
3. By Class Name:
    
    $(‘.myClass’) – selects <p class=’myClass”>
Combining Tag Name with Class Name:
    $(‘a.myClass’) – selects only <a> tags with class “myClass”
Example:
Let’s apply some CSS to my html via jQuery.

HTML:

<body>
<div class=”FirstDiv”>
        <span>Stitched</span>
    </div>
 
    <br />
    <span class=”FirstDiv”>This is my First Span</span>
    <br />
    <div class=”SecondDiv”>
        <span>Second Div</span>
    </div>
</body>

jQuery:

<script type=”text/javascript”>
     
          $(document).ready(function()
          {
             $(‘.FirstDiv’).css({‘padding’:’20px’,
            ‘margin’:’10px’,
                                 ‘background’:’#ff0030′,
                                 ‘color’:’#fff’,
                                 ‘font-size’:’21px’,
                                  ‘font-weight’:’bold’,
                                  ‘line-height’:’1.3em’,
                                  ‘border’:’2px dashed #fff’,
                                  ‘border-radius’:’10px’,
                                  ‘box-shadow’:’0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5)’,
                                  ‘text-shadow’:’-1px -1px #aa3030′,
                                  ‘font-weight’:’normal’});
                             
 
          });
       
      </script>

Result:

I’ve applied CSS only to my FirstDiv (or so I thought) but we can see that there’s a problem.
The issue here is my span and my div have the same class name. One solution would be to rename the span but we jQuery selectors we can be very specific and fix it by qualifying the selector to with div, i.e. div.FirstDiv

  $(‘div.FirstDiv’).css({‘padding’:’20px’,
                 ‘margin’:’10px’,
                                    ‘background’:’#ff0030′,
                                    ‘color’:’#fff’,
                                    ‘font-size’:’21px’,
                                    ‘font-weight’:’bold’,
                                    ‘line-height’:’1.3em’,
                                     ‘border’:’2px dashed #fff’,
                                     ‘border-radius’:’10px’,
                                     ‘box-shadow’:’0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5)’,
                                     ‘text-shadow’:’-1px -1px #aa3030′,
                                     ‘font-weight’:’normal’});
Result:

Much better!

4. By Attributes:

To select by Attribute value we use brackets:
  1. $[‘a[author]] -> select all the anchor tags that have an author attribute.
  2. $[‘a[author=”charles dickens”]’) – select all anchor elements that have ‘charles dickens’ author attribute value.

Example:
HTML:
 <div author=’charles dickens’>
    charles dickens
    </div>

jQuery:
   $(document).ready(function()
              {
             var divs = $(‘div[author=”charles dickens”]’);
             divs.css({‘background’:’red’});
              });

Result:

 5. By Input Nodes

$(‘:input’) – selects all form control. (e.g.input, textarea, button, image, etc)
$(‘:input[type=”button”]’) – selects all buttons on the page.

6. Additional selectors:

 1. :contains()
     $(‘div:contains(“dickens”)’) – selects div’s that contain the text (case-sensitive) “dickens”.
     as in:
    <div>charles dickens</div>

2. odd or even rows in a table
    e.g. $(‘tr:odd’) and $(‘tr:even’)

3. $(‘element:first-child’) – selects the first child of every element group:
       e.g. $(‘span:first-child’)
as in:
<div>
   <span>first child, first group</span>
   <span>second child, first group</span>
</div>
<div>
   <span>first child, second group</span>
   <span>second child, second group</span>
</div>
<div>
   <span>first child, third group</span>
   <span>second child, third group</span>
</div>
etc..

4. [attribute^=”value“] – selects the elements that begin with value.
  e.g.
    $(‘input[value^=”Process“/>
 as in:
<input type=”button” value=”Process this stuff”/>
<input type=”button” value=”Process that stuff”/>

5. [attribute$=”value“] – selects the elements that end with value.
  e.g.
    $(‘input[value$=”stuff“/>
 as in:
<input type=”button” value=”Process this stuff“/>
<input type=”button” value=”Process that stuff“/>

5. [attribute*=”value“] – selects the elements that contains the value.
  e.g.
    $(‘input[value*=”stuff“/>
 as in:
<input type=”button” value=”Process this stuff“/>
<input type=”button” value=”Process that stuff“/>

You can download an example file to get you started.