الحصول/الإعداد جـ jQuery

جزء مهم جدًا من jQuery هو إمكانية التلاعب بالDOM.

يقدم jQuery أساليب فعالة للتلاعب ببرمجيات الـ HTML و الخصائص.

في هذا الفصل، سنشرح كيفية استخدام jQuery للحصول و تعيين محتويات العناصر و القيم المحددة.

HTML DOM (نموذج وثيقة المتصفح)

نموذج وثيقة المتصفح، ويُطلق عليه عادةDOM، وهو جزء مهم من تفاعلية الموقع.

نموذج وثيقة المتصفحيعبر عن وثيقة HTML تُعرض في نافذة.

إنه واجهة تتيح لـ jQuery التلاعب بمحتوى، الهيكل و النمط لموقع الويب.

jQuery للحصول أو تعيين محتويات- html()، text() و val()

باستخدام jQuery، يمكننا بسهولة التلاعب ببرمجيات الـ HTML.

لدينا أساليب jQuery用于DOM التشغيل:

• html()

• text()

• val()

في الفصل التالي، سنوضح كيفية استخدام كل أسلوب.

أسلوب jQuery html()

jQuery html()يستخدم هذا الأسلوب للحصول أو تعيين محتويات العنصر المحدد (innerHTML)

في هذا المثال، يتم الحصول على محتويات الفقرة الأولى عند النقر على الزر

$("button").click(function(){
　　alert($("p").html()));
});

في هذا المثال، يتم تغيير محتويات جميع الفقرات عند النقر على الزر

$("button").click(function(){
　　$("p").html("أريد أن أقول:　<b>Hello　world</b>");
});

أسلوب jQuery text()

jQuery text()يستخدم هذا الأسلوب للحصول أو تعيين محتويات العنصر المحدد (بما في ذلك الأبناء)

في هذا المثال، يتم الحصول على محتويات جميع الفقرات عند النقر على الزر

$("button").click(function(){
　　alert($("p").text()));
});

في هذا المثال، يتم تغيير محتويات جميع الفقرات عند النقر على الزر

$("button").click(function(){
　　$("p").text("أريد أن أقول:　Hello　world");
});

الفرق بين html() و text()

html()وtext()كلا أسلوب html() و text() يمكنهما تعيين أو الحصول على محتويات عنصر HTML، ولكن هناك فرق بينهما:

html():

• تعيين أو الحصول على محتويات العنصر المحدد (نص + علامات HTML)

• عندما تستخدم أسلوب html()الحصولعندما تستخدم أسلوب text()، فإنه سيعودمحتويات العنصر المحدد الأول

text():

• تعيين أو الحصول على محتويات العنصر المحدد (فقط النص)

• عندما تستخدم أسلوب text()الحصولعندما تستخدم أسلوب text()، فإنه سيعودجميع العناصر المحددةمحتويات النص

في هذا المثال، نوضح الفرق بين أسلوب html() و text()

$("#btn1").click(function(){
　　$("p").html("أريد أن أقول:　<b>Hello　world</b>");
});
$("#btn2").click(function(){
　　$("p").text("أريد أن أقول:　<b>Hello　world</b>");
});

أسلوب jQuery val()

jQuery val()يستخدم هذا الأسلوب للحصول أو تعيين خاصية value للعنصر الإستمارة المحدد.

إليك مثال على الحصول<input>قيمة الحقل:

$("button").click(function(){
　　$("input:text").val();
});

إليك مثال على الإعدادات<input>قيمة الحقل:

$("button").click(function(){
　　$("input").val("Hello world");
});

الحصول أو تعيين الخاصية - attr()

jQuery attr()يستخدم هذا الطريقة للحصول أو تعيين خصائص القيم للعناصر المحددة.

في هذا المثال يتم الحصول علىsrcقيمة الخاصية:

$("button").click(function(){
　　$("img").attr("src");
});

في هذا المثال يتم تعيينsrcقيمة الخاصية:

$("button").click(function(){
　　$("img").attr("src", "logo_jquery.png");
});

في المثال التالي، يتم تعيين عدة خصائص وقيم:

$("button").click(function(){
　　$("img").attr({
　　　　الوصف: "أيقونة Seagull",
　　　　العنوان: "صورة بواسطة Seagull",
　　　　العرض: "350px",
　　　　الارتفاع: "300px"
　　});
});

مرجع HTML لـ jQuery

للحصول على مرجع كامل للطرق HTML، يرجى زيارةمرجع HTML / CSS لـ jQuery。