fix: converted single to triple backticks11 (#36238)

This commit is contained in:
Randell Dawson
2019-06-20 13:42:13 -07:00
committed by Tom
parent 397014136e
commit 54d303ce1f
75 changed files with 1673 additions and 1430 deletions

View File

@@ -18,12 +18,13 @@ jQuery هي مكتبة جافا سكريبت الأكثر استخدامًا ،
سيتم إخفاء العناصر:
`$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
`
```javascript
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
```
#### معلومات اكثر

View File

@@ -6,8 +6,9 @@ localeTitle: jQuery اياكس الحصول على طريقة
يرسل طلب GET http غير متزامن لتحميل البيانات من الخادم. شكله العام هو:
`jQuery.get( url [, data ] [, success ] [, dataType ] )
`
```javascript
jQuery.get( url [, data ] [, success ] [, dataType ] )
```
* `url` : المعلمة الإلزامية الوحيدة. تحتوي هذه السلسلة على العنوان الذي تريد إرسال الطلب إليه. سيتم تجاهل البيانات التي تم إرجاعها في حالة عدم تحديد أي معلمة أخرى.
* `data` : يتم إرسال كائن عادي أو سلسلة إلى الخادم مع الطلب.

View File

@@ -6,8 +6,9 @@ localeTitle: jQuery Ajax Post Method
يرسل طلب HTTP POST غير متزامن لتحميل البيانات من الخادم. شكله العام هو:
`jQuery.post( url [, data ] [, success ] [, dataType ] )
`
```javascript
jQuery.post( url [, data ] [, success ] [, dataType ] )
```
* url: هي المعلمة الإلزامية الوحيدة. تحتوي هذه السلسلة على العنوان الذي تريد إرسال الطلب إليه. سيتم تجاهل البيانات التي تم إرجاعها في حالة عدم تحديد أي معلمة أخرى
* البيانات: كائن عادي أو سلسلة يتم إرسالها إلى الخادم مع الطلب.
@@ -16,24 +17,27 @@ localeTitle: jQuery Ajax Post Method
#### أمثلة
`$.post('http://example.com/form.php', {category:'client', type:'premium'});
`
```javascript
$.post('http://example.com/form.php', {category:'client', type:'premium'});
```
طلبات `form.php` من الخادم ، وإرسال بيانات إضافية وتجاهل النتيجة التي تم إرجاعها
`$.post('http://example.com/form.php', {category:'client', type:'premium'}, function(response){
alert("success");
$("#mypar").html(response.amount);
});
`
```javascript
$.post('http://example.com/form.php', {category:'client', type:'premium'}, function(response){
alert("success");
$("#mypar").html(response.amount);
});
```
طلبات `form.php` من الخادم ، وإرسال بيانات إضافية والتعامل مع الاستجابة المرتجعة (تنسيق json). يمكن كتابة هذا المثال بهذا التنسيق:
`$.post('http://example.com/form.php', {category:'client', type:'premium'}).done(function(response){
alert("success");
$("#mypar").html(response.amount);
});
`
```javascript
$.post('http://example.com/form.php', {category:'client', type:'premium'}).done(function(response){
alert("success");
$("#mypar").html(response.amount);
});
```
يقوم المثال التالي بنشر نموذج باستخدام Ajax ووضع النتائج في div \`\` \`أتش تي أم أل jQuery.post التجريبي
@@ -41,8 +45,9 @@ localeTitle: jQuery Ajax Post Method
// Attach a submit handler to the form $( "#searchForm" ).submit(function( event ) { // Stop form from submitting normally event.preventDefault(); // Get some values from elements on the page: var $form = $( this ), term = $form.find( "input\[name='s'\]" ).val(), url = $form.attr( "action" ); // Send the data using post var posting = $.post( url, { s: term } ); // Put the results in a div posting.done(function( data ) { var content = $( data ).find( "#content" ); $( "#result" ).empty().append( content ); }); });
`The following example use the github api to fetch the list of repositories of a user using jQuery.ajax() and put results in a div
`
```
The following example use the github api to fetch the list of repositories of a user using jQuery.ajax() and put results in a div
```
أتش تي أم أل

View File

@@ -6,8 +6,9 @@ localeTitle: jQuery تحريك
طريقة jQuery المتحركة تجعل من السهل إنشاء رسوم متحركة بسيطة ، باستخدام بضعة أسطر من التعليمات البرمجية فقط. الهيكل الأساسي هو على النحو التالي:
`$(".selector").animate(properties, duration, callbackFunction());
`
```javascript
$(".selector").animate(properties, duration, callbackFunction());
```
بالنسبة لوسيطة `properties` تحتاج إلى تمرير كائن javascript ، مع خصائص CSS التي تريد تحريكها كمفاتيح ، والقيم التي تريد تحريكها كقيم. `duration` التي تحتاجها لإدخال مقدار الوقت بالمللي ثانية يجب أن تأخذ الرسوم المتحركة. يتم تنفيذ `callbackFunction()` بمجرد الانتهاء من الرسوم المتحركة.

View File

@@ -6,8 +6,9 @@ localeTitle: انقر فوق الطريقة
تقوم طريقة jQuery Click بتشغيل وظيفة عند النقر على عنصر. تُعرف الدالة باسم "معالج" لأنه يعالج الحدث النقر. وظائف يمكن التأثير على عنصر HTML المرتبط بالنقرة باستخدام طريقة jQuery Click أو يمكنهم تغيير شيء آخر تمامًا. الشكل الأكثر استخدامًا هو:
`$("#clickMe").click(handler)
`
```javascript
$("#clickMe").click(handler)
```
تأخذ طريقة النقر وظيفة المعالج كوسيطة وتقوم بتنفيذها في كل مرة يتم فيها النقر `#clickMe` عنصر `#clickMe` . الدالة معالج يتلقى المعلمة المعروفة باسم [eventObject](http://api.jquery.com/Types/#Event) والتي يمكن أن تكون مفيدة للتحكم في الإجراء.
@@ -15,27 +16,29 @@ localeTitle: انقر فوق الطريقة
يعرض هذا الرمز تنبيهًا عندما ينقر المستخدم على زر:
`
<button id="alert">Click Here</button>
`
```html
<button id="alert">Click Here</button>
```
`$("#alert").click(function () {
alert("Hi! I'm an alert");
});
`
```javascript
$("#alert").click(function () {
alert("Hi! I'm an alert");
});
```
[jsFiddle](https://jsfiddle.net/pL63cL6m/)
يحتوي [eventObject](http://api.jquery.com/Types/#Event) على بعض الأساليب المضمنة ، بما في ذلك `preventDefault()` ، الذي يقوم بما يقوله بالضبط - يتوقف الحدث الافتراضي لعنصر. نحن هنا نرسم علامة المرساة من العمل كرابط:
`
<a id="myLink" href="www.google.com">Link to Google</a>
`
```html
<a id="myLink" href="www.google.com">Link to Google</a>
```
`$("#myLink").click(function (event) {
event.preventDefault();
});
`
```javascript
$("#myLink").click(function (event) {
event.preventDefault();
});
```
[jsFiddle](https://jsfiddle.net/dy457gbh/)
@@ -43,25 +46,28 @@ localeTitle: انقر فوق الطريقة
يمكن أيضًا أن تقبل وظيفة المعالج بيانات إضافية في شكل كائن:
`jqueryElement.click(usefulInfo, handler)
`
```javascript
jqueryElement.click(usefulInfo, handler)
```
يمكن أن تكون البيانات من أي نوع.
`$("element").click({firstWord: "Hello", secondWord: "World"}, function(event){
alert(event.data.firstWord);
alert(event.data.secondWord);
});
`
```javascript
$("element").click({firstWord: "Hello", secondWord: "World"}, function(event){
alert(event.data.firstWord);
alert(event.data.secondWord);
});
```
يؤدي استدعاء طريقة النقر بدون دالة معالج إلى تشغيل حدث نقرة:
`$("#alert").click(function () {
alert("Hi! I'm an alert");
});
$("#alert").click();
`
```javascript
$("#alert").click(function () {
alert("Hi! I'm an alert");
});
$("#alert").click();
```
الآن ، عندما يتم تحميل الصفحة ، سيتم تشغيل حدث النقر عند إدخال الصفحة أو إعادة تحميلها ، وإظهار التنبيه المحدد.
@@ -75,17 +81,19 @@ localeTitle: انقر فوق الطريقة
على سبيل المثال ، مثال أسلوب النقر هذا:
`$( "element" ).click(function() {
alert("I've been clicked!");
});
`
```javascript
$( "element" ).click(function() {
alert("I've been clicked!");
});
```
يمكن تغييره في هذا المثال على سبيل المثال:
`$( document ).on("click", "element", function() {
alert("I've been clicked!");
});
`
```javascript
$( document ).on("click", "element", function() {
alert("I've been clicked!");
});
```
#### معلومات اكثر:

View File

@@ -6,8 +6,9 @@ localeTitle: jQuery الآثار طريقة إخفاء
في أبسط أشكالها ، يخفي **.hide ()** العنصر المتطابق على الفور ، بدون رسوم متحركة. فمثلا:
`$(".myclass").hide()
`
```javascript
$(".myclass").hide()
```
سوف يخفي كل العناصر التي الطبقة هي _myclass_ . يمكن استخدام أي محدد jQuery.
@@ -17,8 +18,9 @@ localeTitle: jQuery الآثار طريقة إخفاء
* يمكن توفير المدة بالمللي ثانية أو باستخدام القيم الحرفية البطيئة (600 مللي ثانية) وبسرعة (200 مللي ثانية). فمثلا:
`$("#myobject").hide(800)
`
```javascript
$("#myobject").hide(800)
```
* يمكن تحديد وظيفة ليتم استدعاؤها بمجرد اكتمال الرسوم المتحركة ، مرة واحدة لكل عنصر متطابق. هذا الاستدعاء مفيد بشكل أساسي في ربط الصور المتحركة المختلفة. فمثلا
@@ -41,11 +43,12 @@ localeTitle: jQuery الآثار طريقة إخفاء
يقوم هذا الأسلوب بتحريك ارتفاع العناصر المتطابقة. يؤدي ذلك إلى انخفاض أجزاء من الصفحة لأسفل ، مما يجعل الطريق للعناصر التي تم الكشف عنها. الاستعمال:
`$(".myclass").slideDown(); //will expand the element with the identifier myclass for 400 ms.
$(".myclass").slideDown(1000); //will expand the element with the identifier myclass for 1000 ms.
$(".myclass").slideDown("slow"); //will expand the element with the identifier myclass for 600 ms.
$(".myclass").slideDown("fast"); //will expand the element with the identifier myclass for 200 ms.
`
```javascript
$(".myclass").slideDown(); //will expand the element with the identifier myclass for 400 ms.
$(".myclass").slideDown(1000); //will expand the element with the identifier myclass for 1000 ms.
$(".myclass").slideDown("slow"); //will expand the element with the identifier myclass for 600 ms.
$(".myclass").slideDown("fast"); //will expand the element with the identifier myclass for 200 ms.
```
#### معلومات اكثر:

View File

@@ -6,8 +6,9 @@ localeTitle: طريقة jQuery تظهر طريقة
في أبسط أشكالها ، يعرض **.show ()** العنصر المطابق على الفور ، بدون رسوم متحركة. فمثلا:
`$(".myclass").show();
`
```javascript
$(".myclass").show();
```
سوف تظهر جميع العناصر التي الطبقة هي _myclass_ . يمكن استخدام أي محدد jQuery.
@@ -19,8 +20,9 @@ localeTitle: طريقة jQuery تظهر طريقة
* يمكن توفير المدة بالمللي ثانية أو باستخدام القيم الحرفية البطيئة (600 مللي ثانية) وبسرعة (200 مللي ثانية). فمثلا:
`$("#myobject").show("slow");
`
```javascript
$("#myobject").show("slow");
```
* يمكن تحديد وظيفة ليتم استدعاؤها بمجرد اكتمال الرسوم المتحركة ، مرة واحدة لكل عنصر متطابق. فمثلا

View File

@@ -6,8 +6,9 @@ localeTitle: طريقة jQuery Hover
طريقة `mouseenter` hover هي مزيج من أحداث `mouseleave` و `mouseleave` . بناء الجملة هو:
`$(selector).hover(inFunction, outFunction);
`
```
$(selector).hover(inFunction, outFunction);
```
سيتم تشغيل الدالة الأولى ، inFunction ، عند حدوث حدث `mouseenter` . الوظيفة الثانية اختيارية ، ولكن سيتم تشغيلها عند `mouseleave` الحدث `mouseleave` . إذا تم تحديد وظيفة واحدة فقط، سيتم تشغيل وظيفة أخرى لكل من `mouseenter` و `mouseleave` الأحداث.

View File

@@ -12,27 +12,30 @@ localeTitle: مختارات jQuery
في ما يلي مثال لأسلوب jQuery يحدد جميع عناصر الفقرة ، ويضيف فئة "محددة" إليهم:
`<p>This is a paragraph selected by a jQuery method.</p>
<p>This is also a paragraph selected by a jQuery method.</p>
$("p").addClass("selected");
`
```javascript
<p>This is a paragraph selected by a jQuery method.</p>
<p>This is also a paragraph selected by a jQuery method.</p>
$("p").addClass("selected");
```
في jQuery ، تكون محددات الفئة ومعرّف الهوية هي نفسها الموجودة في CSS. إذا كنت تريد تحديد عناصر بفئة معينة ، فاستخدم نقطة ( `.` ) واسم الفئة. إذا كنت تريد تحديد عناصر بمعرف معين ، فاستخدم رمز التجزئة ( `#` ) واسم المعرف. تجدر الإشارة إلى أن HTML ليس حساسًا لحالة الأحرف ، لذلك من الأفضل أن تظل علامات HTML ومتغيرات CSS صغيرة جدًا.
الاختيار حسب الصف:
`<p class="p-with-class">Paragraph with a class.</p>
$(".p-with-class").css("color", "blue"); // colors the text blue
`
```javascript
<p class="p-with-class">Paragraph with a class.</p>
$(".p-with-class").css("color", "blue"); // colors the text blue
```
التحديد حسب المعرّف:
`<li id="li-with-id">List item with an ID.</li>
$("#li-with-id").replaceWith("<p>Socks</p>");
`
```javascript
<li id="li-with-id">List item with an ID.</li>
$("#li-with-id").replaceWith("<p>Socks</p>");
```
يمكنك أيضًا تحديد عناصر معينة مع فئاتها ومعرفاتها:
@@ -40,12 +43,13 @@ localeTitle: مختارات jQuery
إذا كنت تريد تحديد عناصر بفئة معينة ، فاستخدم نقطة (.) واسم الفئة.
`
<p class="pWithClass">Paragraph with a class.</p>
`
```html
<p class="pWithClass">Paragraph with a class.</p>
```
`$(".pWithClass").css("color", "blue"); // colors the text blue
`
```javascript
$(".pWithClass").css("color", "blue"); // colors the text blue
```
يمكنك أيضًا استخدام محدد الفئة مع اسم العلامة لتكون أكثر تحديدًا.
@@ -53,55 +57,60 @@ localeTitle: مختارات jQuery
<ul class="wishList">My Wish List</ul>`<br>
``
`$("ul.wishList").append("<li>New blender</li>");
`
```javascript
$("ul.wishList").append("<li>New blender</li>");
```
### اختيار حسب الهوية
إذا كنت تريد تحديد عناصر بقيمة معرف معينة ، فاستخدم رمز التجزئة (#) واسم المعرف.
`
<li id="liWithID">List item with an ID.</li>
`
```html
<li id="liWithID">List item with an ID.</li>
```
`$("#liWithID").replaceWith("<p>Socks</p>");
`
```javascript
$("#liWithID").replaceWith("<p>Socks</p>");
```
كما هو الحال مع محدد الصف ، يمكن استخدام هذا أيضًا مع اسم العلامة.
`
<h1 id="headline">News Headline</h1>
`
```html
<h1 id="headline">News Headline</h1>
```
`$("h1#headline").css("font-size", "2em");
`
```javascript
$("h1#headline").css("font-size", "2em");
```
### محددات تعمل كمرشحات
هناك أيضًا محددات تعمل كمرشحات - وعادةً ما تبدأ بالنقطتين. على سبيل المثال ، يحدد الخيار `:first` العنصر الذي يكون الطفل الأول من أصله. فيما يلي مثال لقائمة غير مرتبة ببعض عناصر القائمة. يحدد محدد jQuery أسفل القائمة أول عنصر `<li>` في القائمة - عنصر القائمة "One" - ثم يستخدم طريقة `.css` لتحويل النص إلى اللون الأخضر.
`
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
`
```html
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
```
`$("li:first").css("color", "green");
`
```javascript
$("li:first").css("color", "green");
```
**ملاحظة:** لا تنس أن تطبيق css في JavaScript ليس ممارسة جيدة. يجب عليك دائمًا تقديم أنماطك في ملفات css.
محدد التصفية الآخر ، `:contains(text)` ، يحدد العناصر التي تحتوي على نص معين. ضع النص الذي تريد مطابقته بين الأقواس. هنا مثال مع فقرتين. يأخذ محدد jQuery الكلمة "Moto" ويغير لونه إلى اللون الأصفر.
`
<p>Hello</p>
<p>World</p>
`
```html
<p>Hello</p>
<p>World</p>
```
`$("p:contains('World')").css("color", "yellow");
`
```javascript
$("p:contains('World')").css("color", "yellow");
```
وبالمثل ، يحدد `:last` selector `:last` العنصر الأخير للطفل التابع له. يحدد محدد jQuery أدناه العنصر `<li>` الأخير في القائمة - عنصر القائمة "Three" - ثم يستخدم طريقة `.css` لتحويل النص إلى اللون الأصفر.
@@ -111,8 +120,9 @@ localeTitle: مختارات jQuery
**اختيار متعددة** في jQuery ، يمكنك استخدام العديد من المحددات لتطبيق نفس التغييرات على أكثر من عنصر واحد ، باستخدام سطر واحد من التعليمات البرمجية. يمكنك القيام بذلك عن طريق فصل معرفات مختلفة بفاصلة. على سبيل المثال ، إذا كنت ترغب في تعيين لون الخلفية لثلاثة عناصر باستخدام ids cat و dog و rat على التوالي إلى اللون الأحمر ، فقم بذلك ببساطة:
`$("#cat,#dog,#rat").css("background-color","red");
`
```
$("#cat,#dog,#rat").css("background-color","red");
```
هذه ليست سوى عدد قليل من المحددات المتاحة للاستخدام في jQuery. راجع قسم "مزيد من المعلومات" للحصول على ارتباط إلى القائمة الكاملة على موقع jQuery على الويب.