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');
Attributes: امکاناتی برای دسترسی به مشخصه ها و اطلاعات Elementها مثل value، href، محتویات داخل تگ و غیره.
// Changes href of all links to "[Only registered and activated users can see links]"
$('a').attr('href', '[Only registered and activated users can see links]');
// 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").******(".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() );
Events: بخش بسیار مهمی برای تنظیم رویدادها برای Elementها مثل click و change و mouseover و غیره.
// 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') );
منبع : بوپلو
