รายการที่กำหนดเอง
<dl> </dl>: แสดงช่วงของรายการ
** ภายใน <dt> </dt>: เนื้อหาด้านบน
** ภายใน <dd> </dd>: เนื้อหาที่ต่ำกว่า
รายการที่สั่งซื้อ
<ol> </ol>: ช่วงของรายการที่สั่งซื้อ
-ประเภทของแอตติ: ตั้งค่าวิธีการเรียงลำดับ 1 (ค่าเริ่มต้น), a, i,
** ในแท็ก ol <li> เนื้อหาเฉพาะ </li>
รายการที่ไม่ได้เรียงลำดับ
<ul> </ul>: ช่วงของรายการที่ไม่ได้เรียงลำดับ
-ประเภทเครื่องอภิปราย: วงกลม (วงกลมกลวง), แผ่นดิสก์ (วงกลมแข็งเริ่มต้น), สี่เหลี่ยมจัตุรัส (สแควร์แข็ง)
** ในแท็ก UL <li> เนื้อหาเฉพาะ </li>
แท็กรูปภาพ
-attributes: SRC, ความกว้าง, ความสูง, alt (ข้อความที่แสดงบนรูปภาพย้ายเมาส์ไปที่รูปภาพอยู่พักหนึ่งเพื่อแสดงเนื้อหาหรือข้อความที่แสดงเมื่อภาพแสดงไม่ถูกต้อง แต่เบราว์เซอร์บางตัวไม่แสดงและไม่มีผล)
** <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 ไปยัง Resource"> เนื้อหาที่แสดงในหน้า </a>
** href: ที่อยู่ของทรัพยากรที่เชื่อมโยง
** เป้าหมาย: ตั้งค่าวิธีการเปิดค่าเริ่มต้นคือการเปิดในหน้าปัจจุบัน
--_ ว่างเปล่า: เปิดในหน้าต่างใหม่
--_ ตัวเอง: เปิดหน้าเริ่มต้น
-<a href = " #"> ชื่อลิงก์ </a>: เมื่อไฮเปอร์ลิงก์ไม่จำเป็นต้องข้ามไปที่หน้าเพียงเพิ่ม # (ตัวยึดตำแหน่ง) ลงใน Href
** แหล่งข้อมูลตำแหน่ง
-หากคุณต้องการค้นหาแหล่งข้อมูล: กำหนดตำแหน่ง
<a name = "top"> top </a>
-กลับไปยังตำแหน่งนี้
<a href = "#top"> กลับไปด้านบน </a>
-แท็ก as-is-output: <pre> เนื้อหาที่จำเป็นต้องป้อน as-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-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> </tr>
-ตั้งค่าการจัดตำแหน่ง: ศูนย์ซ้ายขวาขวา
*** ใน TR มันระบุเซลล์ในแถว <td> </td>
** ใช้ th ยังสามารถเป็นตัวแทนของเซลล์: มันสามารถบรรลุศูนย์และเป็นตัวหนา
*ชื่อของตารางถูกวางไว้ในตาราง <คำสั่ง> </section>
*ทักษะการดำเนินงาน:
** นับแรกมีกี่แถวและนับจำนวนเซลล์ในแต่ละแถว
*รวมเซลล์
** Rowspan: Cross-row (การผสานแนวตั้ง)
<td rowspan = "3" align = "center"> 13 </td>
** Colspan: คอลัมน์ข้าม (การผสานแนวนอน)
<td colspan = "3" allign = "center"> แบบฝึกหัดแบบฟอร์ม </td>
แท็กฟอร์ม
*ตัวอย่างเช่นเมื่อลงทะเบียน kaixin.com คุณสามารถส่งข้อมูลไปยังเซิร์ฟเวอร์ของ Kaixin.com กระบวนการนี้สามารถใช้งานได้โดยใช้แท็กฟอร์ม
* <form> </form>: กำหนดขอบเขตฟอร์ม
*คุณสมบัติ:
** การดำเนินการ: ที่อยู่ที่ส่งไปการส่งเริ่มต้นไปยังหน้าปัจจุบัน
** วิธี: วิธีการส่งแบบฟอร์ม
-มีสองคนที่ใช้กันทั่วไป: รับและโพสต์ซึ่งเป็นคำขอเริ่มต้นเริ่มต้น
** ความแตกต่างระหว่าง Get และ Post
1) แถบที่อยู่ขอ Get จะมีข้อมูลที่ส่งและโพสต์จะไม่พกพา (ข้อมูลอยู่ในเนื้อหาคำขอ)
2) รับระดับความปลอดภัยคำขอต่ำกว่าและโพสต์จะสูงขึ้น
3) มีขีด จำกัด เกี่ยวกับขนาดข้อมูลของคำขอ GET แต่ไม่มีการ จำกัด ในโพสต์
** Enctype: คุณสมบัตินี้ไม่จำเป็นสำหรับการร้องขอและคุณสมบัตินี้จะต้องตั้งค่าเมื่ออัปโหลดไฟล์
** รายการอินพุต: ชิ้นส่วนที่สามารถป้อนหรือเลือกเนื้อหา
- รายการอินพุตส่วนใหญ่สามารถใช้กับ <อินพุต type = "ประเภทรายการอินพุต"/>
********** ในรายการอินพุตคุณต้องมีแอตทริบิวต์ชื่อ
*** อินพุตปกติ: <อินพุต type = "text"/>>>
*** รายการอินพุตรหัสผ่าน: <อินพุต type = "รหัสผ่าน"/>
*** อินพุตตัวเลือกเดียว: <อินพุต type = "วิทยุ"/>
-จำเป็นต้องใช้ชื่อ stribute ภายใน
-ค่าแอตทริบิวต์ชื่อต้องเหมือนกัน
- จะต้องมีค่ามูลค่า
**** ใช้คุณสมบัติเริ่มต้นที่เลือก
*** checked = "ตรวจสอบ"
*** ตรวจสอบอินพุต: <อินพุต type = "ช่องทำเครื่องหมาย"/>
** จำเป็นต้องใช้ชื่อแอตทริบิวต์ภายใน
** ค่าแอตทริบิวต์ชื่อต้องเหมือนกัน
** จะต้องมีค่า
**** ใช้คุณสมบัติเริ่มต้นที่เลือก
---- ตรวจสอบ = "ตรวจสอบ"
*** รายการอินพุตไฟล์: <input type = "file"/>
*** รายการอินพุตแบบเลื่อนลง (ไม่ได้อยู่ในแท็กอินพุต)
<เลือกชื่อ = "เกิด">
<ตัวเลือกค่า = "0"> โปรดเลือก </potion>
<ตัวเลือกค่า = "1991"> 1991 </pontion>
<ตัวเลือกค่า = "1992"> 1992 </potion>
<ตัวเลือกค่า = "1993"> 1993 </potion>
</เลือก>
**** ใช้คุณสมบัติเริ่มต้นที่เลือก
---- เลือก = "เลือก"
*** ฟิลด์ข้อความ (เช่น: กรอกข้อมูลในช่องสำหรับโปรไฟล์ข้อมูลส่วนบุคคลเมื่อลงทะเบียนบัญชี)
<textarea cols = "5" rows = "20"> </textarea>
*** รายการที่ซ่อนอยู่ (ไม่แสดงบนหน้า แต่มีอยู่ในรหัส HTML)
<อินพุต type = "ซ่อน"/>
*** ส่งปุ่ม
<อินพุต type = "ส่ง"/>
<อินพุต type = "ส่ง" value = "ชื่อชื่อ"/>
-ที่อยู่ก่อนส่ง: c: /users/happydog/desktop/index.html
** เมื่อแอตทริบิวต์ชื่อถูกเขียนในรายการอินพุต
-ไฟล์: /// c: /users/happydog/desktop/index.html? โทรศัพท์ = 123123 & pwd = 12321312 & sex = man & love = y & love = pp & birth = 1992 & tex = 1231245
- ค่าของชื่อรายการอินพุต = ค่าของอินพุต &
** พารามิเตอร์คล้ายกับรูปแบบคีย์-ค่า
*** ใช้ (คลิก) รูปภาพเพื่อส่ง
<input type = "image" src = "path image"/>
*** ปุ่มรีเซ็ต: กลับไปที่สถานะเริ่มต้นของรายการอินพุต
<อินพุต type = "รีเซ็ต"/>
<อินพุต type = "รีเซ็ต" value = "ชื่อปุ่ม"/>
*** ปุ่มปกติ (ใช้กับ JS)
<input type = "button" value = ""/>
กรณี: ใช้แท็กฟอร์มเพื่อใช้หน้าการลงทะเบียน
เมื่อเนื้อหาของเซลล์ตารางว่างเปล่าตัวยึดตำแหน่ง ((ช่องว่างที่หลบหนี)) จะถูกเติมโดยทั่วไป
การใช้แท็กทั่วไปอื่น ๆ ใน HTML
** B (BOLD) S (Strike Line) U (ขีดเส้นใต้) I (italic) pre (เอาต์พุตตาม IS) sub (subscript) sup (superscript) div (line wrap) span (แสดงบนหนึ่งบรรทัด) p (ฉลากย่อหน้า)
การใช้แท็กส่วนหัว HTML
** html สองส่วนประกอบขึ้นเป็นศีรษะและร่างกาย
** ฉลากในหัวคือป้ายหัว
** แท็กชื่อเรื่อง: ระบุเนื้อหาที่แสดงบนแท็ก
** <meta> แท็ก: เนื้อหาที่เกี่ยวข้องบางส่วนของหน้าการตั้งค่า
-<meta name = "คำหลัก" content = "" />
-<meta http-equiv = "Refresh" content = "10; url = test_form.html" /> ความเร็วไปยังหน้าระบุเป็นประจำ
** แท็กฐาน: ตั้งค่าการตั้งค่าพื้นฐานสำหรับไฮเปอร์ลิงก์
-วิธีการเปิดไฮเปอร์ลิงก์สามารถตั้งค่าได้อย่างสม่ำเสมอ <base target = "_ blank" />>>
** แท็กลิงก์: แนะนำไฟล์ภายนอก
การใช้แท็กเฟรม
** <เฟรมเซ็ต>
** แถว: หารด้วยแถว
<frameset rows = "80,*"> แบ่งออกเป็นสองส่วน, 80 อันดับแรก, ด้านล่าง 80
** Cols: หารด้วยคอลัมน์
<frameset cols = "80,*"> แบ่งออกเป็นสองส่วนซ้ายและขวาที่ 80 คนใดคนหนึ่งทางซ้ายและขวาได้ตลอดเวลา
** <เฟรม> หน้าเฉพาะที่แสดง
** <frame name = "lower_left" src = "b.html">
*เมื่อใช้แท็กเฟรมพวกเขาไม่สามารถเขียนในหัวและร่างกายได้ หากใช้แท็กเฟรมร่างกายจะต้องถูกลบและเขียนนอกศีรษะ
*หากการเชื่อมโยงหลายมิติบนหน้าทางด้านซ้ายและต้องการให้เนื้อหาแสดงบนหน้าเว็บทางด้านขวาคุณสามารถตั้งค่าคุณสมบัติเป้าหมายในไฮเปอร์ลิงก์และตั้งค่าของเป้าหมายเป็นชื่อในเฟรม
** <a href = "http://www.baidu.com" target = "right"> baidu </a> <br/>
<frameset rows = "80,*">
<frame name = "top" src = "a.html">
<frameset cols = "120,*">
<frame name = "left" src = "b.html">
<frame name = "right" src = "http://www.baidu.com">
</frameset>
</frameset>
สรุปความรู้
1) แนวคิดการใช้งาน HTML: ใช้แท็กเพื่อห่อข้อมูลที่จะดำเนินการและเปลี่ยนรูปแบบข้อมูลในแท็กโดยการแก้ไขค่าแอตทริบิวต์ของแท็ก
2) แอตทริบิวต์แท็กตัวอักษร: ช่วงค่าขนาด 1-7 สี: เลขฐานสิบหก #FFFFFF
3) แท็กชื่อเรื่อง <h1> </h1> ...... <h6> </h6>: จาก H1 ถึง H6 ตัวอักษรจะเล็กลงและเล็กลงและบรรทัดจะเปลี่ยนไปโดยอัตโนมัติ
4) ความคิดเห็น
รู้เบื้องต้นเกี่ยวกับ CSS
** CSS: แผ่นสไตล์ cascading
** เลเยอร์: เลเยอร์โดยเลเยอร์
** สไตล์ชีท: คุณลักษณะและค่าแอตทริบิวต์มากมาย
** ทำให้หน้าจอแสดงผลดีขึ้น
** CSS แยกเนื้อหาหน้าเว็บและสไตล์การแสดงผลการปรับปรุงฟังก์ชั่นการแสดงผล
วิธีรวม CSS และ HTML (สี่วิธีในการรวม)
1) มีสไตล์คุณสมบัติในแต่ละแท็ก HTML รวม CSS และ HTML เข้าด้วยกัน
-<div style = "พื้นหลังสี: สีแดง, สี: สีเขียว;" id = ""> หนทางแห่งสวรรค์ลดส่วนเกินและทำขึ้นเพื่อการขาด ดังนั้นความว่างเปล่าจะเอาชนะความจริงและสิ่งที่ไม่เพียงพอก็เอาชนะส่วนเกินได้ </div>
2) ใช้แท็กของ HTML เพื่อใช้แท็ก <style> และเขียนไว้ในหัว
- <style type = "text/css">
รหัส CSS;
</style>
--- การใช้งานรหัส <head>
<style type = "text/css">
Div {
พื้นหลังสี: สีน้ำเงิน;
สี: สีแดง;
-
</style>
</head>
<body>
<div id = "">
หนทางแห่งสวรรค์ลดส่วนเกินและทำให้เกิดการขาด ดังนั้นความว่างเปล่าจะเอาชนะความจริงและการขาดการขาดจะเอาชนะส่วนเกินได้
</div>
</body>
3) ใช้คำสั่งในแท็กสไตล์
@Import url (เส้นทางของไฟล์ CSS);
- ขั้นตอนที่ 1: สร้างไฟล์ CSS
--- <style type = "text/css">
@import url (div.css);
</style>
4) ใช้ลิงก์แท็กส่วนหัวเพื่อแนะนำไฟล์ CSS ภายนอกและวางไว้ใน <head> </head>
- ขั้นตอนที่ 1: สร้างไฟล์ CSS
- <link rel = "stylesheet" type = "text/css" href = "เส้นทางของไฟล์ css"/>
**** ข้อเสียของวิธีการรวมกันที่สาม: มันไม่ทำงานในบางเบราว์เซอร์และใช้วิธีที่สี่โดยทั่วไป
**** ลำดับความสำคัญ (ทั่วไป)
จากบนลงล่างจากด้านในจากภายนอกลำดับความสำคัญจากต่ำถึงสูง
ลำดับความสำคัญของโพสต์โหลดสูง
**** รูปแบบ: ชื่อตัวเลือก {ชื่อแอตทริบิวต์: ค่าแอตทริบิวต์; ชื่อแอตทริบิวต์: ค่าแอตทริบิวต์; ...... }
ตัวเลือกพื้นฐานสำหรับ CSS (สามประเภท)
** ใช้ข้อมูลในแท็กนั้น
1) แท็กตัวเลือก div {รหัส CSS}
-ใช้ชื่อฉลากเป็นชื่อของตัวเลือก
<head>
<style type = "text/css">
Div {
พื้นหลังสี: สีน้ำเงิน;
สี: สีแดง;
-
</style>
</head>
<body>
<div> aaaaa </div>
</body>
2) ตัวเลือกคลาส ชื่อ {}
** แต่ละแท็ก HTML มีคลาสคุณสมบัติ
** <head>
<style type = "text/css">
div.test {
พื้นหลังสี: สีน้ำเงิน;
สี: สีแดง;
-
p.test {
พื้นหลังสี: สีน้ำเงิน;
สี: สีแดง;
-
สามารถย่อได้เป็น:
.ทดสอบ{
พื้นหลังสี: สีน้ำเงิน;
สี: สีแดง;
-
</style>
</head>
** <body>
<div> aaaaa </div>
<p> bbbbbbbbbb </p>
</body>
3) ID SELECTOR #NAME {}
** แต่ละแท็ก HTML มีรหัสแอตทริบิวต์
-<div id = "test"> ccccccccccc </div>
-<head>
<style type = "text/css">
div#ทดสอบ {
พื้นหลังสี: สีน้ำเงิน;
สี: สีแดง;
-
P#ทดสอบ {
พื้นหลังสี: สีน้ำเงิน;
สี: สีแดง;
-
สามารถย่อได้เป็น:
#ทดสอบ {
พื้นหลังสี: สีน้ำเงิน;
สี: สีแดง;
-
</style>
</head>
-<body>
<div id = "test"> aaaaa </div>
<p id = "ทดสอบ"> bbbbbbbbbb </p>
</body>
** สไตล์ลำดับความสำคัญ> ตัวเลือก ID> ตัวเลือกคลาส> ตัวเลือกแท็ก
ตัวเลือกส่วนขยาย CSS (เรียนรู้)
1) การตั้งค่าสไตล์สำหรับฉลากซ้อนสำหรับตัวเลือกสมาคม
** <div> <p> wwwwwwww </p> </div>
** ตั้งค่าสไตล์ของแท็ก p ในแท็ก div และสไตล์ของแท็กซ้อนกัน
-<head>
<style type = "text/css">
Div P {
พื้นหลังสี: สีน้ำเงิน;
สี: สีแดง;
-
</style>
</head>
-<body>
<div> <p> wwwwwwww </p> </div>
<p> aaaaa </p>
</body>
2) การรวมตัวเลือกป้ายกำกับที่แตกต่างกันตั้งค่าสไตล์เดียวกัน
** <div> 1111 </div>
<p> 2222 </p>
** ตั้งแท็ก div และ p เป็นสไตล์เดียวกันและตั้งค่าแท็กที่แตกต่างกันเป็นสไตล์เดียวกัน
-<head>
<style type = "text/css">
div, p {
พื้นหลังสี: สีน้ำเงิน;
สี: สีแดง;
-
</style>
</head>
-<body>
<div> 1111 </div>
<p> 2222 </p>
</body>
3) ตัวเลือกองค์ประกอบ Pseudo (คลาส)
** CSS มีสไตล์ที่กำหนดไว้อย่างดีซึ่งสามารถใช้งานได้
** ตัวอย่างเช่นไฮเปอร์ลิงก์
** สถานะของการเชื่อมโยงหลายมิติ
-หลังจากคลิกและคลิกที่สถานะเดิม
: ลิงค์: โฮเวอร์: ใช้งาน: เยี่ยมชม
การใช้รหัส:
<head>
<style type = "text/css">
/*สถานะดั้งเดิม*/
A: ลิงก์ {
พื้นหลังสี: สีแดง;
-
/*สถานะ hoom*/
A: โฮเวอร์ {
พื้นหลังสี: สีเขียว;
-
/*คลิกสถานะ*/
A: ใช้งาน {
พื้นหลังสี: สีน้ำเงิน;
-
/*สถานะหลังคลิก*/
A: เยี่ยมชม {
พื้นหลังสี: สีเทา;
-
</style>
</head>
<body>
<a href = "http://www.baidu.com"> คลิกที่ลิงค์ไปยังเว็บเพจ Baidu </a>
</body>
โมเดลกล่องของ CSS (เข้าใจ) ในการใช้งานข้อมูลคุณต้องใส่ข้อมูลลงในพื้นที่ (DIV)
1) ชายแดน: การตั้งค่าแบบครบวงจร
นอกจากนี้คุณยังสามารถตั้งค่าแยกต่างหาก: ด้านล่างของขอบด้านล่าง: ด้านล่างล่างซ้าย: ขอบซ้าย-ซ้าย: ขอบขวาขวา
-<head>
<style type = "text/css">
Div {
ความกว้าง: 200px;
ความสูง: 100px;
เส้นขอบ: 2px Solid Blue;
-
#div12 {
ชายแดนขวา: 2px ประสีเหลือง;
-
</style>
</head>
-<body>
<div id = "div11"> aaaaaaaaaa </div>
<div id = "div12"> bbbbbbbbb </div>
</body>
2) ช่องว่างภายใน: ตั้งระยะห่างระหว่างเนื้อหาจากด้านบน, ล่าง, ซ้าย, ซ้ายและขวา
นอกจากนี้คุณยังสามารถตั้งค่าแยกกัน: ขึ้นลงซ้ายและขวา
<head>
<style type = "text/css">
Div {
ความกว้าง: 200px;
ความสูง: 100px;
เส้นขอบ: 2px Solid Blue;
-
#div21 {
Padding: 20px;
-
#div22 {
Padding-Left: 30px;
-
</style>
</head>
<body>
<div id = "div21"> aaaaaaaaaa </div>
<div id = "div22"> bbbbbbbbb </div>
</body>
3) ระยะขอบ: ตั้งระยะห่างระหว่าง div จากด้านนอกสุดสี่ด้าน
คุณสามารถตั้งค่าแยกต่างหาก: ขึ้นลงซ้ายและขวา - -
เค้าโครงของ CSS ลอย (เข้าใจ) ลอย: ซ้ายขวา
การวางตำแหน่งของเค้าโครง CSS (เข้าใจ)
*ตำแหน่ง
** ค่าแอตทริบิวต์:
-คงที่: ค่าเริ่มต้นไม่มีตำแหน่งพิเศษ
-absolute:
ลากวัตถุจากสตรีมเอกสารและใช้คุณสมบัติทางซ้ายขวาด้านบนด้านล่างและคุณสมบัติอื่น ๆ เพื่อค้นหาอย่างแน่นอน
-ความสัมพันธ์: วัตถุจะไม่ถูกลากออกจากสตรีมเอกสาร วัตถุไม่สามารถเรียงซ้อนกันได้ แต่จะถูกชดเชยในสตรีมเอกสารปกติตามคุณสมบัติเช่นซ้ายขวาด้านบนด้านล่าง ฯลฯ
กรณี: ภาพผสมและข้อความ
** รูปภาพและข้อความจะปรากฏขึ้นพร้อมกัน
กรณี: ลายเซ็นภาพ
รู้เบื้องต้นเกี่ยวกับ JavaScript: เป็นภาษาสคริปต์ที่ขับเคลื่อนด้วยวัตถุซึ่งส่วนใหญ่ใช้ในไคลเอนต์
*อิงวัตถุ: มีวัตถุจำนวนมากให้คุณสามารถใช้งานได้โดยตรง
* เหตุการณ์ที่ขับเคลื่อนด้วย: HTML สร้างเอฟเฟกต์แบบคงที่เว็บไซต์ JavaScript Dynamic Effects
*ลูกค้า: หมายถึงเบราว์เซอร์โดยเฉพาะ
* คุณสมบัติของ JS:
1) ปฏิสัมพันธ์แบบไดนามิกของข้อมูลแบบโต้ตอบ
2) ความปลอดภัย js ไม่สามารถเข้าถึงไฟล์บนดิสก์ท้องถิ่น
3) Java ข้ามแพลตฟอร์มเครื่องเสมือน; ตราบใดที่เบราว์เซอร์ที่สามารถรองรับ JS พวกเขาสามารถวิ่งได้
*ความแตกต่างระหว่าง JavaScript และ Java: ไม่มีความสัมพันธ์ระหว่างทั้งสอง
1) Java Is Sun Company ตอนนี้ Oracle; JS คือ บริษัท NetScape
2) Java เป็นวัตถุที่มุ่งเน้นและ JS เป็นอิงตามวัตถุ
3) Java เป็นภาษาที่พิมพ์อย่างมากและ JS เป็นภาษาที่พิมพ์อย่างอ่อนแอ
-ตัวอย่าง: int i = "10" ใน Java; จะรายงานข้อผิดพลาด
-js: var i = 10; var i = "10"; ไม่มีการรายงานข้อผิดพลาด
4) JS จะต้องแยกวิเคราะห์เพื่อดำเนินการเท่านั้นในขณะที่ Java จำเป็นต้องรวบรวมไว้ในไฟล์ไบต์ก่อนแล้วจึงดำเนินการ
*องค์ประกอบ JS (สามส่วน):
1) ecmascript
- ECMA: สมาคมคอมพิวเตอร์ยุโรป
-ไวยากรณ์และข้อความที่จัดโดย ECMA ...
2) Bom
-โมเดลวัตถุบรอสเวอร์: โมเดลวัตถุเบราว์เซอร์
3) DOM
-โมเดลวัตถุเอกสาร: โมเดลวัตถุเอกสาร
วิธีรวม JS และ HTML (สองประเภท)
1) ใช้แท็ก <script type = "text/javascript"> js code; </script>
2) ใช้แท็กสคริปต์เพื่อแนะนำไฟล์ JS ภายนอก
- สร้างไฟล์ JS และเขียนรหัส JS
- <script type = "text/javascript" src = "path js"> </script>
หมายเหตุ: เมื่อใช้วิธีที่สองอย่าเขียนรหัส JS ในแท็กสคริปต์มันจะไม่ถูกเรียกใช้งาน
ประเภทดั้งเดิมของ JS และประกาศตัวแปร
*ประเภทข้อมูลพื้นฐานของ Java: byte short int long float double char bolean
*JS กำหนดตัวแปรด้วยคำหลัก var
*ประเภทดั้งเดิมของ JS (ห้า)
-สตริงสตริง var str = "abc";
-ประเภทตัวเลขจำนวน var m = 123;
-BOOLEAN TRUE และ FALSE VAR FLAG = TRUE;
-null var วันที่ = วันที่ใหม่ ();
** รับการอ้างอิงไปยังวัตถุ NULL หมายความว่าการอ้างอิงวัตถุนั้นว่างเปล่าและการอ้างอิงทั้งหมดไปยังวัตถุก็เป็นวัตถุเช่นกัน
-ไม่ได้กำหนดตัวแปร แต่ไม่ได้กำหนด var aa;
* typeof (ชื่อตัวแปร) ดูประเภทข้อมูลของตัวแปรปัจจุบัน
คำสั่ง JS
** คำสั่งหากการตัดสินใน Java ("=" หมายถึงการมอบหมาย; "==" เท่ากับหมายถึงคำพิพากษา) คำสั่งสวิตช์ลูป (สำหรับขณะทำในขณะที่)
** ข้อความของ JS
-ถ้าคำพิพากษา
-สวิตช์ (a) {
กรณีที่ 5: ...
หยุดพัก;
กรณีที่ 6: ...
หยุดพัก;
ค่าเริ่มต้น:...
-
-
** คำสั่งวนรอบในขณะที่ทำในขณะที่
-วาร์ i = 5;
ในขณะที่ (i> 0) {
การแจ้งเตือน (i);
ฉัน--;
-
-for (var i = 0; i <= 5; i ++) {
การแจ้งเตือน (i);
-
ตัวดำเนินการ JS
** js ไม่แยกแยะระหว่างจำนวนเต็มและทศนิยม
-วาร์ 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 ไม่ใช่ตัวเลขมันจะแจ้งให้ทราบ: มันหมายความว่าไม่ใช่ตัวเลข
** สามารถใช้งานได้ด้วย bolean
*** ถ้าตั้งค่าเป็นจริงมันจะเทียบเท่ากับ 1; หากตั้งค่าเป็นเท็จจะเทียบเท่ากับ 0;
** == และ === ความแตกต่าง
** ทุกอย่างเกี่ยวกับการตัดสิน
** == การเปรียบเทียบเป็นเพียงค่า; === การเปรียบเทียบคือค่าและประเภท
** ประโยคที่ส่งออกโดยตรงไปยังหน้า (เนื้อหาสามารถแสดงบนหน้า) สามารถเอาต์พุตตัวแปรค่าคงที่และรหัส HTML ไปยังหน้า document.write ("") มีคำพูดสองเท่าและหากคุณตั้งค่าแอตทริบิวต์ของฉลากคุณต้องใช้เครื่องหมายคำพูดเดียว
- document.write ("aaaa");
- document.write ("<hr/>");
*** document.write ("<table border = '1' bordercolor = 'red'>");
*** document.write ("</table>");
แบบฝึกหัด: การใช้ตารางการคูณ 99
js array
*คำนิยามอาร์เรย์ใน Java int [] arr = {1,2,3};
*วิธีการกำหนดอาร์เรย์ JS (สามประเภท)
1) var arr = [1,2,3]; var arr = [1, "2", 3]; var arr = [1,2, จริง];
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 = new function ("รายการพารามิเตอร์", "Method Body and Return Value");
var add4 = ฟังก์ชันใหม่ ("x, y", "var sum; sum = x+y; return 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 ของหน้า
-ใช้นอกวิธีการภายในวิธีใช้ในแท็กสคริปต์อื่น
** ตัวแปรท้องถิ่น: กำหนดตัวแปรภายในวิธีการและสามารถใช้ภายในวิธีการเท่านั้น
-สามารถใช้งานได้ภายในวิธีการเท่านั้น หากตัวแปรนี้ถูกเรียกนอกวิธีการจะแสดงข้อผิดพลาด
-ie มาพร้อมกับเครื่องมือการดีบัก ในเวอร์ชันของ IE8 หรือสูงกว่า F12 บนแป้นพิมพ์และแถบจะปรากฏขึ้นที่ด้านล่างของหน้าเพื่อดูข้อผิดพลาดเมื่อคุณดูคอนโซล
ควรวางแท็กสคริปต์ไว้ที่ไหน
** ขอแนะนำให้วางแท็กสคริปต์ไว้เบื้องหลัง </body>
** หากมีข้อกำหนดในขณะนี้:
-ใน JS คุณต้องได้รับค่าในอินพุต หากคุณใส่แท็กสคริปต์ไว้ในหัวจะมีปัญหา
-การแยกวิเคราะห์ HTML จะแยกวิเคราะห์จากบนลงล่าง แท็กสคริปต์ถูกวางไว้ในหัวและใช้ค่าอินพุตโดยตรง เนื่องจากหน้ายังไม่ได้แยกวิเคราะห์บรรทัดอินพุตจึงไม่สามารถรับได้อย่างแน่นอน
JS overloading JS ไม่มีการโอเวอร์โหลด แต่สามารถจำลองและนำไปใช้งานได้
ตัวอย่าง: ฟังก์ชั่น add11 (a, b) {
ส่งคืน 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 (): ตัวอักษรตัวหนา (): ตั้งค่าสีของฟอนต์สตริง (): ตั้งค่าขนาดของตัวอักษรลิงค์ (): แสดงสตริงเป็นไฮเปอร์ลิงก์
2) วิธีการที่คล้ายกันกับ Java
-concat (): เชื่อมต่อสตริง charat (): ส่งคืนดัชนีสตริง (): ส่งคืนตำแหน่งสตริงของการแยกสตริง (): แบ่งสตริงลงในอาร์เรย์แทนที่ ("", ""): แทนที่พารามิเตอร์สองพารามิเตอร์: พารามิเตอร์แรกคืออักขระดั้งเดิมและพารามิเตอร์ที่สอง เริ่มต้นจากบิตที่ห้าและสกัดกั้นอักขระสามตัวย้อนหลัง (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
** รับเวลาปัจจุบันใน Java
วันที่วันที่ = วันที่ใหม่ ();
// รูปแบบ // tolocalestring ()
** รับเวลาปัจจุบันใน JS
วันที่ var = วันที่ใหม่ ();
// แปลงเป็นวันที่รูปแบบตามธรรมเนียม Tolocalestring ();
การดำเนินงานทางคณิตศาสตร์คณิตศาสตร์ของ JS
** ภายในทั้งหมดเป็นวิธีการคงที่คุณสามารถใช้คณิตศาสตร์ วิธี () โดยตรงเมื่อใช้งาน;
ฟังก์ชั่นทั่วโลกของ JS
** เพราะมันไม่ได้เป็นของวัตถุใด ๆ ให้เขียนชื่อโดยตรงเพื่อใช้งาน
** eval (); เรียกใช้รหัส JS (หากสตริงเป็นรหัส JS ให้ใช้วิธีการเพื่อเรียกใช้งานโดยตรง)
- var str = "การแจ้งเตือน ('1234');";
// Alert (Str); // Alert ('1234');
eval (str); // 1234
-
การทำงานมากเกินไปของฟังก์ชั่น JS มีการโอเวอร์โหลดอะไรมากเกินไป? ชื่อเมธอดเหมือนกันพารามิเตอร์แตกต่างกัน
*JS ไม่มีฟังก์ชั่นมากเกินไปและมีเพียงวิธีสุดท้ายเท่านั้นที่จะถูกเรียก แต่การโอเวอร์โหลดสามารถจำลองได้ด้วยวิธีอื่น ฟังก์ชั่น JS บันทึกพารามิเตอร์ที่ผ่านลงในอาร์เรย์อาร์กิวเมนต์ คุณสามารถใช้การตัดสินความยาวของอาร์เรย์อาร์กิวเมนต์เพื่อส่งคืนผลลัพธ์การประมวลผลที่แตกต่างกันตามนั้น
จำลองการใช้รหัสเอฟเฟกต์การโหลดซ้ำ:
ฟังก์ชั่น add1 () {
if (arguments.length == 2) {
อาร์กิวเมนต์ส่งคืน [0] + อาร์กิวเมนต์ [1];
} อื่นถ้า (arguments.length == 3) {
อาร์กิวเมนต์ส่งคืน [0] + อาร์กิวเมนต์ [1] + อาร์กิวเมนต์ [2];
} อื่นถ้า (arguments.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 Object Model: Browser Object Model
** วัตถุคืออะไร?
- Navigator: รับข้อมูลลูกค้า (ข้อมูลเบราว์เซอร์)
- หน้าจอ: รับข้อมูลหน้าจอ
- ที่ตั้ง: ที่อยู่ URL ที่ร้องขอ
*** แอตทริบิวต์ href
1) รับที่อยู่ URL ที่ร้องขอ
-เอกสาร. เขียน (location.href);
2) ตั้งค่าที่อยู่ URL
-ปุ่มถูกวางไว้บนหน้าและเหตุการณ์จะถูกผูกไว้กับปุ่ม เมื่อคลิกปุ่มนี้หน้าสามารถข้ามไปยังหน้าอื่นได้
<body>
<อินพุต type = "button" value = "jumpbaidu" onclick = "href1 ();"/>
<script type = "text/javascript">
ฟังก์ชั่น href1 () {
// Alert ("AAAA");
location.href = "http://www.baidu.com";
-
</script>
</body>
- ประวัติ: ประวัติความเป็นมาของ URL ที่ร้องขอ
- สร้างสามหน้า (จำลองผลกระทบของประวัติศาสตร์ขึ้นและลง)
1) สร้างหน้า a.html และเขียนไฮเปอร์ลิงก์ไปที่ b.html
2) สร้างไฮเปอร์ลิงก์ b.html เป็น c.html
3) สร้าง c.html
- ไปยังหน้าก่อนหน้าเข้าเยี่ยมชม
History.back ();
ประวัติศาสตร์ไป (-1);
- ไปที่หน้าถัดไปที่คุณเยี่ยมชม
ประวัติศาสตร์ไปข้างหน้า ();
History.go (1);
-หน้าต่าง (คีย์มาสเตอร์) วัตถุระดับบนสุดของวัตถุหน้าต่าง (วัตถุ BOM ทั้งหมดทำงานในหน้าต่าง)
**วิธี
- window.alert (); ตัวย่อคือ: Alert (); หน้าต่างปรากฏขึ้นบนหน้าเพื่อแสดงเนื้อหา
- ยืนยัน ("แสดงเนื้อหาข้อความ"); กล่องพรอมต์ยืนยันมีค่าส่งคืนจริงและเท็จ
- พรอมต์ (); กล่องโต้ตอบอินพุต (ไม่มากที่ใช้ในขณะนี้) มีสองพารามิเตอร์: แสดงเนื้อหาและค่าเริ่มต้น
- เปิด ("ที่อยู่ URL", "", "คุณลักษณะของหน้าต่างเช่นความกว้างของหน้าต่างและความสูง"); เปิดหน้าต่างใหม่
-- ปิด(); ปิดหน้าต่าง (ความเข้ากันได้ของเบราว์เซอร์ค่อนข้างแย่)
- สร้างตัวจับเวลา
*** setInterval ("รหัส JS", มิลลิวินาที); window.setInterval ("การแจ้งเตือน ('123');", 3000); ระบุว่าวิธีการแจ้งเตือนจะดำเนินการทุกสามวินาที
*** settimeout ("JS Code", มิลลิวินาที); หมายความว่ามันถูกดำเนินการหลังจากมิลลิวินาที แต่จะถูกดำเนินการเพียงครั้งเดียว
*** ClearInterval (); ล้างชุดจับเวลาโดย setInterval
- var id1 = setInterval ("การแจ้งเตือน ('123');", 3000);
ClearInterval (ID1);
*** ClearTimeout (); ล้างตัวจับเวลา
วัตถุ JS DOM
** DOM: โมเดลวัตถุเอกสาร: ประเภทวัตถุเอกสาร
** เอกสาร: เอกสารไฮเปอร์เท็กซ์ (เอกสารที่ติดแท็กไฮเปอร์เท็กซ์) HTML, XML
** วัตถุ: คุณสมบัติและวิธีการที่ให้ไว้
** โมเดล: ใช้คุณสมบัติและวิธีการเพื่อจัดการเอกสารที่ติดแท็กไฮเปอร์เท็กซ์
*** คุณสามารถใช้วัตถุที่มีให้ใน DOM ใน JS ใช้คุณสมบัติและวิธีการของวัตถุเหล่านี้เพื่อทำงานบนเอกสารมาร์กอัป
*** ในการใช้งานในเอกสารที่ติดแท็กคุณต้องห่อหุ้มเนื้อหาทั้งหมดในเอกสารที่ติดแท็กลงในวัตถุก่อน
- คุณต้องห่อหุ้มแท็กแอตทริบิวต์และเนื้อหาข้อความใน HTML ลงในวัตถุ
*** ในการทำงานในเอกสารเครื่องหมาย, Parse Marker Documents
*** กระบวนการแยกวิเคราะห์: ตามโครงสร้างลำดับชั้นของ HTML โครงสร้างต้นไม้จะถูกจัดสรรในหน่วยความจำและแต่ละส่วนของ HTML จะต้องถูกห่อหุ้มไว้ในวัตถุ
*เพียงหนึ่งโหนดรูท
อาจมีโหนดเด็กหลายโหนดภายใต้โหนดรูท โหนดที่ไม่มีโหนดลูกเรียกว่าโหนดใบไม้
- เอกสารเอกสาร: เอกสาร HTML ทั้งหมด
- วัตถุองค์ประกอบ: แท็กวัตถุ
- วัตถุคุณลักษณะ
- วัตถุข้อความ
** Object Node Object: เป็นวัตถุหลักของวัตถุเหล่านี้
DHTML: มันเป็นตัวย่อของเทคโนโลยีมากมาย
** html: ห่อหุ้มข้อมูล
** CSS: ใช้แอตทริบิวต์และค่าแอตทริบิวต์เพื่อสไตล์
** DOM: ใช้งานเอกสาร HTML (เอกสารที่ทำเครื่องหมายไว้)
** JavaScript: หมายถึงคำสั่งไวยากรณ์ของ JS (ECMAScript) โดยเฉพาะ
วัตถุเอกสารแสดงถึงเอกสารทั้งหมด
** วิธีการทั่วไป
- วิธีการเขียน (): 1) ตัวแปรเอาต์พุตไปยังหน้า 2) รหัสเอาต์พุต HTML ไปยังหน้า
- GetElementById (); หมายถึงการรับองค์ประกอบ (ฉลาก) ผ่าน ID
<body>
<อินพุต type = "text" id = "nameid" value = "aaaaa"/> <br/>
<script type = "text/javascript">
// ใช้ getElementById เพื่อรับวัตถุแท็กอินพุต
var input1 = document.getElementById ("nameId");
// รับค่าค่าในอินพุต
การแจ้งเตือน (input1.Value);
// ตั้งค่าเป็นอินพุต
input1.value = "bbbbbbbb";
</script>
</body>
- getElementsByName (); แอตทริบิวต์ชื่อของแท็กมีค่าของแท็กและการส่งคืนเป็นคอลเลกชัน (อาร์เรย์)
<body>
<อินพุต type = "text" name = "name1" value = "aaaaa"/> <br/>
<อินพุต type = "text" name = "name1" value = "bbbb"/> <br/>
<อินพุต type = "text" name = "name1" value = "cccccc"/> <br/>
<script type = "text/javascript">
var input1 = document.getElementsByName ("name1"); // พารามิเตอร์ที่ผ่านเป็นค่าของชื่อในฉลาก
สำหรับ (var i = 0; i <input1.length; i ++) {// ผ่าน traversal รับค่าเฉพาะในแต่ละแท็ก
var inputs = input1 [i]; // แต่ละลูปได้รับวัตถุอินพุตและกำหนดค่าให้กับอินพุต
การแจ้งเตือน (อินพุต Value); // รับค่าค่าในแต่ละแท็กอินพุต
-
</script>
</body>
- getElementsByTagname ("ชื่อแท็ก"); ส่งคืนคอลเลกชัน (อาร์เรย์)
<body>
<อินพุต type = "text" name = "name1" value = "aaaaa"/> <br/>
<อินพุต type = "text" name = "name1" value = "bbbb"/> <br/>
<อินพุต type = "text" name = "name1" value = "cccccc"/> <br/>
<script type = "text/javascript">
var inputs1 = document.getElementsByTagname ("อินพุต"); // พารามิเตอร์ที่ผ่านเป็นชื่อของแท็ก
สำหรับ (var i = 0; i <inputs1.length; i ++) {
var input1 = inputs1 [i];
การแจ้งเตือน (input1.Value);
-
</script>
</body>
**** หมายเหตุ: มีเพียงหนึ่งฉลากและฉลากนี้สามารถรับได้โดยใช้ชื่อเท่านั้น ในเวลานี้การใช้ GetElementsByName ส่งคืนอาร์เรย์ แต่ตอนนี้มีเพียงองค์ประกอบเดียว ในเวลานี้ไม่จำเป็นต้องสำรวจ แต่คุณสามารถรับค่าโดยตรงผ่านตัวห้อยของอาร์เรย์
<input type = "text" name = "name1" value = "aaaaa"/>>>
var input1 = document.getElementsByName ("name1") [0];
การแจ้งเตือน (input1.Value);
กรณี: เคสป๊อปอัพหน้าต่าง
** กระบวนการใช้งาน: 1) คุณต้องสร้างหน้า: สองรายการอินพุตและปุ่มและมีเหตุการณ์บนปุ่มซึ่งเป็นป๊อปอัพหน้าต่างใหม่
2) สร้างหน้าป๊อปอัพ: แต่ละแถวของตารางมีปุ่มหมายเลขและชื่อ มีเหตุการณ์บนปุ่ม: กำหนดหมายเลขปัจจุบันและชื่อให้กับตำแหน่งที่สอดคล้องกันของหน้าแรก
** Opener Cross-Page Operation: คุณสามารถรับหน้าต่างที่สร้างหน้าต่างนี้ได้นั่นคือคุณสามารถรับหน้าต่างหลักได้
กรณี: เพิ่มโหนดในตอนท้าย
1) สร้างแท็ก LI
2) สร้างข้อความ
3) เพิ่มข้อความลงใน Li
4) เพิ่ม li ไปยัง ul
<body>
<ul id = "ulid">
<li> 1111 </li>
<li> 2222 </li>
<li> 3333 </li>
</ul> <br/>
<อินพุต type = "button" value = "เพิ่ม" onclick = "add1 ();"/>
<script type = "text/javascript">
ฟังก์ชั่น add1 () {
// รับแท็ก UL
var ul1 = document.getElementById ("ulid");
// สร้างแท็ก
var li1 = document.createElement ("li");
// สร้างข้อความ
var tex1 = document.createTextNode ("4444");
// เพิ่มข้อความลงใน li
Li1.AppendChild (Tex1);
// เพิ่ม li ไปยัง ul
UL1.AppendChild (LI1);
-
</script>
</body>
วัตถุองค์ประกอบ (วัตถุองค์ประกอบ): ในการใช้งานองค์ประกอบคุณต้องได้รับองค์ประกอบก่อนโดยใช้วิธีการที่สอดคล้องกันในเอกสารเพื่อให้ได้มัน
**วิธี
**** รับค่าในแอตทริบิวต์ getAttribute ("ชื่อแอตทริบิวต์");
**** ตั้งค่าของแอตทริบิวต์ setAttribute (ชื่อค่า);
**** ลบแอ็ตทริบิวต์รีดริบิวต์ ("ชื่อแอตทริบิวต์"); ไม่สามารถลบค่าได้
<อินพุต type = "text" name = "name1" id = "inputId" value = "AAAA"/>
<script type = "text/javascript">
// รับแท็กอินพุตก่อน
var input1 = document.getElementById ("inputId");
// Alert (input1.Value);
การแจ้งเตือน (input1.getAttribute ("value")); // รับค่าในแอตทริบิวต์
การแจ้งเตือน (input1.getAttribute ("คลาส"));
input1.setAttribute ("คลาส", "ฮ่าฮ่า"); // ตั้งค่าของแอตทริบิวต์
การแจ้งเตือน (input1.getAttribute ("คลาส"));
input1.RemoveAttribute ("ชื่อ");
</script>
** ต้องการรับคำบรรยายด้านล่างแท็ก
** ใช้แอตทริบิวต์ childNodes แต่แอตทริบิวต์นี้มีความเข้ากันได้ไม่ดี
** วิธีที่มีประสิทธิภาพเพียงอย่างเดียวในการรับแท็กภายใต้แท็กใช้วิธี getElementsByTagname
<body>
<ul id = "ulid1">
<li> aaaaaa </li>
<li> BBBBBB </li>
<li> CCCCCCCC </li>
</ul>
<script>
// รับแท็ก 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
** nodevalue
** เมื่อแยกวิเคราะห์ HTML โดยใช้ DOM แท็กแอตทริบิวต์และข้อความใน HTML จะต้องถูกห่อหุ้มลงในวัตถุ
** ค่าที่สอดคล้องกับโหนดแท็ก
nodetype: 1
NodeName: Caps Tag Name เช่น Span
nodevalue: null
** ค่าที่สอดคล้องกับโหนดแอตทริบิวต์
nodetype: 2
NodeName: ชื่อแอตทริบิวต์
NodeValue: ค่าของคุณสมบัติ
** ค่าที่สอดคล้องกับโหนดข้อความ
nodetype: 3
NodeName: #text
NodeValue: เนื้อหาข้อความ
** <body>
<span id = "spanid"> เนื้อหาข้อความ </span>
<script type = "text/javascript">
// รับวัตถุแท็ก
var span1 = document.getElementById ("spanid");
// Alert (span1.NodeType); // 1
// Alert (span1.nodename); // sapn
// Alert (span1.nodevalue); // โมฆะ
// คุณลักษณะ
var id1 = span1.getattributeNode ("id");
// Alert (ID1.NodeType); // 2
// alert(id1.nodeName); //id
// 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>
<ul id="ulid">
<li id="li1">aaaaa</li>
<li id="li2">bbbbb</li>
<li id="li3">ccccc</li>
<li id="li4">ddddd</li>
</ul>
<script type = "text/javascript">
/* // 得到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 id="ulid21">
<li id="li11">西施</li>
<li id="li12">王昭君</li>
<li id="li13">貂蝉</li>
<li id="li14">杨玉环</li>
</ul>
<input type="button" value="insert" onclick="insert1();"/>
<script type = "text/javascript">
// 在<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 id="ulid31">
<li id="li21">西施</li>
<li id="li22">王昭君</li>
<li id="li23">貂蝉</li>
<li id="li24">杨玉环</li>
</ul>
<input type="button" value="remove" onclick="remove1();"/>
<script type = "text/javascript">
// 删除<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 id="ulid41">
<li id="li31">西施</li>
<li id="li32">王昭君</li>
<li id="li33">貂蝉</li>
<li id="li34">杨玉环</li>
</ul>
<div id="divv">
</div>
<input type="button" value="clone" onclick="clone1();"/>
<script type = "text/javascript">
// 把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>
<span id="sid">测试文本</span>
<div id="div11">
</div>
<script type = "text/javascript">
// 获取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 id="times">
</div>
<script type = "text/javascript">
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/>
<input type="button" value="全选" onclick="selAll();"/>
<input type="button" value="全不选" onclick="selNo();"/>
<input type="button" value="反选" onclick="selOther();"/>
<script type = "text/javascript">
// 实现全选操作
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>
<option>111</option>
<option>111</option>
</เลือก>
** 创建一个页面
** 两个下拉框设置属性multiple
** 四个按钮， 都有事件
** 代码实现：
<body>
<div id="s1" style="float:left;">
<div>
<select id="select1" multiple="multiple">
<option>1111111</option>
<option>22222222</option>
<option>33333333</option>
<option>444444444</option>
</เลือก>
</div>
<div>
<input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
<input type="button" value="全部添加到右边" onclick="allToRight();"/>
</div>
</div>
<div id="s2">
<div>
<select id="select2" multiple="multiple">
<option>AAAAAAAA</option>
<option>BBBBBBBB</option>
</เลือก>
</div>
<div>
<input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左边" onclick="allToLeft();"/>
</div>
</div>
<script type = "text/javascript">
// 实现选中添加到右边
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 id="countryid" onchange="add1(this.value);">
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
</เลือก>
<select id="cityid">
<option value="" selected>
<option value="">
</เลือก>
<script type = "text/javascript">
// 创建一个数组存储数据
// 使用二维数组
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>
以上这篇JavaWeb学习笔记分享(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。