javaScript基础

javaScript基础

浏览器对象

window

window对象充当全局作用域和浏览器窗口。

console.log(window.innerWidth);     #内部宽度,出去菜单栏、工具栏、边框等元素
console.log(window.innerHeight); #内部高度
console.log(window.outerWidth); #外宽
console.log(window.outerHeight); #外高
var i=1; #全局变量,等价window.i=1

navigator

navagator对象表示浏览器的信息,常用属性包括:

  • navagator.appName:浏览器名称

  • navigator.appVersion:浏览器版本

  • navigator.language:浏览器设置的语言

  • navigator.platform:操作系统类型

  • navigator.userAgent: 浏览器设定的user-Agent字符串。


screen

screen对象表示屏幕的信息,常用的属性有:

  • screen.width:屏幕宽度,像素

  • screen.height:屏幕高度

location

location对象表示当前页面的URL信息。

// URL:http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.href; //http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
location.assign("http://www.baidu.com")  //加载新页面
location.reload() //重新加载页面

confire函数

if(confirm('are you sure!')){   //弹出对话框,让用户选择是否,返回布尔值
   location.reload();
}

image-20201219224310039

 


document

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节点。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>study coding</title>
</head>
<body>
   <dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
   <dt>摩卡</dt>
   <dd>热摩卡咖啡</dd>
   <dt>酸奶</dt>
   <dd>北京老酸奶</dd>
   <dt>果汁</dt>
   <dd>鲜榨苹果汁</dd>
</dl>
</body>
</html>

js可以动态改变DOM节点、属性、样式,以上面的html为例:

document.title="努力学习JavaScript";
var menu=document.getElementById("drink-menu");//通过id定位元素
var drinks=document.getElementsByTagName("dt");//通过标签名,返回数组

cookie是服务器发送的key-value标识符,用来标识用户或者网站的一些设置,如页面显示的语言。浏览器访问该网站会附上这个cookie

为了避免安全隐患,服务器在设置cookie时可以使用httpOnly来禁止js代码读取cookie。


操作DOM

document.getElementById()可以直接定位到唯一的一个DOM节点。document.getElementsByTagNamedocument.getElementsByClassName()总是返回一组节点,可以先定位父节点,再从父节点开始选择。

//返回id为'test'的节点
var test=document.getElementById('test');

//先定位ID为'test-table'的节点,再返回其内部所有tr节点
var trs=document.getElementById("test-table").getElementsByTagName('tr');

//先定位ID为'test-div'的节点,再返回内部所有class包含red的节点
var reds = document.getElementById('test-div').getElementsByClassName('red')

//获取节点test下第一个,最后一个节点
var first=test.firstElementChild;
var last=test.lastElementChild;

更新DOM

innerHTML属性设置或获取元素的html文本。innerTexttextContent只是设置或获取元素的纯文本。

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop='2em';

插入DOM

<!-- 原HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
   <p id="java">Java</p>
   <p id="python">Python</p>
   <p id="scheme">Scheme</p>
</div>
var
    list = document.getElementById('list'),
    haskell=document.createElement('p');	//新建p标签
haskell.id = 'haskell';	//设置属性
haskell.innerText = 'Haskell';
list.appendChild(haskell);
<!-- js插入DOM后 HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>
  • 使用parentElement.insertBefore(newElement,refer),新元素会插到参考元素之前。

var
    list = document.getElementById('list'),
    ref = document.getElementById('python'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);
  • 循环一个节点的所有子阶段,可以迭代children属性实现。

var
    i, c,
    list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    c=list.children[i]// 拿到第i个子节点
}

删除节点

获取该节点和它的父节点,然后,调用父节点的removeChild删除。

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent=self.parentElement;
// 删除:
var removed=parent.removeChild(self);
removed === self; // true

当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新。


文件

HTML5的File API提供了FileFileReader两个主要对象,可以获得文件信息并读取文件。

var fileInput = document.getElementById('test-image-file');

var file = fileInput.files[0]; // 获取File引用:

// 读取文件:
    var reader = new FileReader();
// 以DataURL的形式读取文件:
    reader.readAsDataURL(file);

reader.onload = function(e) {
        var data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'            
    };

以DataURL的形式读取到的文件是一个字符串,类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...,常用于设置图像。如果需要服务器端处理,把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。


回调

reader.onload = function(e) {
    // 当文件读取完成后,自动调用此函数:
};

异步调用实质就是写好时间处理函数,等事件发生时由浏览器触发调用函数,JS代码均为单线程。

 

posted @ 2021-01-11 17:03  喜琅琅  阅读(142)  评论(0编辑  收藏  举报