jQuery ٹیوٹوریل - شروع کرنا: بنیادی باتیں اور سلیکٹرز۔

jQuery ٹیوٹوریل - شروع کرنا: بنیادی باتیں اور سلیکٹرز۔

پچھلے ہفتے ، میں نے اس بارے میں بات کی کہ کسی بھی جدید ویب ڈویلپر کے لیے jQuery کتنی اہم ہے اور یہ کیوں زبردست ہے۔ اس ہفتے ، مجھے لگتا ہے کہ اب وقت آگیا ہے کہ ہم اپنے ہاتھوں کو کچھ کوڈ سے گندا کریں اور سیکھیں کہ اپنے منصوبوں میں jQuery کو کس طرح استعمال کرنا ہے۔





میں اب یہ کہوں گا - jQuery استعمال کرنے کے لیے آپ کو جاوا اسکرپٹ سیکھنے کی ضرورت نہیں ہے۔ یہ شاید بہترین ہے اگر آپ jQuery کو جاوا اسکرپٹ کے ارتقاء کے طور پر سوچتے ہیں - ایسا کرنے کا ایک بہتر طریقہ - صرف ایک لائبریری کے مقابلے میں جو فعالیت میں اضافہ کرتی ہے۔ کوئی بھی جاوا اسکرپٹ جس کی آپ کو ضرورت ہو اسے راستے میں اٹھا لیا جائے گا۔ تاہم یہ فرض کیا جاتا ہے کہ ایک ویب ڈویلپر کی حیثیت سے آپ کو ایچ ٹی ایم ایل اور سی ایس ایس کا بہت اچھا علم ہے (اور اگر نہیں تو مددگار مفت ایکس ایچ ٹی ایم ایل گائیڈ ہے!)۔



دستاویز آبجیکٹ ماڈل

jQuery تمام چیزوں کی نقل و حرکت اور ہیرا پھیری کے بارے میں ہے۔ انصاف۔ - ڈی۔ دستاویز یا اچھالنا ایم اوڈیل DOM صفحے کی ایک درجہ بندی درخت کی نمائندگی ہے ، براؤزرز نے تمام HTML کوڈ کو پڑھنے کے بعد بنایا ہے۔ jQuery میں ، ہم اصطلاحات جیسے استعمال کریں گے۔ والدین ، بچے ، اور بہن بھائی اکثر ، لہذا آپ کو اندازہ ہونا چاہئے کہ DOM کے سلسلے میں اس کا کیا مطلب ہے۔





سے یہ سادہ ڈایاگرامw3schoolsتصورات کو اچھی طرح بیان کرتا ہے۔ آپ کو یہ دیکھنے کے قابل ہونا چاہئے کہ عنصر کا والدین ہے ، جبکہ عنصر ایک فوری ہے

بہن بھائی

شروع کرنا: jQuery شامل کرنا۔

jQuery کا تازہ ترین ورژن کمپریس ہونے پر تقریبا1 91KB ہوتا ہے ، لہذا اس میں ایک چھوٹی تصویر یا اسکرین شاٹ کے برابر صفحے کے وزن کا اضافہ ہوتا ہے۔ اپنے پروجیکٹ میں jQuery کو شامل کرنے کا سب سے آسان طریقہ یہ ہے کہ اپنے سائٹ کے ہیڈر سیکشن میں حالیہ میزبان ورژن کا حوالہ چسپاں کریں:



تاہم نوٹ کریں کہ اگر آپ ورڈپریس چلا رہے ہیں تو اس سے مسائل پیدا ہو سکتے ہیں کیونکہ اس کے پاس jQuery لائبریری کی اپنی کاپی پہلے سے موجود ہے۔ پلگ ان درخواست کر سکتے ہیں کہ اسے لوڈ کیا جائے ، اور ورڈپریس ذہانت سے صرف ایک بار jQuery کو لوڈ کرے گا چاہے اس سے قطع نظر کہ کتنے پلگ ان نے اس کے لیے کہا ہے۔

اگر آپ مندرجہ ذیل لائن کو اپنے میں شامل کریں۔ functions.php تھیم فائل ، آپ اسے شامل کرنے کے لیے ایک اور درخواست شامل کریں گے۔ اگر آپ کا تھیم فعال ہے تو ورڈپریس اسے ہمیشہ لوڈ کرنا جانتا ہے۔





