تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
الوصول للعناصر وللقيم في خصائصها والتعديل عليها
#1
السلام عليكم ورحمة الله وبركاته
بداية ارجو من اصحاب التعامل مع الويب بشكل عام الاهتمام بهذا القسم والمرور عليه من حين لاخر
للاسف ليس لدي الشيء الكثر لاقدمه لكن سأبدأ بعون الله من هنا ومشوار الالف ميل يبدأ بخطوة واحدة ونسأل الله أن لا تقف
بسم الله نبدأ:
سنتعامل مع مكتبات الـ 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> 
ترى اننا وضعنا فقط  كود برمجي صغير اشبه ما يكون ب Form_Load او Page_Load فأنت تعرف مثلاً Sub New
الذي يعنى باالاحداث قبل تحميل العناصر على الصفحة او الفورم صح؟ لا هنا نحن نريد الاحداث تكون عندما تكون الصفحة جاهزة
وتم تحميل كافة العناصر بها 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> 
كما تشاهد لدينا Button اسمه Button1
الان  حتى نصل لهذا الزر في الاسكربت يكون كالتالي
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> 
طيب شغل الصفحة او اذا كنت نسخت الكود الى ملف مفكرة احفظه بصيغة html جرب الكود
الان اذا اردت اضافة اي اجراء يصاحب تغيير قيمة Val في الزر ركز على
PHP كود :
$('#Button1').val("VB4Arab"); 
لان اي اجراء تريد يصاحب ال Click سيكون بعده مباشرة
مثلا سنعطلة في الفيجوال مثلا 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> 
وأرجو ان يلاقي هذا الموضوع الدعم الحققي بايراد الامثلة في هذا الصدد Jquery Java Jax Json
خلوني اقول زي العصا السحرية اللي في كهف التنين
ومن اراد صفحة المثال فهي المرفقات

بالتوفيق


الملفات المرفقة
.html   t1.html (الحجم : 455 بايت / التحميلات : 8)
سبحان الله والحمدلله ولا إله إلا الله والله أكبر
 رَبِّ اغْفِرْ لِي وَلِوَالِدَيَّ
Heart
الرد }}}}
تم الشكر بواسطة:
#2
الدعم الحققي هاه؟
يا اخي اكتب الحقيقي
سبحان الله والحمدلله ولا إله إلا الله والله أكبر
 رَبِّ اغْفِرْ لِي وَلِوَالِدَيَّ
Heart
الرد }}}}
تم الشكر بواسطة:
#3
(11-09-16, 07:01 PM)أبو عمر كتب : الدعم الحققي هاه؟
يا اخي اكتب الحقيقي

الياء محذوفة للتخفيفSmile

مع ان اللغة javascript بدت تتضح قليلا بالنسبة لي الا اني اجهل  كيفية معرفة نتيجة دالة لكشف مثلا مربع نص وهذه الدالة ضمن ملف js مستقل.
على كل حال ليس المجال للاجابة عليه.
أستودعكم الله الذي لا تضيع ودائعه أرجو ان تجدوا بمشاركاتي ما يجعلكم تدعون لي بخير ان تحتم غيابي.
الرد }}}}
تم الشكر بواسطة: أبو عمر
#4
ما نجهله اليوم بقليل من البحث والتجريب سصبح معلوما وسنتطلع لماهو أبعد وهكذا
وفكرة عمل مكتبتي الخاصة في Js فكرة ممتازة مثلها مثل اي كلاسات او موديول تقوم بتصميمه لتسهيل وسرعة انجاز العمل
سبحان الله والحمدلله ولا إله إلا الله والله أكبر
 رَبِّ اغْفِرْ لِي وَلِوَالِدَيَّ
Heart
الرد }}}}
تم الشكر بواسطة:


التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم