JS基础笔记
0 JS与HTML
JS即Javascript用于修饰HTML，使网页具有动态效果，增加用户体验感。常有两种方法：
一：HTML文件内嵌JS
<script>
//JS代码
<script>二：外部文件导入
将JS代码写在.js文件中（如test.js）,然后在HTML文件中需要的地方进行调用
js文件：
//JS代码HTML文件：
<!-- 要调用的地方 -->
<script src="test.js"></script>1 输入输出
输入：Prompt(“请输入一个数字”)；js输入框，返回类型为字符串
输出：
- document.write(“文本”);//直接显示在网页上
- console.log(“文本”);//显示在控制台
- alert(“文本”);//显示在网页本站提示
2 数据类型
基本同python，只是任意变量需要用“var”进行声明
为False的值：
- 0
- 0.0
- NaN
- false
- null
typeof(num);//获取数据类型
Infinity超出上限的数字
NaN 不是数字的数字类型
Infinity-Infinity=NaN
3 逻辑表达式
“=”逻辑表达式 绝对相等;""表示值相等，其余基本同C语言
4 函数
-
函数里未定义的变量默认为全局变量
-
函数也是一种数据
function sum(num1,num2){ return num1+num2; } var f = sum; f(3,4)//相当于调用函数sum(3,4) -
没有名字的函数叫匿名函数:
var f = function(){}; //匿名函数一般作为参数传递， function sum(function(){函数体},num1,num2);
5 数组
- 数组是对象Object类型
- 创建数组：
var arr = [1,2,3,"srtd"]; var arr = new Array();//创建长度为0的数组 var arr = new Array(10);//创建长度为10的数组，此时所有元素Undefined var arr = new Array(1,2,3,"asd");//初始化数组 - 数组相关操作：
- arr[2]=4;//修改值
- delete arr[1];//删除值，但位置还在
- arr.push(4);//尾插4
- arr.unshift(5);//头插5
- arr.reverse();//倒置数组
- arr.pop();//弹出尾元素，返回值为该元素。
- arr.shift();//弹出头元素，返回值为该元素。
- arr.length = 5;//修改数组长度。
- arr.join(str);//以字符串str为间隔生成字符串。
- arr.slice(1,3);//获取数组的1，2号（不包括3）位元素，返回一个新的数组。
- arr.splice(下标开始,个数，num1,num2,…);//替换为num1,num2,…,若是插入，将个数改为0；
- arr.concat(arr2);//拼接数组，返回拼接后的数组，arr本身不改变。
- arr.indexOf(e);//从头开始获取元素e的第一个下标；
- arr.lastIndexOf(e);//从尾开始获取元素e的第一个下标；
- arr.sort();//数组排序，默认升序
//自定义排序方式，以降序为例 arr.sort(function(a,b){ return a<b })
6 字符串
声明方法(同Java)
- var str = “sdgertrt”;//string类型
- var str = String(“dgfdsfg”);//Object类型
访问： var str = “sddgasdf”;
- str[0] = ‘s’;
- str.charAt(1) = ‘d’
- 字符串初始化后不可改变
- str.toLowerCase();//转小写
- str.toUpperCase();//转大写
- str.localeCompare(str2);//比较大小，返回-1/0/1
- str.substring(i,j);//从i开始截取到j前一个字符。
- str.sunstr(i,len);//从i开始截取长度为len的字符串。
- str.split(str2);//将字符串以str2分隔开，返回数组。
7 定时器
- 间歇定时器
var time=window.setInterval(function(){ },2000);//每2000ms执行一次函数 //清除定时器 function func1(){ window.clearInterval(time); } - 延时定时器
var time=window.setTimout(function(){ },2000);//3000ms后执行函数内容 - 注意：window.可不用写，自定义变量相当于给window类添加属性，默认会加上window.
8 DOM
一、结点：
- 文档结点
- 元素节点
- 文本节点
- 属性节点
- 注释结点
二、DOM树：
三、JS跟页面中标签进行交互：
- 获取标签(元素)结点
修改标签CSS样式
修改标签属性 - 创建标签
- 删除标签
- 复制标签
（1）获取标签节点
- var jsID=document.getElementById(id);//通过标签id获取标签节点，返回对象
- var jsC=document.getElementsByClassName(class);//通过标签class获取标签节点组，通常返回对象数组
- var jsN=document.getElementsByName(name);//通过标签Name获取标签节点组，返回对象数组
- var jsT=document.getElementsByTagName(tag);//通过标签名获取标签节点，返回对象数组。
（2）获取属性节点
- 方法一：先获取元素结点，然后 元素结点.属性名，即可。该方法只能获取官方定义属性。
- 方法二：元素节点.getAttribute(“属性名”)，此方法可用于获取自定义属性。修改属性用setAtrribute(“属性名”,“属性”)。移出属性用removeAttribute(“属性名”)
（3）获取文本节点
- 元素节点.innerHTML；//获取从开始标签到结束标签中内容（包括换行）；
- 元素节点.outerHTML;//包括开始结束标签一起。
- 元素节点.innerText;//只获取标签内文本，忽略换行。
四、修改样式：
- 元素节点.style.属性=“属性值”
- 元素节点.style[“属性”]=“属性值”
- 注意：css样式中的短横线改成短横线后一个字母大写，如background-color <=>backgroundColor
- 外部样式获取属性值用：
window.getComputedStyle(元素节点,null/伪类).属性
五、节点公有属性：
| 节点类型 | nodeName | nodeType | nodeValue |
|---|---|---|---|
| 元素节点 | 元素名称 | 1 | null |
| 属性节点 | 属性名称 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容不包括html |
| 注释节点 | #comment | 8 | 注释内容 |
六、节点层级关系属性：
- 获取当前元素节点的所有子节点
var childNodesArray = jsDiv1.childNodes; - 获取当前元素节点的第一个子节点
var firstChildNode = jsDiv1.firstChild; - 获取当前元素节点的最后一个子节点
var lastChildNode = jsDiv1.lastChild; - 获取该节点的文档根节点
var rootNode = jsDiv1.ownerDocument; - 获取当前元素节点的父亲节点
var parentNode = jsDiv1.parentNode; - 获取当前元素节点的前一个同级节点
var previousNode = jsDiv1.previousSibling; - 获取当前元素节点的后一个同级节点
var nextNode = jsDiv1.nextSibling; - 获取当前元素节点的所有属性节点
var allAttributesArray = jsInput.attributes;
七、DOM动态操作节点：
1、创建节点
var a=document.creadElement("p");//创建p标签
a.innerHTML="sunk id a goog man";//添加文本
2、插入节点
a.style.backgroundColor="red";//添加属性
var div=document.getElementById("box");
div.appendChild(a);//将标签a添加到box盒子中
父节点.insertBefore(新节点,子节点)
//将新节点添加到父节点的某个子节点的前面
3、替换节点
父节点.replaceChild(新节点,旧节点);
//用新节点替换掉旧节点
4、复制节点
a.cloneNode();//只复制本身
a.cloneNode(true);//复制本身和子节点
5、删除节点
父节点.removeChild(子节点)9 事件
屏幕宽度和高度：
w=document.documentElement.clientWidth||document.body.clientWidth||window.innerWidth;
h=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;
添加事件的方法：
方法一：直接写在标签中：
<div id="box" onclick="alert('good')"></div>方法二：外部函数
<div id="box" onclick="func()"></div>
...
<script type="text/javascript">
function func(){
alert("good");
}
</script>方法三：在外部添加属性
<div id="box"></div>
...
<script type="text/javascript">
var div=document.getElementById("box");
div.onclick=function func(){
alert("good");
}
//div.οnclick=null;//清除事件
</script>- 说明：若有多个重名事件，则后面的覆盖前面的。
方法四：
<div id="box"></div>
...
<script type="text/javascript">
var div=document.getElementById("box");
div.addEventListener("click",function func(){
alert("good");
},false);
//若要清除事件，则不能用匿名函数，函数得另写，然后调用:
div.removeEventListener("click",f,false);
</script>- 说明：若有多个重名事件，则顺序响应所有的事件。
常用事件
添加事件语法：
标签名.addEventListener("事件类型",事件处理程序,false);
//false表示事件流（重叠元素响应事件顺序）冒泡（由内到外），true表示捕获（由外到内）事件类型：
- 聚焦事件： focus;//常用于文本框。
- 离焦事件：blur;//常用于文本框
- 单击事件：click;
- 双击事件：dblclick;
解决单击事件与双击事件冲突的方法：设置延时<script> var time; var b = document.getElementById("bt"); b.addEventListener("click", function() { clearTimeout(time); time = setTimeout(function() { console.log("单击"); }, 300) }, false); b.addEventListener("dblclick", function() { console.log("双击"); clearTimeout(time); }, false); </script> - 鼠标事件：
- mouseover:鼠标移入
- mouseout:鼠标移出
- mousedown:鼠标按下
- mouseup:鼠标弹起
- mousemove:鼠标移动
- 键盘事件：
- keydown:有键按下
- keyup:键弹起
- keypress:非功能按键按下
- 示例：
//div是一个标签对象（即要添加事件的对象） div.addEventListener("keyup",function(e){ var event = e || window.event; //event一般包含常用属性：ctrl/shift/alt键是否按下(true/false)/按键的字符/按键的ASCII码 console.log(event.ctrlKey,event.shiftKey,event.altKey,event.key,event.keyCode); },false)
阻止冒泡行为：
div.addEventListener("keyup",function(e){
var ev = e || window.event;
e.stopPropagation();//阻止往外冒泡行为，只响应当前事件
},false)阻止默认行为：
对于链接a标签默认行为是跳转，要实现点击链接，弹出消息是否浏览该网页，点击取消能够不跳转，因此要阻止跳转的默认行为
a.onclick=function(e){
var ev = e || window.event;
e.stopPropagation();
var info = window.confirm("您浏览的页面存在风险，是否继续？？");
if(info == false){
//阻止跳转默认行为
ev.precentDefault();
}
}
扫一扫
591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
