jQuery میں ایک عنصر بنانے کا طریقہ سیکھیں۔

jQuery میں ایک عنصر بنانے کا طریقہ سیکھیں۔

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





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



jQuery کیا ہے؟

jQuery لائبریری کا ایک مجموعہ ہے۔ جاوا اسکرپٹ۔ دو بنیادی مقاصد کے ساتھ کوڈ:





  • یہ عام جاوا اسکرپٹ آپریشن کو آسان بناتا ہے۔
  • یہ مختلف براؤزرز کے درمیان کراس مطابقت جاوا اسکرپٹ کے مسائل کو ہینڈل کرتا ہے۔

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

ایک عنصر کیا ہے؟

ایک عنصر کو بعض اوقات ٹیگ کہا جاتا ہے۔ اگرچہ دونوں اکثر ایک دوسرے کے ساتھ استعمال ہوتے ہیں ، لیکن ایک ٹھیک ٹھیک فرق ہے۔ ٹیگ سے مراد لفظی ہے۔

یا



آپ متن کے مواد کو مارک اپ کرنے کے لیے HTML فائل میں شامل کرتے ہیں۔ ایک عنصر پردے کے پیچھے کی چیز ہے جو نشان زدہ متن کی نمائندگی کرتی ہے۔ HTML ٹیگز کے DOM ہم منصب کے طور پر کسی عنصر کے بارے میں سوچیں۔

jQuery کا استعمال کرتے ہوئے نیا عنصر کیسے بنایا جائے۔

زیادہ تر jQuery آپریشنز کی طرح ، ایک عنصر بنانا ڈالر کے فنکشن سے شروع ہوتا ہے ، $ () . یہ کور کا ایک شارٹ کٹ ہے۔ jQuery () فنکشن اس فنکشن کے تین الگ الگ مقاصد ہیں ، یہ:



  • عناصر سے میل کھاتا ہے ، عام طور پر وہ جو دستاویز میں پہلے سے موجود ہیں۔
  • نئے عناصر پیدا کرتا ہے۔
  • DOM تیار ہونے پر کال بیک فنکشن چلاتا ہے۔

جب آپ HTML پر مشتمل سٹرنگ کو پہلے پیرامیٹر کے طور پر پاس کرتے ہیں تو یہ فنکشن ایک نیا عنصر بنائے گا:

$(' ')

یہ ایک خاص jQuery آبجیکٹ لوٹاتا ہے جس میں عناصر کا مجموعہ ہوتا ہے۔ اس معاملے میں ، ایک واحد چیز ہے جو 'a' عنصر کی نمائندگی کرتی ہے جسے ہم نے ابھی بنایا ہے۔



میرے فون پر نیٹ فلکس کیوں کام نہیں کررہا ہے؟

اس عمل کو مماثل عناصر سے ممتاز کرنے کے لیے سٹرنگ HTML کی طرح نظر آنی چاہیے۔ عملی طور پر ، اس کا مطلب ہے کہ اسٹرنگ کا آغاز الف سے ہونا چاہیے۔ < . آپ اس طریقہ کار کو استعمال کرتے ہوئے دستاویز میں سادہ متن شامل نہیں کر سکتے۔

یہ سمجھنا ضروری ہے کہ اس سے آپ کی دستاویز میں عنصر شامل نہیں ہوتا ، یہ صرف ایک نیا عنصر تخلیق کرتا ہے جو آپ کو شامل کرنے کے لیے تیار ہے۔ عنصر 'غیر منسلک' ہے ، میموری لے رہا ہے لیکن اصل صفحے کا حصہ نہیں ہے۔

مزید پیچیدہ HTML شامل کرنا۔

ڈالر کا فنکشن دراصل ایک سے زیادہ عنصر بنا سکتا ہے۔ در حقیقت ، یہ HTML عناصر کے کسی بھی درخت کو بنا سکتا ہے جو آپ چاہتے ہیں:

$('
  • one
  • two
  • three
')

آپ اس فارمیٹ کو صفات کے ساتھ ایک عنصر بنانے کے لیے بھی استعمال کر سکتے ہیں:

$(' my hometown')

نئے عنصر پر اوصاف کیسے مرتب کیے جائیں۔

آپ ایک نیا jQuery عنصر تشکیل دے سکتے ہیں اور اس کی صفات خود کو مکمل HTML سٹرنگ بنائے بغیر سیٹ کر سکتے ہیں۔ یہ مفید ہے اگر آپ متحرک طور پر وصف کی قدریں پیدا کر رہے ہیں۔ مثال کے طور پر:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

ایک عنصر شامل کرنے کا طریقہ

ایک بار جب آپ ایک نیا عنصر بنا لیتے ہیں ، تو آپ اسے کئی مختلف طریقوں سے دستاویز میں شامل کر سکتے ہیں۔ jQuery دستاویزات ان طریقوں کو ایک ساتھ جمع کرتی ہیں۔ 'ہیرا پھیری' زمرہ۔ .

ایک موجودہ عنصر کے بچے کے طور پر شامل کریں۔

$('body').append($('

Hello, world

'));
$(document.body).append($el);

آپ یہ طریقہ استعمال کر سکتے ہیں ، مثال کے طور پر ، فہرست کے آخر میں ایک نئی فہرست آئٹم شامل کرنے کے لیے۔

اسے ایک موجودہ عنصر کے بہن بھائی کے طور پر شامل کریں۔

$('p.last').after('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    یہ ایک اچھا انتخاب ہے اگر ، مثال کے طور پر ، آپ دو دوسرے کے درمیان ایک نیا پیراگراف شامل کرنا چاہتے ہیں۔

    ایک موجودہ عنصر کو تبدیل کریں۔

    آپ ایک نئے تخلیق شدہ عنصر کے لیے موجودہ عنصر کو تبدیل کر سکتے ہیں کے ساتھ تبدیل کریں () طریقہ:

    $('#old').replaceWith('

    New paragraph

    ');

    ایک موجودہ عنصر کے گرد لپیٹیں۔

    یہ استعمال کا ایک بہت ہی نایاب معاملہ ہے ، لیکن ہوسکتا ہے کہ آپ کسی موجودہ عنصر کو نئے میں بند کرنا چاہیں۔ مثال کے طور پر ، آپ کے پاس a کوڈ وہ عنصر جسے آپ a میں لپیٹنا چاہتے ہیں۔ کے لیے :

    $('code#n1').wrap('
    ')
    اپنے بنائے ہوئے عنصر تک رسائی۔
     
    کی $ () فنکشن ایک jQuery آبجیکٹ لوٹاتا ہے۔ یہ فالو اپ آپریشن کے لیے مفید ہے:
    $el = $('p');  
    $('body').append($el);
    نوٹ کریں کہ ، کنونشن کے مطابق ، jQuery پروگرامرز اکثر jQuery متغیرات کو ایک معروف ڈالر کے نشان کے ساتھ نام دیتے ہیں۔ یہ محض ایک نام کی اسکیم ہے اور اس کا براہ راست تعلق نہیں ہے۔ $ () فنکشن
     
    jQuery کا استعمال کرتے ہوئے عناصر بنانا۔
     
    اگرچہ آپ مقامی جاوا اسکرپٹ افعال کا استعمال کرتے ہوئے DOM میں ہیرا پھیری کر سکتے ہیں ، jQuery ایسا کرنا بہت آسان بنا دیتا ہے۔ DOM کے بارے میں اچھی تفہیم رکھنا اب بھی بہت مفید ہے ، لیکن jQuery اس کے ساتھ کام کرنے کو بہت زیادہ خوشگوار بنا دیتا ہے۔
      بانٹیں    بانٹیں      ٹویٹ      ای میل۔      ویب سائٹس کا پوشیدہ ہیرو: DOM کو سمجھنا۔  
    ویب ڈیزائن سیکھنا اور دستاویز آبجیکٹ ماڈل کے بارے میں مزید جاننے کی ضرورت ہے؟ آپ کو DOM کے بارے میں جاننے کی ضرورت ہے۔
    اگلا پڑھیں۔       متعلقہ موضوعات۔  
       
    • پروگرامنگ۔
      •  
    • ویب سازی
      •  
    • jQuery
      •  
      مصنف کے بارے میں   بوبی جیک۔(58 مضامین شائع ہوئے)      
    بوبی ایک ٹکنالوجی کا شوقین ہے جس نے دو دہائیوں تک سافٹ ویئر ڈویلپر کی حیثیت سے کام کیا۔ وہ گیمنگ کے بارے میں پرجوش ہے ، سوئچ پلیئر میگزین میں بطور ریویو ایڈیٹر کام کرتا ہے ، اور آن لائن پبلشنگ اور ویب ڈویلپمنٹ کے تمام پہلوؤں میں ڈوبا ہوا ہے۔
    بوبی جیک سے مزید
    ہماری نیوز لیٹر کو سبسکرائب کریں
     
    ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!
    سبسکرائب کرنے کے لیے یہاں کلک کریں۔