Lesson 12: Introduction to Built-In JavaScript Objects

jQuery and JavaScript Built-In Objects

Introduction

Remember that jQuery is primarily a JavaScript library. jQuery supports and recognizes the objects used in JavaScript such as the window, the document, etc. As a result, you can access the members of the window object directly in your jQuery code. For example, to display a message box, simply call the alert() function and pass the desired string to it.

In previous lessons, we saw that jQuery uses the $() object to select objects (or HTML tags) in a webpage. To access a DOM object in jQuery, you can pass that object to the parentheses of $(). For example, to access a webpage document in jQuery, you can use $(document). To access the Window object of a browser in JQuery, you can use $(window).

Introduction to DOM Events in jQuery

After specifying the object you want to access from a webpage, you can attach the event it to fire. jQuery supports the same events of JavaScript and the same names.

To attach a JavaScript (a DOM) event to a selected element, after the parentheses of $(...), type a period and on() in a formula as follows:

$(object).on(event-name, function-definition);

In the parentheses of $(), you will include an object. The on() method takes two arguments. The first is the DOM name of the event you want to use. The name is passed as a string. The second argument is the function that will carry the event, that is the job you want to do when the event fires. You can first define the function and then pass its name as the second argument to the on() method. As an alternative, you can define the function directly in the second argument placeholder.

Once the Document is Ready

As mentioned already, just before a webpage displays, the browser fires the onload event. To apply this event, you can use the following formula:

$(object).on("load", function-definition);

The object can be window. To let you catch the load event, JQuery provides a method named ready. To use it, apply it to $(...) to which you would pass a document object as in $(document).ready(). Pass a function to the ready() method. The formula to follow is:

$( document ).ready(function-definition);

As mentioned earlier, you can first define a function and then pass it as argument. The formula to follow is:

function doSomething(){
}

$( document ).ready(doSomething);

Otherwise, you can define the function directly in the parentheses of the ready() method. Either way, in the body of the function, create the behavior you want.

As a shortcut to the ready() event, jQuery allows you to omit the (document).ready section. As a result, simply include the function definiton in the parentheses of $().

Clicking an Element

Clicking an element in a webpage causes the object to fire the click event. To apply this event, attach it to an element selected through $(). You can first define a function and then pass its name as argument to click(), or you can define the function directly in the parentheses of click(). This would be done as follows:

$(document).ready(function () {
    $("something").click(function (event) {
    });
});

Primary Characteristics of an Element

The HTML Markup of a Selected Element

One of the types of items you can select on a webpage is the name of an HTML tag. After making such a selection, to let you specify the text of the element, jQuery provides a method named html. To call this method, attach it to $("tag-name"). An example is $("p").html(). In the parentheses of the html() method, pass the text as string. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Quotes</title>
<script src="Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<h1>Nixon Quotes</h1>

<p>Quotes</p>

<script>
    $(document).ready(function () {
        $("p").html("If you take no risks, you will suffer no defeats. But if you take no risks, you winn no victories.");
    });
</script>

</body>
</html>

One of the valuable features of the html() method is that it takes and recognizes both HTML attributes and CSS formatting if you include them appropriately in the argument of the method. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Quotes</title>
<script src="Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<h1>Saying</h1>

<p>Quotes</p>

<script>
    $(document).ready(function () {
        $("p").html("When the President does it, that means that it&#039s not illegal. - <b>Richard M. Nixon</b>");
        $("h1").html("<span style='font-weight: bold; color: #800000'>President Nixon Quotes</span>");
    });
</script>

</body>
</html>public

The Value of an Element

As you may know already, to represent the value of a web control, the DOM provides the val() method. After selecting an element, you can apply this method to it and pass the string you want to display. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Employee Record</title>
<script src="Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<h1 class="empl-rec">Employee Record</h1>

<p>Full Name: <input type="text" /></p>  

<script>
    $(document).ready(function () {
        $("input").val("Antoine Mayer");
    });
</script>

</body>
</html>


Previous	Copyright © 2017-2022, FunctionX	Next