| by Achyut Kendre | 1 comment

What is J Query? How to use J Query in ASP.NET Core?

Learn JQuery
J Query Introduction

jQuery is a lightweight mini Java Script library with objective – “write less, do more”. jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

Why jQuery?

jQuery is very popular due to following reasons –

  1. jQuery is mini library with light weigh architecture, which takes very less time to load in browser.
  2. jQuery designed with objective write less do more , so you need to write very less code as compare to javascript.
  3. jQuery do not have no unresponsive script execution problem, since jquery code will be executed only when your document is ready.
  4. jQuery functions are designed in such a way that those can operate on single value, no value or set of values.
  5. jQuery has it’s own selector engine which provides you n number of options to find the elements from the DOM. This is main reason why jQuery is popular. Due to this jQuery do not need to depend on browser dom traversal mechanism and you can optimize it in jQuery.
  6. jQuery knows all modern browser , supports all modern browsers.
  7. jQuery has it’s own event model do not depend on browser events.
  8. jQuery can be hosted in side your website or you can also consume the jQuery from CDNET (Content Delivery Networks), content delivery networks are the servers maintained by big companies like Microsoft, google, oracle where jQuery is already hosted.
  9. jQuery is extensible , it means you can extend jQuery to create your own libraries or plugins. lot of people had already created hundred’s of jQuery plugins.
  10. jQuery provides you lot of built in functions to perform activities like selector engine, DOM manipulation, DOM traversal etc.

How to install jQuery in ASP.NET Core

To use jQuery first we need to install it in ASP.NET Core Project using LibMan client side package manager. LibMan is light weight client side package manager in ASP.Net Core to install client side packages. To install jQuery

Step 1: add a folder wwwroot in your project if not exists, create js folder under wwwroot if not exits, just right click on js folder and click on add and click on LibMan as follows –

Liman
Libman
J Query using libman
J Query using lib man

Step 2 : Make sure static files middlware is added in Request pipeline using useStaticFiles middleware.

How to add jQuery to ASP.NET core View?

Step 1: To add jQuery to asp.net core view use the script tag (remember script tag should have a separate closing tag) as follows –

 <script type="text/javascript" src="~/js/jquery/jquery.js"></script>

In case of J Query you need to wrap entire j Query code in document ready method which will take care that your j query code will be executed only when your document is read. 

$(document).ready(function(){
 //wrap jquery code.
});

J Query had made above syntax more short since J Query has objective write less do more. 

$(function(){
 //J Query code
});

Then you can write a jQuery as follows –

<script type="text/javascript">
        $(function () {
            alert("Welcome! To JQuery!");
        });
    </script>

What Selector Engine in jQuery?

Selector engine is important feature of jquery which enables you to select the elements from DOM. jquery provides following selectors to select the elements from DOM.

  1. Tag Selector
  2. Class selector
  3. Id selector

You can use any of the above selector to find the elements from DOM.

css function: – jQuery provides you a built in function called css which will help you to manipulate the css attribute of any tag using jQuery. It has following syntax –

css("attributename","value")

Tag Selectors in jQuery

Tag selector will help you to find the tags from html document using tag name, once you select the tag you can manipulate that tag using jQuery code. You can use the following syntax as follows –

$(“tagname”).method/function();

Assume following document where we can apply the tag selectors. 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h1 class="first">J Query Example </h1>
    <h1> First Heading </h1>
    <p class="content"> first para used to demo </p>
    <h1> Second Heading</h1>
    <p id="paras"> second para used to demo </p>
    <h1 class="first"> Third Heading </h1>
    <p id="parat"> third para used to demo </p>
    <h2> Fourth heading </h2>
    <p class="content"> fourth para used to demo</p>
    </script>
</body>
</html>

If you want to select all h1 tags and apply background color you can implement s follows

 <script type="text/javascript" src="~/js/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
              $("h1").css("background-color", "yellow");
        });
    </script>

if you want to select p tag and apply some css to it we can do it as follows –

 <script type="text/javascript" src="~/js/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
                $("p").css("background-color", "cyan");
        });
    </script>

if you want to select multiple tags and apply css to multiple html tags –

<script type="text/javascript" src="~/js/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
             $("h1,h2,p").css("background-color", "skyblue");
        });
    </script>

Class Selectors in jQuery.

Class selector will help you to find the elements from the dom using css class name using following syntax –

$(".classname").method/function();

You can apply some css to tags with a class name .content as follows –

$(".content").css("background-color", "blue");

You can also select multiple tags using class name as follows –

$(".first,.content").css("background-color", "blue");

ID Selectors in jQuery.

This select will help you to find the elements using id attribute as follows –

$("#idname").method/function();

If you want to find the element using id paras as follows –

 $("#paras").css("background-color", "gold");

You can also find the elements by multiple ids as follows –

$("#parat,#paras").css("background-color", "silver");

You can also combine the multiple tag selectors as follows –

$("h1,.first,#paras").css("background-color", "blue");

Above select will find the element with tag name h1, class name .first and id paras

If you want to find the tag having name h1 with class head you can do it as follows –

$(“h1 .head).css(“background-color”,”orange”)

Select engine also provides you following filters like –

  1. first
  2. last
  3. even
  4. odd

If you want to find only first tag using all the selected tags we can use the first filter as follows –

$("h1:first").css("background-color","red");

It will select all h1 tags and select first tag from that selected h1 tags, similarly you can select last tag from –

$("h1:last").css("background-color","red");

Select all even index tags or odd index tags form selected tags as follows –

$("h1:even").css("background-color","red");
$("h1:odd").css("background-color","green");

« Prev

1 Comment

poker online lengkap

May 17, 2024 at 6:23 am Reply

Gɑme poker online hampir serupa ԁengan Game poker complimentary
yang banyak di ᴡeb facebook. Yang hanya membedɑkаn judi
kaｒtu pokеr online ini mengaplіkasikan uang orisinil.

Berbedа sekalі dengаn Ꮐame yang cuma mengaplikasikan chip virtual ( Bohοngan ) kemenangannya ticak bisa anda nikmati.
Karenanya Game judi kartu poker online iini banyak yang beratensi karena
dapat meningkatkan inbput uang belanja kalian dengan kencang dan mudah.

Also visit my homepagｅ – poker online lengkap

Leave a Reply