| by Achyut Kendre | 12 comments

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");

12 Comments

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
kartu 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 homepage – poker online lengkap

homepage

August 9, 2024 at 11:37 am Reply

Rattling great information can be found on web site.Leadership

Peter Cardy

August 14, 2024 at 8:32 am Reply

Hey there, I appreciate you posting great content covering that topic with full attention to details and providing updated data. I believe it is my turn to give back, check out my website 85N for additional resources about Thai-Massage.

wholesale vibrator

August 18, 2024 at 2:19 pm Reply

I loved as much as you’ll receive carried out right here.
The sketch is tasteful, your authored subject matter stylish.
nonetheless, you command get got an shakiness over that you wish be delivering the following.
unwell unquestionably come further formerly
again as exactly the same nearly a lot often inside
case you shield this hike.

Ulrich

August 18, 2024 at 7:17 pm Reply

Hi, I do believe this is a great web site. I stumbledupon it
😉 I will revisit yet again since I book marked it.
Money and freedom is the best way to change, may you be rich and continue to guide other people.

Jamal

August 19, 2024 at 7:24 am Reply

It’s not my first time to pay a quick visit this website, i am visiting this
site dailly and get fastidious facts from here
daily.

Dewayne Gillespie

September 13, 2024 at 1:25 pm Reply

Impressive posts! My blog UQ4 about Cosmetics also has a lot of exclusive content I created myself, I am sure you won’t leave empty-handed if you drop by my page.

replica shoes

September 25, 2024 at 11:40 pm Reply

Replica Sneakers for Men ry465
replica shoes,Fake Shoes hr631

fake bags online

September 26, 2024 at 10:11 pm Reply

replica handbags online iw844,fake bags online,luxurytastic hf757

Replica Sneakers for Men

October 23, 2024 at 12:34 am Reply

Replica Sneaker hi013
Replica Sneakers for Men,Replica Sneakers for Men uq646

Replica Sneakers for Men

October 25, 2024 at 5:45 pm Reply

discountshoesmart xz915
Replica Sneakers for Men,Fake Shoes yd471

Bryanbaw

November 27, 2024 at 12:34 pm Reply

Hello!

Do you want to become the best SEO specialist and link builder or do you want to outpace your competitors?

Premium base for XRumer
$119/one-time
Get access to our premium database, which is updated monthly! The database contains only those resources from which you will receive active links – from profiles and postings, as well as a huge collection of contact forms. Free database updates. There is also the possibility of a one-time purchase, without updating the databases, for $38.

Fresh base for XRumer
$94/one-time
Get access to our fresh database, updated monthly! The database includes active links from forums, guest books, blogs, etc., as well as profiles and activations. Free database updates. There is also the possibility of a one-time purchase, without updating the databases, for $25.

GSA Search Engine Ranker fresh verified link list
$119/one-time
Get access to our fresh database, updated monthly! The fresh database includes verified and identified links, divided by engine. Free database updates. There is also the possibility of a one-time purchase, without updating the databases, for $38.

GSA Search Engine Ranker activation key
$65
With GSA Search Engine Ranker, you’ll never have to worry about backlinks again. The software creates backlinks for you 24 hours a day, 7 days a week. By purchasing GSA Search Engine Ranker from us, you get a quality product at a competitive price, saving your resources.

To contact us write to Telegram: https://t.me/DropDeadStudio

Leave a Reply