تبلیغات
مقالات آموزشی برنامه نویسی و شبکه - مطالب آموزش jQuery

آموزش جی کوئری به زبان ساده_درس دوم

آموزش جی کوئری - درس دوم: سلکتورها در جی کوئری (بخش اول: سلکتور های اصلی)

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

برای اینکه بتونین یه بلایی سر یک تگ بیارین ، باید اول بتونین اون تگ رو انتخاب کنین.

بعد که به یک تگ توی صفحه دسترسی پیدا کردین ، می تونین هر بلایی که دوست دارین ، سرش بیارین.

حتی می تونین یدفعه چندین تگ رو انتخاب کنین و یه جا یک بلایی سر همشون در بیارین

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

برای انتخاب یک تگ همیشه از علامت دالر ($) استفاده میشه و بعد از اون یک پرانتز میزاریم و سپس داخل پرانتز باید عبارت انتخابگر رو بنویسیم

به چندین روش میشه به یک تگ دسترسی پیدا کرد :

  • با استفاده از نام (اسم) تگ


  • با استفاده از آی دی


  • با استقاده از کلاس تگ (کلاس سی اس اس)


  • با استفاده از صفات تگ

اگر کمی به CSS آشنا باشید ، حتما متوجه شده اید که سکتورهای جی کوئری دقیقا مشابه سکتورهای CSS است.
در درس بعدی با مهمترین ارورهای جی کوئری و روش های برطرف نمودن این ارورها آشنا خواهیم شد.

جهت مشاهده لیست تمامی آموزش های جی کوئری من ، از منوی سمت راست و بخش موضوعات ، روی گزینه آموزش jQuery رو کلیک کنید.

نوشته شده در تاریخ شنبه 14 اردیبهشت 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


آموزش جی کوئری به زبان ساده_درس اول

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

بدیهی است که تسلط خوب بر جاوا اسکریپت ، خیلی می تونه اینجا کمکتون کنه.

مخصوصا که وسط کد نویسی های جی کوئریمون از جاوا اسکریپت هم به کررات استفاده خواهیم کرد ...
نکته: از اونجایی که جی کوئری در اصل با جاوا اسکریپت نوشته شده ، بدیهی است که وسط کد های جی کوئری میشه کد های جاوا اسکریپت نوشت.

سایت نت نیک|آموزش جی کوئری
کدهای چی کوئری رو کجا بنویسیم ؟ (مواد لازم جهت نوشتن کد جی کوئری!)

برای اینکه بتونین جی کوئری کار کنین ، تقریبا به هیچی نیاز ندارین!

فقط یه نوت پد + داشتن کتابخونه جی کوئری کافیه.

* نوت پد که روی همه ویندوزا هست ولی برای راحتی کار بهتره که یک نرم افزار مخصوص طراحی وب داشته باشین که بنده Microsoft Exression Web نسخه 4 و یا نسخه های بالاترش رو پیشنهاد می کنم.

* فایل کتابخونه جی کوئری رو می تونین از لینک زیر دانلود کنین:
دانلود کتابخانه جی کوئری
البته آخرین نسخه این کتابخونه رو می تونین همیشه از سایت jQuery.Com دانلود کنین.

پس از اینکه فایلا کتابخونه رو دانلود کردین ، (یه فایل با پسوند js است که مشخص می کنه که خود جی کوئری بوسیله جاوا اسکریپت نوشته شده) باید اونو به سند html تون وصل کنین:


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

دقت کنین که از اونجایی که کد های جی کوئری هم مشتق شده از جاوا اسکریپته ، می تونین وسط کدهای جی کوئری از کد های جاوا اسکریپت هم استفاده کنین و همچنین عین جاوا اسکریپت می تونین کدهای جی کوئریتونو هم داخل تگ script بنویسین و هم اینکه اونو توی یک فایل جدا بنویسین و با پسوند .js ذخیره اش کنین و بعد تگ script دومی که در کد بالا نوشتم رو عین تگ script اوب می نویسین و در بخش src مسیر فایلی که کدهای جی کوئریتون توشه رو میدین.


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

نوشته شده در تاریخ جمعه 6 اردیبهشت 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


