JavaScript学习知识点归纳
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>
七、面向对象编程
JavaScript学习知识点归纳的更多相关文章
- javascript学习(知识点整理)
有了这个代码,就可以在定义 中增加更多的控制了 后面会举例关于extjs定义的更多控制 此种方案可以解决定义时需要一些函数调用的情况 函数作用域和声明提前: 即由于js是解释性语言,在执行前会 ...
- 给Java新手的一些建议----Java知识点归纳(J2EE and Web 部分)
J2EE(Java2 Enterprise Edition) 刚出现时一般会用于开发企业内部的应用系统,特别是web应用,所以渐渐,有些人就会把J2EE和web模式画上了等号.但是其实 J2EE 里面 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- Javascript学习6 - 类、对象、继承
原文:Javascript学习6 - 类.对象.继承 Javasciprt并不像C++一样支持真正的类,也不是用class关键字来定义类.Javascript定义类也是使用function关键字来完成 ...
- JavaScript学习心得
javaScript十分的强大,所以自然而然学起来也是不易的,想要掌握它的核心,把它理解透更是不易的,但只要你能够静下心来,耐心的去钻研,学习,还是可以把它给学好的,加油吧! 下面是一些JavaScr ...
- javascript学习的思维导图
今天逛师父的博客园,发现了好东西~~~~我给偷过来了~~~那就是javascript学习的思维导图,比自己整理更快速. 思维导图小tips: 思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ...
- javascript学习路线图
史上最全的javascript学习路线图 JavaSctipt学习路线 完成整个课程大纲需要花上6~8周的时间,将学会完整的JavaScript语言(包括jQuery和一些HTML5).如果你没有时间 ...
- 前端开发 JavaScript 干货知识点汇总
很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...
- 由浅入深，66条JavaScript面试知识点
前言 我只想面个CV工程师,面试官偏偏让我挑战造火箭工程师,加上今年这个情况更是前后两男,但再难苟且的生活还要继续,饭碗还是要继续找的.在最近的面试中我一直在总结,每次面试回来也都会复盘,下面是我这几 ...
随机推荐
- mysql经典案例分析
问题: create table A ( id varchar(64) primary key, ver int, ...)在id,ver上有联合索引,10000条数据为什么select id fro ...
- LocalBroadcastManager 的使用
一.使用本地广播发送一条广播(本例为自己发送自己接收,本地广播也可以是其他应用接收)然后接收到广播时回调Receiver类中的回调方法onReceive()在此方法中自定义发出通知 代码 packag ...
- IIS PHP Warning: Unknown: open(c:\\php\\tmp\\sess_xxx, O_RDWR) failed: Permission denied (13) in Unknown on line 0
出现这个问题的原因是你修改了php保存session的路径,但没有给用户访问该目录的权限. 右键该目录,给users用户组读.写的权限.
- C盘满了如何清理
一.C:\inetpub\logs\LogFiles\ 中的日志文件可以全部删除二.C盘上右键>属性>磁盘清理 和 系统磁盘清理三.百度下载:魔方清理大师>逐项清理四.卸载较大的不常 ...
- apicloud管理
以下所有操作都是指“apicloud”平台下的管理: 1. 一定要记得备份证书.证书不是因为你记得别名和密码就能还原的.因为apicloud是服务器session存数据,千万不要打开多个app操作页面 ...
- ubuntu16下Elasticsearch5.1.1安装部署
本人在安装es5.1.1版本时候整理的一些过程,参照了网上部分过程:其中过程中也出现一些其它问题,出现的问题和解决方案都整理在此文中. 1Elasticsearch5.1.1安装 到ES官网https ...
- 2018软工项目UML设计（团队）
团队信息 队名:火箭少男100 本次作业课上成员 短学号 名 本次作业博客链接 2507 俞辛(临时队长) https://www.cnblogs.com/multhree/p/9821080.htm ...
- 2018.07.20 洛谷P4178 Tree（点分治）
传送门 又一道点分治. 直接维护子树内到根的所有路径长度,然后排序+双指针统计答案. 代码如下: #include<bits/stdc++.h> #define N 40005 using ...
- hdu-1067（最大独立集）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1068 题意:一个男生集合和一个女生集合,给出两个集合之间一一对应的关系,求出两个集合中最大独立集的点数 ...
- APMServ—优秀的PHP集成环境工具
经常折腾wordpress和各种php开发的cms,免不了要在本地测试这些程序,所以选择一款好的php集成环境就至关重要啦.之前在月光博客上看到有一篇“常见的WAMP集成环境”介绍,然后先后试用过XA ...