jquery

آموزش جی کوئری: گاهی در صفحات وب نیاز داریم تا مختصات یک عنصر را نسبت به مبدا سند html بدست آوریم و از آن برای مشخص کردن موقعیت عناصر صفحه وب، نظیر دکمه  go to top  استفاده نماییم . ازاین رو درجلسه دهم از آموزش گام به گام جی کوئری قصد داریم تا شما را با متد offset و نحوه استفاده از آن آشنا سازیم . با تیم طراحی سایت اصفهان وب یار همراه باشید.   متد offset : معنای تخصصی واژه  offset، فاصله از مبدأ، فاصله ی میان یک مکان و مکان دیگر در حافظه ی کامپیوتر می باشد . متد offset در جی کوئری میتواند بر روی عنصر انتخاب شده به دو صورت زیر عمل کند : مختصات آفست عنصر انتخاب شده را نسبت به سند html تنظیم می کند. مختصات آفست (top , left) عنصر انتخاب شده را نسبت به سند بازمی گرداند. ساختار متد offset برای تنظیم مختصات افست : $(selector).offset({top:value,left:value}) ; {top:value,left:value} : در هنگام تنظیم افست ، استفاده از این پارامتر اجباری است . این مختصات بالا و چپ در پیکسل را مشخص می کند.   ساختار متد offset برای بازگرداندن مختصات افست: $(selector).offset(); ساختار متد offset برای تنظیم مقادیر مختصات با استفاده از یک تابع: $(selector).offset(function(index,currentoffset)); (Function (index,currentoffset: این یک پارامتر اختیاری است.  این یک تابع را مشخص می کند که یک شیء حاوی مختصات […]

 Best Javascript Frameworks 2019   منظور از فریم ورک جاوا اسکریپت چیست؟ در دنیای برنامه نویسی و توسعه، عبارت « فریم ورک جاوا اسکریپت » به کتابخانه ای از جاوا اسکریپت اشاره می کند که رابط های کاربری تعاملی و داده محور ارائه می دهد. این فریم ورک ها به گونه ای طراحی شده اند که در هنگام ایجاد تعامل با استفاده از یک برنامه یا رابط، به تهیه داده برای کاربران کمک می کنند. فریم ورک های جاوا اسکریپت با یکدیگر متفاوت اند اما هدف نهایشان یکی است: نمایش داده های جدید به محض اینکه کاربر، یک اقدام تعاملی را آغاز می کند. با تیم طراحی سایت اصفهان وب یار همراه باشید تا مروری بر ویژگی های محبوب چند مورد از فریم ورک های جاوا اسکریپت داشته باشیم. خصوصیات فریم ورک های جاوا اسکریپت   1) موثر بودن: شما می توانید برنامه های موبایل، دسکتاپ و یا سایر رابط های کاربری سطح بالا را در مدت چند هفته و یا حتی چند روز بسازید! 2) امن بودن: همه فریم ورک های رایج و محبوب جاوا اسکریپت دارای تنظیمات امنیتی مطمئن هستند. طیف وسیعی از برنامه نویسان، تست کنندگان و کاربران نیز از این فریم ورک ها پشتیبانی می کنند. 3) کم هزینه بودن بیشتر فریم ورک های جاوا اسکریپت به صورت متن باز (open-source) و رایگان هستند که به […]

پنهان و نمایان کردن عناصر در جی کوئری در یکی دیگر از آموزش های جی کوئری همراه شما هستیم و می خواهیم به شما نحوه استفاده از بعضی از کدهای کتابخانه زیبای جی کوئری را آموزش دهیم. طراحان وب سایت با کتابخانه جی کوئری آشنای کامل دارند. در این آموزش دستور پنهان و نمایان کردن عناصر در jQuery را به شما معرفی می کنیم، که برای هر طراح وب بسیار مفید خواهد بود. پس با تیم طراحی سایت اصفهان وب یار همراه باشید. در صورتی که با جی کوئری آشنایی کامل ندارید ، با آموزش های قدم به قدم جی کوئری و از درس اول آموزش جی کوئری شروع نمایید.     افکت های جی کوئری استفاده جاوا اسکریپت و کتابخانه مرتبط با آن نظیر جی کوئری (jQuery) و دیگر کتابخانه ها در طراحی  سایت بسیار پرکاربرد می باشد و باعث بهبود رابط کاربری سایت با کاربران می شود. قطعه کد اسکریپت که در جی کوئری بسیار مورد استفاده قرار می گیرد ، پنهان و نمایان کردن عناصر در jQuery یا تگ های موجود در صفحه وب است.   استفاده از متدهای ()show و ()hide افکت های hide و show نیز برای پنهان و نمایان کردن عناصر در jQuery به کار می رود. شما می توانید عناصر داخل صفحه وب را با متدهای hide و show مخفی و نمایش کنید. نکته: […]

