جاوا اسکرپٹ کی لائبریری جے کیوئری استعمال کریں

اگر آپ چاہتے ہیں کہ وہ Javascript کوڈ جو آپ نے اپنی ویب ایپلی کیشن یا ویب سائیٹ کے لیے لکھا ہے اسے ہر براؤزر میں ٹیسٹ نہ کرنا پڑے تو پھر jQuery استعمال کریں۔ جے کیوئری لائبریری بذات خود جاوا اسکرپٹ کوڈ پر مشتمل ہے اور یہ ڈیویلپرز کی آسانی کے لیے تیار کی گئی ہے۔ جے کیوئری لائبریری نہ صرف کوڈ لکھنے کا آسان طریقہ فراہم کرتی ہے بلکہ اس کی مدد سے کم کوڈ لکھتے ہوئے زیادہ کام کیا جا سکتا ہے۔ جے کیوئری استعمال کرنے کے لیے پہلے اس لائبریری کی فائل ویب پیج کے head سیکشن میں شامل کرنا ہوتی ہے، پھر جے کیوئری کے $(document).ready() فنکشن کو اپنا کوڈ مہیا کرنا ہوتا ہے۔ جیسے ہی براؤزر میں ویب پیج لوڈ ہوتا ہے، یہ کوڈ موثر ہو جاتا ہے۔ آئیں جے کیوئری کے استعمال کی کچھ مثالیں دیکھتے ہیں:

jQuery کوڈ کی مثال پر مشتمل ایک مکمل ویب پیج

درج ذیل ایک مکمل ویب پیج کا کوڈ دیا جا رہا ہے جس کے head سیکشن میں jQuery کوڈ رکھا گیا ہے، جبکہ body سیکشن میں HTML کوڈ رکھا گیا ہے۔ کوڈ میں کامنٹس کی لائنوں کے ساتھ نمبر دیے گئے ہیں، ان نمبروں کے لحاظ سے درج ذیل کوڈ کی وضاحت دی جا رہی ہے۔

ویب پیج کے head سیکشن میں گوگل کے سرور سے جے کیوئری لائبریری شامل کی گئی ہے۔ آپ یہ بھی کر سکتے ہیں کہ جے کیوئری کی فائل اپنی ویب سائیٹ پر ڈال کر script ٹیگ کو اس فائل کا پاتھ مہیا کر دیں۔
یہ جے کیوئری کا فنکشن $(document).ready() ہے، اس کے اندر ہم اپنا کوڈ مہیا کر رہے ہیں۔ جیسا کہ اس فنکشن کے نام سے ظاہر ہے، جیسے ہی ویب پیج براؤزر میں مکمل لوڈ ہو جائے گا، اس فنکشن میں مہیا کیا گیا کوڈ مؤثر ہو جائے گا۔
اب ہم ()ready فنکشن کے اندر ہیں۔ کوڈ کی یہ لائن کسی ایلی منٹ کے Event کے ساتھ منسلک نہیں ہے، یعنی اس کوڈ کے چلنے کے لیے آپ کو کسی ٹیگ یا بٹن وغیرہ پر کلک کرنے کی ضرورت نہیں ہے۔ جیسے ہی ویب پیج لوڈ ہوگا، یہ کوڈ اس صفحہ میں موجود تمام div ٹیگز کے نیچے 10px مارجن مقرر کر دے گا۔
h2 ٹیگز کے ساتھ click ایونٹ منسلک کیا گیا ہے۔ یعنی اس صفحہ میں موجود کسی بھی h2 ٹیگ پر کلک کرنے پر یہ کوڈ اس ٹیگ پر css اسٹائلز لگا دے گا۔
اس div ٹیگ کے ساتھ click ایونٹ منسلک کیا گیا ہے جس کی "id="first ہے۔ کوڈ کی مدد سے css اسٹائلز لگائے گئے ہیں۔
اس div ٹیگ کے ساتھ click ایونٹ منسلک کیا گیا ہے جس کی "class="second ہے۔ کوڈ کی مدد سے css اسٹائلز لگائے گئے ہیں۔
اس input بٹن کے ساتھ click ایونٹ منسلک کیا گیا ہے جس کی "id="hidelinks ہے۔ اس بٹن پر کلک کرنے سے صفحہ پر موجود تمام لنکس غائب ہو جائیں گے۔
اس input بٹن کے ساتھ click ایونٹ منسلک کیا گیا ہے جس کی "id="showlinks ہے۔ اس بٹن پر کلک کرنے سے غائب لنکس دوبارہ ظاہر ہو جائیں گے۔
آپ دیکھ رہے ہیں کہ HTML کوڈ کے کسی ٹیگ میں Javascript کا کسی قسم کا تذکرہ موجود نہیں ہے۔ اس لیے کہ ہم نے HTML ٹیگز پر head سیکشن میں دیے گئے jQuery کوڈ کی مدد سے جاوا اسکرپٹ اپلائی کیا ہے۔

