对象什么的，程序员可是有很多呢

首页 > 代码库 > 对象什么的，程序员可是有很多呢

对象什么的，程序员可是有很多呢

2024-09-15 10:01:36 219人阅读

* screen对象

console.log(screen.width);// 屏幕宽度

console.log(screen.height);// 屏幕高度

console.log(screen.availWidth); //可用宽度

console.log(screen.availHeight); //可用高度=屏幕高度-底部任务栏

* location对象

* 完整的URL路径：

* 协议://主机名(IP地址):端口号/文件路径？传递参数(name1=value1&name2=value2)#锚点

console.log(location.href); // 完整路径

console.log(location.protocol

); // 使用的协议 http: https: ftp: file: mailto:

console.log(location.pathname

); // 文件路径

console.log(location.port

); // 端口号

console.log(location.search); // 从?开始往后的部分

console.log(location.hostname); // 主机名(IP地址)

console.log(location.host); // 主机名+端口号

console.log(location.hash); // 从#开始的锚点

// 使用JS设置页面跳转

//window.location = "http://www.baidu.com";

function locationAssign(){

* 加载新的文档，加载以后，可以回退

location.assign("http://www.baidu.com");

}

function locationReplace(){

* 使用新的文档，替换当前文档。替换以后，不能回退；

location.replace("http://www.baidu.com");

}

function locationReload(){

* 重新加载当前页面。

* reload(true)：从服务器重新加载当前页面

* reload():在本地刷新当前页面

location.reload(true);

}

