JS 总结

最新推荐文章于 2020-07-08 14:45:56 发布

lduzhenlin

最新推荐文章于 2020-07-08 14:45:56 发布

阅读量1.2k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： # JS

本文链接：https://blog.youkuaiyun.com/lduzhenlin/article/details/89813687

JS 专栏收录该内容

3 篇文章

订阅专栏

JS 语言基础

JS 简介

JavaScript用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断。
完整的javascript由语言基础，BOM和DOM组成。

JS 注释

单行注释 //

多行注释 /**/

JS 基本数据类型

基本数据类型 undefined，Boolean,Number,String，null

JS 类型转换

1.转换成字符串

无论是Number,Boolean还是String都有一个toString方法，用于转换为字符串

<script>
  var a=10; 
  document.write('默认模式下，数字10转换为十进制的'+a.toString()); //默认模式，即十进制
  document.write("<br>"); 

  document.write('基模式下，数字10转换为二进制的'+a.toString(2)); //基模式，二进制
  document.write("<br>"); 
  
  document.write('基模式下，数字10转换为八进制的'+a.toString(8)); //基模式，八进制
  document.write("<br>"); 

  document.write('基模式下，数字10转换为十六进制的'+a.toString(16)); //基模式，十六进制
  document.write("<br>"); 

</script>

2.转换成数字

javascript分别提供内置函数 parseInt()和parseFloat()，转换为数字

<script>
  document.write("字符串的\"10\"转换为数字的:"+parseInt("10")); //转换整数 结果:10
  document.write("<br>");
  document.write("字符串的\"3.14\"转换为数字的:"+parseFloat("3.14"));//转换浮点数 结果3.14
  document.write("<br>");
  document.write("字符串的\"10abc\"转换为数字的:"+parseInt("10abc")); //判断每一位，直到发现不是数字的那一位 结果:10
  document.write("<br>");

  document.write("字符串的\"hello javascript\"转换为数字的:"+parseInt("hello javascript")); //如果完全不包含数字，则返回NaN - Not a Number
  document.write("<br>");

</script>

3.转换为Boolean

使用内置函数Boolean() 转换为Boolean值
当转换字符串时：非空即为true
当转换数字时：非0即为true
当转换对象时：非null即为true

JS 运算符

JS运算符包含2中运算符:算术运算符和逻辑运算符

1.算术运算符

2.逻辑运算符

JS 循环语句

1条件语句

2.循环语句

JS 事件

见下面的DOM

JS 对象

JavaScript中常见的对象有数字Number，字符串String，日期Date，数组Array等。

1.Number对象

2.String对象

3.Array对象

4.Date对象

5.Math 对象

JS BOM

BOM即浏览器对象模型(Browser Object Model)
浏览器对象包括 Window(窗口) Navigator(浏览器) Screen (客户端屏幕) History(访问历史) Location(浏览器地址)

Window

//文档显示区域的宽度和高度（不包括工具栏/滚动条）
window.innerWidth
window.innerHeight

//整个浏览器窗口的宽度和高度（包括工具栏）
window.outerWidth
window.outerHeight

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

window.setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
window.setTimeout() - 暂停指定的毫秒数后执行指定的代码
window.clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
window.clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
window.alert()- 警告框
window.prompt()- 确认框
window.confirm()- 提示框经

Navigator

Navigator即浏览器对象，提供浏览器相关的信息

navigator.appName 浏览器产品名称
navigator.appVersion 浏览器版本号
navigator.appCodeName 浏览器内部代码
navigator.platform 操作系统
navigator.cookieEnabled 是否启用Cookies
navigator.userAgent 浏览器的用户代理报头

Screen

Screen对象表示用户的屏幕相关信息

//用户的屏幕大小(与浏览器无关)
screen.width
screen.height

//屏幕的可用宽度、高度(与浏览器无关)
screen.availWidth
screen.availHeight

History

History用于记录访问历史

history.back(); 返回上次访问
history.back(-2); 返回上上次的访问

history.forward() 加载历史列表中的下一个 URL

Location

Location表示浏览器中的地址栏

location.reload(); //刷新当前页
//跳转到其他页
location="/";
location.assign("/");

