Category Archives: Uncategorized

future perfect tense – communications skills

FUTURE ACTION

TIME FRAME:Tomorrow,the day after tomorrow,next week,next month,next year a few days

STRUCTURE:

positive:

(I,we,you,they,he,she,it)+will+v1+other words+time frame of simple future

Example:
1.I will return your book tomorrow
2.I will go abroad after my post graduation.

Negative:

(I,we,you,they,he,she,it)+willnot/won’t+v1+other words+time frame of simple future

Example:
1.I won’t come late tomorrow
2.He won’t make this mistake again in future

Question:
(Will,you,they,he,she,it)+v1+other words+time frame of simple future

Example:
1.Will you come to the institute tomorrow?
2.will you call me up in the evening tomorrow?

APPLICATION:
To question any action that will take place in future.

FUTURE SITUATION:
Time frame:Tomorrow,the day after tomorrow,nextweek,next month/year,after afew days.

STRUCTURE:
POSITIVE:
(I,we you,they,he,she,it+will be+noun/adjective+future time

Examples:
1.I will be on time tomorrow.
2.My brother will be graduate by next year.

NEGATIVE:
I,we,you,they,he,she,it+will not be+other words+time frame

Examples:
1.I won’t be absent to the class tomorrow.
2.I will not be here at 5 this evening.

QUESTION:
Will+you,they,he+be+other words+time frame of simple future

Example:
1.will you be regular to school from tomorrow onwards?
2.Will the shop be open at 8 tomorrow evening?

Application: To indicate

1.profession,qualification
2.physical/state
3.Time,day,date,cost
4.Age
5.Any quality,of a person/place/thing in future time.
PRESENT PERFECT
TIME FRAME:Just now,recently,this week/month/year
still,yet,never,till now,since,for.

STRUCTURE:
POSITIVE:
I,you,they+have+v3+other words+time frame
He,she,it+has+v3+other words+time frame

Examples:
1.We have come to hyderabad recently
2.sita and her husband have gone out just now.

NEGATIVE:
I,you,we,they,he,she,it+haven’t/have never+v3+other words+time frame has never+hasn’t+v3+other words time frame

Example:
1.I have never seen a tamil movie.
2.I haven’t read today’s news paper.

QUESTION:
1.Have you ever seen a ghost?
2.Has Rao passed his exam?

APPLICATION:

1.To indicate an action that happened just now.
2.To indicate an action,which,happened in the past but the result,is still on.
3.An action, which has never happened till now for an individual.

PRESENT PERFECT CONTINUOUS
TIME FRAME:since/for/or any event.
STRUCTURE:

POSITIVE:

subject(I,we,you,they)+have been+verb+ing+other words+time frames
subject(he,she,it)+have been+verb+ing+other words+time frame.

Example:
1.I have been staying in hyderabad since 1982.
2.Rupa has been working in wipro for the past 10 years

NEGATIVE:
SUBJECT(i,WE,YOU,THEy)+have not been+verb+ing+other words+time frame.
subject(he,she,it)+have not been+verb+ing+other words+time frame.

Example:
1.I haven’t been waiting for a long time.
2.sunil hasn’t been working since 1993.

QUESTION:
For how long+have+subject(you,we,they)+been+verb+ing+other words?
For how long+has+subject(he,she,it)+been+verb+ing+other words?
since when+have+subject(you,we,they)+been+verb+ing+other words?

Example:
1.For how long have you been staying here?
2.for how long has sachin been playing cricket?

APPLICATION:

To indicate an action or situationwhich started in the past and is still going on.

jQuery Properties |context |jquery Property| jQuery.fx.interval |jQuery.fx.off |jQuery.support|

jQuery Properties :

Method Description
context Deprecated in version 1.10. Contains the original context passed to jQuery()
jquery Contains the jQuery version number
jQuery.fx.interval Change the animation firing rate in milliseconds
jQuery.fx.off Globally disable/enable all animations
jQuery.support A collection of properties representing different browser features or bugs (Intended for jQuery’s internal use)
length Contains the number of elements in the jQuery object

jQuery context Property :

Example :

  • Determine the context:
$("div").append("<p>" + $("div").context + "</p>")
.append("<p>" + $("div",document.body).context.nodeName + "</p>");

Definition and Usage :

  • The context property was deprecated in jQuery version 1.10.
  • The context property contains the original context passed to jQuery, which could be a DOM node context, or, if no node is passed, the document context.

Syntax :

context

jquery Property :

Example   :

  • Alert the current running jQuery version:
$("button").on("click",function(){
var version = $().jquery;
alert("You are running jQuery version: " + version);
});

Definition and Usage :

  • The jquery property returns a string containing the jQuery version number.

Syntax :

$().jquery

jQuery.fx.interval :

Example :

  • Cause the animation of a <div> element to run with less frames:
$("#toggle").on("click", function(){
$("div").toggle(5000);
});
$("#interval").on("click", function(){
jQuery.fx.interval = 500;
});

Definition and Usage :

  • The jQuery.fx.interval property is used to change the animation firing rate in milliseconds.
  • The default value is 13 milliseconds. This property is often used to modify the number of frames per second at which animations will run. Lowering the firing rate can make animations to run smoother. However, it may cause performance and CPU implications.
  • Note: For any changes to this property to take effect, no animation should be running or all animations should be stopped first.
  • Note: This property has no effect in browsers that support the requestAnimationFrame property.

Syntax  :

jQuery.fx.interval = <em>milliseconds</em>;
Parameter Description
milliseconds Required. Specifies the animation firing rate in milliseconds. Default is 13 milliseconds

jQuery.fx.off :

Example :

  • Toggle animation on and off:
$("#true").click(function(){
jQuery.fx.off = true;
});
$("#false").click(function(){
jQuery.fx.off = false;
});
$("#toggle").click(function(){
$("div").toggle("slow");
});

Definition and Usage :

  • The jQuery.fx.off property is used to globally disable/enable all animations.
  • Default value is false, which allows animations to run normally. When set to true, all animation methods will be disabled, which will immediately set elements to their final state, instead of displaying an effect.
  • Tip: To shorten the code, it is possible to use $.fx.off instead of jQuery.fx.off.

Syntax :

jQuery.fx.off = true|false;

jQuery.support :

Example :

Test whether the browser can create an XMLHttpRequest object:

$(document).ready(function(){
$(“p”).html(“This browser can create XMLHttpRequest object: ” + jQuery.support.ajax);
});

jQuery – Get Content and Attributes | Set Content and Attributes |Add Elements | Remove Elements | Get and Set CSS Classes | css() Method | Dimensions | see more….

jQuery contains powerful methods for changing and manipulating HTML elements and attributes.


jQuery DOM Manipulation :

  • One very important part of jQuery is the possibility to manipulate the DOM.
  • jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes.
DOM = Document Object Model :The DOM defines a standard for accessing HTML and XML documents:

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”


Get Content – text(), html(), and val() :

Three simple, but useful, jQuery methods for DOM manipulation are:

  1. text() – Sets or returns the text content of selected elements
  2. html() – Sets or returns the content of selected elements (including HTML markup)
  3. val() – Sets or returns the value of form fields

The following example demonstrates how to get content with the jQuery text() and html() methods:

Example :

$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

Get Attributes – attr() :

The jQuery attr() method is used to get attribute values.

The following example demonstrates how to get the value of the href attribute in a link:

Example :

$("button").click(function(){
alert($("#w3s").attr("href"));
});

jQuery – Set Content and Attributes :

Set Content – text(), html(), and val() :

We will use the same three methods from the previous page to set content:

  1. text() – Sets or returns the text content of selected elements
  2. html() – Sets or returns the content of selected elements (including HTML markup)
  3. val() – Sets or returns the value of form fields

The following example demonstrates how to set content with the jQuery text(), html(), and val() methods:

Example :

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});

