الفرق بين المراجعتين ل"jQuery/animated selector"
< jQuery
اذهب إلى التنقل
اذهب إلى البحث
Kinan-mawed (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:المحدد <code>:animated</code> في jQuery}}</noinclude>') |
|||
(مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المحدد <code>:animated</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:المحدد <code>:animated</code> في jQuery}}</noinclude> | ||
+ | == المحدد <code>:animated</code> == | ||
+ | |||
+ | ===الوصف=== | ||
+ | يُستخدَم المُحدِّد <code>:animated</code> في تحديد جميع العناصر قيد التحريك حاليًّا في وقت تشغيل المُحدِّد. | ||
+ | |||
+ | === <code>jQuery( ":animated" )</code> === | ||
+ | أضيفت في الإصدار: 1.2. | ||
+ | |||
+ | '''ملاحظة:''' إن استخدمنا نسخة jQuery مُخصَّصة لا تحتوي على وحدة التأثيرات، فسيرمي المُحدِّد <code>:animated</code> خطأً. | ||
+ | |||
+ | === ملاحظات إضافيّة === | ||
+ | لمّا كان المُحدِّد <code>:animated</code> عبارة عن امتداد jQuery وليس جزءًا من مواصفات CSS، فلن تستفيد الاستعلامات التي تستخدم هذا المُحدِّد من تحسين الأداء المُقدَّم عن طريق تابع DOM الأصلي <code>[[JavaScript/Document/querySelectorAll|querySelectorAll()]]</code>. ولتحقيق أفضل أداء عند استخدام <code>:animated</code> لتحديد العناصر، فحدِّد أولًا العناصر باستخدام مُحدِّد CSS ثمّ استخدم التّابع <code>[[jQuery/filter|.filter(":animated")]]</code>. | ||
+ | |||
+ | === أمثلة === | ||
+ | تغيير لون أي عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> قيد التحريك:<syntaxhighlight lang="html"> | ||
+ | <!doctype html> | ||
+ | <html lang="en"> | ||
+ | <head> | ||
+ | <meta charset="utf-8"> | ||
+ | <title>مثال عن التحريك</title> | ||
+ | <style> | ||
+ | div { | ||
+ | background: yellow; | ||
+ | border: 1px solid #AAA; | ||
+ | width: 80px; | ||
+ | height: 80px; | ||
+ | margin: 0 5px; | ||
+ | float: left; | ||
+ | } | ||
+ | div.colored { | ||
+ | background: green; | ||
+ | } | ||
+ | </style> | ||
+ | <script src="https://code.jquery.com/jquery-1.10.2.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <button id="run">تشغيل</button> | ||
+ | |||
+ | <div></div> | ||
+ | <div id="mover"></div> | ||
+ | <div></div> | ||
+ | |||
+ | <script> | ||
+ | $( "#run" ).click(function() { | ||
+ | $( "div:animated" ).toggleClass( "colored" ); | ||
+ | }); | ||
+ | |||
+ | function animateIt() { | ||
+ | $( "#mover" ).slideToggle( "slow", animateIt ); | ||
+ | } | ||
+ | |||
+ | animateIt(); | ||
+ | </script> | ||
+ | |||
+ | </body> | ||
+ | </html> | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | ==مصادر== | ||
+ | *[http://api.jquery.com/animated-selector/ صفحة المحدد :animated في توثيق jQuery الرسمي]. | ||
+ | [[تصنيف:jQuery]] | ||
+ | [[تصنيف:jQuery Selectors]] | ||
+ | [[تصنيف:jQuery Filter]] |
المراجعة الحالية بتاريخ 05:36، 14 مايو 2018
المحدد :animated
الوصف
يُستخدَم المُحدِّد :animated
في تحديد جميع العناصر قيد التحريك حاليًّا في وقت تشغيل المُحدِّد.
jQuery( ":animated" )
أضيفت في الإصدار: 1.2.
ملاحظة: إن استخدمنا نسخة jQuery مُخصَّصة لا تحتوي على وحدة التأثيرات، فسيرمي المُحدِّد :animated
خطأً.
ملاحظات إضافيّة
لمّا كان المُحدِّد :animated
عبارة عن امتداد jQuery وليس جزءًا من مواصفات CSS، فلن تستفيد الاستعلامات التي تستخدم هذا المُحدِّد من تحسين الأداء المُقدَّم عن طريق تابع DOM الأصلي querySelectorAll()
. ولتحقيق أفضل أداء عند استخدام :animated
لتحديد العناصر، فحدِّد أولًا العناصر باستخدام مُحدِّد CSS ثمّ استخدم التّابع .filter(":animated")
.
أمثلة
تغيير لون أي عنصر <div>
قيد التحريك:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>مثال عن التحريك</title>
<style>
div {
background: yellow;
border: 1px solid #AAA;
width: 80px;
height: 80px;
margin: 0 5px;
float: left;
}
div.colored {
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="run">تشغيل</button>
<div></div>
<div id="mover"></div>
<div></div>
<script>
$( "#run" ).click(function() {
$( "div:animated" ).toggleClass( "colored" );
});
function animateIt() {
$( "#mover" ).slideToggle( "slow", animateIt );
}
animateIt();
</script>
</body>
</html>