در این بخش قصد داریم با هم آموزش jquery ، که برگرفته از سایت خوب روکسو است را با هم پیش ببریم

ئاکو فرجی

30 فروردین 1403

---

قسمت اول: معرفی و آشنایی

• بازدید 1474
•   نظر0

  جی کوئری چیست؟   jQuery یک کتابخانه غنی جاوا اسکریپت است که بر اساس قاعده «کد کم تر، کار بیش تر» بنا نهاده شده است. از API ها جهت ساختن اسناد HTML و نگهداری آن ها استفاده می کند و همین طور وظایفی مانند مدیریت رویدادها، افکت های تعاملی به صورت انیمیشن در همه مرورگرهای نوین از جمله chrome ،FireFox ،safari و… از جمله مواردی هستند که توسط jQuery انجام می شود.   همچنین jQuery این امکان را به شما می دهد تا بتوانید به سادگی و به سرعت برنامه های بر پایه Ajax بسازید. شرکت های بزرگی هم چون گوگل، مایکروسافت و IBM از jQuery در محصولات خود استفاده می کنند. حتما بتوانید تصور کنید که jQuery چقدر محبوب و قدرتمند است؟   jQuery توسط John Resig در سال 2006 ساخته شد. این کتابخانه در حال حاضر توسط گروهی توسعه دهندگان توسعه داده می شود و تحت عنوان یک پروژه open source یا مبنع باز نگهداری می شود. وقتی که از jQuery استفاده می کنید، به میزان زیادی در کار و زمان صرفه جویی می کنید.   در سری آموزشی jQuery نکات و ویژگی های مختلف jQuery بررسی می شوند و مباحث آن از پایه تا پیشرفته ارائه خواهند شد.   آن چه می توانید با jQuery انجام دهید   به راحتی می توانید عناصر DOM یا HTML را انتخاب و آن ها و atrribute های مرتبط با آن ها را دست...

ادامه مطلب

ئاکو فرجی

30 فروردین 1403

---

سینتکس jQuery و کار با Selector ها

