مفاهیم و مبانی اصلی jQuery (جی کوئری) – آموزش jQuery

سه شنبه ۲۳ مرداد ۱۳۹۷
بازدید ۱,۵۹۹ نفر
آرتین
(8 امتیاز از 2 رای)
Loading...

تصویر jquery-basics_3073 مفاهیم و مبانی اصلی jQuery (جی کوئری) - آموزش jQuery

مفاهیم و مبانی اصلی jQuery

jQuery یک فریم ورک ساخته شده بر اساس قابلیت های زبان برنامه نویسی جاوا اسکریپت است. بنابراین می توان از تمامی قابلیت های جاوا اسکریپت در آن استفاده کرد. در این بخش مفاهیم و مبانی اصلی jQuery که اغلب مورد استفاده قرار می گیرند، بررسی می شوند.

رشته (string)

یک رشته در جاوا اسکریپت، یک شیء تغییر ناپذیر است که می تواند شامل هیچ، یک یا چند کاراکتر باشد. در زیر چند نمونه از رشته های مجاز در جاوا اسکریپت را مشاهده می کنید:

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

"This is JavaScript String"

'This is JavaScript String'

'This is "really" a JavaScript String'

"This is 'really' a JavaScript String"

اعداد (Numbers)

مقادیر عددی در جاوا اسکرپیت، طبق IEEE 754 در قالب اعشاری 64 بیتی هستند. مانند رشته ها، اعداد هم غیر قابل تغییر می باشند. در زیر نمونه های معتبر مقادیر عددی در جاوا اسکریپت را مشاهده می کنید:

5350
120.27
0.26

5350

120.27

0.26

بولین (Boolean)

یک بولین در جاوا اسکریپت می تواند true یا false باشد. اگر یک عدد صفر باید، به صورت پیشفرض false است و همچنین زمانی که یک رشته خالی باشد، پیشفرض false است.

در زیر چند نمونه معتبر از بولین ها را مشاهده می کنید:

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

true // true

false // false

0 // false

1 // true

"" // false

"hello" // true

اشیاء (Objects)

جاوا اسکریپت مفهوم شیء را بسیار خوب پشتیبانی می کند. شما می توانید یک شیء را به صورت زیر ایجاد کنید:

var emp = {
   name: "Zara",
   age: 10
};

var emp = {

name: "Zara",

age: 10

};

شما می توانید property های یک شیء را با استفاده از نماد نقطه به صورت زیر بخوانید یا بنویسید:

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10
// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

// Getting object properties

emp.name // ==> Zara

emp.age // ==> 10

// Setting object properties

emp.name = "Daisy" // <== Daisy

emp.age = 20 // <== 20

آرایه ها (Arrays)

در جاوا اسکریپت، می توانید آرایه ها را به صورت زیر تعریف کنید:

var x = [];
var y = [1, 2, 3, 4, 5];

1 2	var x = []; var y = [1, 2, 3, 4, 5];

یکی از Property های پر استفاده در آرایه ها، length می باشد که می توان در حلقه از آن استفاده کرد:

var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {

// Do something with x[i]

}

توابع (Functions)

یک تابع در جاوا اسکریپت، هم می تواند نام داشته باشد و هم می تواند به صورت ناشناس (Anonymous) تعریف شود. یک تابع که دارای نام است، به صورت زیر تعریف می شود:

function named(){
   // do some stuff here
}

function named(){

// do some stuff here

}

یک تابع ناشناس به تقریبا مشابه با تابع دارای نام تعریف می شود و هیچ نامی برای آن مشخص نمی شود. یک تابع ناشناس می تواند به یک متغیر تخصیص داده شود و یا به عنوان یک پارامتر به یک تابع دیگر فرستاده شود. مانند نمونه زیر:

var handler = function (){
   // do some stuff here
}

var handler = function (){

// do some stuff here

}

jQuery از تابع های ناشناس اغلب به صورت زیر استفاده می کند:

$(document).ready(function(){
   // do some stuff here
});

$(document).ready(function(){

// do some stuff here

});

آرگومان ها (Arguments)

متغیر arguments در جاوا اسکریت، نوعی آرایه است که دارای خاصیت length می باشد. به مثال زیر توجه کنید:

function func(x){
   console.log(typeof x, arguments.length);
}
func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

function func(x){

console.log(typeof x, arguments.length);

}

func(); //==> "undefined", 0

func(1); //==> "number", 1

func("1", "2", "3"); //==> "string", 3

متغیر arguments یم خاصیت دیگر به نام callee دارد که به تابعی که درون آن قرار دارد اشاره می کند. مثال:

function func() {
   return arguments.callee; 
}
func();                // ==> func

function func() {

return arguments.callee;

}

func(); // ==> func

مفهوم (Context)

کلمه کلیدی مشهور this در جاوا اسکریپت همه به Context جاری اشاره می کند. این Context در درون یک تابع می تواند بر اساس فراخوانی توابع تغییر کند. به مثال زیر توجه کنید:

$(document).ready(function() {
   // this refers to window.document
});
$("div").click(function() {
   // this refers to a div DOM element
});

$(document).ready(function() {

// this refers to window.document

});

$("div").click(function() {

// this refers to a div DOM element

});

در بخش اول کد کلمه کلیدی this به window.document اشاره دارد و در بخش دوم به div اشاره می کند.

شما می توانید با استفاده از متدهای درون ساخت call() و apply()، Context یک تابع را زمانی که فراخوانی می شود، مشخص کنید.

تفاوت call() و apply()

تفاوت این دو متد در این است که متد call()، تمام آرگومان ها را از طریق arguments به تابع ارسال می کند در حالی که متد apply()، یک آرایه به عنوان arguments می پذیرد.

function scope() {
   console.log(this, arguments.length);
}
scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

function scope() {

console.log(this, arguments.length);

}

scope() // window, 0

scope.call("foobar", [1,2]); //==> "foobar", 1

scope.apply("foobar", [1,2]); //==> "foobar", 2

محدوده (Scope)

محدوه متغیر، ناحیه ای است که متغیر در آن تعریف شده است. متغیرهای جاوا اسکریپت فقط دو محدوده دارند:

متغیرهای سراسری (Global Variables): متغیر سراسری، در محدوده سراسری قرار می گیرد. به این معنی که در همه جای اسکریپت در دسترس است.
متغیرهای محلی (Local Variables): یک متغیر محلی تنها در محدوده ای که در آن تعریف شده اند (مثلا داخل یک تابع) در دسترس هستند. پارامترهای یک تابع در محدوده محلی قرار می گیرند.

توجه! زمانی یک متغیر محلی هم نام با یک متغیر سراسری تعریف می کنید، آن متغیر محلی بر متغیر سراسری اولویت دارد.

مثال زیر به خوبی این مسئله را نشان می دهد:

var myVar = "global";     // ==> Declare a global variable
function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

var myVar = "global"; // ==> Declare a global variable

function ( ) {

var myVar = "local"; // ==> Declare a local variable

document.write(myVar); // ==> local

}

Callback

Callback یک تابع ساده جاوا اسکریپت است که به بعضی از متدها به عنوان یک آرگومان یا گزینه ارسال می شود. برخی از callback ها فقط به عنوان یک رویداد عمل می کنند تا به کاربر کمک کنند زمانی که یک تغییری رخ داد، بتواند واکنش دهد.

مثال:

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

$("body").click(function(event) {

console.log("clicked: " + event.target);

});

بعضی از فراخوانی ها برای بازگشت چیزی لازم است، دیگران این مقدار بازگشتی را اختیاری می کنند. برای جلوگیری از ارسال فرم، یک رویداد ارائه دهنده ارسال می تواند به صورت زیر به اشتباه بازگردد

برخی از callback ها نیاز دارند تا یک چیزی را به عنوان خروجی باز گردانند. شما می توانید این مقدار بازگشتی را تغییر دهید. برای نمونه، به منظور جلوگیری از ارسال فرم هنگام کلیک بر روی دکمه submit، می توانید به صورت زیر عمل کنید:

$("#myform").submit(function() {
   return false;
});

$("#myform").submit(function() {

return false;

});

Closures

Closure هرگاه که بخواهیم از یک محدوده داخلی به یک متغیر تعریف شده در یک محدوده خارجی دسترسی داشته باشیم، ایجاد می شوند.

به مثال زیر توجه کنید:

function create() {
   var counter = 0;
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}
var c = create();
c.increment();
c.print();     // ==> 1