<!DOCTYPE html>
<html>
<head>
  <!-- 1. اس ویب پیج میں جاوااسکرپٹ کی لائبریری جے کیوئری شامل کریں -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
 
      // 2. جیسے ہی مکمل ویب پیج براؤزر میں لوڈ ہو گا، اس بلاک کے اندر موجود کوڈ اس ویب پیج پر کام کر سکے گا
    $(document).ready(function() {
 
      // 3. یہ کوڈ کسی ایونٹ کے ساتھ منسلک نہیں، یعنی جیسے ویب پیج لوڈ ہوگا یہ کوڈ ٹیگز کے نیچے مارجن مقرر کر دے گا
      $("div").css("margin-bottom", "10px");
 
      // 4. یہ کوڈ ویب پیج میں موجود کسی بھی ہیڈنگ ۲ والے ٹیگ پر کلک کرنے سے چلے گا
      $("h2").click(function(){
        $(this).css("font-size","35px");
        $(this).css("font-style","italic");
        $(this).css("font-weight","normal");
        $(this).css("color","green");
      });
 
      // 5. وہ ٹیگ جس کی آئی ڈی ’’فرسٹ‘‘ ہے، اس پر ڈبل کلک کرنے سے یہ کوڈ چلے گا
      $("#first").dblclick(function(){
        $(this).css("text-align","center");
        $(this).css("font-family","Franklin Gothic Medium");
        $(this).css("background-color","#DDD");
        $(this).css("border-radius","20px");
      });
 
      // 6. ایسے تمام ٹیگز جن کی کلاس ’’سیکنڈ‘‘ ہے، ان کے اوپر ماؤس کا پوائنٹر لانے سے یہ کوڈ چلے گا
      $(".second").hover(function(){
        $(this).slideUp();
        $(this).slideDown();
        $(this).fadeOut();
        $(this).fadeIn();
      });
 
      // 7. وہ بٹن جس کی آئی ڈی ’’ہائیڈ لنکس‘‘ ہے، اس پر کلک کرنے سے ویب پیج میں موجود تمام لنکس غائب ہو جائیں گے
      $("#hidelinks").click(function(){
        $("a").hide();
      });
 
      // 8. وہ بٹن جس کی آئی ڈی ’’شو لنکس‘‘ ہے، اس پر کلک کرنے سے ویب پیج کے تمام لنکس دوبارہ ظاہر ہو جائیں گے
      $("#showlinks").click(function(){
        $("a").show();
      });
 
    });
  </script>
</head>
 
 
<body>
 
  <!-- 9. درج ذیل وہ ایچ ٹی ایم ایل کوڈ ہے جس پر درج بالا جے کیوئری کوڈ استعمال کیا گیا ہے -->
  <h2>Single-click on this h2 tag</h2>
  <div id="first">Double-click on this div with id="first".</div>
  <div class="second">Mouse-over this div with id="second".</div>
  <a href="http://www.google.com">Google</a><br>
  <a href="http://www.yahoo.com">Yahoo</a><br>
  <a href="http://www.bing.com">Bing</a><br>
  <p>
    <input id="hidelinks" type="button" value="Hide links"> 
    <input id="showlinks" type="button" value="Show links"> 
  </p>
</body>
</html>

اپنے کمپیوٹر پر یہ کوڈ ٹیسٹ کرنے کے لیے testjquery.html کے نام سے ایک فائل بنائیں، یہ کوڈ کاپی کر کے اس فائل میں پیسٹ کریں، اور پھر یہ فائل براؤزر میں کھول کر دیکھیں۔