آپ فیس بک پر حذف شدہ پیغامات کو کیسے دیکھتے ہیں؟
wp_enqueue_script('jquery');

دوسری بات جو ذہن میں رکھنی ہے وہ یہ ہے کہ جب jQuery کو معیاری طریقہ استعمال کرتے ہوئے شامل کیا جائے گا تو اسے بطور لوڈ کیا جائے گا۔ $ . جو کچھ بھی آپ jQuery کے ساتھ کرتے ہیں اس سے پہلے اس $ سے ہوگا ، جیسے:

$.ajax

یا



$('#header')

تاہم ، جب jQuery کو ورڈپریس کے ذریعے لوڈ کیا جاتا ہے تو ، ہر چیز $ کی بجائے jQuery متغیر کا استعمال کرتے ہوئے کی جاتی ہے ، مثال کے طور پر:

jQuery('#header')

اگرچہ آپ کا اپنا کوڈ لکھتے وقت یہ کوئی بڑا مسئلہ نہیں ہے ، اس کا مطلب یہ ہے کہ jQuery کے ٹکڑوں کو کاٹنا اور چسپاں کرنا جو آپ کو ویب پر ملتے ہیں jQuery استعمال کرنے کے لیے ترجمہ کرنے کی ضرورت ہوگی $ - بس اتنا ہے

اس کے ارد گرد ایک طریقہ یہ ہے کہ $-style کوڈ کو لپیٹیں جو آپ کو اس طرح ملتا ہے:

(function($) {
// paste $ code in here
})(jQuery);

یہ لیتا ہے jQuery متغیر اور اسے ایک گمنام فنکشن میں منتقل کرتا ہے۔ $ . میں اگلی بار گمنام افعال کی وضاحت کروں گا - ابھی کے لیے ، آئیے تھوڑا سا jQuery کوڈ کا بنیادی ڈھانچہ سیکھیں۔

اپنے کوڈ کو ایچ ٹی ایم ایل یا پی ایچ پی پیج میں شامل کرنے کے لیے ، ہر چیز کو ٹیگز کے اندر بند کریں ، جیسے:


// jQuery code codes here

$ ('سلیکٹر').طریقہ()

یہ ہے ، وہاں کے عنوان میں۔ DOM کو ہیرا پھیری کرنے کے لئے jQuery کوڈ کے ایک ٹکڑے کا بنیادی ڈھانچہ ہے۔ آسان ، ٹھیک ہے؟

کیسلیکٹرjQuery سے کہتا ہے کہ ایسی چیزیں تلاش کریں جو اس اصول سے مماثل ہوں ، اور سی ایس ایس سلیکٹرز جیسا ہی ہے (اور پھر کچھ اور اوپر)۔ لہذا ، جیسے سی ایس ایس میں آپ تمام روابط کو اسٹائل کریں گے۔

a { }

jQuery میں بھی ایسا ہی کیا جائے گا۔

$('a')

یہ کسی بھی HTML عناصر کے لیے کیا جا سکتا ہے - div ، h1 ، span - کچھ بھی۔ آپ زیادہ مخصوص ہونے کے لیے CSS کلاسز اور IDs بھی استعمال کر سکتے ہیں۔

مثال کے طور پر ، کلاس 'findme' کے ساتھ تمام روابط تلاش کرنے کے لیے ، آپ استعمال کریں گے:

$('a.findme')

آپ کو ہر بار عنصر کی قسم بتانے کی ضرورت نہیں ہے - لیکن اگر آپ ایسا کرتے ہیں تو ، یہ اصول کو زیادہ مخصوص بنا دیتا ہے۔ آپ صرف کہہ سکتے تھے۔

$('.findme')

جو کلاس کے ساتھ ہر چیز سے مماثل ہوگا۔ مجھے تلاش کرو ، یہ ایک لنک تھا یا نہیں۔

نامی ID عنصر استعمال کرنے کے لیے ، استعمال کریں۔ # اس کے بجائے سائن کریں. یہاں اہم فرق یہ ہے کہ ایک آئی ڈی سلیکٹر صرف ایک چیز کو منتخب کرے گا ، جب کہ کلاس سلیکٹر ایک سے زیادہ تلاش کر سکتا ہے۔

کیسے بتاؤں کہ کسی نے مجھے اسنیپ چیٹ پر بلاک کیا ہے۔
$('#something')