location.protocol  //协议
location.hostname  //主机名
location.port  //端口号
location.host  //主机加端口号
location.pathname  //访问的路径
location.hash //锚点
location.search  //参数列表

JS DOM

DOM 是Document Object Model( 文档对象模型 )的缩写。

HTML DOM节点概念

DOM把所有的html都转换为节点
整个文档是一个节点
元素是节点
元素属性是节点
元素内容是节点
注释也是节点

HTML DOM 节点属性

节点类型如下:

HTML DOM 元素节点操作

1.获取元素节点

2.获取/设置元素的属性

1.获取元素节点

2.获取/设置元素的属性

获取元素属性方式有两种方法

获取元素属性有三种方式:
var  div1 = document.getElementById("d1");

1.div1.id  元素.属性 //只能获取元素自带的属性
2.div1.getAttribute("align") //可以获取所有属性(包括自定义属性)
3.
  var attrs=div1.attributes;
  attrs["align"].nodeValue
  attrs[i].nodeValue

设置元素属性有:
div1.setAttribute("align","left")

例子:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>	
</head>
<body>
    <div id="d1" align="center" class="abc" test="test1">hello HTML DOM</div>
		
<script>
    var  div1 = document.getElementById("d1");
    document.write(" 获取元素属性:<br/>");
    document.write("元素.属性的方式: "+div1.align+"<br/>")
    document.write("getAttribute方式: "+div1.getAttribute("align")+"<br/>")
						
    var attrs = div1.attributes;
    document.write("div总共有"+attrs.length +" 个属性分别是:<br/>");
    for(i = 0; i< attrs.length; i++){
        document.write(attrs[i].nodeName+":"+attrs[i].nodeValue+"<br>");
    }
    // 设置属性	
    div1.setAttribute("align","right");
    document.write("<br>");
    document.write("div的id属性值是："+ attrs["align"].nodeValue);		
</script>
</body>
</html>

HTML DOM 节点的增删替插

1.节点关系

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>	
</head>
<body>
    <div id="parentDiv">
    父Div的内容
    <div id="d1">第一个div</div><div id="d2">第二个div</div><div id="d3">第三个div</div>
    </div>
		
<script>
    var d2=document.getElementById("d2");
    document.write("<br/>"+d2.previousSibling.innerHTML+"<br/>");
    document.write(d2.nextSibling.nodeName+"<br/>");
    document.write(d2.parentNode.nodeName+"<br/>");

    document.write("<br/>子节点有:<br/>")
    var parentNode=document.getElementById("parentDiv");
    var childs=parentNode.childNodes;
    for(var i=0;i<childs.length;i++){
        document.write(childs[i].nodeName+"<br/>");
    }
		
</script>
</body>
</html>

2.增加,删除,插入,替换节点

createElement	创建元素节点	
createAttribute	创建属性节点
createTextNode	创建文本节点	

removeChild	删除元素节点	
removeAttribute	删除属性节点	
removeChild	删除文本节点

replaceChild 替换节点

appendChild	追加节点	
insertBefore 在前方插入节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>	
</head>
<body>
    <div id="parentDiv">
        <div id="d1">第一个div</div>
        <div id="d2">第二个div</div>
        <div id="d3">第三个div</div>
    </div>
		
<script>
    var parentDiv=document.getElementById("parentDiv");
    var d4=document.createElement("div");
    d4.appendChild(document.createTextNode(" 第四个 div"));
    //parentDiv.appendChild(d4);
    //在前面插入
    var d3=document.getElementById("d3");
    parentDiv.insertBefore(d4,d3);
    //替换
    parentDiv.replaceChild(d4,d3);
    //删除
    //parentDiv.removeChild(d4);
    // 添加和删除元素属性
    var className=document.createAttribute("class");
    className.nodeValue="d";
    d4.setAttributeNode(className);
    d4.removeAttribute("class");
							
</script>
</body>
</html>

HTML DOM 元素样式

var d = document.getElementById("d");
d.style.display="block";

d.style.backgroundColor="green";//-会编程驼峰命名

HTML DOM 事件

吃水不忘挖井人，时刻想念发帖人。