PDA

View Full Version : آموزش: آموزش JQuery از صفر تا جایی که بتونم


reza10wert
دوشنبه 04 دی 1391, 16:22 عصر
سلام دوستان

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

لطفا فقط :

1- برای تشکر دکمه "تشکر" را بزنید
2- سوالی داشتید پیام خصوصی کنید ( البته من شاگرد شما هستم و شاید همه سوالات را نتونم پاسخ بدم )

امیدوارم مورد پسند قرار گیرد و کاربردی باشد .

خواهش : برای هر پستی که می خونید یک صلوات برای تعجیل در ظهور آقا امام زمان (عج) بفرستید :قلب:
reza10wert
دوشنبه 04 دی 1391, 16:26 عصر
بسم الله الرحمن الرحیم

درس اول

برای استفاده از دستورهای جی کوئری ( JQuery ) ابتدا باید کتابخانه آن را صفحه مورد نظرمان ( صفحه HTML یا PHP یا ... ) الحاق کنیم . برای این کار 2 روش وجود دارد
1- دانلود فایل جی کوئری و اضافه کردن آن به صفحه با کد زیر به قسمت head سایت :

<head>
<script src="jquery.js"></script>
</head> 2- استفاده از کتابخانه های آنلاین توسط سایت های گوگل یا ماکروسافت :
توسط سایت گوگل :

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
2- توسط سایت ماکروسافت :

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

http://forum.mihanlearn.com/public/style_emoticons/default/58.gif نکته : روش بهتر و بهینه تر ، روش 1 می باشد . چون نیازی نیست حتما سیستم ما به اینترنت وصل باشد و سرعت لود شدن بیشتری نسبت به روش 2 دارد .
reza10wert
دوشنبه 04 دی 1391, 21:21 عصر
درس 2

شکل کلی ( Syntax ) یک دستور جی کوئری به این صورت است :

$(selector).action()
مثلا :

$(this).hide()
$("p").hide()
$(".test").hide()
$("#test").hide()
http://forum.mihanlearn.com/public/style_emoticons/default/58.gif ما زمانی می توانیم از دستورات جی کوئری استفاده کنیم که فایل جی کوئری کامل در صفحه فراخوانی شده باشد . پس برای این کار دستوری می نویسیم که زمانی که صفحه آماده اجرای دستورات جی کوئری است دستورات ما را اجرا کند چون در غیر این صورت در اجرای صفحه اختلال ایجاد می کند . باید طبق الگوی زیر عمل کرد :

$(document).ready(function(){
دستورات جی کوئری اینجا نوشته می شود
});
reza10wert
سه شنبه 05 دی 1391, 08:01 صبح
درس 3

انتخابگر ها ( Selector ) : با استفاده از این قسمت دستور ، ما می گوییم کدام عنصر یا عناصر HTML را می خواهیم تحت دستورات و تغییرات قرار بدهیم .
مثلا :
$("p") در مثال زیر

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
با کلیک روی دکمه تمامی پاراگراف های موجود در صفحه مخفی می شوند .

