• 1 رای - 4 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
جی کوئری در 20 دقیقه [از پایه]
#1
سلام،
من خودم جی کوئری رو دیروز (2011/18/8) تو 20 دقیقه یاد گرفتم. میخوام تمام اطلاعات خودم رو در باره جی کوئری به اشتراک بگذارم که فعلاً در این تاپیک تمامشون ارسال میشه تا بعداً ببینم چقدر دوستان یاری می کنن که یک کتابچه هم تهیه کنم.

فقط خواهش می کنم اگر پسندیدی از دکمه تشکر استفاده کنید و اگر سوالی بود ، برای اینکه این تاپیک شلوغ نشه تو یه تاپیک جداگونه تو همین انجمن سوالتون رو مطرح کنید. اگر هم نظر خاصی دارید ، بصورت پ.خ برام بگید. خیلی خیلی ممنونم Heart
خب این اولین پست من هست که نمیخوام درس بدم ولی بجاش میخوام باهاتون دو کلام حرف بزنم.
جی کوئری اولاً که یه اسم بسیار خوشگله و خیلی خوب هم نوشته میشه (jQuery) بجای Jquery یا JQuery ...
اونقدر ها هم که فکر می کنید سحت نیست. واقعاً نیازه اطلاعاتی در مورد جاوا اسکریپت و سی اس اس و اچ تی ام ال بدونید.
چیز خاصی هم برای نصب نداره. کافیه برید تو سایت jQuery و فایل جی کوئری رو دانلود کنید و در بخش هدر پوسته وبسایتتون اون رو اینکلود کنید. یه فایل کم حجم و کارآمد.
جی کوئری اینقدر خوب و جذاب و کارآمده که گوگل خیلی ازش استفاده کرده. البته یاهو هم همینطور انگار ولی من با این آدم بد کاری ندارم. گوگل رو عشقست. Heart
جی کوئری هم یه جوری مثل پی اچ پی شروع میشه. جی کوئری مثل پی اچ پی سعی کرده از اسامی دقیق و درست استفاده کنه. مثلاً تابع strtotime() کارش تابلوئه چون از اسمش پیداست. جی کوئری هم همینطوره. مثلاً hide() یا slideUp() یا حتی toggle() .
جی کوئری واقعاً پیشرفت می کنه و خوبیش اینه که متن بازه و مشکلی نیست موقع استفاده ازش.
قبل از یادگیری جی کوئری حتماً پیشنهاد می کنم برید css و html و js رو یادبگیرید که خارج جی کوئری هم بکارتون میاد.
جی کوئری بازم مثل پی اچ پی یه داکیومنت خوب داره. جالبه بدونید جی کوئری اصلاً سخت نیست. یه قاعده خیلی آسون داره باقیش توابع هستند که تو خود سایت جی کوئری سرچ کنید یا گوگل بهتون میگه تابعی که بکارتون میاد چیه.
جی کوئری همیشه با $ شروع میشه و بلافاصله دو تا پرانتز که عبارت داخلش میتونه کلاس یک المنت یا آیدی اون یا حتی یک دستور از پیش تعریف شده جاوا اسکریپت باشه مثل document که نشان دهنده سند یا همون صفحه هست.
جی کوئری مثل جاوا اسکریپت اگر بخواد چند تا دستور یا تابع رو بهم وصل کنه از نقطه استفاده می کنه نه + که از + فقط برای وصل کردن دو رشته استفاده میشه.
یه نمونه ساده:
کد:
<script>
$("p.man").hide();
</script>
<body>
<p class="man">Alireza</p>
</body>
همونطور که پیش از این گفتم ، $ نشان دهنده جی کوئری بودنه. بعدش دستور داخل پرانتز ها ، در اینجا در پرانتز ها میگیم همه تگ های p که کلاس man دارن مورد نظر ماست و بعدش از یک تابع استفاده می کنیم به نام hide() که مخفی می کنه.
البته این کد زمانی اجرا میشه درست نوشته بشه. درستش میشه زیر:
کد:
<script>
$(document).ready(function(){
$("p.man").click(function(){
$("p.man").hide();
});
});
</script>
<body>
<p class="man">Alireza</p>
</body>

