التعديل على HTML بواسطة jQuery
تحتوي jQuery على طرق فعالة أي أكواد وظيفية للتغيير و التعديل على عناصر و لواحق HTML .
تغيير محتوى HTML
$(selector).html(content)
تغيّر الطريقة html() المحتوى من خلال innerHTML وذلك لتغيير عناصر HTML .
مثال
$("p").html("W3arabic");
اضافة محتوى HTML
$(selector).append(content)
تضيف طريقة append() محتوى داخل عناصر HTML المتطابقة.
$(selector).prepend(content)
تضيف طريقة prepend() محتوى داخل عناصر HTML المتطابقة .
مثال
$("p").append("W3arabic ");
$(selector).after(content)
تضيف طريقة after() محتوى HTML بعد جميع العناصر المتطابقة .
$(selector).before(content)
تضيف طريقة before() محتوى HTML قبل جميع العناصر المتطابقة .
مثال
$("p").after("W3arabic.");
طرق التعديل على عناصر HTML
| الوظيفة | الشرح |
|---|---|
| $(selector).html(content) | تغيّر محتوى عنصر HTML ( داخلي ) محدد . |
| $(selector).append(content) | تضيف محتوى داخل عنصر HTML داخلي محدد . |
| $(selector).after(content) | اضافة HTML بعد عناصر محددة . |
التعديل على CSS بواسطة jQuery
طريقة css()
تحتوي jQuery على طريقة مهمة للتعديل على عناصر التصميم وهي css() .
لدى طريقة css() ثلاث تركيبات مختلفة و ذلك لإنجاز مهام مختلفة .
- الطريقة css(name) : تعيد قيمة تابعة لخاصية CSS .
- الطريقة css(name,value) : ضبط الخاصيات property و القيم value.
- الطريقة css({properties}) : ضبط خاصيات و قيم متعددة .
إعادة خاصية CSS
يمكن استخدام css(name) لإرجاع قيمة خاصية محددة لأول عنصر مطابق .
مثال
$(this).css("background-color");
ضبط خاصية و قيمة
يمكن استخدام css(name,value) لتحديد خاصية محددة لجميع العناصر المتطابقة .
مثال يتم تطبيق خاصية محددة لجميع وسم p
$("p").css("background-color","yellow");
ضبط خاصية و قيمة متعددة
يمكن استخدام css({properties}) لتحديد خاصية وقيمة واحدة أو أكثر للعناصر المحددة .
مثال
$("p").css({"background-color":"yellow","font-size":"200%"});
طرائق height() و width()
تحتوي jQuery على طرائق مهمة للتحكم بالحجم أي طوله و عرضه .
- height()
- width()
مثال على التعديل على حجم العنصر
تضبط الطريقة height() جميع ارتفاع العناصر المطابقة .
مثال
$("#div1").height("200px");
تضبط الطريقة width() جميع عرض العناصر المطابقة .
مثال
$("#div2").width("300px");
| خاصيات CSS | الشرح |
|---|---|
| $(selector).css(name) | ضبط قيمة خاصية التصميم لأول عنصر يتم مطابقة معه . |
| $(selector).css(name,value) | ضبط القيمة لخاصية تصميم واحدة للعناصر المطابقة . |
| $(selector).css({properties}) | ضبط خاصيات تصميم متعددة للعناصر المطابقة . |
| $(selector).height(value) | ضبط الارتفاع للعناصر المطابقة |
| $(selector).width(value) | ضبط العرض للعناصر المطابقة |