+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : الأقسام التعليمية - المنتدى القديم (http://vb4arb.com/vb/forumdisplay.php?fid=90)
+--- قسم : مكتبة أكواد المنتدى (http://vb4arb.com/vb/forumdisplay.php?fid=111)
+---- قسم : مكتبة أكواد ال Scripts (http://vb4arb.com/vb/forumdisplay.php?fid=118)
+---- الموضوع : الوصول للعناصر وللقيم في خصائصها والتعديل عليها (/showthread.php?tid=17260)
الوصول للعناصر وللقيم في خصائصها والتعديل عليها - أبو عمر - 11-09-16
السلام عليكم ورحمة الله وبركاته
بداية ارجو من اصحاب التعامل مع الويب بشكل عام الاهتمام بهذا القسم والمرور عليه من حين لاخر
للاسف ليس لدي الشيء الكثر لاقدمه لكن سأبدأ بعون الله من هنا ومشوار الالف ميل يبدأ بخطوة واحدة ونسأل الله أن لا تقف
بسم الله نبدأ:
سنتعامل مع مكتبات الـ JQuery اعذروني سأتخطى الحديث عنها وماهي و و و فلنبدأ من حيث انتهى الاخرون.
س: هل استطيع اجراء التغييرات على الصفحة دون الرجوع للحدث PostBack كما في Asp.net والانتظار حتى ينتهي . مثلا اخفاء
الزر بعد حدث Click ؟
ج: نعم تستطيع ذلك والامر ببساطة كالتالي :
*يجب ان نتعرف على هذا العنصر إما بنوعه او باسمه او باسم الكلاس الذي يأخذه CssClass.
كلنا نعلم هذا المخطط وهذه التاجات في HTML
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
شغلنا راح يكون في منطقة الهيد"<head></head>
PHP كود :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
يمكن الحصول عليها من الموقع الخاص بهم
https://jquery.com/download/
وبعضهم يحب تضمينها ضمن ملفات المشروع فينشيء مجلد خاص ويسميه مثلا Js او Scripts
المهم ان تستدعيها قبل اجراء الوظائف الخاصة بها. فلتتابع معي
PHP كود :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready();
</script>
الذي يعنى باالاحداث قبل تحميل العناصر على الصفحة او الفورم صح؟ لا هنا نحن نريد الاحداث تكون عندما تكون الصفحة جاهزة
وتم تحميل كافة العناصر بها Elements الان سنحتاج لوظيفة ندرجها داخل حدث الاستعداد الذي انشأناه فيكون شكل الاسكربت كالتالي
PHP كود :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {});
</script>
بداية أحب التنويه على ان العمل الى الان بعيد عن ASP وعناصره الخاصة به فكل ما نحن فيه HTML اذا كنت تريد المتابعة معي
فخذ من صندوق الادوات الخاص ب HTML الذي ستجده اخر الادوات في برنامج الفيجوال دعنا نضيف input ونوعه Button
فيكون شكل كامل الصفحة كالتالي
PHP كود :
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
});
</script>
</head>
<body>
<input id="Button1" type="button" value="button" />
</body>
</html>
الان حتى نصل لهذا الزر في الاسكربت يكون كالتالي
PHP كود :
<script>
$(document).ready(function () {
$('#Button1').click();
});
</script>
هنا اي اننا نوعز للكود ان لا يختار اي عنصر الا العنصر الذي اسمه Button1
وبعد نحدد اي حدث نريد؟ اخترنا الحدث Click ولدينا الكثير من الحداث ستكتشفها بنفسك
ماذا نريد ان يكون بعد ان يقوم المستخدم بضغط الزر؟ ليكن مثلا تغيير Val التي تشابه text في الفيجوال مثلا
سنجعل الزر تظهر عليه كلمة VB4arab
سنظيفة وظيفة الحدث
PHP كود :
<script>
$(document).ready(function () {
$('#Button1').click(function () { });
});
</script>
PHP كود :
<script>
$(document).ready(function () {
$('#Button1').click(function () { $('#Button1').val("VB4Arab"); });
});
</script>
PHP كود :
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#Button1').click(function () { $('#Button1').val("VB4Arab"); });
});
</script>
</head>
<body>
<input id="Button1" type="button" value="button" />
</body>
</html>
الان اذا اردت اضافة اي اجراء يصاحب تغيير قيمة Val في الزر ركز على
PHP كود :
$('#Button1').val("VB4Arab");
مثلا سنعطلة في الفيجوال مثلا Button1.Enabled=false
هنا الامر مشابه لكن باختلاف طفيف
سيكون كالتالي
PHP كود :
$('#Button1').prop('disabled', true);
PHP كود :
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#Button1').click(function () {
$('#Button1').val("VB4Arab");
$('#Button1').prop('disabled', true);
});
});
</script>
</head>
<body>
<input id="Button1" type="button" value="button" />
</body>
</html>
خلوني اقول زي العصا السحرية اللي في كهف التنين
ومن اراد صفحة المثال فهي المرفقات
بالتوفيق
RE: الوصول للعناصر وللقيم في خصائصها والتعديل عليها - أبو عمر - 11-09-16
الدعم الحققي هاه؟
يا اخي اكتب الحقيقي
RE: الوصول للعناصر وللقيم في خصائصها والتعديل عليها - سعود - 11-09-16
(11-09-16, 07:01 PM)أبو عمر كتب : الدعم الحققي هاه؟
يا اخي اكتب الحقيقي
الياء محذوفة للتخفيف
مع ان اللغة javascript بدت تتضح قليلا بالنسبة لي الا اني اجهل كيفية معرفة نتيجة دالة لكشف مثلا مربع نص وهذه الدالة ضمن ملف js مستقل.
على كل حال ليس المجال للاجابة عليه.
RE: الوصول للعناصر وللقيم في خصائصها والتعديل عليها - أبو عمر - 12-09-16
ما نجهله اليوم بقليل من البحث والتجريب سصبح معلوما وسنتطلع لماهو أبعد وهكذا
وفكرة عمل مكتبتي الخاصة في Js فكرة ممتازة مثلها مثل اي كلاسات او موديول تقوم بتصميمه لتسهيل وسرعة انجاز العمل