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工程师,面试官偏偏让我挑战造火箭工程师,加上今年这个情况更是前后两男,但再难苟且的生活还要继续,饭碗还是要继续找的.在最近的面试中我一直在总结,每次面试回来也都会复盘,下面是我这几 ...
随机推荐
- 转载博客：rabbitmq
原文出处:http://www.cnblogs.com/sam-uncle/p/9202933.html 假设有这一些比较耗时的任务,按照上一次的那种方式,我们要一直等前面的耗时任务完成了之后才能接着 ...
- discuz回贴通知插件实现-插件的多语言
如果涉及到页面的展示,模板,提示信息,通常会 1.建立好需要的文字的翻译 在disucz的data/plugindata目录创建一个插件所使用的语言文件,命名方式为: 插件标识符.lang.php ...
- [Selenium]显式等待 Explicit wait & 隐式等待 Implicit wait
显式等待 Explicit wait 显示等待 , 就是明确的要等到某个元素出现或者某个元素满足某种条件,每隔一段时间检查一次,等不到,就一直等,如果在规定的时间内还没有找到,就跳出来检查间隔的时间和 ...
- Java NIO系列教程（十）DatagramChannel
Java NIO系列教程(十)DatagramChannel 转载自并发编程网 – ifeve.com,本文链接地址: Java NIO系列教程(十) Java NIO DatagramChannel
- Mockplus教程：分分钟搞定APP首页原型设计
Mockplus是一款快速原型设计工具,支持包括APP原型在内的多种原型与线框图设计.除了快速,Mockplus广受欢迎更因为它极低的上手门槛.今天小编就为大家展示如何用Mockplus在3分钟内完成 ...
- DataStage 九、数据交换到MySQL以及乱码问题
DataStage序列文章 DataStage 一.安装 DataStage 二.InfoSphere Information Server进程的启动和停止 DataStage 三.配置ODBC Da ...
- 【Linux】SVN的安装和配置
SVN SVN:SVN是Subversion的简称,是一种开放代码的版本控制系统,相比较RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制器服务已从CVS迁移到Su ...
- [转载红鱼儿]Delphi XE7 update1进步太大了
写以下的文字是怀着无比兴奋的心情写的,急于同朋友们分享XE7的进步! 1.更新的bug列表并不全 通过bug修正列表及发布的消息,可以看到up1修正了很多bug,正如我所说,有些bug并没有写到发布的 ...
- 2018.09.24 bzoj1816: [Cqoi2010]扑克牌（二分答案）
传送门 简单二分答案. 我们二分最终有k个牌堆. 这样joker被选择的张数≤min(k,m)\le min(k,m)≤min(k,m) 并且joker需要被选择的张数应该是∑i−1nmax(0,k− ...
- python入门前的准备
为什么学习python? python是一种高级脚本解释性语言,若运行for循环等肯定不如c或fortran快,但是它是开源的,有很多特别有用的库,代码以空格强制控制格式,形式优美简洁,且特别容易实现 ...