console.log
(
); // استخدم المتغير أولاً var a = 12
3^8
أكبر أو أصغر من النوع الرقمي (القيمة المطلقة أصغر) ويمكن كتابتها بالترميز 3e8
0b
، ويبدأ الرقم الثماني بـ 0
، ويبدأ النظام السداسي العشري بـ 0x
NaN
، وليس رقمًا، أي "ليس رقمًا"، ولكنه قيمة من النوع الرقمي (في العمليات الرياضية، إذا كانت النتيجة لا يمكن أن يكون رقمًا، والنتيجة غالبًا هي NaN، NaN == NaN، والنتيجة خاطئةسلسلة
Infinity Infinite أو متناهية الصغروظيفة | الطريقةcharAt |
---|---|
() | تحصل على حرف الموضع المحدد (خارج الحدود) سلسلة فارغة) |
سلسلة فرعية () | يستخرج السلسلة الفرعية |
substr () | يستخرج شريحة السلسلة |
() | يستخرج السلسلة الفرعية |
toUpperCase () | يغير السلسلة إلى أحرف كبيرة |
toLowerCase () | يغير السلسلة إلى أحرف صغيرة |
IndexOf () | يسترد السلسلة (مطابقة النمط) |
فارغة
.
Null.
أنواع البيانات المعقدة
يمكن أن يكون
يستخدم للكشف عن القيم أو المتغيرات نوع
النوع 5؛ //
نوع اسم نوع | السلسلة،قيمة | نتيجة الاكتشاف | ، مثال
---|---|---|
نوع | الرقم | 5 |
نوع | السلسلة | "niubi" |
النوع | المنطقي | صحيح |
غير محدد | غير محدد | غير محدد |
كائن | نوع فارغ |
الفارغة |
**Number ()**Function
// String --> Number Number('123'); // 123Number('123.4'); // 123.4Number('123 year'); ('2e3'); // 2000Number(''); // 0Number('1 + 1'); // NaN// قيمة منطقية --> Number(true); // غير محدد وخالي - -> Number Number(undef); // NaNNumber(null); // 0
**parseInt()** تقوم الدالة بتحويل سلسلة إلى عدد صحيح
وستقوم تلقائيًا باقتطاع جميع الأحرف بعد أول حرف غير رقمي. حرف
parseInt('3.14'); // 3parseInt('3.14 هو pi'); // 3parseInt('Pi هو 3.14'); // NaNparseInt('3.99')
; يحول السلسلة إلى أرقام الفاصلة العائمة
تلقائيًا باقتطاع الحرف الأول غير الرقمي وجميع الأحرف بعد العلامة غير العشرية
parseFloat('3.14'); // 3.14parseFloat('3.14 is pi'); // 3.14parseFloat('Pi هو 3.14'); // NaNparseFloat('3.99'); // 3.99// سوف يقوم تلقائيًا بتحويل الصواب والخطأ إلى سلاسل، والنتيجة هي NaN.تصبح
الدالة **String()**
"نفس الطول". خيط. سيتم تحويل التدوين العلمي والأرقام غير العشرية إلى قيم عشرية
String(123); // '123'String(123.4); // '123.4'String(2e3); // 'NaN'String(Infinity); // 'Infinity'String(0xf); // '15'String(true); // 'undef'String(null); // 'null'
**Boolean()** function
// الأرقام --> القيم المنطقية 0 وNaN يتم تحويلها إلى false، ويتم تحويل القيم الأخرى إلى trueBoolean(123) ; // trueBoolean(0); // falseBoolean(NaN); // falseBoolean(Infinity); // trueBoolean(-Infinity); // القيمة المنطقية --> يتم تحويل السلسلة الفارغة إلى خطأ يتم تحويل القيم إلى صحيح ('')؛ // falseBoolean('abc'); // trueBoolean('false'); غير محدد)؛ // falseBoolean(null) ; // false
**prompt()** تنبثق الدالة في مربع الإدخال
var num = موجه('الرجاء إدخال الرقم الأول'); // القيمة المرجعة هي
إذا كان متضمنًا في عمليات رياضية. إذا لم يكن المعامل نوعًا رقميًا، فستقوم JavaScript تلقائيًا بتحويل المعامل إلى نوع رقمي.
يتمثل جوهر التحويل الضمني في استدعاء الدالة Number() داخليًا
3 * '4' //. 12true + true // 2false + 2 // 23 * '2days' //
Math.pow(2, 3) // 2^3Math.sqrt(81) // 9Math. ceil() // تقريب Math.floor () // تقريب
=== // الكل متساو!== // ليس الكل متساويًا // علامتان متساويتان == العامل لا يقارن بين نوع القيمة، سيتم مقارنة القيمة بعد التحويل الضمني هل هي متساوية 1 == صحيح // true1 === صحيح // false0 == false // true0 === false // false0 == غير محدد // false0 === غير محدد // falseundef == null // trueundef == null // false
**isNaN()** تحدد الدالة ما إذا كانت قيمة المتغير هي NaN،
ولكن ليس من السهل استخدام isNaN() آليتها هي: طالما نتيجة تنفيذ المتغير الذي تم تمريره إلى Number() هي NaN، ثم ستحصل الدالة isNaN()
a && ba صحيح، والقيمة b a خاطئة، والقيمة a
||ba هي صحيح، القيمة هي a، a خاطئة، القيمة هي b
أولوية العملية المنطقية : غير--> و- -> أو
تسلسل عمليات التشغيل الشامل : غير--> عملية رياضية --> عملية علائقية -->
دالة الأرقام العشوائية Math.random()
تحصل على عدد صحيح في الفاصل الزمني [a, b]، الصيغة هي parseInt(Math .random() * (b - a + 1)) + a
var arr = [' A', 'B', 'C', 'D']; var arr = new Array('A', 'B', 'C', 'D');var arr = new Array(4); بطول 4، يكون كل عنصر غير محدد
عند الوصول إلى الحرف المنخفض خارج الحدود، يتم إرجاع غير محدد
var arr = [2, 6, 7, 3 ];arr[6] = 4;console.log(arr); هذه المرة، المنخفض خارج الحدود، ولن يتم الإبلاغ عن أي خطأ، ولكن سيتم توسيع المصفوفة، والمنخفض 6 هو 4، والوسط فارغيمكن استخدام طريقة Array.isArray () للكشف عن
تعريف وظيفة
// متعة الوظيفة العادية () { // بيان نص الوظيفة}// وظيفة مجهولة var fun = function () { // نص نص الوظيفة}
الترويج لإعلان الوظيفة
fun(); function fun() { // سيتم الترويج لها في مرحلة ما قبل التحليل تنبيه("تم تنفيذ الوظيفة");}// إذا تم تعريف الوظيفة بوظيفة التعبير، لا توجد ميزة ترويجية fun(); // يظهر خطأ var fun = function () { تنبيه ("تم تنفيذ الوظيفة")؛}
ترويج أولوية الوظيفة
// ترويج أولوية الوظيفة // الترويج بعد ترويج تعريف المتغير، لا يمكن تجاوز الوظيفة التي تمت ترقيتها fun(); // منبثق Bvar fun = function () { تنبيه ('أ')؛} وظيفة ممتعة () { تنبيه('B');}fun(); // منبثق أ.
العدد الفعلي للمعلمات الرسمية مختلف
undefined
دالة كائن مصفوفة الوسائط
الصفيف والمتغيرات
دالةالمعلنة بـ var هي متغيرات عامة، والمتغيرات المعلنة بدون var هي
متغيرات عامة في الدالة، والمتغيرات المعلنة بـ var هي متغيرات محلية، والمتغيرات المعلنة بدون var هي متغيرات عامة
، وكلاهما متغيرات عامة. وكلاهما إحدى سمات كائن النافذة. لا يمكن حذف المتغيرات المعلنة باستخدام var، ويمكن حذف المتغيرات المعلنة بدون var!
القيمة المرجعة
مجموع (أ، ب) {return a +
b
;}var result = sum(3, 5); // يمكن استلام القيمة المرجعة بواسطة
متغير
) الطريقة
a في هذه الوظيفة، تمثل b العناصر الأمامية والخلفية في المصفوفة على التوالي، إذا كانت هناك حاجة للتبديل، فسيتم إرجاع أي رقم موجب
؛ 55]؛ إذا (أ > ب) { العودة 1؛ } return -1;});
مهمة متغيرة
على سبيل المثال، | عندما يتم تمرير قيمة للمتغير var a = b | واستخدام == للمقارنة، | |
---|---|---|---|
نسخة جديدة من | قيمة النوع الأساسي | الرقمية والسلسلة والمنطقية وغير المحددة | في | الذاكرة
ليس هو | كائن أو صفيف | قيمة النوع المرجعي | ، قم بإنشاء نسخة جديدة، ولكن دع المتغير الجديد يشير إلى نفس الكائنلمقارنة ما إذا كان عنوان الذاكرة هو نفسه، أي مقارنة ما إذا كان هو نفس |
صفيف الكائن العميق
var arr1. = [1, 2, 3, [4, 5]]; وظيفة DeepClone( arr) { نتيجة فار = []; لـ (var i = 0; i < arr.length; i++) { إذا (Array.isArray(arr[i])) { result.push(deepClone(arr[i])); } آخر { result.push(arr[i]); } } return result;}
الوظيفة المحلية
المحددة داخل الوظيفة هي وظيفة محلية ولا
يمكن استدعاؤها إلا داخل الوظيفة
fun() { وظيفة داخلية () { console.log('مرحبا'); } الداخلي(); // استدعاء الوظيفة الداخلية} fun();
سلسلة النطاق
في تداخل الوظيفة، سيبحث المتغير عن تعريفه طبقة تلو الأخرى من الداخل إلى الخارج
var a = 10; () { فار ج = 30؛ وظيفة داخلية () { فار أ = 40؛ فار د = 50؛ console.log(a, b, c, d); // عند استخدام المتغيرات، سيبدأ js من الطبقة الحالية ويبحث عن التعريفات طبقة تلو الأخرى} الداخلي();}fun();إغلاق
الإغلاق
استدعاءهو مزيج من الوظيفة نفسها وحالة البيئة التي تم الإعلان عن الوظيفة فيها.
يمكن للوظيفة "تذكر" البيئة التي تم تعريفها فيها، حتى لو لم تكن الوظيفة موجودة البيئة التي تم تعريفها فيها، عند الاتصال، يمكنك أيضًا الوصول إلى متغيرات البيئة التي تم تعريفها فيها.
في Js، يتم إنشاء إغلاق في كل مرة يتم فيها إنشاء وظيفة، ولكن ميزة الإغلاق غالبًا ما تتطلب وجود الوظيفة تم تنفيذه "في مكان مختلف" حتى تتمكن من ملاحظة
وظيفة الإغلاق:
الذاكرة: عند إنشاء إغلاق، سيتم دائمًا الاحتفاظ بحالة البيئة التي توجد بها الوظيفة في الذاكرة ولن يتم تخزينها تلقائيًا. تم مسحه بعد استدعاء الوظيفة الخارجية.
وظيفة ممتعة () { اسم فار = 'نيوبي'; الوظيفة الداخلية () { تنبيه (الاسم)؛ } return insideFun;}var inn = fun();inn(); // تم نقل الوظيفة الداخلية إلى التنفيذ الخارجيلمحاكاة المتغير الخاص
function fun() { فار أ = 0; وظيفة العودة () { تنبيه (أ)؛ }}var getA = fun();getA()function fun() {; فار أ = 0; يعود { احصل على: الوظيفة () { العودة أ؛ }, إضافة: الوظيفة () { أ++; }, الأسرى: وظيفة () { أ *= 2; } };}var obj = fun();console.log(obj.getA());obj.add();ملاحظة : لا يمكن إساءة استخدام عمليات الإغلاق، وإلا فسيتسبب ذلك في حدوث مشكلات في الأداء على صفحة الويب، وقد يحدث ذلك في الحالات الخطيرة يؤدي إلى تسرب الذاكرة.
طريقة الكتابة الخاصة
للوظيفة IIFE على الفور
، بمجرد تعريفها،يجب تحويل الوظيفة التي تم استدعاؤها على الفور إلى تعبير دالة قبل أن يتم استدعاؤها
(function () { // تحويل الوظيفة إلى تعبير من خلال الأقواس // البيانات})() ;+ وظيفة() { تنبيه (1)؛} ()؛ - الوظيفة () { تنبيه(1);}();
يمكن استخدامه لتعيين قيم للمتغيرات
var age = 12; إذا (العمر <18) { إرجاع "الأطفال" ؛ } آخر { إذا (الجنس == "ذكر") { إرجاع "السيد". } آخر { إرجاع "السيدة"؛ } }})();
في بعض المواقف (كما هو الحال في حلقة for)، يتم تغيير المتغيرات العامة إلى متغيرات محلية، ويكون بناء الجملة أكثر إحكاما
var arr = []; for (var i = 0; i < 5; ط ++) { arr.push(وظيفة () { تنبيه (ط)؛ });}arr[2](); // الحل المنبثق 5
:
var arr = [];for (var i = 0; i < 5; i++) { (الوظيفة (ط) { arr.push(وظيفة() { تنبيه (ط)؛ }); })(i);}arr[2](); // منبثقة 2
عقدة قيمة السمة الشائعة
، يمكن لسمة العقدة نوع العقدة عرض النوع المحدد لهذه العقدة
، قيمة العقدة، | نوع العقدة، |
---|---|
1 | ، على سبيل المثال و |
3 | عقدة نصية |
8 | عقدة التعليق |
9 | عقدة المستند |
10 | عقدة DTD |
كائن المستند
إلى عقدة العنصر ويعتمد بشكل أساسي على كائن المستند،
ويتم تغليف جميع وظائف DOM تقريبًا في كائن
المستند شجرة العقدة
الطرق والوظائف الشائعة
للوصول | إلى |
---|---|
document.getElementById() | تحصل على العنصر من خلال المعرف |
document.getElementsByTagName() | تحصل على صفيف العنصر من خلال مستند اسم العلامة |
مستند | |
اسم | الفئة |
.querySelector() | على العنصر من خلال |
مستند المحدد.querySelectorAll() | يحصل من خلال صفيف العنصر المحدد |
document.getElementById()
إذا كانت هناك عناصر بنفس المعرف في الصفحة، فيمكنك فقط الحصول على
<p id = "box"الأول
">أنا صندوق</p><p id = "para">أنا فقرة</p
> var box = document.getElementById('box'); var para = document.getElementById('para');يعد صفيف
getElementsByTagName()
مناسبًا للاجتياز، بحيث يمكن معالجة عقد العناصر على دفعات
حتى إذا كان هناك اسم علامة محدد واحد فقط في عقدة الصفحة، فستحصل أيضًا على صفيف بطول 1.
يمكن لأي عنصر عقدة أيضًا قم باستدعاء طريقة getElementsByTagName() للحصول على عقدة العنصر لفئة معينة بداخلها
<p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p><p>Paragraph</p>
var ps = document.getElementsByTagName('p');
getElementsByClassName()
<p class ="spec">Box</p><p class ="spec ">Box</p><p class = "spec">Box< /p><p class = "spec">Box</p>
var spec_ps = document.getElementsByClassName('spec');هذه
الطريقة
يمكنك الحصول على عنصر واحد فقط في الصفحة الشروط، يمكنك فقط الحصول على العنصر الأول
<p id = "box1"> <p>فقرة</p> <p class = "spec">فقرة</p> <p>فقرة</p> <p>فقرة</p></p>
var the_p = document.querySelector('#box1 .spec');
querySelectAll()
سيحصل علىمصفوفة
بطول 1 حتى لو كانت هناك عقدة واحدة فقط في الصفحة تطابق
للتشغيل،
استخدم
الحدث window.onload = function() {} (أضف مستمع الحدث إلى كائن النافذة، ويشير التحميل إلى أنه تم تحميل الصفحة)، بحيث يتم تحميل الرمز المحدد بعد تحميل الصفحة. ستأخذ
العلاقة
بين
العقد | في | الاعتبار |
---|---|---|
جميع | العقد | وسيتم |
أخذ | العناصر | فقط |
في | الاعتبار | . |
| | |
| | |
| | |
تنتمي العقد النصية أيضًا إلى العقد، لذلك نستبعد بشكل عام تداخل عقدة النص (باستخدام عقد العناصر فقط)
لكتابة وظائف علاقة العقدة المشتركة
<body> <p معرف = "box1"> <p>فقرة</p> <p class = "spec">فقرة</p> <p>فقرة</p> <p>فقرة</p> </ص> <النص البرمجي> var box = document.getElementById('box1'); var spec = document.getElementsByClassName('spec'); // قم بتغليف دالة تُرجع جميع عقد العناصر الفرعية للعنصر، على غرار وظيفة الأطفال getChildren(node) { فار الأطفال = []; // اجتياز كافة العقد التابعة للعقدة وتحديد ما إذا كانت سمة نوع العقدة لكل بايت هي 1 // إذا كانت 1، فادفع مصفوفة النتائج for (var i = 0; i <node.childNodes.length; i++) { إذا (node.childNodes[i] == 1) { children.push(node.childNodes[i]); } } عودة الأطفال؛ } // قم بتغليف دالة يمكنها إرجاع العقدة الشقيقة للعنصر السابق، على غرار الدالة السابقةElementSibling getElementPrevSibling(node) { var o = العقدة; بينما (o.previousSibling != null) { إذا (o.prebiousSibling.nodeType == 1) { // قم بإنهاء الحلقة وابحث عن return o.previousSibling; } o = o.previousSibling; } عودة فارغة؛ } // قم بتغليف دالة يمكنها إرجاع كافة العقد الشقيقة للعنصر function getAllElementSibling(node) { var prev = []; var next = []; var o = العقدة; بينما (o.previousSibling != null) { إذا (o.previousSibling.nodeType == 1) { prevs.unshift(o.previousSibling); } o = o.previousSibling; } س = العقدة؛ بينما (o.nextSibling != null) { إذا (o.nextSibling.nodeType == 1) { next.push(o.nextSibling); } o = o.nextSibling; } إرجاع prevs.concat(nexts); } </script></body>يمكنك
تغيير المحتوى في عقدة العنصر
باستخدام سمتين مرتبطتين لتغيير المحتوى في عقدة العنصر.
لـ
InternalHTML
تعيين
المحتوى في العقدة في بناء جملة HTML
العقدة في شكل نص عادي
<body> <p معرف = "مربع"></p> <النص البرمجي> var oBox = document.getElementById('box'); oBox.innerHTML = '<ul><li>حليب</li><li>قهوة</li></ul>'; // يمكن تحليل بناء جملة HTML // oBox.innerText = 'niub'; يكون نصًا عاديًا</script></body>
إن تغيير نمط CSS لعقدة العنصر
يعادل تعيين سمة النمط المضمنة
oBox.style.backgroundColor = 'red'; // يجب كتابة سمات CSS في حالة الجمل oBox.style .backgroundImage = ' url(images/1.jpg)';oBox.style.fontSize = '32px';
قم بتغيير سمات HTML
لعقد العناصر إلى سمات W3C القياسية، مثل src و href وما إلى ذلك، فقط انقر مباشرة لإجراء ذلك التغييرات
oImg.src = 'images/2.jpg'؛بالنسبة للسمات التي لا تتوافق مع معايير W3C، استخدم setAttribute() وgetAttribute() لتعيين
<body>
وقراءته.
<p معرف = "مربع"></p> <النص البرمجي> var box = document.getElementById('box'); box.setAttribute('data-n', 10); // أضف سمة data-n بقيمة 10 var n = box.getAttribute('date-n'); تنبيه (ن)؛ </script></body>يتم استخدام طريقة
إنشاء العقدة
document.createElement(
) لإنشاء عنصر HTML باسم علامة محدد
var op = document.createElement('p');
إذا كانتولم يتم تثبيته على شجرة DOM ولا يمكن رؤيته، ويجب عليك
الاستمرار في استخدام طريقة appendChild () أو InsertBefore () لإدراج العقدة اليتيمة في شجرة DOM.
ويمكن لأي عقدة موجودة بالفعل على شجرة DOM استدعاء
طريقة appendChild()، والتييمكنها
تركيب العقدة اليتيمة بداخلها وتصبح العقدة الرئيسية الأخيرة
لهاالعقدة انتقل إلى داخلها وتصبح العقدة الأصلية للعقدة قبل أن تصبح "العقدة الفرعية المعيارية"
.insertBefore(العقدة اليتيمة، العقدة المعيارية)؛
العقدة المتنقلة
تجعل العقدة التي تم تثبيتها على شجرة DOM تصبح appendChild() أو InsertBefore () المعلمات، سيتم نقل هذه العقدة إلى
العقدة الأصلية الجديدة.appendChild (العقدة التي لديها والد بالفعل)؛ أنه لا يمكن تحديد موقع العقدة في شجرة DOM في نفس الوقت.تحذف طريقة RemoveChild()حذف
العقد في موقعين.
العقدة الأصليةللعقدة الفرعية
من DOM.removeChild
(لحذفالعقدة الفرعية
cloneNode()
)؛يمكن للطريقة استنساخ العقدة. العقدة المستنسخة هي "عقدة يتيمة".
المعلمة منطقية، تشير إلى ما إذا كان سيتم استخدام الاستنساخ العميق، إذا كان صحيحًا، فسيتم أيضًا استنساخ العقدة
سيتم
استنساخ
العقدة اليتيمة var orphan = oldnode.cloneNode(); var orphan العقدة
= | old |
---|---|
Node.cloneNode | ( |
true | ) |
النقر نقرًا مزدوجًا فوق كائن عند الماوس | |
لأسفل | عند الضغط على زر الماوس على كائن |
فوق | الماوس عند تحريك الماوس يتم تحرير الزر على كائن عند |
تحريك | الماوسعند تحريك زر الماوس على كائن |
فوق | الماوس أدخلعندما يدخل الماوس إلى كائن (حدث مشابه عند تمرير الماوس) |
عند الماوس فوق | عندما يترك الماوس كائنًا (حدث مشابه عند خروج الماوس) |
، لا تظهر فقاعات عند دخول الماوس، تظهر فقاعات عند تشغيل الماوس
اسم | الحدث، وصف |
---|---|
الحدث | عند الضغط على مفتاحعند الضغط على مفتاح لوحة المفاتيح (لا يمكن التعرف على أزرار النظام مثل مفاتيح الأسهم ومفاتيح الوظائف) |
الضغط على المفتاح لأسفل | عند الضغط على مفتاح يتم الضغط على مفتاح لوحة المفاتيح (يتم تحديد أزرار النظام، وستكون لها الأسبقية على الضغط على المفاتيح) |
الضغط على | مفتاح لوحة المفاتيح عند تحرير مفتاح لوحة المفاتيح |
وصف | الحدث |
---|---|
onchange | بعد قيام المستخدم بتغيير محتوى الحقل |
oninput | بتعديل محتوى الحقل (محتوى الإدخال) |
onfocus | عند الحصول على عنصر التركيز (مثل مفتاح علامة التبويب أو النقر بالماوس) |
onblur | عندما يفقد العنصر التركيز |
onsubmit | عندما يتم إرسال النموذج |
onreset | عندما يتم إعادة تعيين النموذج |
اسم الحدث | وصف الحدث |
---|---|
تحميل | الصفحة أو اكتمال تحميل الصورة |
إلغاء | التحميلعندما يخرج المستخدم من الصفحة |
عندما يكون المربع ترتيب تنفيذ الاستماع للحدث عند التداخل
<p id = "box1"> <p معرف = "box2"> <p معرف = "box3"></p> </p></p><script> var oBox1 = document.getElementById('box1'); var oBox2 = document.getElementById('box2'); var oBox3 = document.getElementById('box3'); oBox1.onclick = الدالة () { console.log('box1'); }; oBox2.onclick = الوظيفة () { console.log('box2'); }; oBox3.onclick = الوظيفة () { console.log('box3'); }; // انقر فوق المربع الأعمق، واتجاه الانتشار من الداخل إلى الخارج</script>
Event Propagation
// هنا وظيفةيتم انتشار الأحداث: أولاً من الخارج إلى الداخل، ثم من الداخل إلى الخارج (لا يتم التقاط الطبقة الأعمق أولاً ثم فقاعتها، ولكن يتم تحديدها بناءً على ترتيب كتابة التعليمات البرمجية. المربعات التي تحمل الاسم نفسه) ترتبط بنفس المرحلة والترتيب إذا تم تعيين نفس العنصر إذا كان هناك حدثان أو أكثر بنفس الاسم، فسيحل الحدث المكتوب لاحقًا في مستوى DOM0 محل الحدث المكتوب أولاً وسيتم تنفيذ مستوى DOM2 بالترتيب)
يمكن لـ onxxxx (مراقبة الأحداث على مستوى DOM0) مراقبة مرحلة الفقاعات فقط، وبالتالي فإن النتائج المرصودة تكون من الداخل إلى الخارج
بطريقة addEventListener() (مراقبة الأحداث من المستوى 2 DOM)
oBox.addEventListener('click', function() {
معالجة
الحدث}، صحيح)؛ // إذا كانت المعلمة الثالثة صحيحة، فسوف تستمع إلى مرحلة
الالتقاط
معلمة رسمية، وهي كائن يقوم بتغليف تفاصيل هذا الحدث
وعادة ما يتم تمثيل هذه المعلمة بواسطة كلمة الحدث أو الحرف e
oBox.onmousemove = function (e) { // الكائن e هو "كائن الحدث" لهذا الحدث}؛
السمات المرتبطة بالكائن،
، سمات موضع الماوس عند تشغيل هذا الحدث،
وصف | السمة |
---|---|
clientX | الإحداثيات الأفقية لمؤشر الماوس بالنسبة إلى عميل المتصفح |
Y | الماوس المؤشر نسبة إلى الإحداثي الرأسي |
لصفحة | المتصفحX الإحداثي الأفقي لمؤشر الماوس نسبة إلى صفحة الويب بأكملها |
Y | الإحداثي الرأسي لمؤشر الماوس نسبة إلى صفحة الويب بأكملها |
إزاحةX الإحداثي الأفقي لمؤشر الماوس نسبة إلى الحدث | |
عنصر | المصدر |
Y | الإحداثيات الرأسية لمؤشر الماوس بالنسبة إلى سمات عنصر مصدر الحدث |
عادةً ما يتم استخدام سمة e.charCode في حدث onkeypress لتمثيل "رمز الحرف" للحرف الذي أدخله المستخدم
رمز الحرف رقم 0 ~ الرقم 9 48 ~ 57 حرف كبير A ~ Z 65 ~ 90 حرف صغير a ~ z 97 ~ 122 عادةً
ما يتم استخدام سمة e.keyCode في أحداث onkeydown وonkeyup لتمثيل "رمز المفتاح" للمفتاح الذي تم الضغط عليه. من قبل المستخدم
رقم
رمز المفتاح 0 ~ الرقم 9 48 ~ 57 جزء من الأحرف الكبيرة والصغيرة a ~ z 65 ~ 90 أربعة مفاتيح اتجاه ← ↑ → ↓ 37، 38، 39، 40مفتاح الإدخال 13 مفتاح المسافة 32
منع الحدث الافتراضي
e. يتم استخدام طريقة .preventDefault() لمنع "الإجراء الافتراضي" الذي تم إنشاؤه بواسطة طريقة
e.stopPropagation() للحدث لمنع استمرار الأحداث في نشر
مشكلات أداء الاستماع إلى
أجهزة المراقبةاستهلاك عدد كبير جدًا من
وتفويض الأحداث
استهلاك الذاكرة (عندما يكون هناك عدد كبير من العناصر المتشابهة التي تحتاج إلى إضافتها على دفعات، يمكن أن يؤدي تفويض الحدث إلى تقليل الحمل الزائد للذاكرة). استخدم
آلية فقاعات الحدث لتفويض أحداث العناصر التابعة إلى ملاحظة للعناصر السلف
: لا يمكنك تفويض غير- أحداث فقاعية إلى عناصر السلف،
عند إضافة عقدة عنصر ديناميكي إلى الشجرة، يمكن استخدام تفويض الحدث لجعل العناصر المضافة حديثًا إلى الشجرة
لها | سمات |
---|---|
مرتبطة | باستماع |
الحدث
"عنصر مصدر الحدث" | |
currentTarget | العنصر الذي تم إرفاق معالج الحدث به (هذا) |
المؤقت
setInterval () استدعاء وظيفة بشكل متكرر، مع فاصل زمني ثابت بين كل استدعاء
setInterval(function () { // سيتم استدعاء هذه الوظيفة تلقائيًا عند فاصل زمني ثابت}، 2000)؛ // المعلمة الثانية هي الفاصل الزمني، بالمللي ثانية // يمكن أن تتلقى هذه الوظيفة المعلمات الثالثة والرابعة، وسيتم تمريرها بالترتيب أدخل الدالة setInterval(function (a, b) { // قيمة المعلمة الرسمية أ هي 88، وقيمة المعلمة الرسمية ب هي 66}, 2000, 88, 66); // بدءًا من المعلمة الثالثة، تمثل المعلمات التي تم تمريرها إلى الوظيفة // يمكن للوظائف المسماة يتم تمريرها أيضًا في setIntervalvar a = 0 function fun() {; console.log(++a);};setInterval(fun, 1000);
مسح المؤقت
يمكن لوظيفة ClearInterval() مسح المؤقت
// اضبط المؤقت واستخدم متغير المؤقت لتلقي المؤقت var timer = setInterval(function ( ) { }, 2000);// عند النقر فوق الزر، امسح المؤقت oBtn.onclick = function () { ClearInterval(timer); };يمكن لوظيفة
التأخير
setTimeout() تعيين تأخير عند انتهاء الوقت المحدد، سيتم تنفيذالوظيفة
مرة واحدة ولن يتم تنفيذها بشكل متكرر.
// سيتم تنفيذ هذه الوظيفة مرة واحدة بعد ثانيتين}, 2000); ClearTimeout(timer); // امسح التأخير
بشكل غير متزامن
: لن يمنع وحدة المعالجة المركزية من مواصلة تنفيذ العبارات الأخرى " سيتم تنفيذه. (رد الاتصال)
setInterval() و setTimeout() هما عبارة غير متزامنة
setTimeout(function () { console.log('A');}, 2000); // بيان غير متزامن console.log('B'); // البيان غير المتزامن لن يمنع التنفيذ الطبيعي للبرنامج // يؤدي تشغيل
وظيفة BA إلى اختناق
تنفيذ دالة مرة واحدة وأخيرًا، لا يُسمح بالتنفيذ الثاني إلا بعد أن تكون دورة التنفيذ أكبر من فترة التنفيذ المحددة
var lock = true function function التي تحتاج إلى الاختناق () {. // إذا كان القفل مغلقًا، فلن يتم تنفيذ if(!lock) return; // بيان الوظيفة الأساسية // Lock lock = false; // افتح القفل بعد العدد المحدد من المللي ثانية setTimeout(function () { قفل = صحيح؛ }, 2000);}
BOM (نموذج كائن المتصفح، نموذج كائن المتصفح) هي واجهة JS للتفاعل مع نافذة المتصفح.
كائن
النافذةهو النافذة التي يعمل فيها البرنامج النصي js الحالي، وتحتوي هذه النافذة على DOM البنية، خاصية .document هي كائن المستند،
في المتصفحات التي تحتوي على وظيفة علامة التبويب، تحتوي كل علامة تبويب على كائن نافذة خاص بها، أي أن علامات التبويب الموجودة في نفس النافذة لن تتشارك في كائن النافذة،
وستصبح المتغيرات العامة هي سمة النافذة
var a = 10; console.log(window.a == a); // true
هذا يعني أن ملفات js المتعددة تشترك في النطاق العام، أي أن ملفات js لا تحتوي على وظيفة عزل النطاق
بشكل عام الأساليب
مثل setInterval () وalert () والوظائف المضمنة الأخرى هي بشكل عام طرق النافذة،
والخصائص المتعلقة بحجم النافذة،
الخاصية | تعني | |
---|---|---|
الارتفاع الداخلي | ارتفاع منطقة محتوى نافذة المتصفح، بما في ذلك أشرطة التمرير الأفقية (إن وجدت) | |
متصفح | العرض الداخلي | window عرض منطقة المحتوى، بما في ذلك أشرطة التمرير العمودية (إن وجدت) |
ExternalHeight | الارتفاع الخارجي لنافذة المتصفح | |
ExternalWidth | العرض الخارجي لنافذة المتصفح |
للحصول على عرض النافذة بدون أشرطة التمرير، استخدم document.documentElement.clientWidth
حدث تغيير الحجم
في النافذة بعد تغيير الحجم، سيتم تشغيل حدث تغيير الحجم. يمكنك استخدام window.onresize أو window.addEventListener('resize') لربط معالج الحدث.
تمثل خاصية window.scrollYارتفاع التمرير
قيمة البكسل
document.documentElement الذي تم تمريره في الاتجاه الرأسي، تمثل الخاصية .scrollTop أيضًا ارتفاع تمرير النافذة
. ولتحسين التوافق مع المتصفح، عادةً ما تتم كتابة الاثنين معًا
varscrollTop = window.scrollY || document.documentElement.scrollTop; documentElement.scrollTop ليس للقراءة فقط، وwindow .scrollY هو
حدث تمرير للقراءة فقط.
بعد تمرير النافذة، سيتم تشغيل حدث التمرير. يمكنك استخدام window.onscroll أو window.addEventListener('scroll') إلى
ربطكائن Navigator
بوظيفة معالج الأحداث
.يمكن لخاصية window.navigator استرداد كائن navigator، الذي يحتوي على السمات ذات الصلة وسمات التعريف
لمتصفح | المستخدم |
---|---|
الاسم الرسمي | للمتصفح |
appVersion، | إصدار المتصفح |
userAgent، | وكيل المستخدم (يحتوي على معلومات kernel). معلومات الغلاف |
والتعبئة | ) |
كائن محفوظات
نظام التشغيل الخاص بمستخدم النظام الأساسييوفر كائن .history واجهة لتشغيل سجل جلسة المتصفح.
تتمثل العملية الشائعة في محاكاة زر الرجوع للمتصفح
History.back(); // يعادل النقر على زر الرجوع للمتصفح
History.Go
(
-1)
؛
= http: //www.baidu.com '؛
window.location
.
Window.location.reload
(
True
)
مضطر إلى التحميل من الخادم
؛
هذامن
العنصر
إلى عنصر السلف
.
مجموعة من "أزواج القيمة الرئيسية" ، والتي تمثل علاقةالتعيين
بين السمات والقيم.
الاسم: "شياو مينغ" ، العمر: 12 ، الجنس: "ذكر" ،الهوايات: ["كرة القدم
"
،
"البرمجة"}
؛
يجب
عليك استخدام قوسين مربع
للوصول.
ج: 1 ، ب: 2 ، C: 3} ؛ var key = 'b' ؛ console.log (obj.key
)
؛ A: 10} ؛ obj.b
=
40
؛
ج: 1 ، ب: 2} ؛
حذف
OBJ.A
؛ الاسم: "شياو مينغ" ، العمر: 12 ، الجنس: "ذكر" ، الهوايات: ["كرة القدم" ، "السباحة" ، "البرمجة"] ، "الكتاب المفضل": "Shuke and Beta" ، Sayhello: function () { console.log ('hello') ؛
}
}
؛
console.log ('قيمة' السمة ' + k +' ' + obj [k]) ؛}
استنساخ عميق للكائن
var obj1 = { ج: 1 ، ب: 2 ، ج: [33 ، 44 ، { م: 55 ، N: 66 ، P: [77 ، 88] }]} ؛ وظيفة deepclone (o) { if (array.isarray (o)) { var result = [] ؛ لـ (var i = 0 ؛ i <o.length ؛ i ++) { result.push (deepclone (o [i])) ؛ } } آخر إذا (typeof o == 'Object') { var result = {} ؛ لـ (var k in o) { النتيجة [k] = deepclone (o [k]) ؛ } } آخر { var result = o ؛ } Return ؛}
يمكن
استخدام
هذه الكلمة الرئيسية فيوظيفة
السياق
تسمى
الوظيفة
كائن
السياق | ذات |
الصلة | |
| |
| |
[下标]() | |
| |
| |
| |
---|
)
؛
ALERT (this.c + this.m This.e + B1 + B2) ؛} sum.Call (Xiaoming ، 5 ، 3) ؛ 3]
. / {} هذا يشير إلى هذا الكائن الفارغ this.a = 3 ؛ this.b = 5 ؛ // إضافة إرجاع تلقائيًا ؛} var obj = new fun () ؛ console.log (
OBJ
)
؛
this.name = name; this.age = age; this.sex = sex ؛} var xiaoming = new people ('小明' ، 12 ، 'male') ؛ var xiaoming = new people ('小红' ، 10 ، 'female') ؛ var xiaogang = new people ('小 小"العصابة" ،
وإضافة
وظيفة الطريقة (الاسم ، العمر ، الجنس) { this.name = name; this.age = age; this.Sex = الجنس ؛ this.sayhello = function () { console.log ('i am' + this.name) ؛ } ؛ var Xiaoming = أشخاص جدد ("Xiaoming" ، "ذكر"
)
؛ بشكل افتراضي ، يشير سمة المنشئ إلى الوظيفة
النموذج الأولي للمؤسس هو النموذج الأولي للمثال
بحث سلسلة النموذج الأولي
الوصولإلى
خصائص وطرق النموذج الأولي.
this.name = name; this.age = age; this.sex = sex ؛} people.protype.nation = 'China' ؛ (Xiaoming .nationality) ؛
HasownProperty ()
يمكن أن تحقق ما إذا كان الكائن "يمتلك" خاصية معينة أو طريقة
Xiaoming.HasownProperty ("الاسم") ؛ / / truexiaoming.hasownproperty ("
الجنسية
"
) / true'age 'في xiaoming // true'sex' في xiaoming // true'nationality 'في xiaoming // add true
add طرق على
عيوب النموذج الأولي لإضافة طرق مباشرة إلى الحالات: كل مثيل ووظيفة الطريقة لكل مثيل مختلفين من الذاكرة تسبب الوظائف في الطريقة مضيعة للذاكرة ، والتي يمكن حلها عن طريق كتابة الطريقة على النموذج الأولي.
وظيفة الأشخاص (الاسم والعمر والجنس) { this.name = name; this.age = age; this.sex = sex ؛} people.prototype.sayhello = function () { console.log ('i am' + this.name) ؛} ؛ var xiaoming = new People ('Xiaoming' ، 12 ، 'Male') ؛ xiaoming.sayhello ()
؛
سلسلة النموذج الأولي
يتم تنفيذالميراث
مما يتيح للنموذج الأولي للطالب نقطة إلى مثيل الفصل الأصل ، ثم إضافة طريقة الطالب إلى النموذج الأولي للطالب.
مشكلة الميراث من خلال سلسلة النموذج
.
عادة
ما تستخدم
. this.name = name; this.Sex = الجنس ؛ this.age = age; this.arr = [1 ، 2 ، 3] ؛} طالب الوظيفة (الاسم ، الجنس ، العمر ، المدرسة ، سيد) { people.call (هذا ، الاسم ، الجنس ، العمر) ؛ this.School = School '؛ هذا
تسمى الوراثة المسمى أيضًا
أن
الميراث المشترك هو أنه بغض النظر عن الظروف ، فإن المُنشئ الفائق
يرث النموذج الأولي
الكائن
. ، {// لا. المعلمتان هما كائن ، والسمات المراد إضافتها مكتوبة فيه d: {// قيمة السمة لا تزال قيمة كائن: 99 // القيمة هي 99 } // يمكنك إخفاء الخصائص بنفس الاسم على النموذج الأولي}) ؛
عندما لا تكون هناك حاجة إلى "إنفاق الكثير من الجهد" لإنشاء مُنشئ ، ولكنك تريد فقط أن يكون الكائن الجديد "مشابهًا للكائن الحالي ، يمكنك استخدام Object.create () ، والذي يسمى توافق
كائنالوراثة النموذجي
. create()
تنفذ
طريقة الكتابة الفريدة
كائن.) { // إنشاء وظيفة مُنشأة مؤقتة f () {} // دع النموذج الأولي لهذا المنشئ المؤقت يشير إلى O ، بحيث يكون الكائن الجديد الذي ينشئه ، __proto__ يشير إلى o f.prototype = o ؛ إرجاع F () جديد ؛}اكتب وظيفة مع
الميراث الطفيلي
، والتي يمكن أن "تعزيز الكائن". تعيين كائنات جديدة إلى الكائن الجديد
. var p = object.create (o) ؛ p.display = function () { console.log (111) ؛ } عائد P ؛}
العيوب:
يتم تقليل الكفاءة بسبب عدم القدرة على إعادة استخدام وظائف (لا تتم كتابة الأساليب على النموذج
الأولي
)
.
، supertype) { varotype = object.create (supertype.prototype) ؛ النوع الفرعي. النموذج = النموذج الأولي ؛ } // وظيفة فئة الوالدين الأشخاص (الاسم والجنس والعمر) { this.name = name; this.Sex = الجنس ؛ this.age = age; } people.prototype.sayhello = function () { console.log ("Hello") ؛ } people.prototype.sleep = function () { console.log ("النوم") ؛ } // طالب وظيفة الفئة الفرعية (الاسم ، الجنس ، العمر ، المدرسة ، سيد) { people.call (هذا ، الاسم ، الجنس ، العمر) ؛ this.school = المدرسة ؛ this.sid = sid ؛ } النمط الوراثي (الطالب ، الأشخاص) ؛ console.log ("exam") ؛ }; var xiaoming = student New ('Xiao Ming' ، 'Male' ، 12 ، 'School' ، 123456) ؛يتم استخدام
مشغل مثيل OF
للكشف عن "ما إذا كان الكائن هو مثيل لفئة معينة"
Xiaoming مثيل الطالب // الآلية الأساسية: تحقق مما إذا كانت سمة الطالب. النمط النمط على سلسلة النموذج الأولي لـ Xiaoming (كم عدد المستويات على ما يرام ، طالما إنه)
مُنشئ في جافا
سكريبت العديدمن
المُنشئين.
يتم تعريف جميع الطرق من هذا النوع في مُنشئه المدمج.
العلاقة بين المُنشئين المدمجون:
النمط المحدد هو نقطة النهاية لسلسلة النموذج الأولي لجميع الأشياء.
يمكن اعتبار أي وظيفة وظيفة "جديدة".
فئة Wrapper
الغرض من فئة Wrapper هو السماح لقيم النوع الأساسية بالحصول على طريقةMath
Math.Pow ()
.من النموذج الأولي لمركيبهم
Math.Sqrt () math.ceil () // roun up math.floor () // rout down Math.Round () // roun up math.max () // احسب القيمة القصوى لصفيف ARR var arr = [3 ، 6 ، 9 ، 2] ؛var max =
math.max.apply
(
null ، arr) ؛
2020-12-01 ')
طرق الأساليب الشائعة
وظائف | getDate |
---|---|
() | تحصل على التاريخ 1 ~ 31 |
getDay () | يحصل على الأسبوع 0 ~ 6 |
getMonth () | يحصل على الشهر |
0 | ~ |
11 | getlyarr |
(
) | |
احصل | على |
عدد | الثواني 0 ~ |
59
الطابع الزمني
عن طريق كتابة
تاريخ
جديد
(
(التعبير العادي) يصف غالبًا ما يتم استخدام "نمط البناء" للتحقق مما إذا كانت السلسلة تتوافق مع تنسيق محدد مسبقًا. قم بإنشاء تعبير منتظم
/内容/
بناء الجملةVar STR = '123456' ؛ var regxp = /^ d {6} $/؛ if (regxp.text (str)) { تنبيه ('يتوافق مع القواعد') ؛} آخر { التنبيه ("لا يفي بالقواعد") ؛}
var regxp2 = new regexp ('^\ d {6} $')
metacharacter
function | |
---|---|
d | يتطابق مع رقم |
d | |
يطابق | الأحرف |
غير | |
الرقمية | |
w | حرف |
واحد | ( |
الحرف | أو |
الرقم | السفلي |
من)
الرمز
إذا كان هناك أي معنى خاص ، يمكنك إضافة
قبل ذلك لضمان تعبيره عن الرمز نفسه
. أقواس
مربعة
^
-
| |
| |
| |
---|---|
w | [az-z0-9_] |
w | [^az-z0-9_] |
الكمي الكمي
* | يطابق | |
---|---|---|
التعبير | السابق 0 أو أكثر. ما يعادل {0 ،} | |
+ | يطابق التعبير السابق 1 أو أكثر. ما يعادل {1 ، | |
} | ؟ | ما يعادل {0،1} |
{n} | يطابق الحرف السابق بالضبط n times | |
{n ،} | يتطابق مع الحرف السابق على الأقل n times | |
{n ، m} | يتطابق مع الحرف السابق على الأقل n |
modifiers my times ،
وأيض
تسمى الأعلام،
يتم استخدامها لتنفيذ
عمليات | البحث |
---|---|
المتقدمة | باستخدام |
التعبيرات | العادية |
.
اختبار مقدمة( | ) |
يختبر | ما |
---|
إذا | كانت |
---|---|
السلسلة | تتطابق مع التعبير العادي وإرجاع |
عن القيمة المنطقية () | في السلسلة وفقًا للتعبير العادي وتُرجع مجموعة النتائج أو |
السلسلة الفارغة.
في | السلسلة |
وإرجاع فهرس الموضع في المباراة الأولى |
تجدها
، | |
تستخدم | سلسلة |
استبدالها | . |
// طريقة Search () ، مثل indexof () ، إرجاع الفهرس الأول الموجود ، أو -1 إذا كان لا يمكن العثور عليه. var result1 = str.search (/ d+/g) ؛ var result2 = str.search (/m/g) ؛ Console.log (النتيجة 1) ؛ console.log (النتيجة 2) ؛ // طريقة Match () تُرجع مجموعة العثور عليها. var result3 = str.match (/ d+/g) ؛ Console.log (النتيجة 3) ؛ // استبدال () ، استبدل var result4 = str.replace (/[az] +/g ، '*') ؛ ؛ // split () طريقة ، تقسيم السلسلة إلى صفيف var result5 = str.split (/ d+/g) ؛ console.log (النتيجة 5) ؛