سوف نتعلم اليوم بإذن الله طريقة استعمال الأمر hide و show لي التحكم في إظهار و إخفاء العناصر التي وقع تحديدها
1- الامر show
ستخدم لإظهار جميع العناصر التي تم تحديدها في حال كانت غير ظاهرة في الصفحة و لا يهم كيف تم إخفاء تلك العناصر سواء باستخدام الامر hide او display:none في ال css
و في المثال التالي سوف نقوم بأظهار جميع العناصر img المخفية في الصفحة
معاينة المثال تحميل
و في المثال التالي سوف نقوم بأظهار جميع العناصر img المخفية في الصفحة
<html>
<title>مدونة عرب بلس طريقك نحو الابداع</title>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("input:submit").click(function(){
$("img").show("1000");});});</script>
</head>
<body>
<img src="images.jpg" style="display:none">
<input name="" type="submit" value="show image">
</body>
</html>
معاينة المثال تحميل
في المثال السابق قمنا بتحديد الزر submit عن طريق الامر $("input:submit")
و عند الضغط علي الزر submit يقوم السطر التالي $("img").show("1000"); بإظهار الصورة المخفية داخل الصفحة . كما يمكن التحكم في سرعة اضهار الصورة عن طريق التعديل على الرقم ("1000")
مثال لو اردنا اخفاء الصورة في ثانية واحدة نكتب 1000 , في ثانيتان نكتب 2000 ... وهكذا . كما يمكنك استعمال القيم النصية التالية slow : بطيء , normal : عادي , fast :سريع
معاينة المثال تحميل
نفس الخطوات مع الامر Hide معا مراعة تغيير الأمر show ب hide
و الآن اتركوكم معا هذا الفيديو لي الأخ إبراهيم قديح مشاهدة طيب :)
مثال لو اردنا اخفاء الصورة في ثانية واحدة نكتب 1000 , في ثانيتان نكتب 2000 ... وهكذا . كما يمكنك استعمال القيم النصية التالية slow : بطيء , normal : عادي , fast :سريع
2- الأمر hide
عكس الأمر show يستخدم الامر hide لأخفاء جميع العناصر التي تم تحديدها
وفي هذا المثال سوف نقوم بإخفاء العنصر img داخل الصفحة
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:submit").click(function(){
$("img").hide();
});
});
</script>
</head>
<body>
<img src="images/demo2.jpg">
<input name="" type="submit" value="show image">
</body>
معاينة المثال تحميل
نفس الخطوات مع الامر Hide معا مراعة تغيير الأمر show ب hide
و الآن اتركوكم معا هذا الفيديو لي الأخ إبراهيم قديح مشاهدة طيب :)
