Introduction to jQuery
Introduction to jQuery
Fundamentals of jQuery
Overview
JavaScript is primarily a regular computer language. To complement it with ways to easily and quickly perform some operations, a library named jQuery was created. It provides a short way to write JavaScript code. You can use jQuery to add functionality to your ASP.NET (including MVC, Razor Pages, etc) project.
Practical Learning: Introducing jQuery
Introduction to the jQuery Script
jQuery is a library. It is provided as one or more files. The files have the extension .js (as JavaScript files). To use jQuery, you must provide a reference to the library. If you are regularly creating a webpage (or a website), you must first download the library from jquery.com. If you are working in Microsoft Visual Studio, the jQuery library is already installed.
Practical Learning: Introducing the jQuery Script
Using jQuery in a Web Page
To use jQuery, you must indicate where its library is located. This means that you must add a reference to the file that contains the primary functionality you want. You have various options. You can include the file by creating a <script></script> section. In the start tag, add a src attribute. Assign the path and the name of the file you want to use. Here is an example:
@page
@model Exercise1.Pages.Explanations
@{
ViewData["Title"] = "Explanations";
}
<h2>Explanations</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
If you are working in Microsoft Visual Studio, you can simply drag the jquery file from the Solution explorer to the document where you plan to use jQuery.
Minified Versions of Files
Library files such as jQuery are usually provided in various versions, one regular and one minified versions. The minified version contains .min in its name. As a result, jQuery comes in a file named jquery.js. The minified version is named jquery.min.js. In most cases, you can use either the regular or the minified version of jQuery.
Introduction to Writing jQuery Code
To write jQuery code in the same file that needs it, create a <script></script> section. Here is an example:
@page
@model Exercise1.Pages.Explanations
@{
ViewData["Title"] = "Explanations";
}
<h2>Explanations</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
</script>
If you want, in the start tag, you can add a TYPE attribute and specify its value as text/javascript. You can also add a LANGUAGE attribute. Here is an example:
@page
@model Exercise1.Pages.Explanations
@{
ViewData["Title"] = "Explanations";
}
<h2>Explanations</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" language="JavaScript">
</script>
Between <script> and </script>, you can write the code you want.
A File for jQuery Code
If you want, you can create a JavaScript file in which you want to define your jQuery functionality. To do this, start a text-based file. In the document, write the necessary jQuery code. Save the file with the .js extension. If you are using Microsoft Visual Studio, display the Add New Item dialog box and select JavaScript File.
jQuery and Razor Pages
Practical Learning: Checking jQuery Reference
Introduction to jQuery Objects
The $ Namespace
One of the main ways jQuery works is by using objects. As you may know from other languages, one of the ways you manage objects is by using namespaces. jQuery also uses namespaces. The most fundamental namespace used in jQuery is named $. To use one of the multiple members of this namespace, type $. followed by the desired member.
A jQuery Object
To support a way to create objects adapted for jQuery code, the library provides a special object created as $(). In the parentheses, you can use two values. One value is required and the other is optional.
Selecting an HTML Element in jQuery
As you may know already, a webpage is made of many HTML elements, called DOM elements. Those elements tell the browser what to do or how it should display the objects in the webpage. When using jQuery, to use an object in a webpage, you must indicate that object. This indication is referred to as selecting. To support object selection, jQuery provides the $() object. The primary formula to follow is:
$(...)
As mentioned in the previous section, the $() jQuery object takes some type of value. In some cases, the parentheses will contain the whole code you want to use. In some other cases, you will add some necessary behavior after the parentheses.
To access a DOM object in jQuery, you can pass that object in 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).
An Object for an Element
As you may be aware, a webpage is created by using HTML tags. Each tag has a name. Some tags have one or more attributes. To let you represent a tag as an object in jQuery, a tag can be passed by its name as a string in the parentheses of $(). For example, to use a paragraph as an object in jQuery, use $("p"). To use a link as an object in jQuery, use $("a"), and so on.
Introduction to DOM Events in jQuery
Overview
After specifying the object you want to access from a webpage, you can attach the event it will fire.
To attach 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 uses two values. The first is the DOM name of the event you want to use. The name is given in quotes. The second value specifies the event, that is, the job you want to do when the event fires.
Practical Learning: Introducing Events
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Fundamentals</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-page="/Index" class="navbar-brand">Fundamentals</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-page="/Welcome">Welcome</a></li>
<li><a asp-page="/About">About</a></li>
<li><a asp-page="/Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<partial name="_CookieConsentPartial" />
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p class="text-center">© 2019 - Fundamentals</p>
</footer>
</div>
. . .
</body>
</html>@page
@model Exercise1.Pages.Explanations
@{
ViewData["Title"] = "Welcome";
}
<h2>Welcome</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" language="JavaScript">
</script>Once the Document is Ready
As you may be aware, just before a webpage displays, the browser fires an event named onload. 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 uses ready(). To use it, apply it to $(...) to which you would pass a document object as in $(document).ready(). In ready(), create the behavior you want. The formula to follow is:
$( document ).ready(function-definition);
As an alternative, you can use the following formula:
function doSomething(){
}
$( document ).ready(doSomething);
Otherwise, you can define the behavior directly in the parentheses of ready().
As a shortcut to the ready() event, jQuery allows you to omit the (document).ready section. As a result, simply include the desired behavior in the parentheses of $().
Practical Learning: Introducing jQuery Code
@page
@model Exercise1.Pages.Explanations
@{
ViewData["Title"] = "Welcome";
}
<h2>Welcome</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function () {
});
</script>Clicking an Element
One of the most regular operations performed on an object of a webpage is to click. This action causes the control to fire an event named click. To apply this event, you can attach it to an element selected through $(). Like most events, click() uses one value. Here is an example:
$(document).ready(function () {
$("something").click(function (event) {
});
});
As an alternative, attach a behavior to on. It uses two values. The first is the name of the event, in this case "click". The second value will carry the event. An example is:
@page
@model Exercise1.Pages.ExplanationsModel
@{
ViewData["Title"] = "Exercise";
}
<h2>Exercise</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("Something").on("click", function (event) {
});
});
</script>
Practical Learning: Clicking an Element
@page
@model Exercise1.Pages.ExplanationsModel
@{
ViewData["Title"] = "Welcome";
}
<h2>Welcome</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function () {
$("h2").click(function (event) {
alert("Welcome to the wonderful world of jQuery");
});
});
</script>Introduction to jQuery Code
Introduction to Variables
A variable is a value that you want to use in your code. To declare a variable, start with var or let followed by a name. To initialize the variable, assign the desired value to it. Here is an example:
@page
@model Exercise1.Pages.ExplanationsModel
@{
ViewData["Title"] = "Exercise";
}
<h2>Exercise</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function () {
$("h2").click(function (event) {
let msg = "Welcome to the wonderful world of jQuery";
alert(msg);
});
});
</script>
A Constant Variable
After declaring and initializing a variable, if you are not planning to change its value, you should create it as a constant. To do this, instead of var or let, declare the variable using const. Here is an example:
@page
@model Exercise1.Pages.ExplanationsModel
@{
ViewData["Title"] = "Exercise";
}
<h2>Exercise</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function () {
$("h2").click(function (event) {
const msg = "Welcome to the wonderful world of jQuery";
alert(msg);
});
});
</script>
jQuery Operators
jQuery supports the same operators as the JavaScript language.
Comments
A comment is text created in a code section but that must not be produced in a webpage. jQuery supports comments.
Introduction to JavaScript Built-In Objects
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 alert() and pass the desired value to it.
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 html. To use it, 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:
@page
@model Exercise1.Pages.NixonQuotesModel
@{
ViewData["Title"] = "Nixon Quotes";
}
<h2>Nixon Quotes</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$("p").html("If you take no risks, you will suffer no defeats. But if you take no risks, you win no victories.");
});
</script>
One of the valuable features of html() is that it takes and recognizes both HTML attributes and CSS formatting if you include them appropriately. Here is an example:
@page
@model Exercise1.Pages.NixonQuotesModel
@{
ViewData["Title"] = "Nixon Quotes";
}
<h2>Nixon Quotes</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$("p").html("When the President does it, that means that it's not illegal. - <b>Richard M. Nixon</b>");
$("h1").html("<span style='font-weight: bold; color: #800000'>President Nixon Quotes</span>");
});
</script>
The Value of an Element
To represent the value of a web control, the DOM provides val(). After selecting an element, you can apply it and pass the string you want to display. Here is an example:
@page
@model Exercise1.Pages.EmployeeRecordModel
@{
ViewData["Title"] = "Employee Record";
}
<h2>Employee Record</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<h1 class="empl-rec">Employee Record</h1>
<p>Full Name: <input type="text" /></p>
<script>
$(document).ready(function () {
$("input").val("Antoine Mayer");
});
</script>
The Text of an Element
If the element whose value you want to display is not a Web control but another type of HTML tag, to let you display such a value, the DOM provides text. Here is an example:
@page
@model Exercise1.Pages.NixonQuotesModel
@{
ViewData["Title"] = "Nixon Quotes";
}
<h2>Nixon Quotes</h2>
<p><b>President:</b> <span id="fullName"></span></p>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$("span").text("Richard Nixon");
});
</script>
Practical Learning: Ending the Lesson
|
|
||
| Home | Copyright © 2017-2022, FunctionX | Next |
|
|
||