/* history

* 1、length：浏览历史列表的个数

* 2、history.forward(); 前进到前一个页面

* 3、history.back(); 后退到后一个页面

* 4、history.go(-1); 跳转到浏览历史列表的任意位置

* 位置标志：当前页为第0个，前一个页面第1个，后一个页面-1个

console.log(history);

function historyForward(){

history.forward();

}

function historyBack(){

history.back();

}

function historyGo(){

history.go(2);

}

* Navigator 了解

console.log(navigator.appName); //产品名称

console.log(navigator.appVersion); //产品版本号

console.log(navigator.userAgent); //用户代理信息

console.log(navigator.platform); //系统平台

/* navigator.plugins。返回一个数组，检测浏览器安装的所有插件

>>>主要的属性：

description:插件的描述信息

filename:插件在本地磁盘的文件名

length:插件的个数

name：插件名

console.log(navigator.plugins);//检查浏览器安装的插件信息

/*navigator.mimeTypes 浏览器插件，所支持的文件类型

>>>主要属性

description：MIME类型描述

enabledPlugin：支持此类型的浏览器插件

suffixes：此类型可能的后缀名

type：MIME类型的写法，例如： image/x-icon text/css

console.log(navigator.mimeTypes);//检查浏览器安装的插件支持的文件类型

/* 【重点】 window对象的常用方法

* >>> window对象中的所有方法，均可以省略前面的window. ,比如close();

* 1、prompt：弹窗接收用户输入；

* 2、alert:弹窗警告；

* 3、confirm：带有确认/取消按钮的提示框；

* 4、close:关闭当前浏览器选项卡

* 5、open：重新打开一个窗口，传入参数：URL/窗口名称/窗口特征

* 6、setTimeout：设置延时执行，只会执行一次；

* 7、setInterval：设置定时器，循环每个N毫秒执行一次；

* 两个参数：需要执行的function / 毫秒数

* 8、clearTimeout：清除延时

* 9、clearInterval：清除定时器

* 传入参数：调用setInterval时返回一个ID，通过变量接受ID,传入clearInterval

【DOM树节点】

DOM节点分为三大类：元素节点、文本节点、属性节点

文本节点、属性节点，为元素节点的两个子节点

通过getElement系列方法，可以去到元素节点

【查看节点】

1、getElementById：通过ID获取唯一的节点；多个同名ID，只会取第一个；

2、getElementsByName：通过Name取到一个数组，包含1到多个节点；

使用方式：通过循环，取到每一个节点。循环次数：从0开始,<数组.length

【查看和设置属性节点】

1、查看属性节点： getAttribute("属性名");

2、设置属性节点： setAttribute("属性名","属性值");

【JS修改样式总结】

1、.className : 为元素设置一个新的class名字；

div1.className = "class1";

2、.style : 为元素设置一个新的样式，注意驼峰命名法；

div1.style.backgroundColor = "red";

3、.style.cssText : 为元素同时修改多个样式；

div1.style.cssText = "width:100px;height100px;";

【查看节点】

1、tagName属性：获取节点的标签名；

2、innerHTML:设置或者获取节点内部的所有HTML代码；

3、innerText:设置或者获取节点内部的所有文字；

<!DOCTYPE html>

<html>

<head>

window.onload = function (){

/* [获取层次节点的常用属性]

* 1 .childNodes：(数组)获取元素的所有子节点

* 2 .firstChild：获取元素的第一个子节点；

* 3 .lastChild:获取元素的最后一个子节点；

* 4 .ownerDocument:获取当前文档根节点。在html文档中，为document节点

* 5 .parentNode:获取当前节点的父节点；

* 6 .previousSibling:获取当前节点的前一个兄弟节点

* 7 .nextSibling:获取当前节点的后一个兄弟节点

* 注：上述属性，均会获得所有的元素节点和文本节点，如果只需要元素节点，需要使用对应Element属性，例如：firstChild--->firstElementChild

* 8 .attributes:获取当前元素节点的所有属性节点

var ul1 = document.getElementById("ul1");

var lis = ul1.getElementsByTagName("li"); //获取UL里面的所有li

console.log(ul1.firstElementChild);

}

/* 【创建并新增节点】

* 1、.createElement("标签名"): 创建一个新的节点。需要配合.setAttribute()方法设置新节点的相关属性；

* 2、 .appendChild(节点名): 在某元素的最后追加一个新节点

* 3、 .insertBefore(新节点名,目标节点名):将新节点，插入到目标节点之前

* 4、克隆节点.cloneNode(true/false): 需要克隆谁，就用谁去调用克隆对象；

* >>>传递参数可以为true或false:

* ① true表示：克隆当前节点及所有子节点；

* ② false表示：只克隆当前节点，不可隆子节点(默认)

* 【删除/替换节点】

* 1、 .removeChild(需删除节点):从父容器中，删除指定节点；

* 2、 .replaceChild(新节点,被替换节点):用新节点替换指定节点。如果新节点为页面中已有节点，会将此节点删除后，替换到指定节点。

function appendImg(){

// 1. 创建一个图片节点

var img = document.createElement("img");

// 2. 给img节点设置属性

img.setAttribute("src","../../1_HTML基本标签/img/icon.png");

// 3. 将设置好的img节点，追加到body最后

document.body.appendChild(img);

}

function insertImg(){

// 1. 创建一个图片节点

var img = document.createElement("img");

// 2. 给img节点设置属性

img.setAttribute("src","../../1_HTML基本标签/img/icon.png");

var ul2 = document.getElementById("ul2");

// 3. 在两个ul之间插入图片

document.body.insertBefore(img,ul2);

}

var count = 2;

function copyUl(){

var ul2 = document.getElementById("ul2");

count++;

// 克隆ul2节点

var ul2Clone = ul2.cloneNode(true);

ul2Clone.setAttribute("id","ul"+count);

// 在原ul2节点之前，插入新克隆节点

document.body.insertBefore(ul2Clone,ul2);

}

function delUl1(){

// 取到ul1

var ul1 = document.getElementById("ul1");

if(ul1){

// 从ul1的父容器body中删除ul1节点

document.body.removeChild(ul1);

}else{

alert("别删了！ul1已经被干了！");

}

function ul1ReplaceUl2(){

var div = document.createElement("div");

div.setAttribute("style","width: 100%; height: 20px; ");

var ul2 = document.getElementById("ul2");

document.body.replaceChild(div,ul2);

}

</script>

ul{

width: 600px;

list-style: none;

padding: 0px;

display: flex;

justify-content: space-around;

margin-top: 20px;

}

</style>

</head>

<body>

</ul>

<hr />

</ul>

<button onclick="appendImg()">在最后插入一幅图片</button>

<button onclick="insertImg()">在两个ul之间插入一个图片</button>

<button onclick="copyUl()">copy一个ul2</button>

<button onclick="ul1ReplaceUl2()">新建div替换ul2</button>

<br />

</body>

</html>

<!DOCTYPE html>

<html>

<head>

/* [表格对象]

* 1、 rows属性：返回表格中的所有行，数组；

* 2、 insertRow(index)：在表格的第index+1行，插入一个新行

* 3、 deleteRow(index)：删除表格的第index+1行。

* [表格的行对象]

* 1、 cells属性：返回当前行中的所有单元格，数组；

* 2、 rowIndex属性：返回当前行，在表格中的索引顺序，从0开始；

* 3、 insertCell(index)：在当前行的第index+1处插入一个<td>

* 4、 deleteCell(index)：删除当前行的第index+1个<td>

* [表格的单元格对象]

* 1、 cellIndex属性：返回单元格在改行的索引顺序，从0开始；

* 2、 innerHTML属性：返回或设置当前单元格中的HTML代码；

* 3、 align属性：设置当前单元格的水平对齐方式；

* 4、 className属性：设置单元格的class名称；

function newRow(){

var table = document.getElementById("table");

// 在表格的最后一行，插入一个新行

var newRow = table.insertRow(table.rows.length-1);

// 给新行设置单元格

var cell0 = newRow.insertCell(0);

cell0.innerHTML = "聂鹏飞";

var cell1 = newRow.insertCell(1);

cell1.innerHTML = "2.50元";

getSum();

}

function delRow(){

var table = document.getElementById("table");

if(table.rows.length>2){

table.deleteRow(table.rows.length-2);

}else{

alert("已经没了！删毛线啊！");

}

getSum();

}

function changeTitle(){

var color = prompt("请输入6位16进制颜色值：");

var table = document.getElementById("table");

table.rows[0].style = "

}

function copyRow(){

var table = document.getElementById("table");

var copyRow = table.rows[table.rows.length-2].cloneNode(true);

var heji = table.rows[table.rows.length-1];

// 由于浏览器，自动将表格的<tr>包裹在<tbody>中

// 所以<tr>实际并非<table>的子节点，故需取到<table>中的<tbody>进行插入

if(table.rows.length>2){

table.getElementsByTagName("tbody")[0].insertBefore(copyRow,heji);

}else{

alert("没有可以复制的行");

}

getSum();

}

function getSum(){

var table = document.getElementById("table");

var rows = table.rows;

if(rows.length<=2){

alert("没有可计算的行！");

rows[rows.length-1].cells[1].innerHTML = 0+"元";

return;

}

var sum = 0;

for(var i=1;i<=rows.length-2;i++){

var cells = rows[i].cells;

sum += parseFloat(cells[cells.length-1].innerText);

}

rows[rows.length-1].cells[1].innerHTML = sum.toFixed(2)+"元";

}

window.onload = function(){

getSum();

}

</script>

table{

border-collapse: collapse;

width: 400px;

}

td,th{

border: 1px solid #000000;

}

table tr:last-child{

color: red;

}

</style>

</head>

<body>

<tr>

</tr>

<tr>

<td>看得见风景的房间</td>

</tr>

<tr>

<td>幸福从天而降</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br />

<button onclick="delRow()">删除最后一行</button>

<button onclick="changeTitle()">修改标题样式</button>

<button onclick="copyRow()">复制最后一行</button>

</body>

</html>

对象什么的，程序员可是有很多呢

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 对象什么的，程序员可是有很多呢

对象什么的，程序员可是有很多呢

看完仍有疑问？有类似问题直接问程序猿