What is J Query? How to use J Query in ASP.NET Core?
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 –
- jQuery is mini library with light weigh architecture, which takes very less time to load in browser.
- jQuery designed with objective write less do more , so you need to write very less code as compare to javascript.
- jQuery do not have no unresponsive script execution problem, since jquery code will be executed only when your document is ready.
- jQuery functions are designed in such a way that those can operate on single value, no value or set of values.
- 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.
- jQuery knows all modern browser , supports all modern browsers.
- jQuery has it’s own event model do not depend on browser events.
- 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.
- 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.
- 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 –
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.
- Tag Selector
- Class selector
- 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 –
- first
- last
- even
- 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");
poker online lengkap
May 17, 2024 at 6:23 amGɑ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
homepage
August 9, 2024 at 11:37 amRattling great information can be found on web site.Leadership
Peter Cardy
August 14, 2024 at 8:32 amHey 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 pmI 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 pmHi, 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 amIt’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 pmImpressive 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 pmReplica Sneakers for Men ry465
replica shoes,Fake Shoes hr631
fake bags online
September 26, 2024 at 10:11 pmreplica handbags online iw844,fake bags online,luxurytastic hf757
Replica Sneakers for Men
October 23, 2024 at 12:34 amReplica Sneaker hi013
Replica Sneakers for Men,Replica Sneakers for Men uq646
Replica Sneakers for Men
October 25, 2024 at 5:45 pmdiscountshoesmart xz915
Replica Sneakers for Men,Fake Shoes yd471