مشاركة ملاحظات التعلم Javaweb (يجب القراءة)

الكاتب：Eve Cole وقت التحديث：2025-04-09 04:32:01

قائمة مخصصة

<dl> </dl>: يمثل نطاق القائمة

** من الداخل <dt> </dt>: المحتوى العلوي

** من الداخل <dd> </dd>: محتوى أقل

قائمة مرتبة

<ol> </ol>: نطاق القائمة المطلوبة

-نوع Attribute: اضبط طريقة الفرز ، 1 (افتراضي) ، أ ، أنا ،

** في علامة OL <li> محتوى محدد </li>

قائمة غير مرتبة

<ul> </ul>: نطاق القائمة غير المرتبة

-نوع التوطين: دائرة (دائرة جوفاء) ، قرص (دائرة صلبة افتراضية) ، مربع (مربع صلب)

** في علامة UL <li> محتوى محدد </li>

علامات الصورة

-attributes: SRC ، العرض ، الارتفاع ، البديل (النص المعروض على الصورة ، حرك الماوس إلى الصورة ، والبقاء لفترة من الوقت لعرض المحتوى أو النص المعروض عندما يتم عرض الصورة بشكل غير صحيح ، ولكن بعض المتصفحات لا تعرضها ، وليس هناك أي تأثير)

** <img src = "صفحة الصورة"/>

مقدمة للمسارات

*الفئة: فئتان

** المسار المطلق على سبيل المثال. http://www.baidu.com/b.jpg

*** ثلاثة مسارات نسبية لموقع ملف واحد بالنسبة إلى ملف آخر

-ملف HTML والصورة في نفس المسار (الدليل) ، ويمكن كتابة اسم الملف مباشرة

-في ملف HTML ، استخدم ملف A.JPG أسفل مجلد IMG تحت نفس المسار كما هو: IMG/A.JPG

** D: /htmlstudy/code/4.html

** D: /HtmlStudy/Code/img/a.jpg

-الصورة في الدليل العلوي لملف HTML. في هذا الوقت ، فإن طريقة استخدام الصورة: ../C.PNG ../ تمثل المسار العلوي

علامات الارتباط التشعبي

** موارد الارتباط

- <a href = "path to link to resource"> معروض على الصفحة </a>

** HREF: عنوان المورد المرتبط

** الهدف: تعيين طريقة الفتح ، الافتراضي هو فتح على الصفحة الحالية

-_ فارغ: يفتح في نافذة جديدة

--الذات: افتح الصفحة الافتراضية

-<a href = " #"> عنوان الارتباط </a>: عندما لا يحتاج الارتباط التشعبي إلى القفز إلى الصفحة ، فقط أضف # (العنصر النائب) إلى HREF

** موارد الموقع

-إذا كنت ترغب في تحديد موقع الموارد: تحديد موقع

-الظهير لهذا الموقع

<a href = "#top"> العودة إلى الأعلى </a>

-كعلامة الإخراج: <pre> المحتوى الذي يجب إدخاله as-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-i-i-i S-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS -is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is- IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS-IS

علامات الجدول

* الوظيفة: يمكن تنسيق البيانات لجعل عرض البيانات أكثر وضوحًا

*السمة الحدود (سمك خط الجدول) الحدود (لون خط الجدول) ارتفاع الخلايا (مسافة الخلية) ارتفاع عرض

*<table> </table>: يشير إلى نطاق الجدول

** في الجدول ، فهذا يعني سطر <tr> </r>

-حدد محاذاة المحاذاة: المركز الأيسر اليمين

*** في TR ، يشير إلى الخلية على صف <TD> </td>

** يمكن أن يمثل Th أيضًا الخلايا: يمكن أن تحقق التركيز والجرأة

*يتم وضع عنوان الجدول في الجدول <caption> </caption>

*مهارات التشغيل:

** احسب أولاً عدد الصفوف الموجودة ، وحساب عدد الخلايا الموجودة في كل صف

*دمج الخلايا

** Rowspan: الصف المتقاطع (دمج عمودي)

** كولسبان: العمود التبادلي (الاندماج الأفقي)

<td colspan = "3" align = "center"> تمارين النموذج </td>

علامات النموذج

*على سبيل المثال ، عند تسجيل Kaixin.com ، يمكنك إرسال البيانات إلى خادم Kaixin.com. يمكن تنفيذ هذه العملية باستخدام علامات النماذج.

* <Porm> </part>: تحديد نطاق النموذج

*ملكية:

** الإجراء: العنوان المقدم إلى ، التقديم الافتراضي إلى الصفحة الحالية

** الطريقة: طريقة تقديم النموذج

-هناك نوعان شائعان الاستخدام: Get and Post ، وهو طلب الحصول على الافتراضي

** الفرق بين GET و POST

1) سيحمل شريط عنوان GET طلب البيانات المقدمة ، ولن يحملها المنشور (البيانات في هيئة الطلب)

2) الحصول على مستوى أمان الطلب أقل والنشر أعلى

3) هناك حد لحجم بيانات طلب الحصول ، ولكن لا يوجد حد في المنشور

** enctype: هذه الخاصية غير مطلوبة للطلبات ، ويجب تعيين هذه الخاصية عند تحميل الملفات.

** عنصر الإدخال: الجزء الذي يمكن فيه إدخال المحتوى أو تحديده

- يمكن استخدام معظم عناصر الإدخال مع <إدخال نوع = "نوع عنصر الإدخال"/>

********** في عنصر الإدخال ، يجب أن يكون لديك سمة اسم

*** الإدخال العادي: <إدخال نوع = "النص"/>

*** عنصر إدخال كلمة المرور: <إدخال نوع = "كلمة المرور"/>

*** إدخال الاختيار الفردي: <إدخال نوع = "راديو"/>

-اسم التوطين مطلوب في الداخل

-يجب أن تكون قيمة السمة هي نفسها

- يجب أن يكون هناك قيمة قيمة

**** قم بتنفيذ الخصائص الافتراضية المحددة

*** محدد = "فحص"

*** تحقق من الإدخال: <إدخال نوع = "مربع الاختيار"/>

** اسم السمة مطلوب في الداخل

** يجب أن تكون قيمة سمة الاسم هي نفسها

** يجب أن يكون هناك قيمة قيمة

**** قم بتنفيذ الخصائص الافتراضية المحددة

---- checked = "فحص"

*** عنصر إدخال الملف: <إدخال type = "file"/>

*** عنصر الإدخال المنسول (ليس في علامة الإدخال)

<تحديد الاسم = "الولادة">

<value Option = "0"> الرجاء تحديد </Option>

</select>

**** قم بتنفيذ الخصائص الافتراضية المحددة

---- selected = "محدد"

*** حقل النص (مثل: املأ مربع لملف تعريف المعلومات الشخصية عند تسجيل حساب)

*** عنصر مخفي (لم يتم عرضه على الصفحة ، ولكن موجود في رمز HTML)

<نوع الإدخال = "مخفي"/>

*** إرسال زر

<نوع الإدخال = "إرسال"/>

-address قبل التقديم: c: /users/happydog/desktop/index.html

** عندما تتم كتابة سمة الاسم في عنصر الإدخال

