آموزش jQuery بخش اول

[mtareh]

jQuery (http://jquery.com/) یکی از بهترین کتابخونه های جاوا اسکریپته. فکر نمیکنم جمله ای بهتر از Write less, Do more بتونه دلیل استفاده از این framework رو توجیه کنه http://www.pasargad-graphic.com/blog/wp-includes/images/smilies/icon_smile.gif

اگه بخوام بیشتر توضیح بدم ، jQuery (http://www.pasargad-graphic.com/blog/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-jquery/) مجموعه ای از توابع جاوااسکریته که به شما اجازه میده بدون داشتن تسلط کامل
به Javs Script (و فقط با آشنایی نسبی با Syntax این زبان) ، صفحه های جالب و کاربرپسند درست کنید

چه بدی هایی داره؟

حجمش برای کاربرانی که از اینترنت ذغالی مثل DialUp و GPRS استفاده میکنن ممکنه یکم زیاد باشه.
(90 کیلوبایت)
استفاده بیش از حد از کدهای jQuery در یک صفحه ، باعث کاهش سرعت و کرش کردن مرورگرهایی
مثل IE6 (http://www.pasargad-graphic.com/blog/tag/internet-explorer/) میشه (کی اهمیت میده!!)
چه خوبی هایی داره؟

کدنویسی کمتر
داشتن افزونه های مختلف
سازگاری با 99% مرورگرها (http://www.pasargad-graphic.com/blog/%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%A2%D8%AE%D8%B1%DB%8C%D9%86-%D9%86%D8%B3%D8%AE%D9%87-%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1/)
عدم نیاز به دونستن JavaScript
استفاده از توابع آماده با چند دستور ساده
قابلیت کش شدن فایل در اولین بازدید کاربر
پشتیبانی از event ها
ساخت انیمیشن (http://www.pasargad-graphic.com/blog/webkit-keyframes/)و افکت با چند کد ساده
پشتیبانی از Ajax
Open Source بودن
در چه سایت هایی استفاده میشه؟

جی کوئری رایج ترین فریم ورک جاوا اسکریپته (http://w3techs.com/technologies/overview/javascript_library/all) و پنجاه و یک و نیم درصد از 10000 سایت پربازدید دنیا دارن از jQuery استفاده میکنن.
طبق آماری که منتشر شده (http://trends.builtwith.com/javascript/JQuery)بیشترین مشتری های jQuery سایت های تجاری هستن. سایت های تجاری 21% مصرف کنندگان jQuery رو تشکیل میدن. بعد از اون سایت های فروشگاهی ، فناوری، خبری ، تفریحی و آموزشی هستن.

http://lh5.googleusercontent.com/--_u41wxw_Pc/TtZ3PSyVwvI/AAAAAAAAA-I/fhRM0nnoaAg/jquery-usage.png



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

فقط کافیه عباراتی مثل jQuery Example (https://www.google.com/search?q=jQuery+Example) رو گوگل کنید تا ببینید چقدر استفاده از jQuery در اینترنت رایجه.
چه وقت از jQuery استفاده کنیم؟


هیچوقت برای کارهای ساده ای که بدون اسکریپت هم میتونید انجام بدید، از جی کوئری استفاده نکنید.
اگه با CSS3 و چند خط جاوا اسکریت میتونید به هدفتون برسید ، بیخودی یه فایل 90 کیلوبایتی رو تو مرورگر کاربراتون نچـپـونید!
چطور استفاده کنیم؟

آخرین نسخه فایل اسکریپتی (http://code.jquery.com/jquery-1.7.1.min.js) که در سایت jQuery (http://jquery.com/) قرار داره رو دانلود کنید و در سایتتون آپلود کنید. اگرم نخواستین آپلود کنید میتونید از فایلی که در سرور گوگل قرار گرفته (http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js) استفاده کنید.
فایل رو مثل هر اسکریپت دیگه ای با یه تگ script میتونید در صفحه‌تون قرار بدید:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>برای کدنویسی هم میتونید یه فایل js دیگه بسازید یا از تگ script استفاده کنید و داخل صفحه html بذارید. برای خوانده شدن کد ها همراه با لود شدن صفحه ، لازمه که از تابع ready استفاده کنیم:
$(document).ready(function(){ YOURCODE });تابع hide
برای مخفی کردن یک المنت استفاده میشه. تقریبا کاری که display:none در CSS (http://www.pasargad-graphic.com/blog/category/css/)انجام میده
$(document).ready(function(){ $(".myclass").click(function(){ $(this).hide(); }); });کد بالا چه کاری میکنه؟ با لود شدن صفحه ، کدها رو آماده اجرا میکنه،

بعد با یه تابع برای رویداد کلیک همه المنت های با کلاس .myclass ایجاد میکنه، این تابع کارش اینه که با کلیک کردن ، خود المنتی که کلیک شده رو hide میکنه.

به جای .myclass میتونید نام تگ رو بذارید (مثل div و p و span و…) یا میتونید ID المنت ها رو بذارید.
درست مثل CSS باید قبل از اسم کلاس ها نقطه . و قبل از ID ها باید از # استفاده کنیم.
حالا یکم کد رو تغییر میدیم ؛ یه button در صفحه میذاریم با کلاس hide_it
و وقتی کاربر روی این دکمه کلیک کنه همه عناصر با کلاس myclass مخفی بشن:
$(document).ready(function(){ $(".hide_it").click(function(){ $(".myclass").hide(); }); });همونطور که متوجه شدید 4 روش برای صدا زدن عناصر در jQuery (http://www.pasargad-graphic.com/)هست:
برای همون عنصری که رویداد رو دریافت کرده
$(this).hide()برای یک کلاس خاص
$(".classname").hide()برای یک ID خاص
$("#IDname").hide()برای یک تگ خاص
$(div).hide()در بخش دوم آموزش، با سلکتورهای jQuery بیشتر آشنا میشیم http://www.pasargad-graphic.com/blog/wp-includes/images/smilies/icon_smile.gif
منبع:http://www.pasargad-graphic.com/blog/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-jquery/

[mtareh]

بخش دوم شماره1
در بخش اول آموزش jQuery (http://www.pasargad-graphic.com/blog/آموزش-jquery/) درمورد خوبی ها و بدی های جی کوئری گفتیم و یادگرفتیم که چطور از این کتابخونه جاوا اسکریپت استفاده کنیم. + با Syntax جی کوئری آشنا شدیم و چند تا selector رو آزمایش کردیم.
امروز در بخش دوم آموزش ، با سلکتورهای jQuery (http://www.pasargad-graphic.com/blog/category/jquery/)آشنا میشیم.
سلکتور همونطور که از اسمش پیداست برای انتخاب کردن المنت ها (جهت اعمال کد روی اون‌ها) استفاده میشه. برای انتخاب یه عنصر HTML (http://www.pasargad-graphic.com/blog/html-tutorial-pdf/)هم میتونیم به صورت مستقیم اونو فراخوانی کنیم
(صدا زدن با کلاس ، ID ، نام تگ و یا “this” (http://www.pasargad-graphic.com/blog/آموزش-jquery/)) که در بخش اول آموزش jQuery (http://www.pasargad-graphic.com/blog/آموزش-jquery) چند نمونه دیدیم ؛ هم میتونیم از روش های
خاص‌تری مثل روش‌های زیر استفاده کنیم:
انتخاب همه عناصر (*)
$(*).hide()با کد زیر میتونید همه عناصر صفحه رو فراخوانی کنید.(نمونه (http://api.jquery.com/all-selector/))
مثلا در کد زیر تعریف شده که همه عناصر با کلیک شدن ، hide بشن
$(document).ready(function(){ $("*").click(function(){ $(this).hide(); }); });انتخاب عناصر در حال حرکت (animated)
نمیخوام در این بخش وارد بحث انیمیشن بشم ، در بخش های بعدی کار با انیمیشن رو یاد میگیریم؛ فقط در همین حد بگم که با این کد میتونیم عناصری رو که درحال حرکت هستن رو سلکت کنیم: (نمونه (http://api.jquery.com/animated-selector/))
$("div:animated").hide()انتخاب عناصر با خصوصیت دلخواه
برای انتخاب عناصر بر اساس خصوصیت ها
کد زیر لینک هایی که خاصیت href شون با عبارت http شروع بشه رو hide میکنه
$('a[href^="http"]').hide()کد زیر لینک هایی که خاصیت hreflang شون en باشه یا با -en شروع بشه رو hide میکنه
تفاوتش با کد قبلی اینه که اگه در اینجا hreflang مقادیری مثل en یا en-UK داشته باشه سلکت میشه ولی مقادیری مثل english سلکت نمیشه. اما اگه مثل کد قبلی از علامت ^ استفاده کنیم ، مقدار english هم سلکت میشه. (مثال (http://api.jquery.com/attribute-contains-prefix-%3C/p%3E%3Cp%3Eselector/))
$('a[hreflang|="en"]').hide()کد زیر عکس‌هایی رو که در هر جای خاصیت Alt شون اسم من باشه (!) رو مخفی میکنه
$('img[alt*="pouya"]').hide()این کد هم مثل کد بالا کار میکنه ولی تفاوتش اینه که کلمه‌ی مورد نظر باید با Space از کلمه های دیگه جدا شده باشه. یعنی اگه خصوصیت Alt تصویر، عبارت “this is pouya saadeghi” باشه ، عکس رو سلکت میکنه ولی اگه در Alt تصویر ، عبارت “ThisIsPouyaSaadeghi” باشه ، عکس رو سلکت
نمیکنه http://www.pasargad-graphic.com/blog/wp-includes/images/smilies/icon_smile.gif
$('img[alt~="pouya"]').hide()کد زیر همه لینک‌هایی که خصوصیت hrefشون با کلمه”html” تموم میشه رو سلکت میکنه
$('a[href$="html"]').hide()کد زیر فقط div هایی رو که خصوصیت کلاسشون فقط و فقط کلمه myclass باشه رو سلکت میکنه
$('div[class="myclass"]').hide()کد زیر div هایی رو که خصوصیت کلاسشون هرچیزی به جز کلمه “myclass” باشه رو سلکت میکنه
$('div[class!="myclass"]').hide()
منبع:http://www.pasargad-graphic.com/blog/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d9%84%da%a9%d8%aa%d9%88%d8%b1%d9%87%d8%a7-jquery/

[mtareh]

انتخاب دکمه ها
این سلکتور فقط دکمه ها رو سلکت میکنه؛ دکمه میتونه با تگ <button> درست شده باشه یا با تگ <input> با مقدار button (http://www.pasargad-graphic.com/blog/html-tutorial-7/)
کد زیر به همه button ها حاشیه 3 پیکسلی میده. در این کد نحوه اعمال یک کد CSS به یک عنصر رو هم میتونید ببینید.
$(":button").css({"border":"3px black solid"});انتخاب چک‌باکس ها
مثل کد قبلی کار میکنه، کد زیر چک‌باکس ها رو انتخاب میکنه
$(":checkbox").css({"border":"3px black solid"});اگه بخوایم این نوع کدها فقط در محدوده یک عنصر کار کنن، به راحتی میتونیم از اسم کلاس‌ها ، IDها یا تگ ها استفاده کنیم:
$("#container .leftColumn input:checkbox").css({border:"3px black solid"});
انتخاب Input های از نوع File
برای انتخاب Input هایی که خصوصیت type اون‌ها مقدار file داره و برای انتخاب یک فایل جهت آپلود در سایت استفاده میشن (نمونه (http://api.jquery.com/file-selector/))
$("input:file").css({border:"3px black solid"});انتخاب عنصرهای check شده
این سلکتور checkbox ها و radio هایی که تیک خوردن (انتخاب شدن) رو سلکت میکنه (نمونه (http://api.jquery.com/checked-selector/))
$("input:checked").css({"border":"3px black solid"});در کد زیر با انتخاب هر دکمه رادیویی موجود در صفحه ، مقدار value اون ، در یک عنصر جدید که کلاس .log داره ، نمایش داده میشه:
$("input").click(function(){ $(".log").html( $(":checked").val() + " is checked!" ); });انتخاب عناصر فرزند
درست مثل CSS میتونیم در jQuery هم عناصر فرزند رو فراخوانی کنیم
$("ul.class1 > li").css({border:"3px black solid"});انتخاب بر اساس محتوا
با کد contains میتونیم عنصری که متن خاصی داخلش وجود داره رو سلکت کنیم.
کد زیر هر پاراگرافی که کلمه pasargad-graphic.com داخلش باشه رو نارنجی میکنه
$("p:contains('pasargad-graphic.com')").css("color", "orange");انتخاب عنصرهای غیرفعال (disabled)
کد زیر کلمه “DISABLED” رو در همه input هایی که غیرفعال شدن مینویسه:
$("input:disabled").val("DISABLED");انتخاب عنصرهای فعال (enabled)
کد زیر برای همه input هایی که فعال هستن بوردر قرمز میذاره:
$("input:enabled").css("border":"1px solid red");
انتخاب عناصر خالی
برای عناصری که هیچ متن یا تگی داخلشون نباشه. مثل تگ های زیر:
<a></a> <li></li> <td></td>کد زیر همه تگ‌های خالی که داخل تگ body باشن رو انتخاب میکنه، متن Empty Tag رو داخلشون مینویسه و رنگ بکگراندشون رو قرمز میکنه
$("body :empty").text("Empty Tag").css('background','red');منبع:http://www.pasargad-graphic.com/blog/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d9%84%da%a9%d8%aa%d9%88%d8%b1%d9%87%d8%a7-jquery/

[M0TR!X]

حاجي بازم كه اشتباه تاپيك زدي !!

[spiderman200700]

آقا اینجا تایپک جاواس نه جاوا اسکریپت و JQuery!!!!!
من نمیدونم استادان گرامی که آموزش میذارن، کی میخوان فرق این دوتا رو متوجه بشن!!!!

[spiderman200700]

این اونجایی که شما احتیاج دارید.یعنی تالار JQuery :
http://barnamenevis.org/forumdisplay.php?161-jQuery