Google Chrome
Smashing Magazine
Mozilla Developer Network
CSS-Tricks
jQuery چیست؟
۲۵ اسفند ۱۳۸۸ ساعت ۰۱:۳۶
جی کوئری
معرفی پرطرفدارترین فریم ورک جاوااسکریپت
سالهای متمادی، جاوااسکریپت به چندش معروف بود! چون هم یادگیریش سخت بود و منبع آموزشی خوب براش کم پیدا می شد، هم کاربرد قابل قبولی براش نبود و هم باعث مشکلات امنیتی میشد.
اما با گذشت زمان، رونق گرفتن AJAX، بیشتر شدن ایده های سمت کلاینت افزایش امنیت مرورگرها که به دلیل توسعه مرورگرها بود، جاوااسکریپت خواهان بیشتری پیدا کرد.
(توسعه مرورگرها رو مدیون اتحادهای ضد اینترنت اکسپلورر هستیم که بخاطر پدرسوختگی و دشمنی با مایکروسافت، فایرفاکس رو پایه گذاری کردند مثل اپل و گوگل و اوراکل و بقیه که رشد و رقابتی شدن بازار مرورگرها رو باعث شد).
اما وقتی jQuery متولد شد، اوضاع کلی فرق کرد. jQuery گفت برای اعمال تغییر در اجزای صفحه با جاوااسکریپت، انیمیشن سازی و AJAX و غیره، نیازی به بلد بودن جاوااسکریپت نداری. من همه اش رو با یه سری توابع هلو شکل واست حل کردم اونم بصورت Cross-Browser یعنی در همه مرورگرها یه نتیجه داره!
چه حرف باحالی. ولی مگه میشه بدون بلد بودن یه زبان ازش استفاده کرد؟ راستش بله! کافیه کار با سینتکس خود jQuery رو یاد بگیریم و بعدش همه چی حله. این یادگیری فقط سه چهار ساعت (حتی کمتر) طول میکشه.
طریقه نصب و بکارگیری جی کوئری به این صورته که به سایت jQuery.com مراجعه می کنیم. آخرین نسخه اش رو داونلود می کنیم که یک فایل JS خواهد بود. این فایل رو توسط تگ <SCRIPT> به صفحه اضافه می کنیم و کدهای شخصی خودمون رو هم توسط یه تگ <SCRIPT> دیگه، بعد از <SCRIPT> قبلی قرار میدیم.
<!DOCTYPE html> <html> <head> ... <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // Our jQuery codes here </script> ... </head> ... </html>یه نکته ای وجود داره بعضی جاها میگن jQuery رو بجای <HEAD>، در آخر <BODY> بذاریم. می دونی که اون فایل jquery حدود 50 کیلوبایته و وقتی در <HEAD> قرار بگیره تا کامل لود و پردازش نشه، ادامه صفحه و <BODY> نمایش داده نمیشه و برای سرعتهای پایین، مدت زمانی وجود داره که باید صفحه سفید تماشا کنند اما وقتی این فایل در آخر <BODY> بذاریم، صفحه مسلما زودتر ظاهر میشه. اما این روش استاندارد و همیشه خوبی نیست. چون اولا یه استانداردی میگه همه تگهای <SCRIPT> باید در <HEAD> قرار بگیرند و دوما اینکه تصور کن ما کدهایی رو در جی کوئری نوشتیم که قراره با شروع صفحه دیده بشن و صفحه طولانی باشه اونوقت کاربر باید منتظر بمونه تا همه صفحه کامل لود شه و بعد بتونه افکتها و امکانات جی کوئری رو استفاده کنه که اصلا جالب نیست. در کل این بستگی به ساختار صفحه و سایت داره که کدوم روش براش بهتره.
جی کوئری بر پایه اجزای DOM بنا شده (اجزا یا Elementهای DOM بصورت خیلی خلاصه، همون اجزا و تگهای موجود در صفحه است). یعنی اولین قدم استفاده ازش انتخاب و پیدا کردن بخشی از صفحه است که می خوایم باهاش کار کنیم. به این صورت که تقریبا همه توابع جی کوئری به Elementها متصل میشن.
یک تابع Global به نام jQuery وجود داره که اجزای DOM رو بهمون میده. در حالت عادی تابع $ هم وجود داره که دقیقا با تابع jQuery برابره. این تابع برای گرفتن Elementها از دو روش استفاده می کنه یه روش استفاده از Selectorهای معتبر در CSS است که جی کوئری برای این کار از یک Selector آماده(Standalone) به نام Sizzle بهره میبره. روش دوم دادن خود Elementهای جاوااسکریپت به این تابع است.
مثلا می خوایم یه <DIV> که ID به نام myDiv داره رو انتخاب کنیم:
// CSS Selectors
$('#myDiv')
jQuery('#myDiv')
// Javascript Element
$( document.getElementById('myDiv') )
jQuery( document.getElementById('myDiv') )
هر چهار خط بالا یه نتیجه داره که اون دو تا آخری جالب نیست ولی گاهی اوقات لازم میشه.
حالا Element رو پیدا کردیم و میخوایم توابعش رو استفاده کنیم. برای کسانیکه هیچی از جاوااسکریپت نمی دونن. این توابع با نقطه از هم جدا میشن. اصلی ترین تابع ready نام داره که خیلی پر کاربرده و کارش اینه که یک تابع (که ما میسازیم) رو میگیره و درست موقعیکه همه اجزای DOM کامل شناخته شدند، اجرا میشه یعنی زودترین موقعی که ما میتونیم مطمئن شیم همه تگهای موجود در صفحه رو مرورگر لود کرده و شناخته. گفته بودم که این فریم ورک به Elementها متصل میشه و این تابع هم باید به body متصل بشه. می تونیم body رو توسط Selectorها بگیریم ولی روش راحتتر استفاده از document.body است که یک مقدار استاندارد در مرورگرهاست که باید به روش دومی که بالا گفتم استفاده شه یعنی روش جاوااسکریپت:
<!DOCTYPE html>
<html>
<head>
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document.body).ready( function() {} );
</script>
...
</head>
...
</html>
برای مبتدی ها، تابع در جاوااسکریپت به این شکل ها ساخته میشه:
myFunction = function() {
// Functions codes here
}
// Or
function myFunction() {
// Functions codes here
}
و اینجوری استفاده میشن:
myFunction();و می تونن مقادیری رو به عنوان پارامتر بگیرند:
myFunction = function(someText) {
alert( someText );
}
myFunction('Hello');
myFunction('Boplo.ir');
اینجا someText به عنوان پارامتر قرار گرفته. پارامتر هر چی می تونه باشه. حتی میتونه خودش یک تابع باشه:
myFunction1 = function() {
// Function1 codes here
}
myFunction2 = function(func) {
// Function2 codes here
}
myFunction2(myFunction1);
که می تونیم بجای اینکه یه تابع بسازیم و نامش رو به عنوان پارامتر بدیم، خود تابع رو بین پرانتزها تعریف کنیم و مشکلی هم پیش نیاد:
myFunction2 = function(func) {
// Function2 codes here
}
myFunction2(function() {
// Function1 codes here
});
اینجا ما خود تابع رو بجای اسمش استفاده کردیم.اینا رو گفتم که با سینتکس جی کوئری راحتتر ارتباط برقرار کنی.
حالا برمی گردیم به همون تابع ready که بالا میبینی. این تابع هم یک تابع دیگه به عنوان پارامتر میگیره.
<!DOCTYPE html>
<html>
<head>
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document.body).ready(function() {
alert('DOM is ready!');
});
</script>
...
</head>
...
</html>
اگه گیج شدی و چیزی متوجه نشدی، غصه نخور. می تونی شکلش رو بخاطر بسپاری و ازش استفاده کنی و به چجوریش اهمیت ندی. فقط باید به پرانتزها و آکولادهای باز و بسته دقت کنی.
به عنوان اولین مثال، جی کوئری تابعی به نام css داره که هم مقدار CSS رو میده و هم اجازه میده تغییرشون بدیم:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document.body).ready(function() {
alert( $('#myDiv').css('color') ); // Alerts Color
$('#myDiv').css('color', 'red'); // Changes Color
});
</script>
</head>
<body>
<div id="myDiv">I love Boplo.ir</div>
</body>
</html>
این کد اول رنگ myDiv رو alert میده و سپس رنگش رو تغییر میده و چون داره در تابع ready این کار رو می کنه، در اولین فرصت این کار رو انجام میده یعنی اگر این کد رو اجرا کنی، همون اول نوشته رو قرمز میبینی که خیلی سریع کد اجرا شده.
توابع جی کوئری رو میشه بصورت زنجیروار هم استفاده کرد. مثلا تابعی وجود داره به نام addClass که کلاس CSS رو به Element اضافه می کنه. ما میخوایم هم رنگ myDiv رو عوض کنیم و هم کلاس بهش اضافه کنیم:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.myClass { font-size:20px; }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document.body).ready(function() {
$('#myDiv').css('color', 'red').addClass('myClass');
// OR
$('#myDiv').css('color', 'red');
$('#myDiv').addClass('myClass');
});
</script>
</head>
<body>
<div id="myDiv">I love Boplo.ir</div>
</body>
</html>
دو روش بالا، یعنی روش زنجیروار و روش جداگانه، یک نتیجه دارند ولی اولی سریعتره چون $ یک تابع است که یه سری عملیات انجام میده و در روش دوم ما دو بار اجراش کردیم در حالیکه داره یه کار تکراری انجام میده.
مثالهای بیشتر و مفصل رو به آموزشهای همین بلاگ واگذار می کنم و بخش و توابع جی کوئری رو معرفی می کنم تا بفهمی این فریم ورک چه امکاناتی داره...
جی کوئری براساس طبقه بندی خودش شامل بخشهای زیره:
Core: شامل توابع اساسی و هسته که به بخشهای زیر تقسیم میشه:
- تابع (...)$ یا تابع (...)jQuery: شامل روشهای استفاده از تابع $.
// Finds Elements using Selectors $("div > p").css("border", "1px solid gray"); // Finds Elements using Javascrits DOM elements $(document.body).css("background", "black"); // Creates element from HTML string and puts it in body $("<div><p>Hello</p></div>").appendTo("body"); // Creates a function that works same as .ready() $(function(){ // Document is ready });خطهای اول و دوم روشهای گرفتن اجزای صفحه هستند.
خط سوم روش ساختن Element در صفحه است که توسط تابع appendTo به صفحه اضافه شده.
خط چهارم، یک تابع به $ داده شده که کدهای این تابع در زمان تکمیل DOM اجرا میشه. این روش دقیقا مشابه استفاده از تابع ready خواهد بود که بالا توضیح دادم. - توابع مربوط به دسترسی به شیء jQuery: توابعی برای فعالیت اختصاصی با خروجی تابع $ مثل شمارش Elementهای پیدا شده، گرفتن نمونه خاصی از بین اونها، تبدیل خروجی به DOM و غیره.
- توابع کنترل اطلاعات: توابعی برای ذخیره و بازیابی اطلاعات خاصی برای Elementها. مثلا من یک کلمه رو به اولین <DIV> صفحه اضافه می کنم و بعدا وقتی این <DIV> رو انتخاب کردم می تونم اون کلمه رو هم ازش بخونم (کاربرد خاص داره). این بخش توابعی هم برای کنترل عملیاتهای پست سر هم ارائه داده.
- ایجاد پلاگین: دو تا تابع اساسی برای ایجاد پلاگین برای جی کوئری و توسعه اش.
- تداخل: معرفی تابعی برای استفاده فریم ورکهای مختلف در صفحه بدون بوجود اومدن مشکل و تداخل به نام noConflict.
Selectors: معرفی چگونگی استفاده از Selectorهای قابل استفاده و معتبر برای تابع $.
// Complex CSS Selectors
$('#myID > .someClass p + span , a').css('color', '#323232');
// Odd TRs
$('tr:odd').css('color', '#323232');
// Inputs which their "name" attribute is NOT equal to "email"
$("input[name!='email']").css('color', '#323232');
// Changes href of all links to "http://Boplo.ir"
$('a').attr('href', 'http://Boplo.ir');
// Add "someClass" CSS class styles to Odd TRs
$('tr:odd').addClass('someClass');
// Sets 'Hello' as content of #myDiv
$("#myDiv").html('Hello');
// Gets value of input with CSS class "emailInput"
$("input.emailInput").val();
Traversing: امکانات فوق العاده ای برای کار با نتیجه تابع $ مثل گرفتن Element بالادستی نمونه پیدا شده. عضو بعدی، قبلی، اولی، آخری و غیره. یادگیری این بخش خیلی اهمیت داره.
// Changes the color of all divs then
// puts a border around only some of them
$("div").css("color", "blue").filter(".middle").css("border-color", "red");
// Adds a border to divs that are not green or blue.
$("div").not(".green, #blueone").css("border-color", "red");
// Finds all divs and makes a border.
// Then adds all paragraphs to the
// jQuery object to set their color yellow.
$("div").css("border", "2px").add("p").css("color", "yellow");
// Finds the very next sibling of each disabled button
// and changes its text "this button is disabled".
$("button[disabled]").next().text("this button is disabled");
// Gets Parent of #myP which is a DIV
// and changes its color to #444
$("#myP").parent('div').css('color', '#444');
// Gets Parent of #myP which is a DIV + #myP itself
// and changes their color to #444
$("#myP").parent('div').andSelf().css('color', '#444');
Manipulation: توابعی برای تغییر محتویات Elementها. این توابع امکان قرار دادن HTML یا Element رو در Elementهای دیگه میدن. مثلا بخوایم یک پاراگراف رو داخل یک کادر ببریم و غیره.
// Changes contents of #myP
$("#myP").html("My Name is <b>Amir Hossein</b>");
// Inserts #myP to bottom of #myDiv
$("#myP").appendTo("#myDiv");
// Inserts #myP after #myDiv
$("#myP").after("#myDiv");
// Removes .myClass elements from #myDiv
$("#myDiv").remove(".myClass");
CSS: توابعی برای دسترسی و تغییر در مقادیر CSS.
// Changes font-family of #myP
$("#myP").css('font-family', 'Tahoma, Arial');
// Alerts font-family of #myP
alert( $("#myP").css('font-family') );
// Alerts width of #myP
alert( $("#myP").width() );
// Alerts when #myP is clicked
$("#myP").click(function() {
alert('Clicked!');
});
// Alerts when #myForm is submited
$("#myForm").submit(function() {
alert('Submited!');
});
// Submits #myForm
$("#myForm").submit();
// Alerts when mouse enters and leaves #myDiv
$("#myDiv").hover(
function() {
alert('Mouse entered!');
},
function() {
alert('Mouse left!');
}
);
Effects: انیمیشن سازی در jQuery شامل توابع محوسازی، اسلاید و تغییر تدریجی مشخصه های CSS.
// Fades #myP out
$("#myP").fadeOut();
// Fades #myP out slowly and Alerts when fading is finished.
$("#myP").fadeOut("slow", function(){
alert('myP is hidden now!');
});
// Slides #myDiv up in 800 miliseconds
// and after finishing it, Slides it down
$("#myDiv").slideUp(800, function() {
$("#myDiv").slideDown();
});
// Changes background-color of #myDiv to pink,
// width of it to 500px
// and adds 100px to its height slowly
$("#myDiv").animate({
'background-color' : 'pink',
width: '500px',
height: '+=100px'
}, 'slow');
Ajax: توابع آماده کار با AJAX. برخی از این توابع به Elementها متصل نمی شوند و مستقیما باید به خود شیء jQuery متصل گردند.
// Sends "name=AHHP&location=Boplo.ir" to some.php
// as a POST request and Alerts response
// after successful request
$.ajax({
type: "POST",
url: "some.php",
data: "name=AHHP&location=Boplo.ir",
success: function(msg){
alert("Server Response: " + msg);
}
});
// Sends HTTP request to some.php
// Gets #myP from its response and
// Puts it in #myDiv
$("#myDiv").load("some.php #myP");
Utilities: توابعی برای سهولت کار در جی کوئری مثل توابع شمارش آرایه و شیء، چک کردن نوع متغیرها، تبدیل شیء به کوئری و غیره.
// Alerts "name=AHHP&location=Boplo.ir"
alert( $.param({name:'AHHP', location:'Boplo.ir'}) );
// Alerts 'Hello'
// (Removes unwanted starting and ending spaces)
alert( $.trim(' Hello ') );
// Alerts: 1, 9, 4, 7, 3, 8, 6, 9, 1
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
var result = $.grep(arr, function(n, i){
return (n != 5 && i > 4);
});
alert( result.join(", ") );
Internals: شامل توابعی که کاربرد خیلی خاص دارند مثل تابع data.
// Stores someName=someValue to #myP
// then retrieves it by alert
var myP = $('#myP');
$.data(myP , 'someName', 'someValue');
// ....
alert( $.data(myP , 'someName') );
مهمترین خصوصیت jQuery سادگی استفاده اشه. به این ترتیب که ما بدون بلد بودن جاوااسکریپت و فقط با یادگیری سینتکس جی کوئری می تونیم کارهای خیلی زیادی انجام بدیم و نگران چیزی نباشیم. این خصوصیت متمایز jQuery باعث شده تا تعداد کاربرانش خیلی بالا بره یعنی یه جورایی نمیشه از نظر تعداد کاربران، با فریم ورکهای دیگه مقایسه اش کرد.
جی کوئری امکان ایجاد پلاگین رو هم میده. مثلا من بیام تابعی بسازم که بیاد همه فرمها صفحه رو آژاکسی کنه و این پلاگین رو به تو بدم و تو فقط استفاده اش کنی. تعداد بالای کاربران تعداد خیلی بالای این پلاگینها رو موجب شده. یعنی اگر به بخش Plugin Repository سر بزنی، انقدر پلاگین میبینی که نمی دونی کدوم رو انتخاب کنی. خیلی پلاگینها توی سایت ثبت نشده اند و با سرچ باید پیداشون کرد. این حرف یعنی دامنه توابع و امکانات jQuery خیلی خیلی بیشتر از فهرست بالاست (فهرست بالا شامل همه توابع نیست و فقط یه معرفی از امکاناته). چون امکانی که در توابع خود جی کوئری وجود نداره، احتمالا پلاگینش وجود داره و یا بخاطر سادگی جی کوئری نوشتنش راحته.
مهمترین مشکلش که میتونه حسنش هم به حساب بیاد، اینه که جی کوئری کاملا برای DOM تعریف شده یعنی همه امکاناتش مخصوص اجزای صفحه است و اگر ما بخوایم یکم دسترسی بیشتری داشته باشیم، باید بریم سراغ کدهای عادی جاوااسکریپت. مثلا بخوایم Drag&Drop در صفحه داشته باشیم. باید یا از jQuery UI استفاده کنیم یا با کدهای خام جاوااسکریپت این بخش رو بنویسیم و اونجا تقریبا از جی کوئری هیچ خبری نیست.
این موضوع از این جهت بده که ما رو مجبور می کنه برای کارهای اضافی، کد خام بنویسیم یا فریم ورکهای دیگه ای به صفحه اضافه کنیم و از این جهت خوبه که جی کوئری رو یک فریم ورک مخصوص DOM معرفی می کنه. به این ترتیب که میگه من با خارج از DOM کاری ندارم ولی وقتی با خود DOM کار داری، من به بهترین شکل برات کار انجام میدم و نیازت رو برآورده می کنم.
تمام بخشهایی که در بالا دیدی، خلاصه و معرفی بود. سعی می کنم در بخش جی کوئری همه اش رو مفصل آموزش بدم. اینها همه نظرات و دیدگاه شخص من از jQuery بود. میتونه کامل و عالی، ناقص و پیش پا افتاده یا غلط باشه. برای اطلاعات صحیح و بروز به سایت خود جی کوئری مراجعه کنید.
jQuery در حال توسعه است و در آدرس http://jQuery.com قابل دسترسی و دریافت است. بخش دریافت نسخه های مختلف و دریافت پلاگین ها صفحات مفیدی هستند.
و اما آینده:
جی کوئری یک چیز ویژه است. تا موقعی که چیزی بهتر ازش نیاد، همیشه خوبه، همیشه انتخاب اول کاربرهای غیربرنامه نویسه، همیشه انتخاب اول سایتهای کوچیکه و همیشه کلی طرفدار و فدائی داره.
امکانات اون هر روز داره بهتر و کاملتر میشه، پلاگینهاش هر روز دارند بیشتر و بهتر میشوند اینا یعنی امروز جی کوئری از دیروزش پربار تره همه اینا به اضافه اینکه بنیاد Mozilla روش سرمایه گذاری کرده و این یعنی توسعه همیشگی. چون دیگه دست خود تیمش نیست که امسال روش کار کنند و توسعه اش بدن و سال دیگه خبری نباشه. روشون سرمایه گذاری میشه که همیشه کار کنند.
برگ برنده جی کوئری در سادگی، می تونه تابع شکل بودن امکاناتش که همیشه به اجزای DOM متصل میشن باشه یعنی کاربر لازم نیست بدونه که تابع داره چیکار می کنه، کافیه همه رو پشت هم ردیف کنه و لذت ببره ولی این برای خود جی کوئری زیاد جالب از آب در نیومده! و توسعه اش رو سخت کرده. چون اگر امکانات بخواد بیشتر بشه باید توابع جدید معرفی بشه یا شکل توابع قدیم تغییر کنه هر دو اینها سادگی که همیشه مهمترین ویژگی جی کوئری بوده رو به خطر می اندازه. یعنی دیگه یادگیری جی کوئری در سه چهار ساعت انجام نمیشه و دیگه بهش نمیشه گفت خیلی ساده. این به نظر من بزرگترین مشکل آینده این فریم ورک خواهد بود. جی کوئری امکانات جدید رو با اضافه کردن تابع فراهم می کنه که این، تعداد توابع رو زیاد می کنه و بعضی مواقع با اضافه کردن پارامتر به توابع انجام میشه که خیلی وحشتناکه. به نظرم جی کوئری داره تبدیل به کوهی از توابع تکراری میشه که فقط حجم رو بالا میبرند و اغلب می تونند سرعت رو پایین بیارند. تکراری از این جهت که اغلب توابع رو با ترکیب توابع دیگه میشه شبیه سازی کرد و اضافه کردن تابع اختصاصی فقط کار رو راحت می کنه.
از این لحاظ من آینده خوبی (مثل چیزی که امروز هست) برای جی کوئری پیش بینی نمی کنم! و اگر راه حل منطقی برای این مشکلش پیدا نشه در آینده یک سیستم بزرگ و پیچیده خواهد بود که یادگیریش مثل امروز ساده نیست.
همچنین بخوانید:
پیروز باشید
امیرحسین
تو چی فکر می کنی؟