jquery introduction in hindi

Table of Contents

1 jQuery introduction
2 What is Jquery? Jquery क्या है?
3 jQuery को कैसे add करे अपने webpage में!
4 jQuery का उपयोग!
5 Jquery library feature

jQuery introduction

Hello दोस्तों आज हम इस post tutorial में jquery के बारे में जानेगे की jquery क्या है? और jquery कैसे work करती है! jquery को हम कैसे use कर सकते है हमारे perticuler task के लिए. मतलब की हम jquery के बारे में basic intro से उसका example tak सभी possible topic के बारे में जानेगे.

Jquery सिखने से पहले हमें HTML, CSS, JAVASCRIPT इन तीन technology के बारे में basic understanding होना बहुत जरुरी है!. फिरभी में आपको sort में इन तीन technology के बारे में introduce करा देता हु HTML जो है वह हमारी website के webpage का structure ready करने के लिए इस्तेमाल किया जाता है! जब की css का इस्तेमाल styling मतलब की इस HTML structure को design करने के लिए है! और javascript हमरी website में interactive functionality add करने के लिए estemal किया जाता है! जैसे की website में animation,user के click करने par click effect,hovering effect और scrolling ये sab javascript के इस्तेमाल से कर सकते है|
बात करे jquery की तो वह javascript की एक library है|.

What is Jquery? Jquery क्या है?

Jquery एक lightweight “write less do more” javascript libary है|.
jquery के इस library में javascript को अपने website में आसानी से use कर सके ऐसे single line code लिखे होते है जिसके चलते हम javascript के common taske perform करने के लिए कई line के code लिखते है वह jquery में एक line के code से वह javascript के common task perform कर सकते है|.
हम javascript और jquery का एक example के जरिये समझते है एक perticuler task को perform करने के लिए javascript और jquery में कितने line का code लिखना पड़ता है!

Javascript Example:

document.getElementById("test").innerHTML = "Hello javascript code";

Jquery Example:

$("#test").html("Hello jquery code");

तो आप compare कर सकते है javascript और jquery का line of code
jquery में लिखा गया code का output instended render कर सकते है किसी बी modern browser में|.

jQuery को कैसे add करे अपने webpage में!

jQuery को अपने HTML(webpage) में link करने के दो तरीके हैi।

Download करके अपने project folder में file create करके
Direct link via CDN(content delivery network)

Download करके अपने project folder में file create करके

jQuery को download करके उसके लिए एक file create करके अपने project के folder में set करके बी jquery का इस्तेमाल अपने project के लिए कर सकते है!


ProjectName/

├── css/

|       └── style.css

├── js/

|       └── script.js

|       └── custom.js
	
└── index.html

index.html

<!doctype html>
<html lang="en">
<head>
  <title>Localfolder jQuery Demo</title>
  <script src="js/scripts.js"></script>
  <script src="js/custom.js"></script>	
</head>
<body>
</body>
</html>

script.js में jquery library का code copy करके project में set कर सकते है और custom.js file में हमरा task के related हमारा jquery custom code होगा.

Direct link via CDN(content delivery network)

Direct link via CDN में हम just jquery की cdn link अपने HTML में set करनी होती है और हम jquery का इस्तेमाल अपने project के लिए कर सकते है|.

<!doctype html>
<html lang="en">
<head>
  <title>CDN jQuery Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>	
  <script src="js/custom.js"></script>
</head>
<body>
</body>
</html>

jquery का code लिखने से पहले हम jquery library अपने project में link करनी होती है तभी हम हमरी custom js में jquery का code लिख के perform करा सकते है|.

jQuery का उपयोग!

हमारी custom js file js folder में create की है उसमे हम हमारा jquery code कैसे लिख सकते है निचे आप देख सकते हैi.

js/custom.js

$(document).ready(function() {
    // custom jQuery code will be here
});

आपके दयारा लिखे गया सभी code $(document).ready(function() { … }) function में होगा. इस function में लिखा गया code तब execute होगा जब हमरा browser पूरा load हो जायेगा फिर हमरा jquery का cod execute होगा!.

अगर HTML के किसी block में text print करना हो या hide करना हो तो वह हम jquery से कर सकते है लेकिन jquery का code हमें $(document).ready(function() { … }) function में लिखना होता हैi.

jquery को dollar sign ($) के साथ represented किया जाता है|. ज्यादातर हम css syntax का इस्तेमाल करके jquery के साथ DOM का इस्तेमाल करते है|. css की तरह jquery में class को ( . ) sign के साथ और id को (#) sign से define किया जाता है|

Example:

<!doctype html>
<html lang="en">

<head>
  <title>CDN jQuery Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>	
</head>

<body>
   <script>
	$(document).ready(function() {
    	 $("$testcode").html("This is Jquery");	
	});
   </script>
   <div id="testcode"></div>
</body>
</html>

ऊपर के example में क्या किया है जब browser पूरा एक बार load हो जायेगा फिर html के element में जिसकी बी id testcode होगी उसमे “This is Jquery” text को इस id में replace कर देगा।

Jquery library feature

HTML event methods
CSS manipulation
HTML manipulation
Effects and animations
Ajax

jQuery basic introduction in Hindi
Post Views : 186