Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

مشخص کردن یک المنت خاص در جاوا اسکریپت

مشخص کردن یک المنت خاص در جاوا اسکریپت

شما برای شروع کدنویس با جاوا اسکریپت نیاز به این دارید که اشیا درون صفحه خود را با کدهای جاوا اسکریپت مشخص کنید.

برای مثال شما می خواهید متن خاصی را درون یک تگ خاص قرار دهید. شما می بایست اول به کد بفهمانید که اون تگ کجاست ، اسمش چیست و یا آی دی آن چه هست ...


مشخص کردن element با id

معمول ترین روش در جاوا اسکریپت استفاده از id در تگ ها می باشد و به کار بردن آن در جاوا اسکریپت می باشد. برای شروع شما می بایست با document آشنا شوید. این کد قبل از کدهای دیگر می آید و کاربرد بسیاری در جاوا اسکریپت دارد. معنی فارسی آن سند می باشد. شما به مرور زمان با کاربرد های آن آشنا خواهید شد.

بعد از document نوبت به getElementById میرسه. این شیء به شما کمک می کند تا یک element (عنصر - تگ) با آی دی فلان را بازخوانی (return) کند. شما باید توجه داشته باشید که جاوا اسکریپت به حروف کوچک و بزرگ حساس است.

document.getElementById('tag id');

در قسمت قهوه ای رنگ شما می بایست آی دی تگ مورد نظر رو قرار بدید. توجه کنید که آی دی چون یک متن است و توسط شما تعیین می شود و می تواند هر چیزی باشد میبایست از قانون string ها در جاوا اسکریپت حمایت کند. شما می بایست آی دی را در دو کوتیشن (') و یا دو دابل کوتیشن (") قرار بدید. در جلسات بعدی در مورد String ها کاملا بحث خواهیم کرد.

کد بالا یک تگ را با خاصیت id و مقدار tag id را بازخوانی می کند و شما می توانید از آن استفاده کنید.


مشخص کردن element با کلاس

این روش تقریبا مانند روش قبل می باشد ولی تفاوت هایی هم دارد. شما در id فقط یک تگ را بازخوانی می کنید. یعنی اگر دو تگ با id یکسان داشته باشید فقط تگ اول بازخوانی خواهد شد و بقیه تگ ها دست نخورده باقی می مانند.

اما در کلاس شما تمام تگ ها را با هم بازخوانی می کنید که از این رو مشکلاتی هم ممکن است سر راهتان قرار بگیرد.

برای شروع شما می بایست از شیء getElementsByClassName استفاده کنید. توجه کنید که کلمه Element در وسط آن یک s اضافه دارد که نشان دهنده این است که تمام عنصر ها بازخوانی (get) خواهند شد.

برای مثال به کد زیر توجه کنید:

document.getElementsByClassName('moisrex');

شما هم اکنون نمی توانید استفاده هایی به غیر از length و ... کنید. شما می بایست فقط یک عنصر را بازخوانی کنید. برای این کار باید از این کد بعد از آن استفاده کنید:

document.getElementsByClassName('moisrex').item( num );

در کد بالا شما می بایست به جای num شماره تگ را قرار دهید. اولین تگ با کلاس moisrex شماره 0 می باشد ، دومین تگ با کلاس moisrex شماره 1 می باشد ، سومین تگ با کلاس moisrex شماره 2 می باشد.

شما می توانید همان کد بالا را به این صورت نیز بنویسید (به صورت خلاصه):

document.getElementsByClassName('moisrex')[ num ];

به این مثال توجه کنید:

document.getElementsByClassName('moisrex')[0];


مشخص کردن element با تگ

این خاصیت کاملا شبیه getElementsByClassName می باشد با این تفاوت که فقط اسم آن getElementsByTagName می باشد.

شما با استفاده از آن برای مثال می توانید اولین تگ head را بازخوانی کنید یا برای مثال دومین تگ div را بازخوانی کنید.

به مثال زیر توجه کنید:

document.getElementsByTagName('div')[0];


مشخص کردن یک عنصر با استفاده از name

این روش نیز مانند دو روش قبلی م یباشد با این تفاوت که خاصیت name را در نظر میگیرد. شما می بایست از getElementsByName استفاده کنید. به مثال زیر توجه کنید:

document.getElementsByName('mohammad')[0];

کد بالا اولین تگی که خاصیت name با مقدار mohammad داشته باشد را بازخوانی می کند.


مشخص کردن یک عنصر موجود در فرم

معمولا سریع تر نوشتن در فرم ها از این روش استفاده می کنند. شما در این روش فقط می توانید با name ها کار کنید. این روش فقط برای تگ form ساخته شده است.

برای مثال فرض کنید یک تگ form با خاصیت name و مقدار MoisrexForm دارید که درون آن یک تگ input با خاصیت name و مقدار MoisrexInput وجود دارد که شما می خواهید این input را بازخوانی کنید. در این صورت شما می توانید از یکی از این دو استفاده کنید:

document.MoisrexForm.MoisrexInput;

document.forms['MoisrexForm']['MoisrexInput'];


کاربرد بازخوانی کردن عناصر در جاوا اسکریپت

بعد از این که یک تگ را بازخوانی کردید می توانید مقدار خاصیت های آن را بدست بیاورید ، برای آن خاصیت جدید بسازید ، خاصیت های آن را تغییر دهید ، به آن استایل دهید ، مقدار (value) آن را تغییر دهید ، کدهای html درون آن را مورد تاثیر قرار دهید (innerHMTL) و صدها کار دیگر.

در این باره می توانید از چند مثال زیر استفاده کنید:

document.forms['MoisrexForm']['MoisrexInput'].value='excellent';

آزمایش کد بالا

document.getElementById('Moisrex').innerHTML='excellent';

آزمایش کد بالا

document.getElementsByTagName('div')[1].innerHTML='excellent';

آزمایش کد بالا

 

سلام محمد
ممنون از آموزش هات
فقط این که حتما ادامه داره دیگه؟!
مردم رو تو آمپاس نذاری! :دی
پاسخ : بله ادامه داره.
با تشکر
از این به بعد تلاش میکنم اسپم نباشه داداش

بابا این دانلود منیجر همیشه بد موقع مزاحم میشه :دی
داداش می تونی برای آیکونها از این سایتاستفاده کنی:

www,iconarchive.com

پاسخ : بله ممنون در پست های بعدی سعی می کنم استفاده کنم.
درود
دوست عزیز لوگویی که شما قرار دادین برای جاوا هست نه جاوا اسکریپت!
لطفا تصحیح کنید
با تشکر
پاسخ : به جستجوگر bing بگو اصلاحش کنه :دی
داداش محمد اینم نمونه فیلم آموزشی:

CSS3:

http://monister.persiangig.com/tutorial%20videos/moisrex%20and%20monister.ir.zip

اگه خواستی بذار ولی کلی زحمت کشیدما اگه نذاشتی اینطوری میشم:

پاسخ : هر چند اسپم زیاد داشت وسطش ولی گذاشتم که ناراحت نشی.
ممنون

خوب بابا این دانلود منیجر اون وسط چی می خواد آخه :دی

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36598
افراد آنلاین : 4
بازدید امروز : 879
بازدید دیروز : 824
گوگل امروز : 111
گوگل دیروز : 110
بازدید هفته : 879
بازدید ماه : 27,937
بازدید سال : 340,321
بازدید کلی : 10,734,797