انتخاب بر اساس آیدی ( #id ) عنصر :
مثلا با
$("#test")
عنصری از صفحه ( مثلا تکست باکس - عکس - دکمه یا هر عنصری ) که دارای آیدی test باشد مورد انتخاب قرار می گیرد . برای نمونه :

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

انتخاب بر اساس کلاس ( .class ) عنصر :
مثلا با
$(".test") عنصر یا عناصر با کلاس test انتخاب می شود . برای نمونه :

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
در درس بعد به امید خدا مثال بیشتر و کاربردی تر خواهم زد . http://forum.mihanlearn.com/public/style_emoticons/default/5.gif
mohsen_31369
سه شنبه 05 دی 1391, 10:53 صبح
نکته : روش بهتر و بهینه تر ، روش 1 می باشد . چون نیازی نیست حتما سیستم ما به اینترنت وصل باشد و سرعت لود شدن بیشتری نسبت به روش 2 دارد .

بهتریم روش ، روش 2 می باشد. چون اکثر سایت ها از کتابخانه های گوگل برای لود jquery و jquery ui استفاده می کنند و این آدرس و فایل در مرورگرشان کش می شود و وقتی سایت شما باز می شود چون این فایل ها در کش مرورگر موجود میباشد دیگر نیازی به لود شدن ندارد و سرعت لود سایت بالا می رود ( توجه کنید حجم این دو فایل روی هم حدود 400 کیلوبایته )
اما اگر از روش 1 استفاده کنیم تنها برای کاربرانی که قبلا از سایت ما بازدید کرده اند این فایل ها کش می شود.
tehro0n
سه شنبه 05 دی 1391, 12:04 عصر
بهتریم روش ، روش 2 می باشد. چون اکثر سایت ها از کتابخانه های گوگل برای لود jquery و jquery ui استفاده می کنند و این آدرس و فایل در مرورگرشان کش می شود و وقتی سایت شما باز می شود چون این فایل ها در کش مرورگر موجود میباشد دیگر نیازی به لود شدن ندارد و سرعت لود سایت بالا می رود ( توجه کنید حجم این دو فایل روی هم حدود 400 کیلوبایته )
اما اگر از روش 1 استفاده کنیم تنها برای کاربرانی که قبلا از سایت ما بازدید کرده اند این فایل ها کش می شود.

چرا انقدر راه دور میرید؟ خود سایت JQuery این فایل ها رو گذاشته! روش گوگل در هر ورژن فرق می کنه و خیلی از سایتها در همان ورژن 1.3 تا 1.7 ثابت هستند، بهترین کار استفاده از فایل خود سایت که هردفعه نیز به روز میشه!
http://code.jquery.com/jquery.min.js
این لینک نه تنها آخرین ورژن JQuery رو میده بلکه فاصله های بین کدها رو هم برداشته و باعث کم حجم شدن فایل شده، اکثریت هم از این فایل استفاده می کنند
reza10wert
سه شنبه 05 دی 1391, 22:16 عصر
درس 4

تا اینجا فقط تئوری بوده و هیچ کار عملی نداشته ایم . در اینجا یک مثال عملی برای آشنایی با نحوه و جای نوشتن کدهای جی کوئری آشنا خواهیم شد .

مثالی ساده از نوشتن کد :

خوب حالا چند مثال دیگر از انتخاب عناصر را با هم مرور می کنیم :

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("*").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>


$("*") انتخاب تمامی عناصر موجود در صفحه
$(this)انتخاب عنصر فعلی
$("p.intro")انتخاب عنصر پاراگراف یا کلاس intro
$("p:first") اولین پاراگراف
$("ul li:first")انتخاب اولین li از اولین ul
$("ul li:first-child")انتخاب اولین li همه ul ها
$("[href]") انتخاب عنصری که دارای خاصیت href می باشد
$("a[target='_blank']")انتخاب لینکی که خاصیت _blank برای باز شدن صفحه دارد
$("a[target!='_blank']") انتخاب لینکی که خاصیت _blank ندارد
$(":button") انتخاب همه button ها و inputهایی که از نوع button هست
$("tr:even") انتخاب سطرهای جدول که عدد آن زوج است . نکته : شماره سطرها از 0 شروع می شود یعنی 0,1,2,...
$("tr:odd") انتخاب سطرهایی از جدول که شماره سطر آن فرد باشد

تمرین : لطفا کد زیر را خودتان دستی تایپ کنید و کپی نکنید تا ملکه ذهنتان بشود

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>
</body>
</html>



درس بعد راجع به رخدادها می باشد http://forum.mihanlearn.com/public/style_emoticons/default/6.gif
reza10wert
چهارشنبه 06 دی 1391, 19:24 عصر
ممنون از دوستانی که میان پست رو خراب میکنند

اگه می خواهید پست بزنید خب بزنید چرا میاین پست بنده خدای دیگه رو خراب می کنید
tehro0n
جمعه 08 دی 1391, 12:19 عصر
ممنون از دوستانی که میان پست رو خراب میکنند

اگه می خواهید پست بزنید خب بزنید چرا میاین پست بنده خدای دیگه رو خراب می کنید

فکر نکنم هدفت مطرح شدنت و تشکر گرفتن باشه! احتمالا برای آموزش به دیگران این پست را زدی و می خوای کمک کنی که بقیه هم چیزی یاد بگیرند