القائمة الرئيسية

الصفحات

jQuery - أساسيات



jQuery عبارة عن إطار عمل تم إنشاؤه باستخدام قدرات JavaScript. لذلك ، يمكنك استخدام جميع الوظائف والإمكانيات الأخرى المتوفرة في JavaScript. سيشرح هذا الفصل معظم المفاهيم الأساسية ولكنها شائعة الاستخدام في jQuery.

String

السلسلة في JavaScript هي كائن غير قابل للتغيير لا يحتوي على أي حرف أو حرف واحد أو أكثر. فيما يلي الأمثلة الصالحة لسلسلة JavaScript -

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

Numbers

الأرقام في JavaScript هي قيم IEEE 754 ذات تنسيق 64 بت مزدوج الدقة. فهي غير قابلة للتغيير ، مثلها مثل الأوتار. فيما يلي الأمثلة الصالحة لأرقام JavaScript -

5350
120.27
0.26

Boolean

يمكن أن تكون قيمة منطقية في JavaScript إما صحيحة أو خاطئة. إذا كان الرقم صفرًا ، فسيتم تعيينه افتراضيًا على خطأ. إذا تم تعيين سلسلة فارغة بشكل افتراضي على false. فيما يلي الأمثلة الصالحة لـ JavaScript Boolean -

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

Objects

JavaScript supports Object concept very well. You can create an object using the object literal as follows −

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

You can write and read properties of an object using the dot notation as follows −

// 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];

An array has a length property that is useful for iteration −

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

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

Functions

يمكن تسمية دالة في JavaScript أو تكون مجهولة. يمكن تحديد وظيفة مسماة باستخدام الكلمة الأساسية للوظيفة على النحو التالي -

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

يمكن تعريف الوظيفة المجهولة بطريقة مشابهة للدالة العادية ولكن لن يكون لها أي اسم. يمكن تعيين وظيفة مجهولة إلى متغير أو تمريرها إلى طريقة كما هو موضح أدناه.

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

Arguments

JavaScript variable arguments is a kind of array which has length property. Following example explains it very well −

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

سياق الكلمة الرئيسية الشهيرة جافا سكريبت يشير هذا دائمًا إلى السياق الحالي. يمكن أن يتغير هذا السياق داخل إحدى الوظائف ، اعتمادًا على كيفية تسمية الوظيفة -

$(document).ready(function() {
   // this refers to window.document
});

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

يمكنك تحديد سياق استدعاء دالة باستخدام أساليب دالة مضمنة استدعاء () وتطبيق (). الفرق بينهما هو كيفية تمرير الحجج. يقوم الاستدعاء بتمرير جميع الوسائط كوسيطات للوظيفة ، بينما يقبل التطبيق مصفوفة كوسائط.

function scope() {
   console.log(this, arguments.length);
}

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

نطاق المتغير هو منطقة البرنامج الذي تم تعريفه فيه. سيكون لمتغير JavaScript نطاقان فقط. المتغيرات العالمية - المتغير العام له نطاق عالمي مما يعني أنه معرّف في كل مكان في كود JavaScript الخاص بك. المتغيرات المحلية - سيكون المتغير المحلي مرئيًا فقط داخل دالة تم تعريفه فيها. تكون معلمات الوظيفة دائمًا محلية لتلك الوظيفة. داخل جسم الوظيفة ، يكون للمتغير المحلي الأسبقية على المتغير الشامل الذي يحمل نفس الاسم -


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

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

رد الاتصال هو وظيفة JavaScript عادية يتم تمريرها إلى طريقة ما كوسيطة أو خيار. بعض عمليات الاسترجاعات هي مجرد أحداث ، يتم استدعاؤها لمنح المستخدم فرصة للرد عند تشغيل حالة معينة. يستخدم نظام أحداث jQuery عمليات الاسترجاعات هذه في كل مكان على سبيل المثال -

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

