JavaScript介绍
JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScript是浏览器解释执行的。
前端三大块
- HTML：页面结构
- CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
- JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
JavaScript嵌入页面的方式
-
行内式
<input type="button" name="" onclick="alert('ok！');"> -
内嵌式
<script type="text/javascript"></script> -
外链式
<script type="text/javascript" src="js/index.js"></script>
变量、数据类型及基本语法规范
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’
var iNum = 123;
var sTr = 'asd';
//同时定义多个变量可以用","隔开，公用一个‘var’关键字
var iNum = 45,sTr='qwe',sCount='68';
变量类型
5种基本数据类型：
- number 数字类型
- string 字符串类型
- boolean 布尔类型 true 或 false
- undefined undefined类型，变量声明未初始化，它的值就是undefined
- null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
1种复合类型：object
查看数据类型
typeof()
数据类型转换
String() / Number() / Boolean()
javascript语句与注释
1、javascript语句开始可缩进也可不缩进，缩进是为了方便代码阅读，一条javascript语句应该以“;”结尾;
<script type="text/javascript">
var iNum = 123;
var sTr = 'abc123';
function fnAlert(){
alert(sTr);
};
fnAlert();
</script>
2、javascript注释
<script type="text/javascript">
// 单行注释
var iNum = 123;
/*
多行注释
1、...
2、...
*/
var sTr = 'abc123';
</script>
变量、函数、属性、函数参数命名规范
- 区分大小写
- 第一个字符必须是字母、下划线（_）或者美元符号（$）
- 其他字符可以是字母、下划线、美元符（$）或数字
运算符
==、===、>、>=、<、<=、!=、&&(and)、||(or)、!(not)
===: js特有: ==只要数值相同就行,三连等要求数据类型也相同
<script>
alert(0 == false && 1 == true)
alert(0 == false || 1 == true)
alert(! -1)
// && || 显示的是boolean值(true/false)
// & | 显示的是0/1
// ！ 非0即真
</script>
条件语句
if else
var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
sTr = '大于';
}
else
{
sTr = '小于';
}
alert(sTr);
if … else if …else
var iNow = 1;
if(iNow==1)
{
... ;
}
else if(iNow==2)
{
... ;
}
else
{
... ;
}
函数
函数就是重复执行的代码片。
函数定义与执行
<script type="text/javascript">
// 函数定义
function fnAlert(){
alert('hello!');
}
// 函数执行
fnAlert();
</script>
变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。
<script type="text/javascript">
fnAlert(); // 弹出 hello！
alert(iNum); // 弹出 undefined
function fnAlert(){
alert('hello!');
}
var iNum = 123;
</script>
函数传参 javascript的函数中可以传递参数。
<script type="text/javascript">
function fnAlert(a){
alert(a);
}
fnAlert(12345);
</script>
函数’return’关键字
函数中’return’关键字的作用：
- 返回函数中的值或者对象
- 结束函数的运行
<script type="text/javascript">
function fnAdd(iNum01,iNum02){
var iRs = iNum01 + iNum02;
return iRs;
alert('here!');
}
var iCount = fnAdd(3,4);
alert(iCount); //弹出7
</script>
获取元素
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>
上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：
第一种方法：将javascript放到页面最下边
....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>
第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">这是一个div元素</div>
操作元素标签
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作元素属性
var 变量 = 元素.属性名 读取属性
元素.属性名 = 新属性值 改写属性
属性名在js中的写法
- html的属性和js里面属性写法一样
- “class” 属性写成 “className”
- “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
innerHTML
innerHTML可以读取或者写入标签包裹的内容
<script>
// 名字: 入口函数。
// window.onload：整个页面加载外币在执行函数中的逻辑。
window.onload = function(){
// 需求: 操作标签上的属性.
// 1.获取a标签
var a = document.getElementById('box')
// 2.操作属性;
// a.普通属性: id、title、src、name、href...
a.id = 'aaa'
a.href = 'http://www.baidu.com'
a.title = '我是a标签'
a.className = 'box2'
a.style.background = 'blue'
div.style.fontSize = '33px'
// js操作link标签，引入外链式css， 操作href属性
var link = document.getElementById('bbb')
link.href = 'css/index.css'
// b.双标签内部的内容。 innerHMTL
// 可以获取值，也可以赋值。(识别标签)
console.log(a.innerHTML)
a.innerHTML = '<s>我是a标签被替换的内容</s>'
// c.input中的value属性，用的比较多，所以单独取出来，也和普通属性一样操作
var inp1 = document.getElementById('input1')
// 获取和赋值
console.log(inp1.value)
inp1.value = '我是赋值后的内容...'
}
</script>
<style>
.box2 {
background: red;
}
</style>
<link id="bbb" rel="stylesheet" href="">
.....
<a href="#" id="box">
<i>我是a标签</i>
</a>
<input id="input1" type="text" value="我是input默认值">
事件属性
元素上除了有样式，id等属性外，还有事件属性，常用的事件属性有鼠标点击事件属性(onclick)，鼠标移入事件属性(onmouseover),鼠标移出事件属性(onmouseout),将函数名称赋值给元素事件属性，可以将事件和函数关联起来。
<script>
window.onload = function(){
// 事件驱动: 就是像元素上面绑定一个事件，当事件被触发的时候，后面的函数就会被调用。
// js是一门以事件驱动为核心的语言。
// 事件驱动三个点:
// 1.获取标签。
// 2.绑定事件。
// 3.书写匿名函数中的逻辑。
// 1.获取标签。
var box = document.getElementById("box");
// 2.绑定事件。(被点击以后触动后面的函数)
box.onclick = function(){
// 3.书写匿名函数中的逻辑。
alert('额，我被点击了...')
box.style.background = 'red'
// 隐藏盒子
// box.style.display = 'none'
}
}
</script>
......
<div id="box">我是div</div>
匿名函数
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联，这样可以减少函数命名，并且简化代码。函数如果做公共函数，就可以写成匿名函数的形式。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>
循环语句
程序中进行有规律的重复性操作，需要用到循环语句。
<script>
// 1.while循环: 一般用于指定次数的循环。
// var i = 1
// while (i <= 5){
// console.log(i)
// // 想要指定次数循环，应该记得让变量增加。
// i++ // ++ 就是 += 1
// }
// 2.for循环: for循环一般用于遍历数组(列表)/字符串
// for(var i=0;i<=10;i++){
// console.log(i)
// }
// 3: 死循环
// while (true){
// // 满足条件退出:break...
// }
// for(;;){
// alert(1)
// }
</script>
数组
数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
数组的定义
//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];
操作数组中数据的方法
1、获取数组的长度：aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 弹出4
2、用下标操作数组的某个数据：aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 弹出1
3、join() 将数组成员通过一个分隔符合并成字符串
var arr = [1,2,3,4];
var str = arr.join('-') // 弹出 1-2-3-4
// var str = arr.join() // 不传递参数，用逗号链接
// var str = arr.join(' ') // 传递参数空格，真的用空格链接
// var str = arr.join('') // 传递参数空字符串，无缝链接
// console.log(str)
4、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4
5、reverse() 将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1
6、indexOf() 返回数组中元素第一次出现的索引值(没有返回-1)
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
7、splice() 在数组中增加或删除成员
var aList = [1,2,3,4];
//指定位置替换：从索引值为2的元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
aList.splice(2,1,7,8,9);
alert(aList); //弹出 1,2,7,8,9,4
//指定位置添加：从索引值为2的元素开始，删除0个元素，然后在此位置增加'7,8,9'三个元素
aList.splice(2,0,7,8,9);
alert(aList); //弹出 1,2,7,8,9,3,4
//指定位置删除：从索引值为2的元素开始，删除1个元素
aList.splice(2,1);
alert(aList); //弹出 1,2,4
8、sort() 排序
<script>
var newArr = [3, 7, 6, 4, 5, 11, 2]
console.log(newArr)
// sort方法，一定要传入匿名函数。
newArr.sort(function(a, b){
// 第一个参数减第二个参数: 升幂排序
// return a-b
// 第二个参数减第一个参数: 降幂排序
return b-a
})
console.log(newArr)
</script>
多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;
数组去重
<script>
// 需求: 数组去重。
// 1.定义一个老数组和一个新数组
var oldArr = ['刘备','刘备','关羽','关羽','张飞','张飞']
var newArr = []
// 2.思路: 遍历老数组，判断: 如果新数组中没有老数组中的元素，就添加到新数组中
for(var i=0;i<oldArr.length;i++){
// 判断: 如果新数组中没有老数组中的元素，就添加到新数组中
if(newArr.indexOf(oldArr[i]) == -1){
// 添加到新数组中
newArr.push(oldArr[i])
}
}
console.log(newArr)
</script>
字符串
字符串: 前后带引号的数据。
字符串是不可变类型，所以不能修改。
1、字符串合并操作：“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02); //弹出36
alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr); // 弹出12abc
2、parseInt() 将数字字符串转化为整数
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02); //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36
alert(parseInt(sNum03)) //弹出数字12 将字符串小数转化为数字整数
3、parseFloat() 将数字字符串转化为小数
var sNum03 = '12.32'
alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数
4、split() 把一个字符串分隔成字符串组成的数组
var str = 'adcdedg'
var arr = str.split('') //用空字符串切割，把字符串中的每一个元素都单独放入数组中。
// var arr = str.split() //不传参，把所有元素组合成一个元素放入数组
// var arr = str.split('g') //["abcdef", ""] 如果拿最后一个字符切割，那么会出现一个空字符元素
console.log(arr)
5、indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c"); // 弹出2
// var iNum = sTr.indexOf("cd"); // 如果有返回第一个元素的索引值
// var iNum = sTr.indexOf("r");
// var iNum = sTr.indexOf("ce"); // 没有或者不完整，返回-1
alert(iNum); //弹出2
6、substring() 截取字符串 用法： substring(start,end)（不包括end）
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);
alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl
7、replace() 替换
var sTr = "abcdefgh";
var newStr = sTr.replace('d', 'D')
console.log(newStr)
字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);
定时器
定时器在javascript中的作用
- 定时调用函数
- 制作动画
定时器类型及语法
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
// setInterval(函数, 毫秒值)
// setTimeout(函数, 毫秒值)
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
一般定义的函数和执行函数：
function myalert(){
alert('hello!');
};
myalert();
封闭函数：
(function(){
alert('hello!');
})();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function(){
alert('hello!');
}()
封闭函数的作用
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全。
var iNum01 = 12;
function myalert(){
alert('hello!');
}
(function(){
var iNum01 = 24;
function myalert(){
alert('hello!world');
}
alert(iNum01);
myalert()
})()
alert(iNum01);
myalert();
原生JavaScript标签操作
根据id获取元素：document.getElementById()
根据类名获取元素：document.getElementsByClassName()
根据标签名获取元素：document.getElementsByTagName()
下一个兄弟元素：nextElementSibling
前一个兄弟元素：previousElementSibling
父元素：parentNode
父元素的第一个子元素：parentNode.firstElementChild
父元素的最后一个元素：parentNode.lastElementChild
父元素的子元素们：parentNode.children
创建元素：document.createElement()
添加元素：appendChild()
删除元素：removeChild()
DOM: Document Object Model: 把整个页面上所有的标签加载到内存中以树状数据结构存储。
js方法获取的标签也被称为: 节点、js对象、DOM对象、标签。
<ul>
<li>我是li1</li>
<li class="aaa">我是li2</li>
<li id="box">我是li3</li>
<li class="aaa">我是li4</li>
<li>我是li5</li>
</ul>
<script>
// // 1: 根据标签名/类名/id名获取标签。
var li3 = document.getElementById('box') // byId
// console.log(li3)
// // 通过标签名获取元素，返回一个列表(伪数组)，一个和没有返回的也是列表(伪数组)。
// var liArr = document.getElementsByTagName('li')
// console.log(liArr)
// var ulArr = document.getElementsByTagName('ul')
// console.log(ulArr)
// // 通过类名获取元素，返回一个列表(伪数组)，一个和没有返回的也是列表(伪数组)。
// var aaaArr = document.getElementsByClassName('aaa')
// console.log(aaaArr)
// var aaaArr = document.getElementsByClassName('bbb')
// console.log(aaaArr)
// // 2: 通过标签找兄弟标签/父标签/子标签(访问关系/节点层级)
// console.log(li3.nextElementSibling)
// console.log(li3.previousElementSibling)
// console.log(li3.parentNode)
// console.log(li3.parentNode.firstElementChild)
// console.log(li3.parentNode.lastElementChild)
// console.log(li3.parentNode.children)
// console.log(li3.parentNode.childNodes)
// 3: 标签的操作(创建/添加/删除/复制/替换)
// // 创建
// var newLi = document.createElement('li')
// newLi.innerHTML = '我是外加的li标签'
// // 添加
// var ul = li3.parentNode
// ul.appendChild(newLi)
// // 删除
// ul.removeChild(li3)
</script>
以上内容仅供参考 -_- …为作者边学习，边摘抄和总计的内容
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