--File: /// c: /users/happydog/desktop/index.html؟ phone = 123123 & pwd = 12321312 & sex = man & love = y & love = pp & birth = 1992 & Tex = 1231245

**؟ قيمة اسم عنصر الإدخال = قيمة الإدخال و

** تشبه المعلمات شكل القيمة الرئيسية

*** استخدم (انقر) الصور للإرسال

<إدخال نوع = "صورة" src = "مسار الصورة"/>

*** زر إعادة الضبط: ارجع إلى الحالة الأولية لعنصر الإدخال

<نوع الإدخال = "إعادة تعيين"/>

*** الأزرار العادية (تستخدم مع JS)

الحالة: استخدم علامات النماذج لتنفيذ صفحة التسجيل

عندما يكون محتوى خلية الجدول فارغة ، يتم ملء العناصر النائبة ((المساحات الهاربة)) بشكل عام.

استخدام العلامات الشائعة الأخرى في HTML

** B (BOLD) S (خط الإضراب) U (تسطير) I (مائل) قبل الإخراج كما هو) SUB (SUPERSCRIPT) SUP (SuperScript) Div (Line Writ) (عرض على سطر واحد) P (تسمية الفقرة)

استخدام علامة رأس HTML

** html جزأين يشكلان الرأس والجسم

** التسمية في الرأس هي علامة الرأس

** علامة العنوان: يشير إلى المحتوى المعروض على العلامة

** <TECA> العلامة: بعض المحتوى ذي الصلة لصفحة الإعداد

-<meta name = "الكلمات الرئيسية" content = "" />

-<meta http-equiv = "refresh" content = "10 ؛ url = test_form.html" /> السرعة إلى الصفحة المحددة بانتظام

** العلامة الأساسية: تعيين الإعدادات الأساسية للارتباطات التشعبية

-يمكن تعيين طريقة فتح الارتباط التشعبي بشكل موحد <base target = "_ فارغة" />

** علامة الارتباط: تقديم الملفات الخارجية

استخدام علامات الإطار

** <الإطارات>

** الصفوف: قسمة على صف

<الإطارات صفوف = "80 ،*"> اقسم إلى جزأين ، أعلى 80 ، أسفل 80

** كولز: قسمة على العمود

<الإطارات cols = "80 ،*"> اقسم إلى جزأين ، يسارًا ويمينًا في 80 عامًا ، أي واحد على اليسار واليمين في أي وقت

** <الإطار> الصفحة المحددة المعروضة

** <frame name = "lower_left" src = "b.html">

*عند استخدام علامات الإطار ، لا يمكن كتابتها في الرأس والجسم. إذا تم استخدام علامة الإطار ، فيجب إزالة الجسم وكتابته خارج الرأس.

*إذا كان الارتباط التشعبي على الصفحة على اليسار ويريد عرض المحتوى على الصفحة على اليمين ، فيمكنك تعيين الخاصية الهدف في الارتباط التشعبي وتعيين قيمة الهدف على الاسم في الإطار.

** <a href = "http://www.baidu.com" target = "right"> baidu </a> <br/>

<الإطارات صفوف = "80 ،*">

<الإطارات cols = "120 ،*">

</frameet>

ملخص المعرفة

1) فكرة تشغيل HTML: استخدم العلامات للف البيانات المراد تشغيلها ، وتغيير نمط البيانات في العلامة عن طريق تعديل قيمة السمة للعلامة.

2) سمة علامة الخط: نطاق قيمة الحجم 1-7 اللون: رقم سداسي عشري #FFFFFF

3) علامة العنوان <h1> </h1> ...... <h6> </h6>: من H1 إلى H6 ، يصبح الخط أصغر وأصغر ، ويتم تغيير الخط تلقائيًا تلقائيًا

4) التعليقات

مقدمة إلى CSS

** CSS: ورقة نمط متتالية

** طبقة: طبقة تلو الأخرى

** ورقة الأنماط: العديد من السمات وقيم السمات

** اجعل الصفحة عرضة أفضل

** يفصل CSS محتوى صفحة الويب ونمط العرض ، وتحسين وظيفة العرض

كيفية الجمع بين CSS و HTML (أربع طرق للجمع)

1) يوجد نمط خاصية على كل علامة HTML ، يجمع بين CSS و HTML معًا

-<div style = "خلفية اللون: أحمر ؛ اللون: أخضر ؛" id = ""> طريق السماء يقلل من الفائض ويعوض النقص. لذلك ، فإن الفراغ يهزم الحقيقي ، والتغلب على الفائض. </div>

2) استخدم علامة HTML لتنفيذ علامة <style> واكتبها في الرأس

- <type type = "text/css">

رمز CSS ؛

</style>

--- تنفيذ الكود <head>

ديف {

لون الخلفية: الأزرق.

اللون: أحمر.

}

</style>

</head>

<body>

طريقة السماء تقلل من الفائض ويعوض النقص. لذلك ، فإن الفراغ يتغلب على الحقيقي ، والافتقار إلى النقص يتغلب على الفائض.

</div>

</body>

3) استخدم العبارات في علامة النمط

url import (مسار ملف CSS) ؛

- الخطوة 1: إنشاء ملف CSS

--- <type type = "text/css">

IMPORT url (div.css) ؛

</style>

4) استخدم رابط علامة الرأس لتقديم ملف CSS الخارجي ووضعه في <head> </head>

- الخطوة 1: إنشاء ملف CSS

- <link rel = "stylesheet" type = "text/css" href = "path of css file"/>

**** عيب طريقة المجموعة الثالثة: لا يعمل في بعض المتصفحات ، والطريقة الرابعة تستخدم عمومًا

**** الأولوية (عام)

من أعلى إلى أسفل ، من الداخل إلى الخارج ، من الأولوية من منخفضة إلى عالية.

أولوية ما بعد التحميل مرتفع

**** التنسيق: اسم المحدد {اسم السمة: قيمة السمة ؛ اسم السمة: قيمة السمة ؛ ......}

المحددات الأساسية لـ CSS (ثلاثة أنواع)

** قم بتشغيل البيانات في تلك العلامة

1) Tag Selector Div {CSS Code}

-استخدم اسم التسمية كاسم المحدد

<head>

ديف {

لون الخلفية: الأزرق.

اللون: أحمر.

}

</style>

</head>

<body>

<viv> aaaaa </viv>

</body>

2) محدد الفئة. اسم {}

** كل علامة HTML لديها فئة خاصية

** <head>

Div.Test {

لون الخلفية: الأزرق.

اللون: أحمر.

}

P.Test {

لون الخلفية: الأزرق.

اللون: أحمر.

}

يمكن اختصارها على النحو التالي:

.امتحان{

لون الخلفية: الأزرق.

اللون: أحمر.

}

</style>

</head>

** <Body>

<viv> aaaaa </viv>

<p> bbbbbbbbbb </p>

</body>

3) محدد المعرف #NAME {}

** لكل علامة HTML معرف السمة

-<div id = "test"> cccccccccccc </div>

-<head>

Div#Test {

لون الخلفية: الأزرق.

اللون: أحمر.

}

P#اختبار {

لون الخلفية: الأزرق.

اللون: أحمر.

}

يمكن اختصارها على النحو التالي:

#امتحان {

لون الخلفية: الأزرق.

اللون: أحمر.

}

</style>

</head>

-<body>

<div id = "test"> aaaaa </iv>

<p id = "test"> bbbbbbbbbb </p>

</body>

** نمط الأولوية> محدد المعرف> محدد الفئة> محدد العلامة

محدد تمديد CSS (تعلم)

1) إعدادات الأنماط للعلامات المتداخلة لمحددات الجمعيات

** <Div> <p> wwwwwwww </p> </viv>

** اضبط نمط العلامة P في علامة DIV وأسلوب العلامة المتداخلة

-<head>

Div P {

لون الخلفية: الأزرق.

اللون: أحمر.

}

</style>

</head>

-<body>

<viv> <p> wwwwwwwww </p> </viv>

<p> aaaaa </p>

</body>

2) الجمع بين المحددات ، قم بتعيين العلامات المختلفة على نفس النمط

** <Div> 1111 </viv>

** قم بتعيين علامات Div و P على نفس النمط ، وقم بتعيين علامات مختلفة على نفس النمط

-<head>

Div ، P {

لون الخلفية: الأزرق.

اللون: أحمر.

}

</style>

</head>

-<body>

</body>

3) محدد العناصر الزائفة (الفئة)

** يوفر CSS بعض الأنماط المحددة جيدًا ، والتي يمكن استخدامها

** على سبيل المثال ، الارتباط التشعبي

** حالة الارتباطات التشعبية

-بعد النقر والنقر على الحالة الأصلية

: الرابط: Hover: نشط: زار

تنفيذ الكود:

<head>

/*الحالة الأصلية*/

ج: الرابط {

لون الخلفية: أحمر.

}

/*حالة هووم*/

ج: تحوم {

خلفية اللون: الأخضر.

}

/*انقر فوق الحالة*/

ج: نشط {

لون الخلفية: الأزرق.

}

/*الحالة بعد النقر*/

ج: زار {

لون الخلفية: رمادي.

}

</style>

</head>

<body>

<a href = "http://www.baidu.com"> انقر على الرابط إلى صفحة الويب Baidu </a>

</body>

نموذج مربع CSS (فهم) للعمل على البيانات ، تحتاج إلى وضع البيانات في منطقة (div)

1) الحدود الحدودية: الإعدادات الموحدة

يمكنك أيضًا ضبطه بشكل منفصل: أعلى الحدود العلوية: القاع الحدودي اليسار: اليمين الحدودي: اليمين الحدودي

-<head>

ديف {

العرض: 200 بكسل ؛

الارتفاع: 100px ؛

الحدود: 2 بكسل الأزرق الصلب.

}

#div12 {

اليمين الحدودي: 2 بكسل متقطع صفراء.

}

</style>

</head>

-<body>

<div id = "div11"> aaaaaaaaaa </div>

<div id = "div12"> bbbbbbbbb </div>

</body>

2) حشوة الهامش الداخلي: اضبط المسافة بين المحتوى من الجوانب العلوية والسفلية واليسار واليمين

يمكنك أيضًا ضبطه بشكل منفصل: لأعلى ، لأسفل ، يسارًا ويمينًا

<head>

ديف {

العرض: 200 بكسل ؛

الارتفاع: 100px ؛

الحدود: 2 بكسل الأزرق الصلب.

}

#div21 {

الحشو: 20 بكسل ؛

}

#div22 {

حشو اليسار: 30 بكسل ؛

}

</style>

</head>

<body>

<div id = "div21"> aaaaaaaaaa </viv>

<div id = "div22"> bbbbbbbbb </div>

</body>

3) الهامش: اضبط المسافة بين Div من الأطراف الأربعة الخارجية

يمكنك أيضًا ضبطه بشكل منفصل: لأعلى ، لأسفل ، يسارًا ويمينًا. . .

تصميم CSS تعويم (فهم) تعويم: اليسار يمين

وضع تخطيط CSS (فهم)

*موضع

** قيمة السمة:

-ثابت: القيمة الافتراضية ، لا يوجد تحديد موقع خاص

-absolute:

اسحب الكائن من دفق المستند واستخدم الخصائص اليسرى واليمين والأعلى والأسفل وغيرها من الخصائص لتحديد موقعه تمامًا

-التردد: لن يتم سحب الكائن من دفق المستند. لا يمكن تكديس الكائن ، ولكن سيتم تعويضه في دفق المستند العادي بناءً على خصائص مثل اليسار ، اليمين ، الأعلى ، القاع ، إلخ.

الحالة: صورة مختلطة ونص

** يتم عرض الصور والنصوص معًا

الحالة: توقيع الصورة

مقدمة إلى JavaScript: إنها لغة برمجة تعتمد على الكائنات ، تستخدم بشكل أساسي في العميل

*قائمة على الكائن: يتم توفير العديد من الكائنات ، يمكنك استخدامها مباشرة

* يحركه الحدث: HTML يجعل موقع الويب ثابتًا ، تأثيرات ديناميكية JavaScript

*العميل: على وجه التحديد يشير إلى المتصفح

* ميزات JS:

1) التفاعل الديناميكي للمعلومات التفاعلية

2) لا يمكن لـ Security JS الوصول إلى الملفات على القرص المحلي

3) جافا منصة ، الأجهزة الظاهرية ؛ طالما أن المتصفحات التي يمكن أن تدعم JS ، يمكنها الركض

*الفرق بين JavaScript و Java: لا توجد علاقة بين الاثنين

1) Java هي شركة Sun Company ، الآن Oracle ؛ JS هي شركة Netscape

2) جافا موجهة نحو الكائن ، و JS تعتمد على الكائن

3) Java هي لغة مكتوبة بقوة ، و JS هي لغة مكتوبة بشكل ضعيف

-على سبيل المثال: int i = "10" في Java ؛ سوف يبلغ عن خطأ

-js: var i = 10 ؛ var i = "10" ؛ لم يتم الإبلاغ عن أي أخطاء

4) يجب تحليل JS فقط لتنفيذها ، بينما يجب تجميع Java في ملف Bytecode أولاً ، ثم تنفذه

*تكوين JS (ثلاثة أجزاء):

1) ECMASCRIPT

- ECMA: جمعية الكمبيوتر الأوروبية

-بناء الجملة js والبيانات التي نظمها ECMA ...

2) بوم

-نموذج كائن Broswer: نموذج كائن المتصفح

3) دوم

-نموذج كائن الوثيقة: نموذج كائن المستند

كيفية الجمع بين JS و HTML (نوعان)

1) استخدم علامة <script type = "Text/JavaScript"> JS Code ؛ </script>

2) استخدم علامات البرنامج النصي لتقديم ملف JS خارجي

- إنشاء ملف JS واكتب رمز JS

- <script type = "text/javaScript" src = "js path"> </script>

ملاحظة: عند استخدام الطريقة الثانية ، لا تكتب رمز JS في علامة البرنامج النصي ، ولن يتم تنفيذه.

أنواع JS البدائية وإعلان المتغيرات

*نوع البيانات الأساسي من جافا: بايت قصير int طويل الطويل تعويم مزدوج BOLEAN

*JS يحدد المتغيرات مع الكلمات الرئيسية var

*نوع JS الأصلي (خمسة)

-سلسلة سلسلة var str = "ABC" ؛

-رقم number type var m = 123 ؛

-Boolean True and False var flag = true ؛

-null var date = new date () ؛

** احصل على الإشارة إلى الكائن. NULL تعني أن مرجع الكائن فارغ ، وجميع الإشارات إلى الكائن هي أيضًا كائن.

-يحدد المحدد متغيرًا ، لكنه لا يعين var aa ؛

* typeof (اسم متغير) عرض نوع البيانات للمتغير الحالي

بيان JS

** البيان إذا كان الحكم في Java ("=" يعني التعيين ؛ "==" يساوي ، يعني الحكم) بيان حلقة التبديل (من أجل القيام به)

** بيانات JS

-إذا كان بيان الحكم

-التبديل (أ) {

الحالة 5: ...

استراحة؛

الحالة 6: ...

استراحة؛

تقصير:...

...........

}

** بيان الحلقة أثناء التنفيذ

-var i = 5 ؛

بينما (i> 0) {

تنبيه (ط) ؛

أنا--؛

}

-for (var i = 0 ؛ i <= 5 ؛ i ++) {

تنبيه (ط) ؛

}

مشغل JS

** JS لا يميز بين الأعداد الصحيحة والعشرية

-var j = 123 ؛

تنبيه (J/1000*1000) ؛

** J/1000*1000 النتيجة في Java هي 0

** في JS ، لا يوجد أي تمييز بين الأعداد الصحيحة والعشرية ، 123/1000*1000 = 0.123*1000 = 123

** أضف وطرح عمليات السلسلة

-Var Str = "123" ؛

تنبيه (str + 1) ؛ النتيجة في Java و JS هي 1231 ، وهو اتصال سلسلة

تنبيه (str - 1) ؛ عند طرحها ، قم بإجراء عملية الطرح. إذا لم يكن STR رقمًا ، فسوف يطالب NAN: فهذا يعني أنه ليس رقمًا

** يمكن أيضًا تشغيل نوع Bolean

*** إذا تم ضبطه على صحيح ، فهذا يعادل 1 ؛ إذا تم ضبطه على خطأ ، فهو يعادل 0 ؛

** == و === الفرق

** الأمر كله يتعلق بإصدار الأحكام

** == المقارنة هي فقط القيمة ؛ === المقارنة هي القيمة والنوع

** الجمل التي يتم إخراجها مباشرة إلى الصفحة (يمكن عرض المحتوى على الصفحة) إخراج متغيرات وقيم ثابتة ورمز HTML إلى الصفحة. يحتوي document.write ("") على علامات اقتباس مزدوجة ، وإذا قمت بتعيين سمات الملصق ، فأنت بحاجة إلى استخدام علامات اقتباس واحدة.

- document.write ("aaaa") ؛

- document.write ("<hr/>") ؛

*** document.write ("<table border = '1' borderColor = 'Red'>") ؛

*** document.write ("</table>") ؛

التمرين: تنفيذ جدول 99 الضرب

صفيف JS

*تعريف الصفيف في java int [] arr = {1،2،3} ؛

*طريقة تعريف صفيف JS (ثلاثة أنواع)

1) var arr = [1،2،3] ؛ var arr = [1 ، "2" ، 3] ؛ var arr = [1،2 ، true] ؛

2) استخدام كائن صفيف الكائن المدمج

var arr1 = صفيف جديد (5) ؛ // تحديد صفيف ، طول الصفيف هو 5

ARR1 [0] = "1" ؛

......

3) استخدام كائن صفيف الكائن المدمج

var arr2 = صفيف جديد (3،4،5) ؛ // تحديد صفيف ، والعناصر في الصفيف هي 3،4،5

* هناك طول خاصية في المصفوفة: احصل على طول الصفيف

* طول الصفيف متغير ، ويمكن للمصفوفة تخزين بيانات أنواع البيانات المختلفة.

وظيفة JS (الطريقة)

** تحديد الوظائف (الأساليب) في JS. هناك ثلاث طرق لتحديد الوظائف. في قائمة المعلمات للوظائف ، لا تحتاج إلى كتابة VAR ، فقط اكتب اسم المعلمة.

1) استخدم وظيفة الكلمات الرئيسية

*** اسم طريقة الوظيفة (قائمة المعلمة) {

طريقة الجسم

قيمة الإرجاع اختيارية (اعتمادًا على الاحتياجات الفعلية) ؛

}

تنفيذ الكود: // إنشاء وظيفة باستخدام الطريقة الأولى

اختبار الوظيفة () {

تنبيه ("QQQQQQ") ؛

}

// طريقة الاتصال

امتحان()؛

// تحديد طريقة مع المعلمات لتنفيذ إضافة رقمين

وظيفة add1 (a ، b) {

var sum = a+b ؛

تنبيه (مجموع) ؛

}

add1 (3،5) ؛

وظيفة add2 (a ، b ، c) {

var sum1 = a+b+c ؛

إرجاع sum1 ؛

}

تنبيه (add2 (7،8،9)) ؛

2) وظائف مجهولة

var add = function (قائمة المعلمة) {

طريقة الجسم وقيمة الإرجاع ؛

}

تنفيذ الكود: var add3 = function (m ، n) {

تنبيه (M+N) ؛

}

// طريقة الاتصال

add3 (8،9) ؛

3) يسمى بشكل عام وظيفة ديناميكية. إذا كنت تستخدمه أقل ، فقط افهمه.

*استخدم وظيفة كائن مدمجة في JS

var add = وظيفة جديدة ("قائمة المعلمة" ، "طريقة الجسم وقيمة الإرجاع") ؛

var add4 = وظيفة جديدة ("x ، y" ، "var sum ؛ sum = x+y ؛ sum ؛") ؛

تنبيه (add4 (9،10)) ؛

// أو الرمز التالي

var canshu = "x ، y" ؛

var fangfati = "var sum ؛ sum = x+y ؛ return sum ؛" ؛

var add4 = وظيفة جديدة (canshu ، fangfati) ؛

تنبيه (add4 (5،3)) ؛

المتغيرات العالمية والمحلية من JS

** المتغير العالمي: تحديد متغير في علامة البرنامج النصي ، والذي يمكن استخدامه في جزء JS من الصفحة

-استخدم خارج الطريقة ، داخل الطريقة ، استخدم في علامة نصية أخرى

** المتغير المحلي: تحديد متغير داخل طريقة ، ولا يمكن استخدامه إلا داخل الطريقة.

-لا يمكن استخدامها إلا داخل الطريقة. إذا تم استدعاء هذا المتغير خارج الطريقة ، فسيتم عرض خطأ

-يأتي مع أداة تصحيح الأخطاء. في إصدار IE8 أو أعلى ، F12 على لوحة المفاتيح ، ويظهر شريط في أسفل الصفحة لرؤية الخطأ عند النظر إلى وحدة التحكم.

أين يجب وضع علامات البرنامج النصي

