JavaScript学习知识点归纳-优快云博客

本文全面解析JavaScript学习路径，涵盖基础语法、核心对象、DOM与BOM操作、正则表达式、AJAX应用及面向对象编程。深入探讨了AJAX与PHP、JSP的数据交互实例，以及动态网页开发技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript学习包括几大方面：

　　1、基础语法

　　2、JavaScript核心对象

　　3、DOM操作

　　4、BOM操作

　　5、正则表达式

　　6、AJAX

　　7、面向对象编程

以下依次为各版块相关内容==>

　　一、基础语法

　　1、变量：var a = 1,b = 2, c = 3;

　　?、js的数据类型：number、string、boolean、function、object、undefined(占空间)、null(不占空间);　　　　//typeof()获取变量的数据类型

　　?、函数：

　　　　(1) 定义函数

　　　　(2) 函数执行

　　　　　　　　i、主动执行　　函数名();

　　　　　　　　ii、被动执行　　对象.事件 = 函数名(或者匿名函数);

　　　　(3)

　　二、JavaScript核心对象

此处先不撰写，若有忘记查阅课本相关笔记~~~

　　三、DOM操作 (兼容性问题很多)

　　1、DOM获取页面的标签：

　　　　(1) document.getElementById('id');　　//根据id返回文档的第一个对象的引用

　　　　(2) document.getElementsByClassName('class');　　//根据class返回文档的对象集合

　　　　(3) document.getElementsByTagName('h1');　　//根据标签名返回文档的对象集合

　　　　(4) document.getElementsByName('name');　　//根据name返回文档的集合　　　　<==(适用于表单内)

　　　　拓展：对于id，随着程序的执行将永远不变，而其余的都会动态改变

　　2、JavaScript的输出方式：

　　　　(1) 对象.innerHTML = 'hello world!';　　//单引号内为写入的内容　　<== 可读可写

　　　 (2) alert()、confirm()、prompt();　　//confirm提供OK及cancel的按钮，prompt为提示输入框；

　　　 (3) console.log();　　//F12中的调试窗口的输出函数

　　3、动态操作结点：

　　　　结点类型有12种，根据.nodeType的值(1~12)从小到大排序：

　　　　　　　　1、元素结点；2、属性结点；3、文本节点；4、CDATA结点；5、实体引用名结点；6、实体名称结点；

　　　　　　　　7、处理指令结点；8、注释结点；9、文档结点；10、文档类型结点；11、文档片段结点；12、DTD声明结点；

　　　　(1) 创建结点

　　　　　　　　i、document.createElement('div');　　<==常用

　　　　　　　　ii、document.createTextNode();　　

　　　　(2) 删除结点：

　　　　　　　　oDiv.parentNode.removeChild(oDiv);　　<== 因原生js中不能直接删除结点，故需要先找到父节点，再删除子结点

　　　　　　　　removeChild();　　//移除当前结点的指定子结点　　<== 没用过

　　　　　　　　removeNode();　　//移除当前结点　　<== 没用过

　　　　(3) 查找结点

　　　　　　　　offsetParent　　// 相对于定位过的父结点，没有定位则父结点为body　　<==常用

　　　　　　　　offsetLeft / offsetTop　　//得到该元素在被定位后的父结点的left、top值　　　<==为了解决不产生默认的auto值，而得到具体的值

　　　　　　　　parentNode();　 //获取当前结点的父结点

　　　　　　　　childNodes();　　//获取当前结点的子结点集合，IE6、7、8只包含元素结点，其余的包含文本和元素结点

　　　　　　　　children();　　　 //获取当前结点的子结点集合，但只包含元素结点，推荐使用

　　　　　　　　firstChild();　　//第一个子结点，IE6、7、8只会是元素结点，其他的可能是文本或元素结点

　　　　　　　　firstElementChild();　　//IE6、7、8没有这个属性，其他的为第一个元素结点，若根本没有子元素，得到的是null　　<==推荐使用