A Callback Function for text(), html(), and val() :

All of the three jQuery methods above: text(), html(), and val(), also come with a callback function. The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) value. You then return the string you wish to use as the new value from the function.

The following example demonstrates text() and html() with a callback function:

Example  :

$("#btn1").click(function(){
    $("#test1").text(function(i, origText){
        return "Old text: " + origText + " New text: Hello world!
        (index: " + i + ")"; 
    });
});

$("#btn2").click(function(){
    $("#test2").html(function(i, origText){
        return "Old html: " + origText + " New html: Hello <b>world!</b>
        (index: " + i + ")"; 
    });
});

Set Attributes – attr() :

The jQuery attr() method is also used to set/change attribute values.

The following example demonstrates how to change (set) the value of the href attribute in a link:

Example :

$("button").click(function(){
    $("#w3s").attr("href", "http://www.w3schools.com/jquery");
});

The attr() method also allows you to set multiple attributes at the same time.

The following example demonstrates how to set both the href and title attributes at the same time:

Example :

$("button").click(function(){
    $("#w3s").attr({
        "href" : "http://www.w3schools.com/jquery",
        "title" : "W3Schools jQuery Tutorial"
    });
});

A Callback Function for attr() :

The jQuery method attr(), also come with a callback function. The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) attribute value. You then return the string you wish to use as the new attribute value from the function.

