Getting started – jQuery

jQuery is a minified version of JavaScript library and used for client-side activities and make ajax call to web forms/MVC actions. We can handle HTML DOM events, animation and ajax operations with jQuery library.

Developer recommends a little knowledge of HTML, CSS and JavaScript to work with jQuery. Below are some advantages to use jQuery in our application:

• Easy to understand
• Easily integrated
• Fast processing
• SEO friendly
• Fluent animation

When we create a .NET core application using Visual Studio, jQuery library will automatically integrate in lib folder under wwwroot folder. Our layout page has below line in head tag of razor page:

<script src="~/lib/jquery/dist/jquery.min.js"></script>

If you create any other project or this library is not included in your solution then you can reference jQuery from CDN URLs:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

For any error or not working code, we have to use jQuery script in layout/master page’s head section. By doing this our library will loaded before our script section. Now we can write some script code to test that we have successfully loaded jQuery library in our project.

Call jQuery library functions

After including jQuery library in our application if we want to write jQuery code in our page, we should call it in $(document).ready() function.

<script>
  $(document).ready(function () {
    alert("Test");
  });
</script>

Include above code just after loading jQuery library or in any page that have a master page. The master page should have jQuery library reference. Run your application the of-course same page in which you have placed script code. It will show an alert message and that’s it, we have successfully included jQuery reference in our application.

The best practice of writing our jQuery code is to create a js file in wwwroot folder and write our js code in that. Reference that file in our page (to which the jQuery code belongs) at the last.

Data Types

Like all languages, jQuery have also all the data types to store variables. String, numbers, objects, arrays are most common data types and jQuery have only var type to store all these types of values.

var strName = "jQuery names"; //string
var numValue = 10; //number
var boolValue = true; //boolen
var objModel = {
    name: "student",
    age: 26,
    group: "c",
    havePhone: true
}; //object model
var arrAges = [25, 26, 27, 28, 29, 30]; //number array
var arrGroups = ["A", "B", "C", "D", "E", "F"]; //string array

Functions

jQuery functions are either named or anonymous. Named function can be defined using function keyword and a handler function would not have any name.

function function1() { //named function
    //some logic
}
var funcHandler = function () { //anonymous function

}

Selectors

To find out matching elements from DOM jQuery have its own selectors. You can select one or more HTML elements from DOM and can perform operations like to change background color, delete multiple elements, toggle CSS for an element etc.

• Tag-Name: Any HTML tag name in DOM can be used as selector like $(‘div’) will selects all <div> on the page.
• Tag-ID: Used to select a single id on the DOM. $(‘#divImages’) will selects the <div> having id ‘divImages’.
• Tag-Class: Used to select all the elements having particular class. $(‘.age-group’) will select all the elements having class ‘age-group’.

Advantage of using hosted jQuery from Google:

Many users already have downloaded jQuery from Google when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN’s will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.