** يوصى بوضع علامات البرنامج النصي وراء </body>

** إذا كان هناك شرط الآن:

-في JS ، تحتاج إلى الحصول على القيمة في الإدخال. إذا وضعت علامة البرنامج النصي في الرأس ، فستكون هناك مشاكل

-يتم تحليل تحليل HTML من أعلى إلى أسفل. يتم وضع علامة البرنامج النصي في الرأس وتأخذ قيمة الإدخال مباشرة. نظرًا لأن الصفحة لم يتم تحليلها بعد إلى خط الإدخال ، فمن المؤكد أنها لن تكون قادرة على الحصول عليها.

JS Overloading JS ليس لديه زيادة في التحميل ، ولكن يمكن محاكاة وتنفيذ.

مثال: وظيفة إضافة 11 (أ ، ب) {

إرجاع A+B ؛

}

وظيفة ADD11 (A ، B ، C) {

إرجاع A+B+C ؛

}

وظيفة ADD11 (A ، B ، C ، D) {

إرجاع A+B+C+D ؛

}

تنبيه (add11 (2،2)) ؛ // نان

تنبيه (add11 (2،2،3)) ؛ // نان

تنبيه (add11 (2،2،4،5)) ؛ // 13

كائن سلسلة JS

** إنشاء كائن سلسلة var str = "abc '؛

** الأساليب والخصائص (وثيقة)

-الطول: طول السلسلة

--طريقة

1) الطرق المتعلقة بـ HTML

- BOLD (): Bold fontcolor (): اضبط لون الخطوط الخطية (): اضبط حجم ارتباط الخط (): عرض السلسلة كارتباط تشعبي

2) طرق مماثلة لجافا

---Concat (): قم بتوصيل السلسلة charat (): إرجاع سلسلة indexof (): إرجاع موضع السلسلة من STRING SPLIT (): شريحة السلسلة إلى صفيف استبدال ("" ، ""): استبدال المعلمتين-المعلمة الأولى: المعلمة الأولى هي الحرف الأصلي ، والمعلمة الثانية هي الحرف التي يتم استبدالها بـ Senttr (5،3). ابدأ من البت الخامس واعتراض ثلاثة أحرف فرعية للخلف (3،5) ابدأ من الجزء الثالث ، بما في ذلك الجزء الثالث إلى نهاية البت الخامس ، باستثناء البت الخامس [3،5)

كائن صفيف لـ JS

** ثلاث طرق لإنشاء صفيف

1) var arr1 = [1،2،3] ؛

2) var arr1 = صفيف جديد (3) ؛ // الطول ثلاثة

3) var arr1 = صفيف جديد (1،2،3) ؛ // العنصر 1،2،3

var arr = [] ؛ // إنشاء صفيف فارغ

** طول السمة: عرض طول الصفيف

**طريقة

concat () ؛ ينضم()؛ تقسيم المصفوفة وفقا للشخصيات المحددة push () ؛ أضف عناصر إلى نهاية الصفيف ، وإعادة الطول الجديد للمصفوفة ** إذا كانت الصفيف المضافة عبارة عن صفيف ، فأضف الصفيف كسلسلة كاملة () ؛ حذف وإرجاع العنصر الأخير من الصفيف العكسي () ؛ عكس ترتيب العناصر في الصفيف

كائن تاريخ JS

** احصل على الوقت الحالي في جافا

تاريخ تاريخ = تاريخ جديد () ؛

// format // tolocalestring ()

** احصل على الوقت الحالي في JS

var date = new date () ؛

// تحويل إلى تاريخ التنسيق المعتاد. tolocalestring () ؛

كائن الرياضيات تشغيل الرياضيات من JS

** كل ما في الداخل طرق ثابتة ، يمكنك استخدام الرياضيات. الطريقة () مباشرة عند استخدامه ؛

الوظائف العالمية لـ JS

** لأنه لا ينتمي إلى أي كائن ، اكتب الاسم مباشرة لاستخدامه

** eval () ؛ تنفيذ رمز JS (إذا كانت السلسلة رمز JS ، استخدم الطريقة لتنفيذها مباشرة)

- var str = "Alert ('1234') ؛" ؛

// ALERT (STR) ؛ // ALERT ('1234') ؛

eval (str) ؛ // 1234

** .....

التحميل الزائد لوظائف JS ما هو التحميل الزائد؟ اسم الطريقة هو نفسه ، والمعلمات مختلفة

*JS ليس لديه زيادة في الوظائف ، وسيتم استدعاء الطريقة الأخيرة فقط ، ولكن يمكن محاكاة الحمل الزائد بطرق أخرى. تقوم وظيفة JS بحفظ المعلمات التي تم تمريرها في صفيف الوسائط. يمكنك استخدام الحكم على طول مجموعة الوسائط لإرجاع نتائج المعالجة المختلفة وفقًا لذلك.

محاكاة تنفيذ رمز تأثير إعادة التحميل:

وظيفة add1 () {

if (الحجج. length == 2) {

عودة وسيطات [0] + وسيطات [1] ؛

} آخر إذا (الحجج. length == 3) {

عودة وسيطات [0] + وسيطات [1] + وسيطات [2] ؛

} آخر إذا (الحجج. length == 4) {

إرجاع وسيطات [0] + الوسيطات [1] + وسيطات [2] + وسيطات [3] ؛

} آخر {

العودة 0 ؛

}

// يتصل

تنبيه (add1 (1،2)) ؛ // 3

تنبيه (add1 (1،2،3)) ؛ // 6

تنبيه (add1 (1،2،3،4)) ؛ // 10

تنبيه (add1 (1،2،3،4،5)) ؛ // 0

كائن JS BOM

** BOM: نموذج كائن Broswer: نموذج كائن المتصفح

** ما هي الأشياء؟

- Navigator: احصل على معلومات العميل (معلومات المتصفح)

- الشاشة: الحصول على معلومات الشاشة

- الموقع: عنوان عنوان URL المطلوب

*** السمة HREF

1) احصل على عنوان عنوان URL المطلوب

-document.write (location.href) ؛

2) تعيين عنوان عنوان URL

-يتم وضع زر على الصفحة ، ويرتبط الحدث بالزر. عند النقر فوق هذا الزر ، يمكن للصفحة القفز إلى صفحة أخرى

<body>

وظيفة HREF1 () {

// ALERT ("AAAA") ؛

location.href = "http://www.baidu.com" ؛

}

</script>

</body>

- التاريخ: تاريخ عنوان URL المطلوب

- قم بإنشاء ثلاث صفحات (محاكاة تأثير التاريخ لأعلى ولأسفل)

1) إنشاء صفحة

2) إنشاء ارتباط تشعبي B.HTML إلى C.HTML

3) إنشاء C.HTML

- إلى الصفحة السابقة التي تمت زيارتها

History.Back () ؛

التاريخ ، اذهب (-1) ؛

- انتقل إلى الصفحة التالية التي زرتها

History.Forward () ؛

History.go (1) ؛

-نافذة (مفتاح إتقان) كائن المستوى الأعلى لكائن النافذة (يتم تشغيل جميع كائنات BOM في النافذة)

**طريقة

