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工程师,面试官偏偏让我挑战造火箭工程师,加上今年这个情况更是前后两男,但再难苟且的生活还要继续,饭碗还是要继续找的.在最近的面试中我一直在总结,每次面试回来也都会复盘,下面是我这几 ...
随机推荐
- 使用springmvc从页面中获取数据，然后根据获得的参数信息进行修改，如果修改的数据中含有不是基本数据类型的参数。比如传的参数中有Date类型的数据时，需要我们进行参数类型转换。
1.1 需求 在商品修改页面可以修改商品的生产日期,并且根据业务需求自定义日期格式. 1.2 需求分析 由于日期数据有很多格式,所以springmvc没办法把字符串转换成日期类型.所以需要自定义参数绑 ...
- async与await
在方法上可以加 async,方法体内需要有 await,没有await的话,会出现warn警告.async单独出现是没有用的. await只能出现在Task前面.await Task的后面的代码会被封 ...
- Nmap参数说明
Nmap(Network Mapper)是一款开放源代码的网络探测和安全审核工具.它的设计目标是快速地扫描大型网络,不适应于单一主机.Nmap使用检测IP数据包来确定访问的主机.提供的服务.数据包的类 ...
- [freeCodeCamp] Start a Nodejs Server - Complete "Make it Modular"
_/home/ubuntu/.nvm/versions/node/v4.4.5/lib/node_modules/learnyounode/exer cises/make_it_modular/sol ...
- IIS 6 备忘
用IIS7久了, 回到IIS6 总被搞混,所以记录下,以备忘记. 以下是转载和整合了他人的资源,原出处不详. IIS Web 服务器的权限设置有两个地方,一个是 NTFS 文件系统本身的权限设置, ...
- MVC--SSM和SSH简介
- 2018.10.18 NOIP训练 [SCOI2018]Pipi 酱的日常（线段树）
传送门 线段树好题啊. 题目要求的是sum−a−b−c+maxsum-a-b-c+maxsum−a−b−c+max{∣a+v∣+∣b+v∣+∣c+v∣|a+v|+|b+v|+|c+v|∣a+v∣+∣b ...
- 2018.09.12 poj3621Sightseeing Cows（01分数规划+spfa判环）
传送门 01分数规划板题啊. 发现就是一个最优比率环. 这个直接二分+spfa判负环就行了. 代码: #include<iostream> #include<cstdio> # ...
- [docker]mesos集群的启动脚本
宿主机的IP地址列表 mesos-lb:192.168.253.159 mesos-marathon:192.168.253.159 mesos-master:192.168.253.159 meso ...
- HDU 2161 Primes （素数筛选法）
题意:输入一个数判断是不是素数,并规定2不是素数. 析:一看就很简单吧,用素数筛选法,注意的是结束条件是n<0,一开始被坑了... 不说了,直接上代码: #include <iostrea ...