معالجة DOM باستخدام jQuery - 1
معالجة DOM باستخدام jQuery
معالجة DOM باستخدام jQuery - 1 درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 1 من أصل 1. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 1 دروس في المجموع.
مقدمة إلى الأساليب
مرحبًا،
تعرّفنا حتى الآن على استخدامات JQuery وكيفية استخدام المحدد.
والآن، لنرَ الأساليب التي تتيح لنا معالجة DOM.
أسلوب text
أسلوب text()
نستخدم أسلوب text() للوصول إلى محتوى عنصر HTML.
استخدم $ (selector).text() لقراءة محتوى عنصر.
بالإضافة إلى ذلك، يُستخدم أسلوب text() لتحديث محتوى عنصر. يكفي تمرير المحتوى الجديد إلى أسلوب text بوصفه وسيطًا.
<h1 id="hello">Hello Coddy</h1>
<h2 id="target"></h2>
<script>
$(document).ready(function(){
/*
With the $ ('# hello') statement,
we selected the element with hello id
and set the element's content related
to the text method of this object to
the variable named result.
*/
var result = $('#hello').text();
/*
We find the element with the
target id in the DOM and assign the value
of the result variable to the
text method of this object.
*/
$('#target').text(result);
/*
As a result, we have assigned
the value of the h1 element
to the h2 element.
*/
});
</script>
سؤال
أسلوب html
أسلوب html()
أسلوبنا التالي هو html().
كما يتضح من اسمه، فهو يعيد العنصر بأكمله بدلًا من محتوى العنصر الذي نختاره فقط.
لنعرّف عنصر HTML نموذجيًا أدناه.
تم تعريف عنصري HTML بالمعرّفين base وtarget. ثم، بمجرد تحميل DOM.
نُسخ محتوى HTML بالكامل للعنصر base وأُضيف إلى العنصر ذي المعرّف target
<div id="base">
<p>Hello Coddy</p>
<p>I'm p element</p>
</div>
<div id="target"></div>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the base element HTML
var baseHTML = $('#base').html();
/* update target element
by using baseHTML value
*/
$('#target').html(baseHTML);
})
</script>محدد السمة
أسلوب attr()
نستخدم السمات لتعريف سلوكيات إضافية لعناصر HTML.
قد نرغب غالبًا في الوصول إلى قيم هذه السمات أثناء كتابة شيفرات Javascript الخاصة بنا.
في هذه الحالات، يُستخدم أسلوب attr.
لنتعلّم هذا الأسلوب من خلال تنفيذ المثال أدناه.
<a href="https://www.coddykit.com"
target="_blank"
title="CoddyKit Web App" class="base">
Go CoddyKit
</a>
<br/>
<span id="link-title"></span>
<script>
/*
Callback will run as son
as the DOM is loaded
*/
$(document).ready(function(){
//Read link's title attribute
var linkTitle = $('a').attr('title');
/* update target element content
by using linkTitle value
*/
$('#link-title').text(linkTitle);
})
</script>السمة
تشبه عملية تعيين سمات جديدة أسلوبي text() وhtml() اللذين تعلّمناهما سابقًا.
بتمرير وسيط إلى الأسلوب attr() الذي نستخدمه أثناء القراءة، يمكننا تعريف سمة جديدة للعنصر المستهدف.
/*
The target attribute of the element with
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');removeAttr
removeAttr()
تعلّمنا كيفية إضافة سمة؛
والآن، لنرَ كيفية حذف سمة موجودة.
لهذا الغرض، سنستخدم أسلوب removeAttr().
لنلقِ نظرة على مثالنا.
/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
{ tag: 'a', target: '_blank' },
{ tag: 'a', target: '_self' },
{ tag: 'p' }
];
elements.forEach(el => {
if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));أسلوب val
أسلوب val()
تُعد النماذج جزءًا لا غنى عنه في تطبيقات الويب الحديثة. سنستخدم أسلوب val() لقراءة البيانات التي يُدخلها المستخدمون في عناصر النموذج.
<input type="text" id="name"
name="yourname"
value="CoddyKit" />
<p>
Your name: <span id="target"></span>
</p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the input elemens value
var yourName = $('#name').val();
/* update target element
text by using yourName value
*/
$('#target').text(yourName);
})
</script>تحذير
في درس إدارة الأحداث، سنتعلّم كيفية الاستماع إلى كل بيانات الإدخال وعكسها على عنصر span الخاص بنا.
معلومات إضافية
لتحديث قيمة حقل إدخال، نمرر الوسائط إلى الأسلوب val، كما قد تتوقعون.
const $ = (selector) => ({
val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')تهانينا
تهانينا 🎉
لقد بدأنا بتعلّم معالجة DOM
في القسم التالي، سنواصل تعلّم معالجة DOM في jQuery.

تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 22
- الدروس
- 48
الأسئلة الشائعة
هل درس «معالجة DOM باستخدام jQuery - 1» مجاني؟
نعم — نص درس «معالجة DOM باستخدام jQuery - 1» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 1 دروس في المجموع.
ماذا ستتعلم في «معالجة DOM باستخدام jQuery - 1»؟
معالجة DOM باستخدام jQuery تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟
لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 1.
كم من الوقت يستغرق درس «معالجة DOM باستخدام jQuery - 1»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟
نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.