آموزش ساخت منوی کرکرهای با افکت زیبای fade با کمک جی کوئری

با سلام

در آموزش های قبل ساخت منوی کرکره ای با css (بدون نیاز به جاوا اسکریپت!) و آموزش ساخت منوی کرکره ای با جاوا اسکریپت و آموزش ساخت منوی کرکره ای با جی کوئری رو آموزش دادم.

امروز می خوام یک منوی کرکره ای ولی با افکت fade رو آموزش بدم.

این منو بدین صورت است که وقتی کاربر موسشو روی سر منو می بره ، زیر منو ها به آرامی پر رنگ میشن و وقتی موس رو از روی سر منو کنار می بره ، زیر منو ها به آرامی محو میشن. (افکت fade)


آموزش ساخت منوی کرکرهای با افکت زیبای fade با کمک جی کوئری - netnic.ir
خوب برای این کار از توابع خیلی باحال جی کوئری کمک خواهیم گرفت.

در ادامه مطلب ، خواهید دید که چه راحت میشه یک منوی کرکره ای خوب با جی کوئری ایجاد کرد.

نوشته شده در تاریخ دوشنبه 17 مهر 1391    | توسط: ح.م    | طبقه بندی: پروژه های کلاینت ساید، آموزش jQuery، پروژه ها و ساخته های خودم،     | نظرات()


آموزش ساخت منوی کرکره ای با جی کوئری

با سلام
آموزش ساخت منوی کرکره ای با جاوا اسکریپت - netnic.ir
منوی یک سایت بهترین ابزار برای دسترسی سریع کاربر به بخش های مختلف سایت است.

همانطور که در آموزش قبلی بیان شد ، منوی افقی رو به سه صورت می توان ساخت :

  1. با CSS خالی
  2. با جاوا اسکریپت
  3. با جی کوئری
در آموزش های قبل ساخت منوی کرکره ای با css (بدون نیاز به جاوا اسکریپت!) و آموزش ساخت منوی کرکره ای با جاوا اسکریپت رو آموزش دادم.


امروز قراره  منوی کر کره ای رو با جی کوئری بسازیم.


در ادامه قدرت جی کوئری رو خواهید دید.

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

خواهید دید که جی کوئری چقدر کارها رو داینامیک تر و حرفه ای تر کرده ....

  فیلم آموزش کامل جی کوئری (ساده و روان)


نوشته شده در تاریخ سه شنبه 28 شهریور 1391    | توسط: ح.م    | طبقه بندی: پروژه های کلاینت ساید، آموزش jQuery،     | نظرات()


آموزش بالا بردن سرعت اجرای کدهای جی کوئری

چرا کد جی کوئری من کند عمل می کنه ؟
چجوری سرعت اجرای کد جی کوئری من رو بالا ببرم ؟

چجوری بهترین نوع کد نویسی جی کوئری رو استفاده کنم ؟
نکات مهم بهینه سازی کد نویسی با جی کوئری چیست ؟

با سلام
آموزش بهینه کردن کدنویسی با جی کوئری - netnic.ir

شاید براتون جالب باشه که بدونید درست کد زدن در جی کوئری ، خیلی توی سرعت کارکرد کدتون تاثیر داره .

در ادامه به شما یاد خواهیم داد که چگونه با جی کوئری بهینه کد نویسی کنید.

نوشته شده در تاریخ جمعه 31 شهریور 1391    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


آموزش اعتبار سنجی فرم ها با جی کوئری بخش اول

آموزش اعتبار سنجی فرم ها با جی کوئری
سلام

با اتمام آموزش های جاوا اسکریپتم ، طبق قولی که داده بودم ، دارم روی پلاگین های کاربردی جی کوئری کار می کنم.

در ادامه آموزش اعتبار سنجی فرم ها با جی کوئری یا form validation with jQuery رو آموزش می دهم.

نوشته شده در تاریخ یکشنبه 28 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش پلاگین های جی کوئری، آموزش jQuery، پروژه های کلاینت ساید،     | نظرات()


بزرگترین اشتباهات برنامه نویسان جی کوئری و جاوا اسکریپت

بزرگترین اشتباهات برنامه نویسان جی کوئری و جاوا اسکریپت
در زیر قواعد اصلی برای کد نویسی (اسکریپت نویسی) حرفه ای و اصولی در جاوا اسکریپت و جی کوئری را بیان خواهیم کرد :

قاعده شماره ۱: کارکرد جداگانه جاوا اسکریپت

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

کدنویسی نادرست :
هرگز event های (رویدادهای) جاوا اسکریپت را به عنوان ویژگی‌های درون خطی (inline) بکار نگیرید. این عمل را باید به طور کامل از ذهن خود پاک کنید.


کدنویسی درست :
همه رفتارهای جاوا اسکریپت باید در فایل اسکریپت خارجی گنجانده شده و با تگ <script> در قسمت head‌ صفحه به سند لینک شوند. بنابراین تگ بالا به شکل زیر در می‌آید:


و کد جاوا اسکریپت در داخل فایل myscript.js (یک اسم فرضی) می‌تواند چیزی شبیه این باشد:


متد()
click در جی کوئری به ما اجازه می‌دهد تا براحتی یک event کلیک را به نتیجه(های) انتخابگرمان نسبت دهیم. بنابراین کد بالا همه تگ‌های <a> از کلاس doSomething را انتخاب می‌کند و یک رویداد کلیک را که یک تابع را فراخوانی می‌کند به آنها نسبت می‌دهد.

نوشته شده در تاریخ چهارشنبه 17 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش jQuery، آموزش کم کم جاوا اسکریپت،     | نظرات()


چرا جی کوئری ؟

شاید این سوال همیشه در ذهن شما ایجاد شده باشد که چرا جی کوئری ؟ مگر با جاوا اسکریپت نمی توان اشیاء را جابجا کرد یا آنها را نامرئی و مرئی نمود ،با تصاویر اسلاید شو ساخت ، منوی کشویی ایجاد کرد و .... ؟

یکی از مهمترین دغدغه های هر طراح وبی ، نمایش درست صفحات سایت در مروگرهای مختلف بوده و هست .
تا قبل از تولید کتابخانه جی کوئری ، بزرگترین مشکل جاوا اسکریپت ، عدم پشتیبانی برخی از دستورات توسط مرورگر های مختلف بود ، بدین صورت بعنوان مثال اسلاید شوی یک سایت روی مروگر فایرفاکس درست کار می کرد ولی روی مرورگر کروم نه !
تا اینکه کتابخانه جی کوئری توسط گروهی از برنامه نویسان ایجاد شد و مشکلات مروگرهای مختلف با جاوا اسکریپت به طور کامل حل شد .(خدا عمرشون بده)
سایت نت نیک|چرا جی کوئری ؟

از فواید دیگر جی کوئری ، کوتاه شدن کد نویسی بود ، بطوری که در بخش آموزش ساخت منوی کشویی با جی کوئری ، ملاحظه نمودید که ما با چند خط کد ساده توانستیم یک منوی کشویی خیلی شیک و جذاب بسازیم ، بطوری که انجام همین کار با جاوا اسکریپت نیازمند ساعت ها کدنویسی بود و تازه در آخر هم هیچ تضمینی وجود نداشت که کدهای شما روی همه مروگرها کار کنه !

خوب حتما الان میگین : خوب اگه جی کوئری این همه خوبه ، پس دیگه چرا تو سایتت این همه آموزش جاوا اسکریپت
قرار میدی ؟

  • دلیل اول اینکه جی کوئری یکی از کتابخونه های جاوا اسکریپته و یک زبان نیست و برای یادگیری دستوراتش باید تا حدودی با جاوا اسکریپت آشنا باشید
  • جی کوئری همه کارها رو نمی تونه انجام بده و در برخی موارد مجبور به استفاده از جاوا اسکریپت هستید ، بعنوان مثال ؛ جی کوئری توانایی ایجاد افکت تایپ متن یا چک کردن فرم های یک سایت یا نمایش ساعت رو نداره و این موارد رو باید با جاوا اسکریپت انجام بدید. مثل کاری که من در سایت سریر وب انجام دادم.

نوشته شده در تاریخ چهارشنبه 17 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش jQuery، آموزش کم کم جاوا اسکریپت،     | نظرات()