- window.alert () ؛ الاختصار هو: Alert () ؛ تنبثق نافذة على الصفحة لعرض المحتوى

- تأكيد ("إظهار محتوى الرسالة") ؛ يحتوي مربع موجه التأكيد على قيمة الإرجاع الصحيحة والخطأ

-- اِسْتَدْعَى()؛ مربع حوار الإدخال (لا يتم استخدام الكثير الآن) ، له معلمتان: محتوى العرض والقيمة الافتراضية

- افتح ("عنوان url" ، "" ، "ميزات النوافذ ، مثل عرض النوافذ والارتفاع") ؛ افتح نافذة جديدة

-- يغلق()؛ إغلاق النافذة (توافق المتصفح ضعيف نسبيًا)

- اصنع بعض الموقتات

*** SetInterval ("JS Code" ، milliseconds) ؛ window.setInterval ("Alert ('123') ؛" ، 3000) ؛ يشير إلى أن طريقة التنبيه يتم تنفيذها كل ثلاث ثوانٍ

*** setTimeout ("JS Code" ، milliseconds) ؛ يعني أنه يتم تنفيذه بعد مللي ثانية ، ولكن سيتم تنفيذها مرة واحدة فقط.

*** ClearInterval () ؛ امسح المؤقت الذي تم تعيينه بواسطة SetInterval

- var id1 = setInterval ("Alert ('123') ؛" ، 3000) ؛

ClearInterval (ID1) ؛

*** cleartimeout () ؛ امسح الموقت settimeout

كائن JS DOM

** DOM: نموذج كائن المستند: نوع كائن المستند

** المستند: مستند النص التشعبي (مستند النص التشعبي) HTML ، XML

** الكائن: خصائص وأساليب متوفرة

** النموذج: استخدم الخصائص والأساليب لمعالجة المستندات المصنوعة من النص التشعبي

*** يمكنك استخدام الكائنات المقدمة في DOM في JS ، واستخدام خصائص وطرق هذه الكائنات للعمل على مستندات الترميز.

*** للعمل على مستند معلم ، يجب أولاً تغليف جميع المحتويات في المستند الموسومة في كائنات

- تحتاج إلى تغليف العلامات والسمات ومحتوى النص في HTML في كائنات

*** للعمل على مستندات العلامة ، وثائق علامة التحليل

*** عملية التحليل: وفقًا للبنية الهرمية لـ HTML ، سيتم تخصيص بنية شجرة في الذاكرة ، ويجب تغليف كل جزء من HTML في كائن

*عقدة جذر واحدة فقط

يمكن أن يكون هناك العديد من العقد الفرعية تحت عقدة الجذر. تسمى العقد بدون العقد الفرعية العقد الورقية

- كائن المستند: مستند HTML بأكمله

- كائن العنصر: كائن العلامة

- كائن السمة

- كائن نص

** كائن العقدة: هل الكائن الأصل لهذه الكائنات

DHTML: إنه اختصار للعديد من التقنيات

** HTML: تغليف البيانات

** CSS: استخدم السمات وقيم السمة للأناقة

** DOM: تشغيل مستندات HTML (مستندات ملحوظة)

** JavaScript: يشير بالتحديد إلى بيان بناء الجملة لـ JS (ECMASCRIPT)

يمثل كائن المستند المستند بأكمله

** الطرق المشتركة

- كتابة () الطريقة: 1) متغيرات الإخراج إلى الصفحة 2) إخراج رمز HTML إلى الصفحة

- getElementByid () ؛ تعني الحصول على عنصر (تسمية) من خلال المعرف

<body>

// استخدم getElementByid للحصول على كائن علامة الإدخال

var input1 = document.getElementById ("nameId") ؛

// احصل على قيمة القيمة في الإدخال

تنبيه (input1.value) ؛

// اضبط قيمة في الإدخال

input1.value = "bbbbbbbbb" ؛

</script>

</body>

- getElementSbyName () ؛ سمة اسم العلامة تستحق العلامة ، والعودة هي مجموعة (صفيف)

<body>

var input1 = document.getElementSbyName ("name1") ؛ // المعلمة التي تم تمريرها هي قيمة الاسم في الملصق

لـ (var i = 0 ؛ i <input1.length ؛ i ++) {// من خلال اجتياز ، احصل على القيمة المحددة في كل علامة

var inports = input1 [i] ؛ // كل حلقة تحصل على كائن الإدخال وتعيين القيمة إلى المدخلات

تنبيه (المدخلات. القيمة) ؛ // احصل على قيمة القيمة في كل علامة إدخال

}

</script>

</body>

- getElementsByTagName ("اسم العلامة") ؛ إرجاع مجموعة (صفيف)

<body>

var inputs1 = document.getElementSbyTagName ("input") ؛ // المعلمة التي تم تمريرها هي اسم العلامة

لـ (var i = 0 ؛ i <inputs1.length ؛ i ++) {

var input1 = inputs1 [i] ؛

تنبيه (input1.value) ؛

}

</script>

</body>

**** ملاحظة: هناك تسمية واحدة فقط ، ويمكن الحصول على هذه التسمية فقط باستخدام الاسم. في هذا الوقت ، يعيد استخدام GetElementSbyName صفيفًا ، ولكن يوجد الآن عنصر واحد فقط. في هذا الوقت ، ليست هناك حاجة إلى اجتياز ، ولكن يمكنك الحصول على القيمة مباشرة من خلال مجموعة المصفوفة.

<إدخال type = "text" name = "name1" value = "aaaaa"/>

var input1 = document.getElementSbyName ("name1") [0] ؛

تنبيه (input1.value) ؛

الحالة: حالة نافذة منبثقة

** عملية التنفيذ: 1) تحتاج إلى إنشاء صفحة: عنصرين إدخال وزر ، وهناك حدث على الزر ، وهو نافذة جديدة منبثقة

2) إنشاء صفحة منبثقة: يحتوي كل صف من الجدول على زر ورقم واسم ؛ يوجد حدث على الزر: قم بتعيين الرقم الحالي والاسم إلى الموضع المقابل للصفحة الأولى.

** فتحات التشغيل عبر الصفحة: يمكنك الحصول على النافذة التي تنشئ هذه النافذة ، أي يمكنك الحصول على النافذة الأصل

الحالة: أضف عقدة في النهاية

1) إنشاء علامة LI

2) إنشاء نص

3) أضف النص إلى لي

4) أضف لي إلى UL

<body>

</ul> <br/>

وظيفة add1 () {

// احصل على علامة UL

var ul1 = document.getElementById ("ulid") ؛

// إنشاء علامات

var li1 = document.createElement ("li") ؛

// إنشاء نص

var tex1 = document.createTextNode ("4444") ؛

// أضف نصًا إلى لي

li1.AppendChild (Tex1) ؛

// أضف لي إلى UL

UL1.AppendChild (LI1) ؛

}

</script>

</body>

كائن العنصر (كائن العنصر): لتشغيل العنصر ، يجب أولاً الحصول على عنصر باستخدام الطريقة المقابلة في المستند للحصول عليه.

**طريقة

**** احصل على القيمة في السمة getAttribute ("اسم السمة") ؛