• بازدید 1481
•   نظر0

  سینتکس جی کوئری   یک عبارت jQuery معمولا با علامت $ آغاز می شود و با ; پایان می پذیرد. در واقع علامت $ در کدها یک نام جایگزین برای jQuery است. در کد مثال زیر استفاده از سینتکس جی کوئری را در یک حالت ابتدایی مشاهده می کنید:   1 2 3 4 5 6 <script>     $(document).ready(function(){         // Some code to be executed...         alert("Hello World!");     }); </script> کد مثال بالا، عبارت “Hello World” را به کاربر نشان می دهد.   شرح کد   اگر به تازگی کار با jQuery را آغاز کرده اید، احتمالا می خواهید بدانید که قسمت های مختلف کد مثال قبل چه وظایفی برعهده دارند. بنابراین به شرح قسمت های مختلف کد بالا می پردازیم:   تگ <script> به دلیل آن که jQuery یک کتابخانه جاوا اسکریپت است، شما باید کدهای این کتابخانه را بین تگ های script بنویسید. البته اگر کدهای jQuery در یک فایل جداگانه و خارجی قرار گرفته باشند، باید تگ های script را از ساختار jQuery حذف کنید. (فایل خارجی با پسوند js.)   ;(document).ready(handler)$ از این عبارت نوعا به عنوان رویداد rea...

ادامه مطلب

ئاکو فرجی

30 فروردین 1403

---

Event ها

• بازدید 1454
•   نظر0

  رویدادها در jQuery چه هستند؟   رویدادها در jQuery اغلب در ارتباط با و تعامل با کاربر رخ می دهد. مثلا مواردی مانند وقتی که کاربر روی دکمه یا لینکی کلیک می کند، متنی را وارد فیلدی می کنید، فیلد Select را انتخاب می کنید، کلیدی از صفحه کلید فشرده می شود، اشاره گر ماوس حرکت داده می شود و… JQuery قابلیت ابتدایی مکانیزم مدیریت رویدادها را بهینه کرده است و برای مرورگرهای مختلف متدهای native را جهت مدیریت رویدادها بکار می گیرد. متدهایی مانند ready ،click ،keypress ،focus ،blur ،change و… برای مثال جهت اجرای کد JQuery در زمانی که DOM آماده شده است، از متد ready استفاده می شود:   1 2 3 4 5 6 <script> $(document).ready(function(){     // Code to be executed     alert("Hello World!"); }); </script>   نکته: وقتی رویداد (document).(ready)$ رخ می دهد، کد می تواند با اطمینان اجرا شود زیرا DOM کاملا ساخته شده است. کد درون این رویداد تنها یکبار و آن هم زمانی که DOM ساخته شد، اجرا می گردد. به طور معمول رویدادهای JQuery در 4 گروه مجزا تقسیم بندی می شوند: رویدادهای ماوس، رویدادهای keyboard، رویدادهای مرتبط با فرم و رویدادهای document/window. در ادامه با...

ادامه مطلب

ئاکو فرجی

30 فروردین 1403

---

افکت‌های Show ،Hide و Fading

• بازدید 1463
•   نظر0

  متدهای ()Show و ()Hide در jQuery   در این آموزش به متدهای ()show و ()hide در jQuery می پردازیم. این متدها از سری متدهای افکت های jQuery محسوب می شوند که جهت تعامل کاربران با برنامه از آن ها بهره می برند. در واقع شما می توانید با استفاده از متدهای ()show و ()hide عناصر html را ظاهر یا پنهان کنید. متد ()hide در واقع یک استایل display:none را به صورت inline به استایلی که برای عنصر html موجود است، اضافه می کند. در واقع شما با استفاده از Selector ها که در آموزش های قبلی jQuery بررسی شد، عنصر یا عناصری را انتخاب و این ویژگی ها را بر آن ها اعمال می کنید. متقابلا با استفاده از متد ()show می توانید عنصری را که پنهان است، ظاهر سازید. در حقیقت متد ()show، ویژگی های مربوط به صفت display در عنصر را به حالت اولیه آن بر می گرداند که قبل از آن که display:none تنظیم شود، نوعا block ،inline یا inline-block هستند. کد مثال زیر این کاربرد را نشان می دهد:   1 2 3 4 5 6 7 8 9 10 11 12 13 <script> $(document).ready(function(){     // Hide displayed paragraphs     $(".hide-btn").click(function(){         $("p").hide();     })...

ادامه مطلب

ئاکو فرجی

30 فروردین 1403

---

افکت‌های Slide و Animation

• بازدید 1508
•   نظر0

  متدهای ()slideDown و ()slideUp در jQuery   از متدهای ()slideUp و ()slideDown جهت پنهان کردن و آشکار کردن عناصر html در jQuery استفاده می کنیم. این مکانیزم با تغییر مقدار خاصیت ارتفاع (height) انجام می شود. در کد مثال زیر کاربرد متدهای ()slideDown و ()slideUp را مشاهده می کنید:   1 2 3 4 5 6 7 8 9 10 11 12 13 <script> $(document).ready(function(){     // Slide up displayed paragraphs     $(".up-btn").click(function(){         $("p").slideUp();     });          // Slide down hidden paragraphs     $(".down-btn").click(function(){         $("p").slideDown();     }); }); </script>   مانند سایر متدهای مرتبط با افکت های jQuery، می توانید برای متدهای مثال بالا متغیر duration یا speed را جهت کنترل زمان اجرای متدها و این که اجرای متدهای slideUp و slideDown چقدر طول بکشد، در نظر بگیرید. جهت تعیین مقدار پارامتر duration می توانید از مقادیر پیش فرض “fast” و &ldq...

ادامه مطلب

ئاکو فرجی

30 فروردین 1403

---

ویژگی‌های chaining ،stop و callback

• بازدید 1383
•   نظر0

      بعد از مشاهده افکت های مختلف در jQuery که در قسمت های قبل آمد و بعد از کار کردن با متد animate، در ابتدای این قسمت به این سوال پاسخ می دهیم که چطور می توان یک animation را متوقف کرد به همین منظور به سراغ متد stop در جی کوئری می رویم.     متد stop در جی کوئری   با استفاده از متد ()stop می توان یک animation یا افکت را متوقف کرد. در واقع این موضوع از آن جایی اهمیت دارد که قبل از پایان یافتن انیمیشن یا افکت روی عناصر انتخاب شده، توقف رخ می دهد. ساختار پایه استفاده از متد ()stop به صورت زیر می باشد:   1 $(selector).stop(stopAll, goToEnd);   اکنون ساختاری را که در بالا آمده است، شرح می دهیم: پارامتر اختیاری stopAll که از نوع boolean می باشد. این پارامتر مشخص می کند که آیا همه انیمیشن هایی که در صف اجرا قرار دارند، متوقف شوند یا خیر. مقدار پیش فرض برای این پارامتر false می باشد و بنابراین در حالت پیش فرض فقط انیمیشن جاری متوقف می شود. پارامتر اختیاری goToEnd مشخص می سازد که انیمیشن فوراً به حالت پایان رود و در حقیقت به سرعت کامل شود. مقدار پیش فرض برای این پارامتر که از نوع Boolean نیز می باشد، false می باشد.   کد مثال زیر، یک استفاده کاربردی در یک شرایط واقعی را از ...

ادامه مطلب

ئاکو فرجی

12 دی 1399

---

کار با Get/Set و ویژگی Insert

• بازدید 14
•   نظر0

        در بخش اول آموزش ها، Getter و Setter را می آموزیم و سپس به سراغ ویژگی Insert می رویم. ابتدا به این موضوع می پردازیم که manipulation چیست و کدام قسمت از کتابخانه jQuery را شامل می شود؟   manipulation در لغت به معنای «دستکاری کردن» است. در واقع به این بُعد از کتابخانه jQuery می پردازد که چگونه می توان محتوای مختلفی را به DOM اضافه کرد. این محتوا گستره وسیعی از یک متن عادی تا تگ های html و… را شامل می شود. ما در این قسمت از آموزش قسمت های بعدی آموزش manipulation در این رابطه می آموزیم که چطور از ابزارهای manipulation در jQuery بهره ببریم تا بتوانیم DOM را دستکاری کنیم. در ادامه با ابزارهای manipulation آشنا می شوید و مثال هایی از کاربرد آن را مشاهده خواهید کرد.   Setter ها و Getter ها در jQuery   Getter ها و Setter ها به شما کمک می کنند تا محتوای عناصر html و یا مقادیر attribute ها در DOM را دریافت (get) و یا اعمال (set) کنید. تعدادی از متدهای jQuery هستند که از آن ها جهت خواندن مقادیر از عناصر یا اعمال مقادیر جدید بر عناصری که توسط selector ها انتخاب شده اند، استفاده می شود، از جمله: ()text() ،html() ، attr()، val.   اگر متدهایی که از آن ها نام برده شد، آرگومانی دریافت نکنند، در واقع به عنوان getter یا...

ادامه مطلب

ئاکو فرجی

30 فروردین 1403

---

کار با Remove و کلاس‌های CSS

• بازدید 1395
•   نظر0

        این قسمت از آموزش Manipulation در جی کوئری را با این سوال آغاز می کنیم که چگونه عناصر و atrribute ها را از DOM به کمک jQuery حذف کنیم؟ jQuery دسته ای از متدها را جهت حذف عناصر و یا محتوا از DOM آماده کرده است، متدهایی مانند ()empty() remove() ،unwrap و …     متد ()empty در jQuery   متد ()empty همه محتوای عنصر و عناصر فرزندش و محتوای عناصر فرزند را حذف می کند. در کد مثال زیر ملاحظه می کنید که بعد از کلیک روی دکمه، محتوای داخل همه عناصری که دارای کلاسی به نام container می باشند، حذف می شود:   1 2 3 4 5 6 7 8 <script> $(document).ready(function(){     // Empty container element     $("button").click(function(){        $(".container").empty();     }); }); </script>   نکته: با توجه به استانداردهای کنسرسیوم جهانی وب و یا همان W3C، هر رشته متن درون یک عنصر فرزند آن عنصر محسوب می شود.   متد ()remove در jQuery   متد ()remove در jQuery هر عنصری را که در ورودی به آن داده شود، به همراه محتوای داخلی آن عنصر را از DOM حذف می کند. علاوه بر عنصر، ...

ادامه مطلب

ئاکو فرجی

30 فروردین 1403

---

کار با ویژگی‌های CSS و کار با ابعاد عناصر

• بازدید 1398
•   نظر0

  با آخرین مباحث از Manipulation در jQuery با شما هستیم و با این سوال شروع می کنیم که چطور می توانیم ویژگی های css را به کمک jQuery از DOM دریافت و یا به عناصر انتخاب شده از DOM اعمال کنیم؟     متد ()css در jQuery   متد ()css در jQuery جهت دریافت مقدار ویژگی css از عنصری که انتخاب می شود، کاربرد دارد. همچنین با این متد می توانید مقداری را برای صفات css در عنصری که انتخاب می شود، تخصیص دهید و آن را در DOM اعمال کنید. استفاده از متد ()css یک روش سریع جهت اعمال صفات css بر عناصر انتخاب شده است و به صورت inline بر عناصر DOM اعمال خواهد شد. البته می توان برای تخصیص ویژگی های css که استفاده کردن از آن ها مستقیما در فایل های css دشوار است از متد ()css استفاده کرد.   دریافت مقادیر css با استفاده از متد ()css در jQuery   اگر عنوان ویژگی css را به عنوان ورودی به متد ()css بدهید، این متد مقدار آن صفت css را به شما می دهد و می توانید با آن مقدار، در کدهای jQuery خود کار کنید. ساختار پایه ای استفاده از متد ()css به صورت زیر است:   1 $(selector).css("propertyName");   برای مثال در کد زیر می توانید مقدار ویژگی background-color مربوط به عنصر DIV را با استفاده از متد ()css دریافت کنید. این کار با کل...

ادامه مطلب

ئاکو فرجی

30 فروردین 1403

---

Traversing و Ancestor ها

• بازدید 1397
•   نظر0

      اولین سری از آموزش مطالب جی کوئری پیشرفته را آغاز می کنیم. در ابتدا Traversing را بررسی می کنیم. سپس به سراغ مفهوم Ancestor ها می رویم.     Traversing چیست؟   تا کنون وقتی با Selector ها در jQuery کار می کردیم، این امکان وجود داشت که درخت DOM را در جهت پایین طی کنیم و به همین صورت از طریق یک عنصر به عنصر دیگر برسیم. اما این امکان را نداشتیم که وقتی یک عنصر را در DOM انتخاب کردیم، از طریق آن عنصر به عناصر والد آن عنصر یا اجدادش دست پیدا کنیم. به بیان دیگر نمی توانستیم DOM را به سمت بالا طی کنیم. دقیقا همین جاست که متدهای traversal در jQuery به کار می آیند. با استفاده از متدهای DOM ما می توانیم به سمت بالا و پایین و همه محدوده درخت DOM به آسانی حرکت کنیم.   traversing یکی از ویژگی های برجسته jQuery می باشد. برای آن که بیش ترین استفاده را از آن ببرید، لازم است تا روابط بین عناصر موجود در یک درخت DOM را درک کنید. کد زیر را در نظر بگیرید:     1 2 3 4 5 6 7 8 9 10 <body>     <div class="container">         <h1>Hello World</h1>         <p>This is...

ادامه مطلب