تابع callback همان طور که می دانید jquery یک کتابخانه جاوا اسکریپت است. کدهای جاوا اسکریپت خط به خط اجرا می شوند، اما از آن جایی که کدهای جی کوئری طول می کشد تا اعمال شوند ممکن است خط بعدی اجرا شود در حالی که کد قبلی هنوز در حال اجراست. برای جلوگیری از این اتفاق jQuery از تابع callback استفاده می کند. تابع callback زمانی انجام می شود که که یک افکت به طورکامل اجرا شده باشد. در واقع با استفاده از تابع callback می توان افکت ها و بقیه دستورات را اولویت بندی کرد. در این مقاله می خواهیم چند مثال از کدهای جی کوئری با و بدون تابع callback را به شما عزیزان نشان دهیم. اگر قصد دارید تا تفاوت این دو را به خوبی درک نمایید با طراحی سایت اصفهان وب یار همراه باشید.   مثال از تابع Callback در مثال زیر ابتدا افکت hide به طور کامل انجام می شود، سپس تابع alert اجرا می شود.   <!DOCTYPE html> <html> <head> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <script> $(document).ready(function(){ $(“button”).click(function(){ $(“p”).hide(“slow”, function(){ alert(“The paragraph is now hidden”); }); }); }); </script> </head> <body> <button>Hide</button> <p>This is a paragraph with little content.</p> </body> </html> خروجی کد بالا: توضیح کد: $(document).ready(function(){}) برای نوشتن کد جی کوئری ابتدا باید از دستور بالا استفاده کنید و سپس بقیه ی کدها را در آن قرار […]

متد Before در جی کوئری جی کوئری یک کتابخانه ی جاوا اسکریپت سریع، کوچک و بسیار غنی می باشد. جی کوئری یک چارچوب از جاوا اسکریپت است که هدف آن آسان ساختن استفاده از کد های جاوا اسکریپت در طراحی سایت می باشد. با متد ها و قواعد دستوری جی کوئری که در آموزش های قبلی به آن ها اشاره شد می توانید عناصر Html را انتخاب کنید و عملیات مورد نظر خود را بر روی آن ها انجام دهید. در این آموزش تیم طراحی سایت اصفهان وب یار قصد دارد شما را با متد Before در جی کوئری آشنا کنیم. به وسیله ی متد Before در جی کوئری می توانید محتوای مورد نظر خود را قبل از عناصر انتخاب شده در صفحه ی Html قرار دهید. طریقه ی استفاده از متد Before در جی کوئری به صورت زیر است. $(selector).before(content,function(index)) selector :  مشخص کننده ی عنصری است که می خواهید محتویات مورد نظرتان قبل از آن وارد شود. Content  :  مشخص کننده ی محتویاتی است که می خواهید قبل از عنصر مورد نظر خود درج کنید.   به مثال های زیر توجه کنید: <!DOCTYPE html> <html> <head> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <script> $(document).ready(function(){ $(“button”).click(function(){ $(“p”).before(“<p>Hello world!</p>”); }); }); </script> </head> <body> <button>Insert content before each p element</button> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html> در این مثال با استفاده […]

آموزش جی کوئری – متد ()clone اگر برنامه نویس باشید و یا حتی با برنامه نویسی آشنایی اندکی داشته باشید حتما درک خواهید کرد که نوشتن قطعه کدی تکراری کسل کننده خواهد بود و شدت آن زمانی زیاد میشود که عنصر مورد نظری که قصد کپی کردن آن را دارید رویداد ها و پارامترهایی را به همراه داشته باشد. اما بهتر است بدانید جی کوئری برای حل این مشکل متدی به نام ()clone دارد. متاسفانه وقتی درباره متد ()clone سرچ میکردم به سایت های آموزشی برخورد کردم که درباره متد ()clone به اشتباه توضیح داده بودن .از این رو تیم طراحی سایت وب یار تصمیم دارد تا درسری آموزشی جی کوئری به آموزش متد ()clone بپردازد.با تیم طراحی سایت اصفهان وب یار همراه باشید . متد ()clone : متد ()clone برای ایجاد یک کپی از عناصر همگرا استفاده می شود.به زبان ساده تر متد ()clone برای کپی یا اضافه کردن عناصر همگرا HTML در ابتدای عنصر انتخاب شده استفاده می شود. متد ()clone از پارامترهای بولین برای کپی کردن یا  کپی نکردن رویدادها و داده های همراه با عنصر همگرا استفاده می کند. ساختار این متد به صورت زیر است : $(selector).clone(true|false); Selector : تعیین کننده  عنصری است که می خواهیم از آن کپی ایجاد کنیم . false  : مشخص می کند که متصدیان رویداد نباید کپی شوند.به عبارتی دیگر […]