این همه اون چیزی هست که باید بدونید. اگر این پست رو خوب فهمیدید ، با تمرین به یادتون میمونه باقیش دیگه مشکلی نیست. سایت جی کوئری هست کمکتون می کنه.
فقط بعضی توابع هستند که زیاد بکار میان من براتون در پست بعدی می نویسم و آرگومان هاشم مشخص می کنم.
اون عبارت بعد از $ داخل پرانتز ، هر جوری بخواید می تونید بنویسید. مثلاً p یعنی همه تگ های p .
p.man یعنی همه تگ های p که کلاس man دارن. یا p#man یعنی همه تگ های p که آیدی man دارن.
body هم میشه مشخص کرد که منظور تگ بادی در اچ تی ام ال هست. انواع دیگه هم هست که خیلی بکار نمیاد ولی بازم اگر نیاز شد سایت جی کوئری هست Tongue

تابع load مثل آجاکس عمل می کنه. سه آرگومان میتونه بگیره که اولیش لازمه و دوتای بعدی نه. اولی آدرس فایل هست و دومی اطلاعاتی که باید ارسال بشه و سومی کال بک یا همون تابعی که بعد از انجام شدن اون عمل ارسال میشه.

تابع ready یا click و dbclick و ... که از خصیصه های المنت های مختلف در html هست ، هم در جی کوئری کاربرد دارن. اولی یعنی زمانی که کل صفحه لود شد. دومی یعنی وقتی کلیک شد. سومی یعنی وقتی دو تا کلیک شد و حتی mouseover هم هست یعنی وقتی موس روش رفت.

تابع خیلی جذاب animate که سه آرگومان میگیره . اولی مربوط به css میشه و دومی سرعت انجام کار و سومی وقتی کار انجام میشه تابعی ارسال بشه. نکته ای که باید در مورد این تابع بدونید اینه که ، در بخش مربوط به css فقط سلکتور هایی که مقدار عددی میگیرن جواب میدن. یعنی height و width جواب میدن ولی background-color جواب نمیده چون مقدارش که میگیره عدد نیست.

تابع hide و show و slideUp و slideDown و slideToggle و Toggle به ترتیب کارشون اینه.
مخفی کردن - نمایش دادن - بالا بردن بصورت اسلاید - پایین آوردن بصورت اسلاید - بالا و پایین آوردن بصورت اسلاید ولی با کلیک بر روی یک المنت فقط - آخرین هم کارش شبیه قبلی هست ولی اسلاید نیست.
فقط باید تمرین کنید تا تو ذهنتون بشینه. یادتون باشه وقتی در php میخواید از چندین کوتیشن همزمان استفاده کنید یکم قاطی میشه و دردسر داره. واسه همین از کد های مربوط به کوتیشن ها استفاده کنید هرجا که نیاز بود. http://ascii.cl/htmlcodes.htm
شاید بعضی از دوستان بخندن ولی جی کوئری همش همینه. مابقیش وقتی بهشون نیاز پیدا کردین با یک جستجو تو خود سایت سازنده هم به جواب میرسید.Cool
چقدر طول کشید یاد بگیری؟ Tongue
بعضی اوقات اسکریپتی که می نویسی خیلی پیچیده تر از اونی که فکر می کنی میشه. فقط باید یه چیزو بخاطر داشته باشی. اونم اینه که بدونی چی میخوای. وقتی اینو خوب درک کرده باشی ، تو ترتیب نوشتن دستورات اشتباه نمی کنید. یکی نمیدونه چی می خواد ، اول میاد animate می کنه بعد به المتنی که میخواد استایل میده. البته جواب میده ولی اونی که میخواد نمیشه.
مثلاً باکسی هست که border-bottom-left-radius براش در نظر گرفته شده. میخوای اول اون حاشیه گرد صاف بشه بعد بیاد بالا بعدش محتوای یک فایل رو بگیره بعد بیاید پایین بعد دوباره حاشیه گرد درست بشه. این چیزی که الآن مد نظر منه.
وقتی بدونید که آرگومان کال بک مربوط به بعد از کامل انجام شدنه اون دستوره و بدونید که از چه تابعی استفاده کنید همه چی درست انجام میشه. در چیزی که من بالا گفتم ، اینطوری عمل می کنیم.
کد:
<script>
$(document).ready(function(){
$('#section-container').animate({'border-bottom-left-radius':'0px'},'slow',function(){
                    $('#section-container').slideUp('slow',function(){
                    $('#ContentBox').load('/newlinks.php',function(){
                        $('#section-container').slideDown('slow',function(){
                    $('#section-container').animate({'border-bottom-left-radius':'50px'},'slow');
                });
                    });
                });
                });
});
</script>
<body>
<div id="section-container" style="border-bottom-left-radius: 50x; width: 550px; height: 700px;"></div>
</body>
غایب
  پاسخ