function create() {

var counter = 0;

return {

increment: function() {

counter++;

print: function() {

console.log(counter);

}

var c = create();

c.increment();

c.print(); // ==> 1

در مثال بالا، توابع داخلی که قسمت return نوشته اند می توانند به متغیری که در خارج از محدوده آن ها تعریف شده است، دسترسی داشته باشند.

توابع درون ساخت (Built-in)

JavaScript همراه با یک مجموعه مفید از توابع ساخته شده است. این متد ها می تواند به منظور دستکاری رشته ها، اعداد و تاریخ هامورد استفاده قرار گیرد.

در جدول زیر توابع مهم جاوا اسکریپت را مشاهده می کنید:

ردیف	متد و توضیحات
1	charAt() کاراکتری که در index مشخص شده قرار دارد را باز میگرداند.
2	concat() متن دو رشته را با ترکیب می کند و یک رشته جدید باز میگرداند.
3	forEach() یک تابع را برای هر یک از عناصر آرایه فراخوانی می کند.
4	indexOf() برای پیدا کردن موقعیت یک رشته یا کارارکتر در داخل یک رشته دیگر استفاده می شود. اگر پیدا نشود مقدار -1 را باز میگرداند.
5	length() طول یک رشته را باز میگرداند.
6	pop() آخرین عنصر یک آرایه را حذف کرده و مابقی را را باز میگرداند.
7	push() یک یا چند عنصر به انتهای یک آرایه اضافه می کند و آرایه جدید را باز می گرداند.
8	reverse() ترتیب یک آرایه را برعکس می کند. یعنی اولین عنصر در جای آخرین عنصر قرار می گیرد و بلعکس.
9	sort() عناصر یک آرایه را مرتب می کند.
10	substr() کاراکترهای یک رشته را در index و تعداد مشخص باز میگرداند. مثلا substr(5, 3)، سه کاراکتری که در خانه 5، 6 و 7 هستند را باز میگرداند.
11	toLowerCase() کاراکترهای یک رشته را به حرف کوچک تبدیل می کند.
12	toString() یک مقدار غیر رشته را به رشته تبدیل می کند. مثلا یک عدد را.
13	toUpperCase() کاراکترهای یک رشته را به حرف بزرگ تبدیل می کند.

Document Object Model یا DOM

DOM یک ساختار درختی از عناصر مختلف HTML به صورت زیر است:

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

<html>

<head>

<title>The jQuery Example</title>

</head>

<body>

<div>

<p>This is a paragraph.</p>

<p>This is second paragraph.</p>

<p>This is third paragraph.</p>

</div>

</body>

</html>

امتحان کنید

نتیجه:

This is a paragraph.
This is second paragraph.
This is third paragraph.

This is a paragraph.

This is second paragraph.

This is third paragraph.

نکات مربوط به ساختار درختی مثال بالا:

اجداد همه عناصر دیگر است؛ به عبارت دیگر همه عناصر دیگر از نسل هستند.
عنصر و عنصر علاوه بر این که از نسل هستند، فرزندان نیز محسوب می شوند.
به همین ترتیب عنصر پدر عناصر و می باشد.
عنصر
به عنوان فزرند عنصر
، و می باشد. همچنین با سایر عناصر
رابطه برادری دارد.

JQuery - انتخابگرها (Selector) JQuery - بررسی اجمالی

دسته ها: آموزش ها - تکنولوژی JQuery

آموزش هوش مصنوعی و الگوریتم های فراابتکاری با پایتون

آموزش پایتون برای یادگیری ماشین (دوره کامل برای مبتدیان)

آموزش SQL Server از مقدماتی تا پیشرفته در قالب فیلم

فیلم آموزش JQuery (جی کوئری)

فیلم آموزش WPF در سی شارپ به صورت پروژه محور | مدیریت بخشنامه تحت شبکه

آموزش پلاگین های جی کوئری (jQuery) به صورت فیلم

آموزش سی شارپ به صورت پروژه محور (مدیریت فروشگاه)

آموزش JQuery

مباحث پایه JQuery

مباحث JQuery UI

پلاگین های JQuery

مفاهیم و مبانی اصلی jQuery (جی کوئری) – آموزش jQuery

مفاهیم و مبانی اصلی jQuery

رشته (string)

اعداد (Numbers)

بولین (Boolean)

اشیاء (Objects)

آرایه ها (Arrays)

توابع (Functions)

آرگومان ها (Arguments)

مفهوم (Context)

تفاوت call() و apply()

محدوده (Scope)

Callback

Closures

توابع درون ساخت (Built-in)

Document Object Model یا DOM

سورس سیستم مدیریت هتل با زبان C++

آموزش ساخت برنامه دسکتاپ با React و Electron

سورس نرم افزار پیام رسان به زبان سی شارپ

سورس بازوی ربات سه بعدی با OpenGL به زبان C++

سورس مسابقه ماشین ها با OpenGL به زبان C++

سورس ایستگاه اتوبوس با OpenGL به زبان C++

سورس پنکه سه بعدی با OpneGL به زبان C++

سورس تاکسی آنلاین با اندروید استودیو (Android Studio) به همراه پنل مدیریت