　　　　　　　　同上有：lastChild();/lastElementChild();　　//最后一个孩子结点

　　　　　　　　　　　　nextSibling;/nextElementSibling;　　//下一个兄弟结点

　　　　　　　　　　　　previousSibling;/previousElementSibling;　　//上一个兄弟结点

　　　　(4) 修改结点

　　　　　　　　appendChild();　　//在当前结点中追加一个子结点

　　　　　　　　replaceChild(index);　　//按照索引将当前结点的指定子结点替换成新的结点

　　　　　　　　replaceNode();　　//将当前结点替换成新的结点

　　　　(5) 读/写结点的属性内容的方法

　　　　　　　　getAttribute();　　//获取属性

　　　　　　　　setAttribute();　　//设置属性

　　　　　　　　removerAttribute();　　//移除属性，当先被修改后再删除，不会影响原标签，会自动调到下一个对象

　　　　　　　　注意事项：获取类及标签是动态的，在每次通过属性修改会发生响应改变

　　　　　　　　innerHTML　　//设置或修改当前结点的内容

　　　　(6) 拓展：DOM的宽 / 高问题

　　　　　　　　元素的宽高：clientWidth / clientHeight　　//width+padding

　　　　　　　　　　　　　　offsetWidth / offsetHeight　　//width+padding+border

　　　　　　　　　　　　　　scrollWidth / scrollHeight　　//实际内容的宽度/高度，有滚动条时会比client大

　　　　　　　　页面可视区宽高：docuement.documentElement.clientWidth　　//也可用window.innerWidth,IE6、7、8没有这个属性

　　　　　　　　滚动条的宽度 / 高度：document.documentElement.srcollTop　　//或document.body.scrollTop,这个只适用于Chrome浏览器　　　　　　　　

　　四、BOM操作

本这应是写完DOM后第二个需要撰写的博客内容，明天比赛，不得分心，缓几天再补充，每天多学习一会，多进步一点，加油加油！

　　五、正则表达式

　　六、AJAX(异步JavaScript和XML)

　　AJAX并不是一项新技术，而是将JavaScript、XML、CSS等各种技术融合一起，

　　作用为：1、可只更新部分页面的内容，而不需重新加载整个页面；2、关键词搜索

　　例1、AJAX与PHP的数据交换代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>被封装的Ajax函数</title>
 8 </head>
 9 <body>
10     <script>
11         ajax({
12             method:'post',
13             url:'post.php',
14             date:{
15                 user:'hyy',
16                 pwd:'123456',
17             },
18             aysn:true,
19             success:function(date){
20                 alert(date);
21             },
22             error:function(status){
23                 alert('传输出错，状态码为:'+status);
24             }
25         });
26         function ajax(myJson){//传入一个JSON，其中包括传送方式、地址、数据包、是否异步状态、成功执行的回调函数、失败后执行的回调函数
27             var xhr = new XMLHttpRequest();
28             var method = myJson.method || 'get';//传送方式默认为'get'
29             var date = 'user='+myJson.date.user+'&'+'pwd='+myJson.date.pwd;
30             var date1 = 'user=hyy&pwd=123456';//判断这两种形式是否一模一样，参数传递发生错误时检查用
31             console.log(date === date1);//同上
32             switch(method){//传送方式的选择
33                 case 'get':
34                     xhr.open('get','get.php?'+date,myJson.aysn);
35                     xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
36                     xhr.send();
37                     console.log('执行了GET');
38                     break;
39                 case 'post':
40                     xhr.open('post',myJson.url,myJson.aysn);
41                     xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
42                     xhr.send(date);
43                     console.log('执行了POST');
44                     break;
45             }
46             xhr.onreadystatechange = function(){
47                 if(xhr.readyState == 4){//响应确认
48                     if(xhr.status >=200 && xhr.status <300){//响应执行
49                        myJson.success(xhr.responseText);//执行成功后的回调函数
50                     }
51                     else{
52                         myJson.error(xhr.status);//执行失败后的回调函数,返回状态码
53                     }
54                 }
55             }
56         }
57     </script>
58 </body>
59 </html>