The following example demonstrates attr() with a callback function:

Example :

$("button").click(function(){
    $("#w3s").attr("href", function(i, origValue){
        return origValue + "/jquery"; 
    });
});

jQuery – Add Elements :

With jQuery, it is easy to add new elements/content.


Add New HTML Content :

We will look at four jQuery methods that are used to add new content:

  1. append() – Inserts content at the end of the selected elements
  2. prepend() – Inserts content at the beginning of the selected elements
  3. after() – Inserts content after the selected elements
  4. before() – Inserts content before the selected elements

jQuery append() Method :

The jQuery append() method inserts content AT THE END of the selected HTML elements.

Example :

$("p").append("Some appended text.");

 

jQuery prepend() Method :

The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements.

Example :

$("p").prepend("Some prepended text.");

Add Several New Elements With append() and prepend() :

  • In both examples above, we have only inserted some text/HTML at the beginning/end of the selected HTML elements.
  • However, both the append() and prepend() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/HTML (like we have done in the examples above), with jQuery, or with JavaScript code and DOM elements.

In the following example, we create several new elements. The elements are created with text/HTML, jQuery, and JavaScript/DOM. Then we append the new elements to the text with the append() method (this would have worked for prepend() too) :

Example :

function appendText() {
    var txt1 = "<p>Text.</p>";               // Create element with HTML  
    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
    var txt3 = document.createElement("p");  // Create with DOM
    txt3.innerHTML = "Text.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements 
}</pre>
</div>
</div>
</div>
</div>

jQuery after() and before() Methods :

  • The jQuery after() method inserts content AFTER the selected HTML elements.
  • The jQuery before() method inserts content BEFORE the selected HTML elements.

Example :

$("img").after("Some text after");

$("img").before("Some text before");

Add Several New Elements With after() and before() :

  • Also, both the after() and before() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/HTML (like we have done in the example above), with jQuery, or with JavaScript code and DOM elements.

In the following example, we create several new elements. The elements are created with text/HTML, jQuery, and JavaScript/DOM. Then we insert the new elements to the text with the after() method (this would have worked for before() too) :

Example :

function afterText() {
    var txt1 = "<b>I </b>";                    // Create element with HTML  
    var txt2 = $("<i></i>").text("love ");     // Create with jQuery
    var txt3 = document.createElement("b");    // Create with DOM
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}

jQuery – Remove Elements :

With jQuery, it is easy to remove existing HTML elements.


Remove Elements/Content :

To remove elements and content, there are mainly two jQuery methods:

  1. remove() – Removes the selected element (and its child elements)
  2. empty() – Removes the child elements from the selected element

jQuery remove() Method :

The jQuery remove() method removes the selected element(s) and its child elements.

Example :

$("#div1").remove();

jQuery empty() Method :

The jQuery empty() method removes the child elements of the selected element(s).

Example:

$("#div1").empty();

Filter the Elements to be Removed:

The jQuery remove() method also accepts one parameter, which allows you to filter the elements to be removed.

The parameter can be any of the jQuery selector syntaxes.

The following example removes all <p> elements with class=”test”:  

Example:

$("p").remove(".test");

This example removes all <p> elements with class=”test” and class=”demo”:  

Example :

$("p").remove(".test, .demo");

jQuery – Get and Set CSS Classes :

With jQuery, it is easy to manipulate the CSS of elements.


jQuery Manipulating CSS :

jQuery has several methods for CSS manipulation. We will look at the following methods:

  1. addClass() – Adds one or more classes to the selected elements
  2. removeClass() – Removes one or more classes from the selected elements
  3. toggleClass() – Toggles between adding/removing classes from the selected elements
  4. css() – Sets or returns the style attribute

Example Stylesheet :

  • The following stylesheet will be used for all the examples on this page:
.important {
    <span class="highATT">font-weight:</span><span class="highVAL"> bold;</span>
    <span class="highATT">font-size:</span><span class="highVAL"> xx-large;</span>
}

<span class="highELE">.blue </span>{
    <span class="highATT">color:</span><span class="highVAL"> blue;</span>
}

jQuery addClass() Method :

The following example shows how to add class attributes to different elements. Of course you can select multiple elements, when adding classes:

Example :

$("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
});</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="example_code notranslate"> 

You can also specify multiple classes within the addClass() method:

Example:

$("button").click(function(){
    $("#div1").addClass("important blue");
});

jQuery removeClass() Method :

The following example shows how to remove a specific class attribute from different elements:

Example :

$("button").click(function(){
    $("h1, h2, p").removeClass("blue");
});

jQuery toggleClass() Method :

The following example will show how to use the jQuery toggleClass() method. This method toggles between adding/removing classes from the selected elements:

Example :

$("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
});

jQuery – css() Method :

The css() method sets or returns one or more style properties for the selected elements.


Return a CSS Property :

  • To return the value of a specified CSS property, use the following syntax:
  • css(“propertyname”);
  • The following example will return the background-color value of the FIRST matched element:

Example :

$("p").css("background-color");

Set a CSS Property :

To set a specified CSS property, use the following syntax:

  • css(“propertyname”,”value”);

The following example will set the background-color value for ALL matched elements:

Example :

$("p").css("background-color", "yellow");

Set Multiple CSS Properties :

To set multiple CSS properties, use the following syntax:

css({"<i>propertyname</i>":"<i>value</i>","<i>propertyname</i>":"<i>value</i>",...});[/js]</pre>
</div>
<div></div>
<div></div>
</div>
<em><strong>The following example will set a background-color and a font-size for ALL matched elements:</strong></em>
<div class="example">
<h2 class="example">Example :</h2>
<div class="example_code notranslate">1$("p").css({"background-color": "yellow", "font-size": "200%"});

jQuery - Dimensions :

With jQuery, it is easy to work with the dimensions of elements and browser window.


jQuery Dimension Methods :

jQuery has several important methods for working with dimensions:

  1. width()
  2. height()
  3. innerWidth()
  4. innerHeight()
  5. outerWidth()
  6. outerHeight()

jQuery Dimensions :

jQuery Dimensions


jQuery width() and height() Methods :

  • The width() method sets or returns the width of an element (excludes padding, border and margin).
  • The height() method sets or returns the height of an element (excludes padding, border and margin).

The following example returns the width and height of a specified <div> element:

Example :

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});

jQuery innerWidth() and innerHeight() Methods :

  • The innerWidth() method returns the width of an element (includes padding).
  • The innerHeight() method returns the height of an element (includes padding).

The following example returns the inner-width/height of a specified <div> element:

Example :

$("button").click(function(){
    var txt = "";
    txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
    txt += "Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
});

jQuery outerWidth() and outerHeight() Methods :

  • The outerWidth() method returns the width of an element (includes padding and border).
  • The outerHeight() method returns the height of an element (includes padding and border).

The following example returns the outer-width/height of a specified <div> element:

Example :

