الصفحة الرئيسية>كود مصدر ASP>فئات أخرى
تنزيل

جافا سكريبت بدون مسج

نصائح وأمثلة عملية، من منشور CatsWhoCode.

جدول المحتويات

  1. الاستماع للوثيقة جاهزة
  2. إضافة مستمعي الأحداث
  3. اختيار العناصر
  4. باستخدام اياكس
  5. إضافة وإزالة الفصول
  6. تتلاشى في
  7. إخفاء وإظهار العناصر
  8. التلاعب بـ DOM

الاستماع للوثيقة جاهزة

لا يمكن التعامل مع الصفحة بشكل آمن حتى تصبح الوثيقة "جاهزة". لهذا السبب، اعتدنا نحن المطورين على تغليف كافة أكواد JS الخاصة بنا داخل وظيفة jQuery $(document).ready() ‎ : 

 $ ( document ) . ready ( function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

يمكن تحقيق نفس النتيجة بسهولة باستخدام JavaScript خالص: 

 document . addEventListener ( 'DOMContentLoaded' , function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

إضافة مستمعي الأحداث

يعد مستمعو الأحداث جزءًا مهمًا جدًا من تطوير JavaScript. لدى jQuery طريقة سهلة جدًا للتعامل معها: 

 $ ( someElement ) . on ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

لا تحتاج إلى jQuery لإنشاء مستمعي الأحداث في JavaScript. وإليك كيفية القيام بذلك: 

 someElement . addEventListener ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

اختيار العناصر

يجعل jQuery من السهل جدًا تحديد العناصر باستخدام المعرف، واسم الفئة، واسم العلامة، وما إلى ذلك: 

 // By ID
$ ( '#myElement' ) ;

// By Class name
$ ( '.myElement' ) ;

// By tag name
$ ( 'div' ) ;

// Children
$ ( '#myParent' ) . children ( ) ;

// Complex selecting
$ ( 'article#first p.summary' ) ;

تتميز لغة JavaScript النقية بطرق مختلفة لتحديد العناصر. تعمل جميع الطرق أدناه على جميع المتصفحات الحديثة بالإضافة إلى IE8+. 

 // By ID
document . querySelector ( '#myElement' ) ;

// By Class name
document . querySelectorAll ( '.myElement' ) ;

// By tag name
document . querySelectorAll ( 'div' ) ;

// Children
document . querySelectorAll ( 'myParent' ) . childNodes ;

// Complex selecting
document . querySelectorAll ( 'article#first p.summary' ) ;

باستخدام اياكس

كما يعلم معظمكم، فإن Ajax عبارة عن مجموعة من التقنيات التي تتيح لك إنشاء تطبيقات ويب غير متزامنة. يحتوي jQuery على مجموعة من الأساليب المفيدة لـ Ajax، بما في ذلك get() كما هو موضح أدناه: 

 $ . get ( 'ajax/test.html' , function ( data ) {
  $ ( '.result' ) . html ( data ) ;
  alert ( 'Load was performed.' ) ;
} ) ;

على الرغم من أن jQuery يجعل تطوير Ajax أسهل وأسرع، إلا أنه من المؤكد أنك لا تحتاج إلى إطار عمل لاستخدام Ajax: 

 var request = new XMLHttpRequest ( ) ;
request . open ( 'GET' , 'ajax/test.html' , true ) ;

request . onload = function ( e ) {
  if ( request . readyState === 4 ) {

    // Check if the get was successful.

    if ( request . status === 200 ) {
      console . log ( request . responseText ) ;
    } else {
      console . error ( request . statusText ) ;
    }
  }
} ;

إضافة وإزالة الفصول

إذا كنت بحاجة إلى إضافة فئة عنصر أو إزالتها، فإن jQuery لديها طريقتان مخصصتان للقيام بذلك: 

 // Adding a class
$ ( '#foo' ) . addClass ( 'bold' ) ;

// Removing a class
$ ( '#foo' ) . removeClass ( 'bold' ) ;

بدون jQuery، من السهل جدًا إضافة فئة إلى عنصر. لإزالة فئة، ستحتاج إلى استخدام طريقة replace() : 

 // Adding a class
document . getElementById ( 'foo' ) . className += 'bold' ;

// Removing a class
document . getElementById ( 'foo' ) . className = document . getElementById ( 'foo' ) . className . replace ( / ^bold$ / , '' ) ;

تتلاشى في

فيما يلي مثال عملي يوضح سبب شهرة jQuery. يستغرق تلاشي عنصر ما سطرًا واحدًا فقط من التعليمات البرمجية: 

 $ ( el ) . fadeIn ( ) ;

يمكن تحقيق نفس التأثير تمامًا باستخدام جافا سكريبت الخالص، لكن التعليمات البرمجية أطول بكثير وأكثر تعقيدًا. 

 function fadeIn ( el ) {
  el . style . opacity = 0 ;

  var last = + new Date ( ) ;
  var tick = function ( ) {
    el . style . opacity = + el . style . opacity + ( new Date ( ) - last ) / 400 ;
    last = + new Date ( ) ;

    if ( + el . style . opacity < 1 ) {
      ( window . requestAnimationFrame && requestAnimationFrame ( tick ) ) || setTimeout ( tick , 16 ) ;
    }
  } ;

  tick ( ) ;
}

fadeIn ( el ) ;

إخفاء وإظهار العناصر

يعد إخفاء العناصر وإظهارها مهمة شائعة جدًا. يقدم jQuery التابعين hide() show() لتعديل عرض العنصر. 

 // Hiding element
$ ( el ) . hide ( ) ;

// Showing element
$ ( el ) . show ( ) ;

في لغة JavaScript الخالصة، لا يكون إظهار العناصر أو إخفاؤها أكثر تعقيدًا: 

 // Hiding element
el . style . display = 'none' ;

// Showing element
el . style . display = 'block' ;

التلاعب بـ DOM

يعد التعامل مع DOM باستخدام jQuery أمرًا سهلاً للغاية. لنفترض أنك ترغب في إلحاق عنصر <p> بـ #container : 

 $ ( '#container' ) . append ( '<p>more content</p>' ) ;

إن القيام بذلك باستخدام JavaScript خالص لا يمثل مشكلة كبيرة أيضًا: 

 document . getElementById ( 'container' ) . innerHTML += '<p>more content</p>' ;
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل