前言
不必害怕未知，无需恐惧犯错，做一个Creator！
目录
一、 简介
JavaScript，一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行。用于控制着网页的行为。
1.引入方式
想要在HTML中引入JavaScript，一般有3种方式。
（1）外部JavaScript
（2）内部JavaScript
（3）元素事件JavaScript
外部JavaScript
把HTML代码和JavaScript代码单独放在不同文件。
<script src="index.js"></script>
src，指向的是文件路径。
内部JavaScript
把HTML代码和JavaScript代码放在同一个文件。
<script>
……
</script>
JavaScript代码写在标签对内
元素属性JavaScript
在元素的“事件属性”中直接编写JavaScript或调用函数。
<body>
<input type="button" value="按钮" onclick="alert('绿叶学习，给你初恋般的感觉')"/>
</body>
二、 基本语法
1.简介
JavaScript主要包含以下7个方面的语法。
（1）常量与变量
（2）数据类型
（3）运算符
（4）表达式与语句
（5）类型转换
（6）转义字符
（7）注释
变量
所有JavaScript变量都是由var声明。
var 变量名 = 值;
var n = 1001;
var str = "字符串定义~";
字符串运算
当一个字符串加上另外一个字符串时，运算规则是将两个字符串连接起来；
当一个字符串加上一个数字时，JavaScript会将数字变成字符串，然后再连接起来。
数据类型转换
字符串转数字
（1）Number()
（2）parseInt()和parseFloat()
数字转字符串
（1）与空字符串相加
（2）toString()
转义字符
转义字符，指的是在默认情况下某些字符在浏览器是无法显示的，不过为了能够让这些字符能够显示出来，我们可以使用这些字符对应的转义字符来代替。
英文单引号；英文双引号
注释
//单行注释
/* 多行注释 */
代码换行
代码中字符串换行只需要在字符串每一行后面加上个反斜杠（\）就可以了。
2.函数
定义
function 函数名(参数1 , 参数2 ,..., 参数n)
{
……
return 返回值;
}
调用
函数名(实参1, 实参2, … , 实参n);
var n = addSum(1, 2) + 100;
在超链接在调用：
<a href="javascript:expressMes()">表白对话</a>
在事件中调用：
<input type="button" onclick="alertMes()" value="提交" />
3.内置对象
指的是不需要自己定义（即系统已经定义好的）可以直接使用的对象：
（1）字符串对象：String
（2）数组对象：Array
（3）日期对象：Date
（4）数值对象：Math
字符串
（1）字符串长度
（2）大小写转换
（3）获取某个字符
（4）截取字符串
（5）替换字符串
（6）分割字符串
（7）检索字符串的位置
数组
（1）赋值
（2）获取长度
（3）截取数组部分
（4）添加数组
（5）删除数组
（6）数组颠倒顺序
（7）数组连接成字符串
时间对象
var 日期对象名 = new Date();
Date对象的方法有很多，主要分为两大类：getXxx()和setXxx()。getXxx()用于获取时间，setXxx()用于设置时间。
数学对象
Math.属性
Math.方法
120*Math.PI/180 //120° 150*Math.PI/180 //150
三、 DOM
1.简介
全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。DOM操作，可以简单理解成“元素操作”。
DOM节点共有12种类型，不过常见的只有3种。
（1）元素节点
（2）属性节点
（3）文本节点
（1）一个元素就是一个节点，这个节点称之为“元素节点”。
（2）属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。
2.元素基础操作
获取元素
通过以下6种方式来获取指定元素。
（1）getElementById()
document.getElementById(“id名”)
（2）getElementsByTagName()
document. getElementsByTagName(“标签名”)
（3）getElementsByClassName()
document. getElementsByClassName(“类名”)
（4）querySelector()和querySelectorAll()
document.querySelector(“选择器”);
document.querySelectorAll(“选择器”);
（5）getElementsByName()
document.getElementsByName(“name名”)
（6）document.title和document.body
元素创建
var e1 = document.createElement(“元素名”); //创建元素节点
var txt = document.createTextNode(“文本内容”); //创建文本节点
e1.appendChild(txt); //把文本节点插入元素节点中
e2.appendChild(e1); //把组装好的元素插入已存在的元素中
插入元素
A.appendChild(B);
使用appendChild()把一个新元素插入到父元素的内部子元素的末尾
A表示父元素，B表示动态创建好的新元素。
insertBefore(B,ref);
使用insertBefore()方法将一个新元素插入到父元素中的某一个子元素“之前”
删除元素
使用removeChild()方法来删除父元素下的某个子元素
A.removeChild(B);
复制元素
使用cloneNode()方法来实现复制元素
obj.cloneNode(bool)
替换元素
A.replaceChild(new,old);
3.DOM进阶使用
HTML属性操作
指的是使用JavaScript来操作一个元素的HTML属性。
obj.getAttribute(“attr”)
obj是元素名，attr是属性名。使用getAttribute()方法来获取元素的某个属性的值。
obj.setAttribute(“attr”,“值”)
使用setAttribute()方法来设置元素的某个属性的值。
obj.removeAttribute(“attr”)
使用removeAttribute()方法来删除元素的某个属性。
obj.hasAttribute(“attr”)
使用hasAttribute()方法来判断元素是否含有某个属性。
obj.hasAttribute(“attr”)
使用hasAttribute()方法来判断元素是否含有某个属性。hasAttribute()方法返回一个布尔值，如果包含该属性，则返回true。如果不包含该属性，则返回false。
CSS属性操作
CSS属性操作，指的是使用JavaScript来操作一个元素的CSS样式。
getComputedStyle(obj).attr
使用getComputedStyle()方法来获取一个CSS属性的取值。
obj.style.attr = “值”;
使用style对象来设置一个CSS属性的值，其实就是在元素的style属性来添加样式，这个设置的是“行内样式”。
obj.style.cssText = “值”;
可以使用cssText属性来同时设置多个CSS属性，这也是在元素的style属性来添加的。
DOM遍历
查找父元素。
obj.parentNode
查找子元素。
（1）childNodes、firstChild、lastChild
（2）children、firstElementChild、lastElementChild
其中，childNodes获取的是所有的子节点。注意，这个子节点是包括元素节点以及文本节点的。而children获取的是所有的元素节点，不包括文本节点。
查找兄弟元素。
（1）previousSibling、nextSibling
（2）previousElementSibling、nextElementSibling
previousSibling查找前一个兄弟节点，nextSibling查找后一个兄弟节点。previousElementSibling查找前一个兄弟元素节点，nextElementSibling查找后一个兄弟元素节点。
inner
innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容。
document.body.innerHTML = '<img class="pic" src="images/haizei.png" style="border:1px solid silver"/>';
四、 事件与对象
1.简介
JavaScript常见的事件共有以下5种。
（1）鼠标事件
（2）键盘事件
（3）表单事件
（4）编辑事件
（5）页面事件
在script标签中调用事件
指的是在< script >< /script >标签内部调用事件。
obj.事件名 = function()
{
……
};
在元素中调用事件
指的是直接在HTML属性中来调用事件，这个属性又叫做“事件属性”。
<script>
function alertMes()
{ alert("绿叶学习网"); }
</script>
<input type="button" onclick="alertMes()" value="弹出" />
一个浏览器窗口就是一个window对象。
对于window对象来说，无论是它的属性，还是方法，都可以省略window前缀。例如window.alert()可以简写为alert()。
2.事件操作
鼠标事件
当用户将鼠标移入到某个元素上面时，就会触发onmouseover事件。
当用户将鼠标移出某个元素时，就会触发onmouseout事件。
当用户按下鼠标时，会触发onmousedown事件。
当用户松开鼠标时，则会触发onmouseup事件。
键盘事件
在JavaScript中，常用的键盘事件共有2种。
（1）键盘按下：onkeydown
（2）键盘松开：onkeyup
表单事件
onfocus表示获取焦点时触发的事件，而onblur表示失去焦点时触发的事件，两者是相反操作。（单击效果）
具有“获取焦点”和“失去焦点”特点的元素只有2种：
（1）表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）
（2）超链接
页面一打开的时候，文本框就已经自动获取到了焦点：focus()
window.onload = function ()
{ var oTxt = document.getElementById("txt"); oTxt.focus(); }
当选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件。（双击效果）
onchange事件常用于“具有多个选项的表单元素”。
（1）单选框选择某一项时触发。
（2）复选框选择某一项时触发。
（3）下拉列表选择某一项时触发。
编辑事件
使用oncopy事件来防止页面内容被复制。
document.body.oncopy = function ()
{ return false; }
使用onselectstart事件来防止页面内容被选取
document.body.onselectstart=function()
{ return false; }
使用oncontextmenu事件来禁止鼠标右键
document.oncontextmenu = function ()
{ return false; }
页面事件
onload表示文档加载完成后再执行的一个事件
window.onload = function(){ …… }
onbeforeunload表示离开页面之前触发的一个事件
window.onbeforeunload = function(){ …… }
Event对象
我们想要获取按下了键盘中的哪个键，可以使用event对象的keyCode属性来获取。event.keyCode返回的是一个数字，而event.shiftKey、event.ctrlKey、event.altKey返回的都是布尔值（true或false）。
var oBtn = document.getElementById("btn");
oBtn.onclick = function (e) { alert(e.type); };
This使用
哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。
3.window对象
打开窗口
window.open(url, target)
url指的是新窗口的地址，如果url为空，则表示打开一个空白窗口。
target表示打开方式，它的取值跟a标签中target属性的取值是一样的，常用取值有两个：_blank和_self。当target为“_blank（默认值）”，表示在新窗口打开；当target为“_self”时，表示在当前窗口打开。
关闭窗口
使用window.close()来关闭一个新窗口
对话框
对话框有3种： alert()、confirm()和prompt()。
对话框有3种： alert()、confirm()和prompt()。
alert(“提示文字”)
alert()对话框一般仅仅用于提示文字。在alert()中实现文本换行，用的是\n。
confirm(“提示文字”)
confirm()对话框不仅提示文字，还提供确认。当我们点击【确定】按钮时，confirm()会返回true。当我们点击【取消】按钮时，confirm()会返回false。
prompt(“提示文字”)
prompt()对话框不仅提示文字，还返回一个字符串。
定时器
使用setTimeout()方法来“一次性”地调用函数。
使用clearTimeout()来取消执行setTimeout()。
setTimeout(code, time);
参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。
使用setInterval()方法来“重复性”地调用函数
使用clearInterval()来取消执行setInterval()。
setInterval(code, time);
setInterval()跟setTimeout()语法是一样的，唯一不同的是：setTimeout()只执行一次；而setInterval()可以重复执行无数次。
Location对象
使用window对象下的location子对象来操作当前窗口的URL。
window.location.href
使用location对象的href属性来获取或设置当前页面的地址。
window.location.search
使用location对象的search属性来获取和设置当前页面地址“?”后面的内容。
地址“?”后面这些内容，也叫querystring（查询字符串），一般用于数据库查询
使用location对象的hash属性来获取和设置当前页面地址井号（#）后面的内容。井号（#）一般用于锚点链接。
4.document对象
操作的是HTML文档里所有的内容。
document.URL
使用document对象的URL属性来获取当前页面的地址。
document.URL只能获取不能设置；window.location.href既可以获取也可以设置。
使用document对象的referrer属性来获取用户在访问当前页面之前所在页面的地址。
对象使用
使用document.write()输出内容。
document.write(“内容”);
writeln()方法会在输出内容后面多加上一个换行符\n。
document.writeln(“内容”)
提示：本内容学习自《绿叶学习网》，推荐大家可以使用其学习。若有错误不足，欢迎批评指正。该系列文章仅供参考，欢迎互相学习交流。
感谢你的阅读，期待你的关注收藏点赞！
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