$("button").click(function(){
    var txt = "";
    txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
    txt += "Outer height: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});
  • The outerWidth(true) method returns the width of an element (includes padding, border, and margin).
  • The outerHeight(true) method returns the height of an element (includes padding, border, and margin).

Example :

$("button").click(function(){
    var txt = "";
    txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
    txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
    $("#div1").html(txt);
});

jQuery More width() and height() :

The following example returns the width and height of the document (the HTML document) and window (the browser viewport):

Example :

$("button").click(function(){
    var txt = "";
    txt += "Document width/height: " + $(document).width();
    txt += "x" + $(document).height() + "\n";
    txt += "Window width/height: " + $(window).width();
    txt += "x" + $(window).height();
    alert(txt);
});

jQuery Traversing :

What is Traversing? :

  • jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire.
  • The image below illustrates a family tree. With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the family tree, starting from the selected (current) element. This movement is called traversing - or moving through - the DOM.
jQuery Dimensions

Illustration explained:

  1. The <div> element is the parent of <ul>, and an ancestor of everything inside of it
  2. The <ul> element is the parent of both <li> elements, and a child of <div>
  3. The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>
  4. The <span> element is a child of the left <li> and a descendant of <ul> and <div>
  5. The two <li> elements are siblings (they share the same parent)
  6. The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>
  7. The <b> element is a child of the right <li> and a descendant of <ul> and <div>

Traversing the DOM :

  • jQuery provides a variety of methods that allows us to traverse the DOM.
  • The largest category of traversal methods are tree-traversal.
  • The next chapters will show us how to travel up, down and sideways in the DOM tree.

jQuery Traversing - Ancestors :

  • An ancestor is a parent, grandparent, great-grandparent, and so on.
  • With jQuery you can traverse up the DOM tree to find ancestors of an element.

Traversing Up the DOM Tree :

Three useful jQuery methods for traversing up the DOM tree are:

  1. parent()
  2. parents()
  3. parentsUntil()

jQuery parent() Method :

  • The parent() method returns the direct parent element of the selected element.
  • This method only traverse a single level up the DOM tree.

The following example returns the direct parent element of each <span> elements:

Example :

$(document).ready(function(){
    $("span").parent();
});

jQuery parents() Method :

The parents() method returns all ancestor elements of the selected element, all the way up to the document's root element (<html>).

The following example returns all ancestors of all <span> elements:

Example :

$(document).ready(function(){
    $("span").parents();
});

jQuery parentsUntil() Method :

The parentsUntil() method returns all ancestor elements between two given arguments.

The following example returns all ancestor elements between a <span> and a <div> element:

Example :

$(document).ready(function(){
    $("span").parentsUntil("div");
});

jQuery Traversing - Descendants :

A descendant is a child, grandchild, great-grandchild, and so on.

With jQuery you can traverse down the DOM tree to find descendants of an element.


Traversing Down the DOM Tree :

Two useful jQuery methods for traversing down the DOM tree are:

  1. children()
  2. find()

jQuery children() Method :

  • The children() method returns all direct children of the selected element.
  • This method only traverse a single level down the DOM tree.

The following example returns all elements that are direct children of each <div> elements:

Example :

$(document).ready(function(){
    $("div").children();
});

jQuery find() Method :

The find() method returns descendant elements of the selected element, all the way down to the last descendant.

The following example returns all <span> elements that are descendants of <div>:

Example :

$(document).ready(function(){
    $("div").find("span");
});

jQuery Traversing - Siblings :

  • Siblings share the same parent.
  • With jQuery you can traverse sideways in the DOM tree to find siblings of an element.

Traversing Sideways in The DOM Tree :

There are many useful jQuery methods for traversing sideways in the DOM tree:

  1. siblings()
  2. next()
  3. nextAll()
  4. nextUntil()
  5. prev()
  6. prevAll()
  7. prevUntil()

jQuery siblings() Method :

  • The siblings() method returns all sibling elements of the selected element.

The following example returns all sibling elements of <h2>:

Example :

$(document).ready(function(){
    $("h2").siblings();
});

jQuery next() Method :

  • The next() method returns the next sibling element of the selected element.

The following example returns the next sibling of <h2>:

Example :

$(document).ready(function(){
    $("h2").next();
});</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

jQuery nextAll() Method :

  • The nextAll() method returns all next sibling elements of the selected element.

The following example returns all next sibling elements of <h2>:

Example :

$(document).ready(function(){
    $("h2").nextAll();
});1</pre>
</div>
<div class="example_code notranslate"></div>
<div class="example_code notranslate">
<h2>jQuery nextUntil() Method :</h2>
<ul>
	<li>The nextUntil() method returns all next sibling elements between two given arguments.</li>
</ul>
<em><strong>The following example returns all sibling elements between a <h2> and a <h6> element:</strong></em>
<div class="example">
<h2 class="example">Example :</h2>
<div class="example_code notranslate">1$(document).ready(function(){
$("h2").nextUntil("h6");
});

jQuery prev(), prevAll() & prevUntil() Methods :

  • The prev(), prevAll() and prevUntil() methods work just like the methods above but with reverse functionality: they return previous sibling elements (traverse backwards along sibling elements in the DOM tree, instead of forward).

jQuery Traversing - Filtering :

Narrow Down The Search For Elements :

  • The three most basic filtering methods are first(), last() and eq(), which allow you to select a specific element based on its position in a group of elements.
  • Other filtering methods, like filter() and not() allow you to select elements that match, or do not match, a certain criteria.

jQuery first() Method :

The first() method returns the first element of the selected elements.

The following example selects the first <p> element inside the first <div> element:

Example :

$(document).ready(function(){
    $("div p").first();
});

jQuery last() Method :

The last() method returns the last element of the selected elements.

The following example selects the last <p> element inside the last <div> element:

Example :

$(document).ready(function(){
$("div p").last();
});

jQuery eq() method :

  • The eq() method returns an element with a specific index number of the selected elements.

The index numbers start at 0, so the first element will have the index number 0 and not 1. The following example selects the second <p> element (index number 1):

Example :

$(document).ready(function(){
$("p").eq(1);
});

jQuery filter() Method :

  • The filter() method lets you specify a criteria. Elements that do not match the criteria are removed from the selection, and those that match will be returned.

The following example returns all <p> elements with class name "intro":

Example :

$(document).ready(function(){
$("p").filter(".intro");
});

jQuery not() Method :

  • The not() method returns all elements that do not match the criteria.

Tip: The not() method is the opposite of filter().

The following example returns all <p> elements that do not have class name "intro":

Example :

$(document).ready(function(){
$("p").not(".intro");
});