توفر معظم عمليات الاسترجاعات وسيطات وسياق. في مثال معالج الحدث ، يتم استدعاء رد الاتصال مع وسيط واحد ، وهو الحدث. بعض عمليات الاسترجاعات مطلوبة لإرجاع شيء ما ، والبعض الآخر يجعل قيمة الإرجاع اختيارية. لمنع إرسال نموذج ، يمكن لمعالج حدث الإرسال إرجاع خطأ كما يلي -

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

 التالي كيف يكون عداد المتغير مرئيًا داخل وظائف الإنشاء والزيادة والطباعة ، ولكن ليس خارجها -

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

var c = create();
c.increment();
c.print();     // ==> 1

يتيح لك هذا النمط إنشاء كائنات بأساليب تعمل على بيانات غير مرئية للعالم الخارجي. وتجدر الإشارة إلى أن إخفاء البيانات هو أساس البرمجة الشيئية.


الوكيل هو كائن يمكن استخدامه للتحكم في الوصول إلى كائن آخر. يقوم بتنفيذ نفس الواجهة مثل هذا الكائن الآخر ويمرر أي استدعاءات طريقة إليه. غالبًا ما يسمى هذا الكائن الآخر بالموضوع الحقيقي. يمكن إنشاء وكيل بدلاً من هذا الموضوع الحقيقي والسماح بالوصول إليه عن بُعد. يمكننا حفظ طريقة setArray في jQuery في الإغلاق والكتابة عليها على النحو التالي -

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

ما سبق يلف الكود الخاص به في دالة لإخفاء المتغير الوكيل. يقوم الوكيل بعد ذلك بتسجيل جميع المكالمات إلى الطريقة ويفوض المكالمة إلى الطريقة الأصلية. يضمن استخدام التطبيق (هذا ، الوسيطات) أن المتصل لن يكون قادرًا على ملاحظة الفرق بين الطريقة الأصلية والطريقة الوكيل.


تأتي JavaScript جنبًا إلى جنب مع مجموعة مفيدة من الوظائف المضمنة. يمكن استخدام هذه الطرق لمعالجة السلاسل والأرقام والتواريخ. فيما يلي وظائف JavaScript مهمة -


Sr.No.Method & Description
1

charAt()

Returns the character at the specified index.

2

concat()

Combines the text of two strings and returns a new string.

3

forEach()

Calls a function for each element in the array.

4

indexOf()

Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.

5

length()

Returns the length of the string.

6

pop()

Removes the last element from an array and returns that element.

7

push()

Adds one or more elements to the end of an array and returns the new length of the array.

8

reverse()

Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.

9

sort()

Sorts the elements of an array.

10

substr()

Returns the characters in a string beginning at the specified location through the specified number of characters.

11

toLowerCase()

Returns the calling string value converted to lower case.

12

toString()

Returns the string representation of the number's value.

13

toUpperCase()

Returns the calling string value converted to uppercase.

The Document Object Model

The Document Object Model is a tree structure of various elements of HTML as follows −


<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> هو سلف جميع العناصر الأخرى ؛ بمعنى آخر ، جميع العناصر الأخرى من نسل <html>. إن عنصري <head> و <body> ليسا فقط من نسل ، ولكنهما أبناء <html> أيضًا. وبالمثل ، بالإضافة إلى كونه سلف <head> و <body> ، فإن <html> هو أيضًا والدهما. العناصر <p> هي عناصر أبناء (وأحفاد) لـ <div> ، وأحفاد <body> و <html> ، وأخوة لبعضهم البعض من عناصر <p>. أثناء تعلم مفاهيم jQuery ، سيكون من المفيد أن يكون لديك فهم لـ DOM ، إذا لم تكن على دراية بـ DOM ، فأقترح أن تذهب من خلال برنامجنا التعليمي البسيط حول دروس DOM.


هل اعجبك الموضوع :

تعليقات