**** قم بتعيين قيمة السمة setAttribute (الاسم ، القيمة) ؛

**** إزالة السمة removeAttribute ("اسم السمة") ؛ لا يمكن حذف القيمة

// احصل على علامة الإدخال أولاً

var input1 = document.getElementById ("inpectID") ؛

// ALERT (input1.value) ؛

التنبيه (input1.getAttribute ("value")) ؛ // احصل على القيمة في السمة

التنبيه (input1.getAttribute ("class")) ؛

input1.setAttribute ("class" ، "haha") ؛ // اضبط قيمة السمة

التنبيه (input1.getAttribute ("class")) ؛

input1.RemoVeatTribute ("name") ؛

</script>

** تريد الحصول على العنوان الفرعي أسفل العلامة

** استخدم evidnodes السمة ، ولكن هذه السمة لديها توافق ضعيف

** الطريقة الوحيدة الفعالة للحصول على العلامات تحت العلامة ، استخدم طريقة getElementsByTagname

<body>

<li> aaaaaa </li>

<li> bbbbbb </li>

<li> CCCCCCCCC </li>

</ul>

// احصل على علامة UL

var ul1 = document.getElementById ("ulid1") ؛

// احصل على الترجمة تحت UL

// var lis = ul1.childnodes ؛ // الضعيف التوافق

// ALERT (lis.length) ؛ // بعض العرض 3 عرض 7

var lis = ul1.getElementsByTagName ("li") ؛

تنبيه (lis.length) ؛

</script>

</body>

خصائص كائن العقدة

** nodename

** nodetype

** القيمة العدد

** عند تحليل HTML باستخدام DOM ، يجب تغليف العلامات والسمات والنص في HTML في كائنات

** القيمة المقابلة لعقدة العلامة

nodetype: 1

NodeName: اسم علامة Caps ، مثل SPAN

Nodevalue: NULL

** القيمة المقابلة لعقدة السمة

nodetype: 2

NODENAME: اسم السمة

قيمة Nodevalue: قيمة الخاصية

** القيمة المقابلة لعقدة النص

nodetype: 3

NODENAME: #TEXT

قيمة Nodevalue: محتوى نص

** <Body>

<span id = "spanid"> محتوى النص </span>

// احصل على كائن العلامة

var span1 = document.getElementById ("spanid") ؛

// ALERT (span1.nodeType) ؛ // 1

// ALERT (span1.NODENAME) ؛ // سابن

// ALERT (span1.nodevalue) ؛ // باطل

// صفات

var id1 = span1.getAttributEnode ("id") ؛

// alert(id1.nodeType); // 2

// alert(id1.nodeName); //بطاقة تعريف

// alert(id1.nodeValue); // spanid

//获取文本

var text1 = span1.getfirstChild;

// alert(text1.nodeType); // 3

// alert(text1.nodeName); //#نص

// alert(text1.nodeValue); // 文本内容

</script>

</body>

Node对象的属性二

<ul>

<li>aaaaaa</li>

<li>bbbbb</li>

</ul>

**父节点ul是li的父节点

*** parentNode ：父节点

**子节点li是ul的子节点

*** childNodes : 得到所有子节点，但是兼容性很差

*** firstChild : 获取第一个子节点

*** lastChild : 获取最后一个子节点

**同辈节点li与li之间是同辈节点

**nextSibling : 返回一个给定节点的下一个兄弟节点

**previousSibling : 返回一个给定节点的上一个兄弟节点

<body>

<li id="li1">aaaaa</li>

<li id="li2">bbbbb</li>

<li id="li3">ccccc</li>

<li id="li4">ddddd</li>

</ul>

/* // 得到li1

var li1 = document.getElementById("li1");

// 得到ul

var ul1 = li1.parentNode;

alert(ul1.id); */

/* // 获取ul的第一个子节点

// 得到ul

var ul1 = document.getElementById("ulid");

// 第一个子节点

var li1 = ul1.firstChild;

alert(li1.id);

var li4 = ul1.lastChild;

alert(li4.id); */

//获取li的id是li3的上一个和下一个兄弟节点

var li3 = document.getElementById("li3");

var li4 = li3.nextSibling;

var li2 = li3.previousSibling;

alert(li4.id);

alert(li2.id);

</script>

</body>

操作dom树

** appendChild方法：

*** 添加子节点到末尾

*** 特点：类似于剪切粘贴的效果

** insertBefore(newNode,oldNode);

*** 在某个节点之前插入一个新的节点通过父节点添加

*** 两个参数1）要插入的节点2)在谁之前插入

*** 插入一个节点，节点不存在，创建

1）创建标签

2）创建文本

3）把文本添加到标签下面

**代码实现：（在<li>貂蝉</li>之前添加<li>董小宛</li>）

<body>

</ul>

// 在<li>貂蝉</li>之前添加<li>董小宛</li>

function insert1() {

// 1、获取到li13标签

var li13 = document.getElementById("li13");

// 2、创建li

var li15 = document.createElement("li");

// 3、创建文本

var text15 = document.createTextNode("董小宛");

// 4、把文本添加到li下面

li15.appendChild(text15);

// 5、获取ul

var ul21 = document.getElementById("ulid21");

// 6、把li添加到ul下面（在<li>貂蝉</li>之前添加<li>董小宛</li>）

ul21.insertBefore(li15,li13);

}

</script>

</body>

**removeChild方法：删除节点

***通过父节点删除，不能自己删除自己

**代码实现: 删除<li id="li24">杨玉环</li>

<body>

</ul>

// 删除<li id="li24">杨玉环</li>

function remove1() {

// 1、获取到li24标签

var li24 = document.getElementById("li24");

// 2、获取父节点ul标签

// 有两种方式1）通过id获取2）通过属性parentNode获取

var ul31 = document.getElementById("ulid31");

// 3、执行删除（通过父节点删除）

ul31.removeChild(li24);

}

</script>

</body>

** replaceChild(newNode,oldNode); 替换节点

***两个参数：1）新的节点（替换成的节点） 2）旧的节点（被替换的节点）

***不能自己替换自己，通过父节点替换

** cloneNode(boolean) : 复制节点

**代码实现：把ul列表复制到另外一个div里面

<body>

</ul>

</div>

// 把ul列表复制到另外一个div里面

1、获取到ul

2、执行复制方法cloneNode方法复制参数true

3、把复制之后的内容放到div里面去

** 获取到div

** appendChild方法

function clone1() {

// 1、获取ul

var ul41 = document.getElementById("ulid41");

// 2、复制ul，放到类似剪切板里面

var ulcopy = ul41.cloneNode(true);

// 3、获取到div

var divv = document.getElementById("divv");

// 4、把副本放到div里面去

divv.appendChild(ulcopy);

}

</script>

</body>

**操作dom总结：

**获取节点使用方法

getElementById() : 通过节点的id属性，查找对应节点

getElementsByName() : 通过节点的name属性，查找对应节点

getElementsByTagName() : 通过节点名称，查找对应节点

**插入节点的方法

insertBefore方法: 在某个节点之前插入

appendChild方法: 在末尾添加，类似于剪贴粘贴

**删除节点的方法