View Code

 1 <?php
 2 
 3 header('content-type:text/html;charset="utf-8');
 4 $user = $_GET['user'];
 5 $pwd = $_GET['pwd'];
 6 echo "您的用户名是：{$user},密码是：{$pwd}";
 7 
 8 /*
 9 $user = $_POST['user'];
10 $pwd = $_POST['pwd'];
11 echo "您的用户名是：{$user},密码是：{$pwd}";
12 */
13 
14 ?>

View Code

　　例2、AJAX+JSP调用百度关键词库：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>跨域调用百度搜索数据</title>
  8     <style>
  9         * {
 10             margin: 0;
 11             padding: 0;
 12         }
 13         #wrap {
 14             width: 400px;
 15             height: 43px;
 16             margin: 100px auto;
 17             font-family: 'Microsoft yahei';
 18             position: relative;
 19             overflow: flex;
 20         }
 21         #search {
 22             width: 400px;
 23             height: 40px;
 24             letter-spacing: 1px;
 25             text-indent: 10px;
 26             font-size: 18px;
 27             font-family: 'Microsoft yahei';
 28         }
 29         #list {
 30             width: 402px;
 31             border: 1px solid #999;
 32             border-top: none;
 33             position: absolute;
 34             top: 43px;
 35             display: none;
 36         }
 37         #list ul li {
 38             width: 100%;
 39             height: 25px;
 40             line-height: 25px;
 41             font-size: 16px;
 42             list-style-type: none;
 43             text-indent: 10px;
 44         }
 45         #list ul li a {
 46             text-decoration: none;
 47             display: block;
 48             color: #333;
 49         }
 50         #list ul li a:hover {
 51             background-color: #ddd;
 52         }
 53     </style>
 54 </head>
 55 <body>
 56     <div id="wrap">
 57         <input type="text" id="search">
 58         <div id="list">
 59             <ul>
 60                 <!-- <li><a href="">联想词1</a></li>
 61                 <li><a href="">联想词2</a></li>
 62                 <li><a href="">联想词3</a></li>
 63                 <li><a href="">联想词4</a></li>
 64                 <li><a href="">联想词5</a></li> -->
 65             </ul>
 66         </div>
 67     </div>
 68 
 69     <script>
 70         var oSearch = document.getElementById('search');
 71         var oList = document.getElementById('list');
 72         var oUl = oList.getElementsByTagName('ul')[0];
 73         oSearch.onkeydown = function(){//通过比较，down比up、press效果更好
 74             var value = this.value;
 75             // oSearch.style.borderColor = 'rgb(71,145,255)';
 76             if(value){//如果搜索框内有值
 77                 oList.style.display = 'block';
 78                 var oS = document.createElement('script');
 79                 oS.src = 'https://www.baidu.com/sugrec?&prod=pc&wd='+value+'&cb=fn';
 80                 document.body.appendChild(oS);
 81             }
 82             else{
 83                 oList.style.display = 'none';
 84             }
 85         }
 86         oSearch.onmouseleave = function(){
 87             oList.style.display = 'none';
 88         }
 89         function fn(myJson){
 90                 oUl.innerHTML = '';
 91                 for (var i =0;i<myJson.g.length;i++){
 92                     var oLi = document.createElement('li');
 93                     oLi.innerHTML = '<a href='+'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd='+myJson.g[i].q+' target="_blank">'+myJson.g[i].q+'</a>';
 94                     console.log(myJson.g[i].q);
 95                     oUl.appendChild(oLi);
 96                 }
 97         };
 98         
 99     </script>
100 </body>
101 </html>