Java Script Java Script
JaiswalTraining

Get the online training



Corejava Servlet Jsp  Php  Hibernate  Ajax Web Service   Ejb2.1 Ejb3.0 Struts Struts2  JPA Spring Ibatis   JSF    JSF2.0  CoreJavaDesignPattern    Jquery  Flex J2EE-Design-Patterns  Jboss7  Maven  Contact Me                                                                                                                                                                        
            IGNOU SMU PTU Project                                           Training                                                                                                                              
              

Contact Us  0091- 9210721663         jaiswaltraining@gmail.com





Corejava
Servlet
Jsp
Php
Hibernate
Ajax
Web Service
Ejb2.1
Ejb3.0
Struts  
Struts2
JPA
Spring
Ibatis
JSF
JSF2.0
CoreJavaDesignPattern
Jquery
Flex
J2EE-Design-Patterns
Jboss7
Maven








Selecting Elements with jQuery

Overview

Making Sure the Page Is Ready
  • Before we can interact with HTML elements on a page,
    those elements need to have been loaded: 
$(document).ready(function() {

 alert('Page is Ready');

});

Simple Selecting

Syntax
:

jQuery(<selectors go here>)

Or

$(<selectors go here>)

Buliding Blocks of Selectors

  1. Three building blocks of these selectors are tag name, ID, and class.
  2.  They can be used either on their own or in combination with other selectors.



Selecting Process
  • To select by element type, you simply pass the element’s HTML name
    as a string parameter to the $  function.
  • To select all table row elements (which are marked up with the <tr>  tag),
    simply write:
    $('tr')
  • If we wanted to select every paragraph, div element, h1 heading, or input
    box on the page,use these selectors accordingly:

    $('p')

    $('div')
    $('h1')
    $('input')
  • jQuery borrows the conventions from CSS for referring to id  and class names. 
  • To select by id, use the hash symbol (#) followed by the element’s id, and
    pass this as  a string to the jQuery function:

    $('#stud')
  • We can use a CSS class  selector to select by class. 
  • We pass a string consisting of a period (.) followed by the element’s class  name
    to the jQuery  function:

    $('.data')


CSS selectors
  • The jQuery library supports nearly all of the selectors included in CSS 
<h3>List of Movies</h3>
<BODY>
<ul id="movies">
  <li>Action
    <ul>
      <li><a href="/www.Raone.com/">Raone</a></li>
      <li>Dabangg</li>
      <li>Force</li>
      <li>Bodyguard</li>
    </ul>
  </li>
  <li>comedy
  <ul>
      <li><a href="www.ready.com">Ready</a></li>
      <li>Loot</li>
      <li>Hey Baby</li>
    </ul>
  </li>
  </ul>
</div>
</BODY>

  •  The frst <ul> has an ID of selected-plays, but none of the <li> tags
    have a class associated with them. 
  • Without any styles applied, the list looks like this:


  • Now we want the top-level items, and only the top-level items, to be
    arranged horizontally
.horizontal {
  float: left;
  list-style: none;
  margin: 10px;
}
  • The horizontal class foats the element to the left of the one following it,
  • It removes the bullet from it if it's a list item.
  • It adds a 10 pixel margin on all sides of it.
  • Rather than attaching the horizontal class directly in our HTML,
    we'll add  it dynamically to the top-level list items only—Action,Comedy
  • As shown below.
$(document).ready(function() {
  $('#movies > li').addClass('horizontal');
});

  • The second line uses the child combinator (>) to add the horizontal class to all 
    top-level items only. 
  • In effect, the selector inside the $() function is saying, find each list item (li)
    that is a child (>) of the element with an ID of moviess (#movies).

demo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
.horizontal {
  float: left;
  list-style: none;
  margin: 10px;
}




</style>
<script type="text/JavaScript" 
src="jquery.js"></script> 
<script type="text/JavaScript">
$(document).ready(function() {
  $('#movies > li').addClass('horizontal');
});

</script> 
</HEAD>
<h3>List of Movies</h3>
<BODY>
<ul id="movies">
  <li>Action
    <ul>
      <li><a href="/www.Raone.com/">Raone</a></li>
      <li>Dabangg</li>
      <li>Force</li>
      <li>Bodyguard</li>
    </ul>
  </li>
  <li>comedy
  <ul>
      <li><a href="www.ready.com">Ready</a></li>
      <li>Loot</li>
      <li>Hey Baby</li>
    </ul>
  </li>
  </ul>
</div>
</BODY>
</HTML>

Download Code

Custom selectors
  • To the wide variety of CSS selectors, jQuery adds its own custom selectors.
  • Most of the custom selectors allow us to pick certain elements out of a line-up.
  • The syntax is the same as the CSS pseudo-class syntax, where the selector starts with a colon (:)
Styling alternate rows

Two very useful custom selectors in the jQuery library are
:odd and :even.

Add a style to the stylesheet for all table rows, and use an alt class for
the even rows

tr {
  background-color: #fff;
}
.alt {
  background-color: #ccc;
}

jQuery code, attaching the class to the even-numbered table
rows (<tr> tags):

$(document).ready(function() {
  $('tr:odd').addClass('alt');
});




Example:-student.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN"
>
<HTML>
<HEAD>

<style type="text/css">
th{color="red"}
h3{color="blue"}
.head{background:black}
tr {
  background-color: #fff;
}
.alt {
  background-color: #ccc;
}
</style>

<script type="text/JavaScript" 
src="jquery.js"></script> 

<script type="text/JavaScript">
$(document).ready(function() {
  $('tr:odd').addClass('alt');
});
</script> 
</HEAD>

<BODY>
<h3>Student Marks Sheet</h3>
<table border="1">
<tr>

<th class="head">ID</th><th class="head">Name</th>
<th 
class="head">Marks</th></tr>
<tr><td>101</td>
<td>Shankar</td>
<td>59</td>
</tr>

<tr>

<td>102</td>
<td>Jitender</td>
<td>89</td>
</tr>

<tr>

<td>103</td>
<td>Sagar</td>
<td>79</td>
</tr>

<td>104</td>
<td>Javed</td>
<td>33</td>
</tr>

<td>105</td>
<td>Salman</td>
<td>59</td>
</tr>

<td>106</td>
<td>Geeta</td>
<td>49</td>
</tr>


</table>

</BODY>
</HTML>

Output:-
  • Now the output chnaged


Download Code

Form selectors
  •  jQuery's custom selectors can make short work of
    selecting just the elements we need.
  • A handful of  form selectors: are given below:-