removeChild方法: 通过父节点删除

**替换节点的方法

replaceChild方法: 通过父节点替换

innerHTML属性（重点）

** 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

** 第一个作用：获取文本内容

var span1 = document.getElementById("sid");

alert(span1.innerHTML);

** 第二个作用：向标签里面设置内容（可以是html代码）

<body>

</div>

// 获取span标签

var span1 = document.getElementById("sid");

//alert(span1.innerHTML); // 测试文本

// 向div里面设置内容<h1>AAAAA</h1>

// 获取div

var div11 = document.getElementById("div11");

div11.innerHTML = "<h1>AAAAA</h1>"; // 设置内容

</script>

</body>

** 练习：向div里面添加一个表格

var tab = "<table border='1'><tr><td>aaaaa</td></tr><tr><td>bbbb</td></tr></table>";

div11.innerHTML = tab;

案例：动态显示时间

** 得到当前时间

var date = new Date();

var d1 = date.toLocaleString();

** 需要让页面每一秒获取时间

setInterval方法定时器

** 显示到页面上

每一秒向div里面写一次时间使用innerHTML属性

** 代码实现动态显示时间

<body>

</div>

function getD1() {

// 当前时间

var date = new Date();

// شكل

var d1 = date.toLocaleString();

// 获取div

var div1 = document.getElementById("times");

div1.innerHTML = d1;

}

// 使用定时器实现每一秒写一次时间

setInterval("getD1();",1000);

</script>

</body>

案例：全选练习

** 使用复选框上面一个属性判断是否选中

** checked 属性

** checked = true; 选中

** checked = false; 未选中

** 创建一个页面

** 复选框和按钮

***四个复选框表示爱好

***还有一个复选框操作全选和全不选有一个事件

***三个按钮全选全不选反选每个按键都分别有事件

**代码实现

<body>

<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选

<br/>

<input type="checkbox" name="love"/>篮球

<input type="checkbox" name="love"/>排球

<input type="checkbox" name="love"/>羽毛球

<input type="checkbox" name="love"/>乒乓球

<br/>

// 实现全选操作

function selAll() {

1、获取要操作的复选框使用getElementsByName();

2、返回的是数组

**属性checked 判断复选框是否选中

** checked = true; // 表示选中

** checked = false; // 表示未选中

**遍历数组，得到的是每一个checkbox

** 把每一个checkbox属性设置为true 即checked = true;

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = true; // 设置属性为true

}

// 实现全不选操作

function selNo() {

1、获取到要操作的复选框

2、返回的是数组，遍历数组

3、得到每一个复选框

4、设置复选框的属性checked = false;

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = false; // 设置属性为true

}

function selOther() { // 实现反选

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

if(love1.checked == true) {

love1.checked = false;

}

آخر {

love1.checked = true;

}

function selAllNo() { // 一个多选框实现全选全不选切换

1、得到上边的复选框通过id来获取

2、判断该复选框是否选中if条件checked == true

3、如果是选中，下面是全选

4、如果不是选中，下面是全不选

var box1 = document.getElementById("boxid");

if(box1.checked == true) {

selAll();

}

آخر {

selNo();

}

</script>

</body>

案例：下拉列表左右选择

** 下拉选择框

</select>

** 创建一个页面

** 两个下拉框设置属性multiple

** 四个按钮，都有事件

** 代码实现：

<body>

<viv>

</select>

</div>

<viv>

</div>

<viv>

<option>AAAAAAAA</option>

<option>BBBBBBBB</option>

</select>

</div>

<viv>

</div>

// 实现选中添加到右边

function selToRight() {

1、获取select1 里面的option

* 使用getElementsByTagName(); 返回的是数组

* 遍历数组，得到每一个option

2、判断option是否被选中

* 属性selected ，判断是否被选中

** selected = true; 选中

** selected = false;未选中

3、如果选中，把选择的添加到右边去

4、得到select2

5、添加选择的部分

* appendChild 方法

// 获取到select1 里面的option

// 得到select1

var select1 = document.getElementById("select1");

// 得到select2

var select2 = document.getElementById("select2");

// 得到option

var options1 = select1.getElementsByTagName("option");

// 遍历数组

for(var i=0;i<options1.length;i++) {

// 第一次循环i=0 length:5

// 第二次循环i=1 length:4

// 第三次循环i=2 length:3

// 再往后就不满足条件了后边的都循环不到了

var option1 = options1[i]; // 得到每一个option对象

// 判断是否被选中

if(option1.selected == true) {

// 添加到select2 里面

select2.appendChild(option1);

أنا--؛ // Pay attention to this point, if you don’t write it, you will have problems

}

// 全部添加到右边

function allToRight() {

var select2 = document.getElementById("select2");

var select1 = document.getElementById("select1");

var options1 = select1.getElementsByTagName("option");

for(var i=0;i<options1.length;i++) {

var option1 = options1[i];

select2.appendChild(option1);

أنا--؛

}

// 右边的添加到左边的操作类似

</script>

</body>

案例：下拉框联动效果(省市联动)

** 创建一个页面，有两个下拉选择框

** 在第一个下拉框里面有一个事件：改变事件onchange事件

** 方法add1(this.value); 表示当前改变的option 里面的value值

** 创建一个二维数组，存储数据

** 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市

**代码实现：

<body>

</select>

</select>

// 创建一个数组存储数据

// 使用二维数组

var arr = new Array(4);

arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];

arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];

arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];

arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];

function add1(val) {

/* 实现步骤：

1、遍历二维数组

2、得到的也是一个数组（国家对应关系）

3、拿到数组中的第一个值和传递过来开的值作比较

4、如果相同，获取到第一个值后面的元素

5、得到city 的select

6、添加过去使用appendChild 方法

** 需要创建option （三步操作）

// 由于每次都要向city里面添加option，第二次添加，前边第一次的会保留，追加

// 所以每次添加之前，判断一下city里面是否有option，如果有，删除

// 获取city 的select

var city1 = document.getElementById("cityid");

// 得到city 里面的option

var options1 = city1.getElementsByTagName("option");

// 遍历数组

for(var k=0;k<options1.length;k++) {

// 得到每一个option

var op = options1[k];

// 删除这个option 通过父节点删除

city1.removeChild(op);

k--;// 每次删除长度都会减一k都会增加一不执行此操作会出错

}

// 遍历二维数组

for(var i=0;i<arr.length;i++) {

// 得到二维数组里面的每一个数组

var arr1 = arr[i];

// 得到遍历之后的数组的第一个值

var firstvalue = arr1[0];

// 判断传递过来的值和第一个值是否相同

if(firstvalue == val) { // 相同

// 得到第一个值后面的元素

// 遍历数组arr1

for(var j=1;j<arr1.length;j++) {

var value1 = arr1[j]; // 得到国家之后城市的名称

// alert(value1);

// 创建option

var option1 = document.createElement("option");

// 创建文本

var text1 = document.createTextNode(value1);

// 把文本添加到option里面

option1.appendChild(text1);

// 添加值到city 的select 里面

city1.appendChild(option1);

}

</script>

</body>

The above JavaWeb Learning Notes Sharing (must-read) is all the content I share with you. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.