#2
تابع css هست که یک آرگومان میگیره و سلکتور های مربوط به css هست که هر نوع سلکتوری رو می پذیره. از این تابع همراه animate راحت میشه استفاده کرد. چون تابع animate مقدار غیر عددی نمی پذیره ، شما با تابع css اول استایل رو به المنت میدین بعد از تابع animate استفاده می کنید.

کد:
$("p").css({"width":"700px","background-color":"#c2c2c2});

یادتون باشه همونطور که در جاوا اسکریپت آرایه میسازیم ، (چند نوع وجود داره) به یک شیوه در جی کوئری هم آرایه می سازیم. مثل بالا عبارت رو بین {} قرار میدیم. حواستون باشه سلکتور داخل کوتیشین و بلافاصله کاراکتر دو نقطه و بعدش داخل کوتیشن مقدارش باید باشه.

تابع html هست که خیلی بکار میاد. با این تابع راحت میشه متنی شیء ای هرچیز دیگه رو به اون المنت مورد نظر اضافه کرد. البته اضافه که چه عرض کنم ، قبلی رو پاک می کنه این رو میذاره. برای اینکه از این مشکل (مشکل واسه ماست ولی خودش مشکل نیست) خلاص بشیم ، عبارت این تابع رو در یک المنت خالی دیگه قرار بدید.
کد:
$("p").html("salam arz shod");
غایب
  پاسخ
تشکر شده توسط : Bojbaj hosseintdk775 RaminMT
#3
علیرضا جان ممنون از شما اما اگه آموزش جاوا رو هم بزاری خیلی عالیه من خودم دنباله اینم که جاوا اسکریپت رو یاد بگیرم بعد هم جی کوئری و ای جکس
  پاسخ
تشکر شده توسط :
#4
من خودم از w3schools.com یاد گرفتم. فعلاً وقت ندارم چیزی بنویسم. خدا بخواد وقتش برسه و زنده باشم حتماً کتابچه مفیدی از تمام اونها که نام بردید تهیه می کنم.
غایب
  پاسخ
تشکر شده توسط : RaminMT
#5
ضمن تشکر از علی رضا . با اینکه خیلی حال نکردم کلش رو بخونم. خیلی درهم بود. اما دو تا نکته رو جهت یاداوری به دوستان متذکر میشم.

1- $ نشانه جی کوئری تعریف اشتباهی هست. در اصل $ یک اینستنس از کلاس جی کوئری هست.
2- جی کوئری ساده ترین فریم ورک جی کوئری هست و قویترین ها mootools و RightJs هست. که از نظره توسعه پذیری حرف اول رو می زنند و سخته خداییش.
3- مواظب جی کوئری باشید. استفاده نادرست از اون باعث بالا رفتن مصرف سی پی میشه . در عین سادگی اگر درست و اصولی استفاده نشه معکوس عمل خواهد کرد. پس مراقب باشید. البته این در همه زبان ها و .... صادق هست.



  پاسخ
تشکر شده توسط : cyletech
#6
نقل قول:3- مواظب جی کوئری باشید. استفاده نادرست از اون باعث بالا رفتن مصرف سی پی میشه . در عین سادگی اگر درست و اصولی استفاده نشه معکوس عمل خواهد کرد. پس مراقب باشید. البته این در همه زبان ها و .... صادق هست.
چرا گفتی مواظب جی کوئری؟ میگن مواظب آجاکس هم باشید. بی هوا تزریق کردنشون دردسر ساز میشن. ولی من هنوز نمیدونم دقیق چرا این حرف رو میزنن و چه خطر و مشکلی رو ایجاد می کنن. و البته اینم نمیدونم که چقدر باید ازشون استفاده کنم. یه وبسایت کامل رو میشه با جی کوئری سازگارش کرد به نحوی که دلو بزنه. بیشتر توضیح میدی صالح جان. مرسی Heart
راستی بابت نکته هاتم ممنون و ببخشید درهم بود پستم Blush
غایب
  پاسخ
تشکر شده توسط :
#7
کافیه شما این سایت رو که نمونه کار خودم هست رو نگاه کنید. همین اینترو سایت
کد:
http://hminvest.ir/

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

در مورد ایجکس هم شدیدا باید احتیاط کرد خوب خییلی راحت میشه ریکویست فیک فرستاد . پارامتر ها رو عوض کرد و ...... برای همیین هوشمندانه باید کار کرد. مخصوصا در مواردی که با ذخیره اطلاعات سرو کار دارید
  پاسخ
تشکر شده توسط : cyletech
#8
جی کوئری کتابخانه ای برگرفته شده از جاوا اسکریپت !
شما دوستان میتونید با جی کوئری ایده های بزرگ خودتون در مبحث یو آی به حقیقت برسونید ، البته باید اشاره کنم جی کوئری در خود کتابخانه اش ختم نمیشه و اونقدر قابلیت توسعه داره که از اون بیش از 300 پلاگین که سازگاری کامل با جی کوئری داره ساخته شده !
حرف شمام قبول ندارم که جی کوئری ضعیف و ...
چون اگر ضعیف بود این همه توسعه دهنده روش کار نمیکردند !
جی کوئری بهترین مزیت در توابع زیادش که با حجم 250 کیلوبایت و با یک بار لود در هر مروگر فراخوانی میشه ! و اگر شما اون بدون تعامل استفاده کرده باشید ، یوزیج سی پی یو تون بالا میبره !
یکی دیگه از مزیت اون سازگاری حتی با مروگر ای ای 6 میباشد !
میشه گفت جی کوئری بهترین و مناسب ترین کتابخانه در حال توسعه در مبحث جاوا اسکریپت میباشد ، باید اشاره کنم به دلیل داشتن آی پی آی قابل انعطاف در جی کوئری ان را یک فریم ورک جاوا اسکریپت نیز مطرح میکنند !

برای یاد گیری ان به لینک زیر مراجعه فرمایید :
http://www.wallfa.com/%D8%A2%D9%85%D9%88...%87%D8%A7/
ولی بک نکته اشاره کنم هیچ گاه هیچ کتابخانه و هیچ فریم ورکی ارزش کد نویسی های نوین در افکارتون ندارد !
برای مثال میتونم آقای علی بیگی در این زمینه بهتون معرفی کنم که خدایی بهترین یوزر اینترفیس ها را در این وادی و بدون استفاده از هیچ کتابخانه ای ایجاد میکند !
بهزاد علی بیگی !
هستی از ان من است ان را میسازم !


http://www.wallfa.com

  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان