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的数据交换代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>被封装的Ajax函数</title>
</head>
<body>
<script>
ajax({
method:'post',
url:'post.php',
date:{
user:'hyy',
pwd:'123456',
},
aysn:true,
success:function(date){
alert(date);
},
error:function(status){
alert('传输出错，状态码为:'+status);
}
});
function ajax(myJson){//传入一个JSON，其中包括传送方式、地址、数据包、是否异步状态、成功执行的回调函数、失败后执行的回调函数
var xhr = new XMLHttpRequest();
var method = myJson.method || 'get';//传送方式默认为'get'
var date = 'user='+myJson.date.user+'&'+'pwd='+myJson.date.pwd;
var date1 = 'user=hyy&pwd=123456';//判断这两种形式是否一模一样，参数传递发生错误时检查用
console.log(date === date1);//同上
switch(method){//传送方式的选择
case 'get':
xhr.open('get','get.php?'+date,myJson.aysn);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send();
console.log('执行了GET');
break;
case 'post':
xhr.open('post',myJson.url,myJson.aysn);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(date);
console.log('执行了POST');
break;
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){//响应确认
if(xhr.status >=200 && xhr.status <300){//响应执行
myJson.success(xhr.responseText);//执行成功后的回调函数
}
else{
myJson.error(xhr.status);//执行失败后的回调函数,返回状态码
}
}
}
}
</script>
</body>
</html>
<?php
header('content-type:text/html;charset="utf-8');
$user = $_GET['user'];
$pwd = $_GET['pwd'];
echo "您的用户名是：{$user},密码是：{$pwd}";
/*
$user = $_POST['user'];
$pwd = $_POST['pwd'];
echo "您的用户名是：{$user},密码是：{$pwd}";
*/
?>
例2、AJAX+JSP调用百度关键词库：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>跨域调用百度搜索数据</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 400px;
height: 43px;
margin: 100px auto;
font-family: 'Microsoft yahei';
position: relative;
overflow: flex;
}
#search {
width: 400px;
height: 40px;
letter-spacing: 1px;
text-indent: 10px;
font-size: 18px;
font-family: 'Microsoft yahei';
}
#list {
width: 402px;
border: 1px solid #999;
border-top: none;
position: absolute;
top: 43px;
display: none;
}
#list ul li {
width: 100%;
height: 25px;
line-height: 25px;
font-size: 16px;
list-style-type: none;
text-indent: 10px;
}
#list ul li a {
text-decoration: none;
display: block;
color: #333;
}
#list ul li a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="wrap">
<input type="text" id="search">
<div id="list">
<ul>
<!-- <li><a href="">联想词1</a></li>
<li><a href="">联想词2</a></li>
<li><a href="">联想词3</a></li>
<li><a href="">联想词4</a></li>
<li><a href="">联想词5</a></li> -->
</ul>
</div>
</div> <script>
var oSearch = document.getElementById('search');
var oList = document.getElementById('list');
var oUl = oList.getElementsByTagName('ul')[0];
oSearch.onkeydown = function(){//通过比较，down比up、press效果更好
var value = this.value;
// oSearch.style.borderColor = 'rgb(71,145,255)';
if(value){//如果搜索框内有值
oList.style.display = 'block';
var oS = document.createElement('script');
oS.src = 'https://www.baidu.com/sugrec?&prod=pc&wd='+value+'&cb=fn';
document.body.appendChild(oS);
}
else{
oList.style.display = 'none';
}
}
oSearch.onmouseleave = function(){
oList.style.display = 'none';
}
function fn(myJson){
oUl.innerHTML = '';
for (var i =0;i<myJson.g.length;i++){
var oLi = document.createElement('li');
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>';
console.log(myJson.g[i].q);
oUl.appendChild(oLi);
}
}; </script>
</body>
</html>
七、面向对象编程