بنیادی طور پر اگر آپ CSS میں کر سکتے ہیں تو jQuery بھی کرے گا۔ درحقیقت ، آپ کچھ کافی پیچیدہ CSS3 سٹائل کے سیڈو سلیکٹرز کو بھی پسند کر سکتے ہیں: پہلے۔

$('body p:first')

جو صفحے کے پیراگراف کو پکڑ لے گا۔ آپ کو بعض اوصاف والے عناصر بھی ملتے ہیں۔ اس مثال پر غور کریں ہم اس صفحے پر تمام روابط تلاش کرنا چاہتے ہیں جو اندرونی طور پر اشارہ کرتے ہیں۔ اسے استعمال میں لائیں اور انہیں کسی طرح نمایاں کریں۔ ہم انہیں کیسے ڈھونڈ سکتے ہیں:

$('a[href*='makeuseof']')

کیا یہ ٹھنڈا نہیں ہے؟ ٹھیک ہے ، مجھے لگتا ہے کہ یہ ہے۔

آپ کی کال کا اگلا پورٹ ہونا چاہیے۔ سلیکٹرز کے لیے jQuery API دستاویزات۔ . یہ استعمال کرنے کے لیے دستیاب تمام مختلف قسم کے سلیکٹرز کی ایک بہت بڑی فہرست ہے ، اور کوئی بھی یہ توقع نہیں کرے گا کہ آپ ان سب کو سیکھیں گے۔

مساوات کا اگلا حصہ ہے۔طریقہ- ایک بار جب آپ ان سب کو ڈھونڈ لیں تو ان چیزوں کا کیا کریں - لیکن ہم اسے اگلے سبق کے لیے چھوڑ دیں گے۔ اگر آپ ابھی مختلف سلیکٹرز کو آزمانا شروع کرنا چاہتے ہیں تو ، میرا مشورہ ہے کہ آپ مندرجہ ذیل سی ایس ایس طریقہ پر قائم رہیں۔ یہ دو پیرامیٹرز لیتا ہے - ایک سی ایس ایس۔ پراپرٹی کا نام ، اور ایک نیا قدر اس پراپرٹی کو تفویض کرنا۔ لہذا ، تمام لنکس کو سرخ پس منظر کا رنگ دینے کے لیے ، آپ یہ کریں گے:

$('a').css('background-color','red');

کافی سادہ! اگرچہ یہ کسی عملی استعمال کا نہ ہو ، یہ آپ کو اپنے سلیکٹرز کا استعمال کرتے ہوئے واقع کسی بھی عنصر کو آسانی سے دیکھنے دے گا۔ اب آگے بڑھیں ، اور منتخب کریں - DOM آپ کا منتظر ہے۔

مجھے امید ہے کہ یہ سبق آپ کے لیے مفید رہا ہے۔ میں نے اسے سمجھنے کے لیے جتنا ممکن ہو اتنا آسان بنانے کی کوشش کی ہے۔ بلا جھجھک آپ سے کوئی سوال پوچھیں یا رائے دیں ، لیکن آگاہ رہیں کہ میں یقینی طور پر کوئی ایلیٹ jQuery ننجا نہیں ہوں۔

بانٹیں بانٹیں ٹویٹ ای میل۔ اپنے ورچوئل باکس لینکس مشینوں کو سپر چارج کرنے کے 5 نکات۔

ورچوئل مشینوں کی پیش کردہ ناقص کارکردگی سے تنگ آ چکے ہو؟ اپنی ورچوئل باکس کی کارکردگی کو بڑھانے کے لیے آپ کو یہ کرنا چاہیے۔

اگلا پڑھیں۔ متعلقہ موضوعات۔
  • ویب کلچر۔
  • ویب سازی
  • جاوا اسکرپٹ۔
  • پروگرامنگ۔
  • jQuery
مصنف کے بارے میں جیمز بروس۔(707 مضامین شائع ہوئے)

جیمز کے پاس مصنوعی ذہانت میں بی ایس سی ہے اور CompTIA A+ اور Network+ مصدقہ ہے۔ جب وہ ہارڈ ویئر ریویوز ایڈیٹر کی حیثیت سے مصروف نہیں ہوتا ہے ، تو وہ لیگو ، وی آر اور بورڈ گیمز سے لطف اندوز ہوتا ہے۔ MakeUseOf میں شامل ہونے سے پہلے ، وہ لائٹنگ ٹیکنیشن ، انگریزی ٹیچر ، اور ڈیٹا سینٹر انجینئر تھا۔

جیمز بروس سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