浅学JavaScript
JavaScript
4、函数
方法：对象(属性，方法)
函数：
4.1、定义函数
定义方式1
// 返回绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return代表函数结束，返回结果。
如果没有执行return，函数执行完也会返回结果，结果就是undefined
定义方式2
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
} if(x>=0){
return x;
}else{
return -x;
}
}
方式1和方式2等价
调用函数
abs(10) // 10
abs(-10) // 10
参数问题：Javascript可以传递任意个参数
规避不传参数的情况
// 若参数不为number类型则抛出异常
function abs(x){
if(typeof x!=='number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
argumens:是js免费赠送的关键字，是一个数组
若参数有多个
// 使用arguments.length 获取长度
function abs(x){
console.log("x=>+"x);
for(var i = 0; i < arguments.length;i++){
console.log(arguments[i])
}
if(x>=0){
return x;
}else{
return -x;
}
}
rest
以前：
ES6引入的新特性，获取除了已经定义的参数之外的所有参数
操作BOM对象（重点）
B/S:浏览器/服务端
BOM：浏览器对象模型
window(重要)、Navigator
window代表浏览器窗口，Navigator封装了浏览器的信息
属性
| window.innerHeight | 获取浏览器内部的高度 | navigator.appName | 获取app名称 |
|---|---|---|---|
| window.innerWidth | 获取浏览器内部的宽度 | navigator.appVersion | 获取浏览器版本 |
| window.outerHeight | 获取浏览器外部的高度 | navigator.userAgent | 获取用户信息 |
| window.outerWidth | 获取浏览器外部的高度 | navigator.platform | 获取操作系统类型 |
大多数时候我们不会使用navigator对象，因为它会被人为修改过。不建议使用这些属性来判断和编写代码。
screen
screen获取屏幕大小
属性
screen.width
screen.height
location（重要）
location代表当前界面的URL信息
属性
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: *ƒ reload()*
//设置新的地址
location.assign('http://www.4399.com/')
document
document代表当前的页面，HTML DOM文档树
document.title
"百度一下，你就知道"
document.title='多肉'
"多肉"
获取具体的文档书节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var dl = document.getElementById('app');
</script>
</head>
<body>
<dl id="app">
<dt>Java</dt>
<dd>JaveSe</dd>
<dd>JaveEE</dd>
</dl>
</body>
</html>
获取cookie
document.cookie
"UM_distinctid=1732cdcaf5274e-0c52293931e1bf-3f6b4b04-1fa400-1732cdcaf5379c; Hm_lvt_b88cfc1ccab788f0903cac38c894caa3=1594185527,1594249236,1594278850; CNZZDATA1585378=cnzz_eid%3D1773164000-1594184528-%26ntime%3D1594278851; CNZZDATA4180674=cnzz_eid%3D1969661300-1594184961-%26ntime%3D1594278820; _xsrf=2|4e7bf58b|78a49374b189f239f7c17acf321cf5b1|1606300226; _ga=GA1.1.506748790.1607509169"
劫持cookie原理
<script src='aa.js'></script>
<!--恶意人员，获取你的cookie上传到他的服务器-->
服务器端可以设置cookie:httpOnly
history
属性
history代表浏览器的历史记录
//后退
history.back()
//前进
history.forward()
操作DOM对象（重点）
DOM：文档对象模型
浏览器网页就是一个Dom树形结构
- 更新：更新Dom节点
- 遍历Dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点
//html代码
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
//JavaSript代码
<script>
//标签选择器
var h1 = document.getElementsByTagName('h1');
//ID选择器
var p1 = document.getElementById('p1');
var father = document.getElementById('father');
//类选择器
var p2 = document.getElementsByClassName('p2');
//获取父节点下的所有子节点
var childrens = father.children;
//获取第一个子节点
father.firstChild;
//获取最后一个子节点
father.lastChild;
</script>
//这是原生代码
更新节点
<div id="id1">
</div>
<script>
//获取该dom节点
var id1 = document.getElementById('id1');
//设置文本内容
id1.innerText='123';
//设置代码内容(可以解析html文本标签)
id1.innerHTML='<strong>123</strong>';
//设置css(注意，原来使用-连接的在这里转换成驼峰命名S )
id1.style.color = 'red';
id1.style.fontSize = '200px';
id1.style.padding = '2em';
</script>
删除节点
//删除节点的步骤，获取父节点，通过父节点删除自己
//html代码
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
//JavaSript代码
<script>
var self = document.getElementById('p1');
//找到p1的父节点
var father = p1.parenElement;
//通过父节点删除自己
father.removeChild(p1);
//移除自己的第一个子节点（数组方式）,删除是一个动态的过程，删完前面的节点，若后面还有节点，那么下表会进行动态的调整
father.removeChild(father.children[0])
</script>
插入节点
我们获得了某个Dom节点，假设这个节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能用innerHTML了，因为会产生覆盖。
这是我们应该使用追加（）
html代码
<p id="js">JavaScript</p>
<div class="list">
<p id="se">JavaSE</p>
<p id="me">JavaME</p>
<p id="ee">JavaEE</p>
</div>
<script>
//已存在的节点
var js = document.getElementById('js');
var list = document.getElementById('list');
//将js追加到list中去
list.appendChild(js);
//创建一个新标签，实现插入
//通过js创建一个新的节点(p标签)
var newp = document.createElement('p');
newp.id = "newp";
newp.innerText = 'Hello World';
//追加到list中
list.appendChild(newp);
var myScript = document.createElement('script');
//通过下面这个属性可以设置任意的值
myScript.setAttribute('type','text/javascript');
list.append(myScript);
//获取body节点
var body = document.getElementsByTagName('body');
//创建一个空style标签
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
//设置标签内容
mystyle.innerHTML = 'body{background-color: chartreuse;}';
document.getElementByTagName('head')[0].appendChild(myStyle);
//追加到前面
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//insertBefore(newNode,targetNode)
//将js插入ee前面
ee.insertBefore(js,ee);
</script>
操作表单
form也是一个节点
- 文本框 text
- 下拉框
浙公网安备 33010602011771号