نبودن ‌در عین ‌‌بودن‌؛ مساله ‌‌این‌ است‌

ایجاد عناصر DOM 

حتما تا به حال‌، با گذشت زمان و مرور مثال‌های متنوع به کاربرد‌های مهم تابع اصلی جی کوئری   ()$  پی برده اید اکنون می‌توانید به وضوح دریابید که نویسندگان جی کوئری از معرفی گروهی از نام‌های مختلف برای توابع و عملکرد‌های اصلی این زبان اجتناب کرده اند و آن قدر تابع اصلی این زبان را انعطاف پذیر طراحی کرده اند که از آن می‌توان به طرق مختلف استفاده کرد و تقریبا تمامی فرامین مورد نظری که یک طراح وب در طرح خویش نیاز دارد را‌، این تابع انجام می دهد.

اما یکی دیگر از وظیفه‌هایی که می‌خواهیم در این بخش در مورد تابع اصلی جی کوئری  ()$  معرفی و به آن بپردازیم ایجاد عناصر  DOM  با استفاده از این تابع و پاس دادن رشته ای از عناصر که در آن از کد‌های  html  استفاده شده است به این تابع جهت استفاده در بدنه اصلی صفحه مورد نظر است.

به عنوان مثال‌، با استفاده از تکه کد زیر می‌توانیم یک پاراگراف را به عنوان یک عنصر  DOM  ایجاد کنیم که در آن رشته ای وجود دارد که متن مورد نظر ما به همراه کد‌های  html  مورد نظر قرار دارد:

$("<P>ادامه متن</(">P

اما ایجاد و فراخوانی فردی یا گروهی از این کد‌ها خود به تنهایی نمی‌تواند کمکی به ما کند‌، منظور ما این است که شاید قدم اول در ایجاد یک عنصر  DOM  را به خوبی برداشته باشیم ولی فقط با استفاده از روشی که در بالا اشاره شد‌، نمی‌توانیم بهره‌ای از آن در بدنه صفحه خود ببریم.

بگذارید تا با یک مثال شما را بیشتر با نحوه کار با این عناصر آشنا کنیم‌، به تصویر زیر دقت کنید:

در این صفحه شما می‌توانید نحوه کارکرد مثالی که به آن اشاره کردیم را بهتر درک کنید. همان‌طور که در تصویر نیز مشاهده می کنید‌، بخشی که فلش شماره 1 به آن اشاره می کند‌، طرز صحیح معرفی جی کوئری به مرورگر را نشان می دهد. به محلی که فلش شماره 3 اشاره می کند دقت کنید‌، به عنوان مثال می‌خواهیم بعد از این پاراگراف‌، پاراگرف دیگری را با استفاده از عناصر  DOM  ایجاد کنیم و پارگراف اول را به اصطلاح دنبال کنیم .

در قسمت <>head صفحه و در جایی که فلش شماره 2 به آن اشاره می کند‌، کنترل کننده ای را ایجاد کرده‌ایم که بعد از این‌که عناصر DOM  در ابتدای فراخوانی صفحه بارگذاری شدند به سرعت عمل می کند و وقفه کمی برای  انجام این کار به وجود می آید ( در بخش‌های قبل توضیحاتی در این باره ارائه کردیم)‌، این وقفه آنقدر کوتاه است که کاملا از دید شما مخفی می ماند.

با عملکرد کنترل کننده‌، دستوری که ایجاد کرده‌ایم اجرا می‌شود و پاراگرافی که می‌خواهیم بعد از پاراگراف اول نمایش داده شود‌، در صفحه ظاهر می‌شود!

نتیجه اجرای این دستور در مرورگر به صورت زیر خواهد بود: وقتی که صفحه ای که ایجاد کرده اید را با استفاده از مرورگر فراخوانی می کنید‌، چیزی شبیه به تصویر بالا مشاهده خواهید کرد. وقتی که نوشته «ادامه متن» را انتخاب و خواستار مشاهده منبع آن می‌شوید‌، مرورگر این نوشته را به عنوان ساختاری از عناصر  DOM  نشان می دهد و می‌توانید به وضوح مشاهده کنید که پاراگرافی را که به عنوان عناصر  DOM  خواستار نمایش آن بعد از پاراگراف اول بودید چگونه در صفحه نمایش داده خواهد شد.

همان‌طور که مشاهده کردید جی کوئری راه‌های مختلفی را جهت دستکاری در عناصر  DOM   در اختیار طراحان قرار می‌دهد تا همان‌طور که نیاز دارند  در سریعترین و پایدارترین حالت ممکن به هدفشان برسند.

البته باید به این نکته اشاره کنیم که در بخش‌های بعدی نمونه‌های بیشتر از توابعی که با استفاده از عناصر  DOM  به کمک ما می‌آیند معرفی خواهند شد. در این بخش شما یکی از ابتدایی‌ترین کاربرد‌های جی کوئری را مشاهده کردید‌، در بخش‌های بعد یکی از قدرتمندترین کاربرد‌های جی کوئری را فرا خواهید گرفت.

پویا سلیمی‌