JQuery & AJAX Selecting & Editing Elements

In this article, I’m going to walk you through some code that I styled with JQuery. You’ll learn:

  • How to select elements in your web page numerous ways
  • How to edit elements in your web page in numerous ways
  • Learn how to monitor event handler’s with JQuery and JavaScript
  • And a bunch more…

Here is the Code

Like in all my other tutorial’s I’ll hit you with a bit of code and then describe it in blockquoted section’s. Every line of code work’s. I tested it multiple time’s. So feel free to copy whatever you’d like.

<title>JQuery Example</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>

Here I am defining the beginning of my HTML page. In the last line, I am pulling the latest JQuery library directly from the JQuery home page. Now I can use all of the function’s defined in that library. I code have stored the library on my server and referenced that with the src attribute as well.

p.third {
font-weight: normal;

p.styleSample {
font-weight: bold;

Here I am defining some CSS Style’s that I will use in the code below. If you don’t know what this is read my CSS Style HTML tutorial. I normally would link to a style sheet and not embed the code directly in the HTML, but I wanted to keep all of the code in the same place.

<script type=”text/javascript”>
window.onload = function() {
document.getElementById(‘oneButton’).onclick = boldTheText;
document.getElementById(‘twoButton’).onclick = countParagraphs;
document.getElementById(‘threeButton’).onclick = deleteDiv;
document.getElementById(‘fourButton’).onclick = changeText;
document.getElementById(‘fiveButton’).onclick = allTheSame;
document.getElementById(‘sixButton’).onclick = changeStyle;
document.getElementById(‘sevenButton’).onclick = messUpLast;
document.getElementById(‘eightButton’).onclick = bringDivBack;
document.getElementById(‘nineButton’).onclick = makeBlue;
document.getElementById(‘tenButton’).onclick = slideItUp;
document.getElementById(‘elevenButton’).onclick = anotherP;

I’m telling the browser that everything that lies between the <script> tags is javascript code. If you don’t know what this is read my JavaScript Scripting Tutorial. I then tell the browser with the second line of code, that I want it to perform all of the action’s defined between the curly braces {}, as soon as the page loads.

With, document.getElementById(‘oneButton’).onclick = boldTheText; I’m saying that I want the node with the identification name ‘oneButton’, which lies in the current document or current web page, to be assigned an event handler. When someone clicks this element, I want the function named boldTheText to be called.

The element with the identification name ‘oneButton’ is located in the HTML code below. It is a form button and looks like this:

<button type=”button” id=”oneButton”>Bold Text</button>

The other lines of code inside of the curly braces, performs the same action’s to other button’s on the page.

function boldTheText() {
document.getElementById(‘first’).style.fontWeight = ‘bold’;

This is a JavaScript function. It is called when someone clicks the button I just described. It sets the element in the web page with the identification name ‘first’, to have a CSS font weight equal to bold.

You can change the CSS styling of any element on the page, without performing a page reload.

function countParagraphs()
alert(“There are ” + $(“p”).size() + ” paragraphs.”);

Here you are seeing the JQuery selector for the first time. JQuery allows you to easily select elements in a web page and edit them in many ways. The selector looks like this $(). Here I’m using it to select all <p> tags. Then I use a prebuilt method of the selector named size(), to return the total number of paragraphs on the web page.

I throw those result’s into a string and display them in an alert box the visitor will see.

function deleteDiv()

Here I demonstrate another way to select elements. I’m stating that I want to make the div with the class name firstDiv, disappear off of the screen with the fadeOut() function.

When the button below is clicked it will do just that. The div tag I am referencing here looks like this:

<div class=”firstDiv”>

function changeText()
$(“#second”).html(“You changed me”);

This function will change the text that lies in the paragraph with the identification name second. This is a lot easier than straight JavaScript right? The paragraph tag it is referencing and changing looks like this:

<p id=”second”>Second Paragraph</p>

function allTheSame()
$(“div.firstDiv p”).html(“We are the same”);

This function will look for all paragraph tag’s that lie inside of the div, with the class name “firstDiv” and insert the text “We are the same”, into them.

function changeStyle()

This function will assign new CSS styling to the paragraph which is of class third. That tag looks like this:

<p id=”third”>Third Paragraph</p>

The function toggleClass(), will allow you to change CSS styling without a page reload.

function messUpLast()
$(‘p:last’).css(“font-style”, “italic”);

Here I use the JQuery selector to choose the last paragraph on the web page and change the fon-style of it to italic. You have just seen the beginning of the JQuery styling methods, but css() is pretty neat.

function bringDivBack()

Remember when I made the div of class ‘firstDiv’, disappear with the fadeOut() function? Well, I thought better of it and I’m using the show function to bring it back.

function makeBlue()
$(‘p’)[3].style.color = ‘blue’;

Yet another way to select element’s. Here I’m stating that I want the 4th <p> element on the web page to be colored blue. No that wasn’t a typo, I meant to type 4th. The first element on the web page has the index of zero, instead of 1.

Yes, you also just learned another way to CSS style element’s in JQuery. You can also directly change CSS attribute’s of an element by referencing the attribute name after the attribute named style.

function slideItUp()

Here is another way to select an element in a web page. This selector code makes reference to an element with the identification name fourth. The function slideUp() will make the element named “fourth” seem as if it was swallowed by the web page. It disappears slowly with a slide. The element looks like this below:

<p id=”fourth”>Fourth Paragraph</p>

function anotherP()
$(“<p>Another Paragraph</p>”).insertAfter(‘#fifth’);

This code will insert a new <p> element after the element named “fifth”. The new element will contain the text: “Another Paragraph”.

The rest of the HTML code should be completely understandable if you know HTML and CSS.



<h2>Playing with Paragraphs</h2>

<p id=”first”>I Should be Bold</p>
<p id=”second”>Second Paragraph</p>
<p id=”third”>Third Paragraph</p>
<p id=”fourth”>Fourth Paragraph</p>
<p id=”fifth”>Fifth Paragraph</p>

<button type=”button” id=”oneButton”>Bold Text</button>
<button type=”button” id=”twoButton”>Count Paragraphs</button>
<button type=”button” id=”threeButton”>Delete Div</button>
<button type=”button” id=”fourButton”>Change Text</button>
<button type=”button” id=”fiveButton”>All the Same</button>
<button type=”button” id=”sixButton”>Change Style</button>
<button type=”button” id=”sevenButton”>Mess with the Last</button>
<button type=”button” id=”eightButton”>Bring Div Back</button>
<button type=”button” id=”nineButton”>Make 4th Blue</button>
<button type=”button” id=”tenButton”>Slide Down</button>
<button type=”button” id=”elevenButton”>Another P</button>


That’s All Folk’s

I hope you enjoyed this article. If you have any question’s leave them in the comment section below. I will cover everything else JQuery & AJAX, in the following article’s. Then you’ll be an internet genius.

Here to Serve

Think Tank

2 Responses to “JQuery & AJAX Selecting & Editing Elements”

  1. Prashant Srivastava says:

    when i run this code & click any of the button nothing happened, plz tell me what the reason behind this. I am waiting for ur rply. i write all this code very correct manner but nothing happened.


    • admin says:

      You need to turn all of the backwards quotes into normal quotes. This is an old security feature. Or, you could get the code from my New Jquery Video Tutorial. It is much better and you can just download the code at once in a zipped archive.

      I hope that helps – Derek

Leave a Reply

Your email address will not be published.