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

/*

* 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>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript">

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>

<style type="text/css">

ul{

width: 600px;

list-style: none;

padding: 0px;

display: flex;

justify-content: space-around;

margin-top: 20px;

}

</style>

</head>

<body>

<ul id="ul1" class="ul1">

<li>第一项</li>

<li>第二项</li>

<li>第三项</li>

<li>第四项</li>

</ul>

<div style="width: 100%; height: 20px; " id="div1"></div>

<hr />

<ul id="ul2">

<li>1111</li>

<li>2222</li>

<li>3333</li>

<li>4444</li>

</ul>

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

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

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

<button onclick="delUl1()">删除UL1</button>

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

<br />

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript">

/* [表格对象]

* 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>

<style type="text/css">

table{

border-collapse: collapse;

width: 400px;

}

td,th{

border: 1px solid #000000;

}

table tr:last-child{

color: red;

}

</style>

</head>

<body>

<table id="table">

<tr>

<th>书名</th>

<th>价格</th>

</tr>

<tr>

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

<td>30.00元</td>

</tr>

<tr>

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

<td>18.50元</td>

</tr>

<tr>

<td>60个瞬间</td>

<td>30.99元</td>

</tr>

<tr>

<td>合计</td>

<td></td>

</tr>

</table>

<br />

<button onclick="newRow()">增加一行</button>

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

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

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

<button onclick="getSum()">合计</button>

</body>

</html>

时间: 2024-10-16 15:33:02

对象什么的,程序员可是有很多呢的相关文章

黑马程序员_JavaScript变量转换和Jquery对象的转换

在实际编程过程中,有很多对字符串进行判断.拆分.比较.转换类型.校验等操作,下面我会总结下JavaScript变量转换和Jquery对象的转换. 1.JavaScript 变量转换及字符串操作 1.字符串变成int类型 使用函数:parseInt(); 使用此函数,可将string类型变量转换为int类型.而且只能够对string类型变量使用.如果待转换string类型变量无发转换为int类型时,函数会返回NaN. 实例如下: var v_Num = parseInt('256ok'); //

***周鸿祎谈创业:很多程序员高智商 但我一看就知道他们不会成功

很多人都向往着有一天自己创业,程序员更是如此.如果你想创业,那么该怎样创业.需要有哪些准备.自己还有什么不足等等这些问题你考虑过吗?本文就跟大家分享周鸿祎在接受某媒体采访时给程序员上的创业课. 程序员创业的特别之处 关于程序员创业,我之所以愿意谈我的观点,是因为我是程序员出身,也是从小公司做起来的,我自认为对待很多程序员个人包括共享软件作者和一些小网站还是很好的.我希望分享一些经验和体会. 首先,我想说的是聪明人不一定能成功,很多程序员很聪明,但我一看就知道他们不会成功. 因为我看到了一些问题,

未来,什么样的程序员才是不可替代的?

一个足球评论员可能并不会踢足球,却并不妨碍在解说比赛时对某某球星的技艺评头论足.同样我也绝不敢以高明的程序员自居,而只是以类似足球评论员的角度来阐述我对程序员的理解.这样,大家也许就不以我为鄙薄狂妄了.这是我必须首先声明的. 什么是程序员按照Wikipedia的定义,程序员又称为计算机程序员(Computer Programmer).开发者(Developer).编码者(Coder)或计算机工程师(Computer Engineer),和网络上广泛流传的码农或程序猿同义.我无意于也不能够为程序员

程序员到项目经理:从内而外的提升

转自:http://www.cnblogs.com/watsonyin/archive/2012/09/10/2679528.html 目录 从程序员到项目经理(一):为什么要当项目经理 从程序员到项目经理(二):升职之辨 从程序员到项目经理(三):认识项目经理 从程序员到项目经理(四):外行可以领导内行吗 从程序员到项目经理(五):程序员加油站,不是人人都懂的学习要点 从程序员到项目经理(六):程序员加油站 — 懂电脑更要懂人脑 从程序员到项目经理(七):程序员加油站 — 完美主义也是一种错

黑马程序员——I/O流基础知识

I/O流 Io流 代表有能力产生数据的数据源对象或者有能力接收对象的数据接收端对象.字节流和字符流.中文字符也转编码表,jbk2万多中文字.unicode全世界的字符收录.乱码,两种不同形式的编码表.字符流里面的对象融合了编码表,以便别人使用的使用用你指定的编码方式. 基类:读和写~ 字节流 InputStream,OutputStream 字符流 Reader,Writer Writer 主力方法是writer().既然IO流是操作数据的,而数据的最常见体现形式是:文件. 需求:准备在硬盘上创

程序员路在何方

程序员路在何方 前言 程序员(英文Programmer):从事程序开发.维护的专业人员,撰写代码,生产软件,辅助提高社会生产率的脑力劳动者.据说喝的是咖啡,抽的是烟,产的是代码.业内人士有钱多话少死得早的说法:也有世界上有三种人,男人.女人.程序员人的说法(Java语言说万物结尾对象,但是程序员人通常代表找不到对象).他们是计算机诞生后才逐渐兴起的一个群体,鱼龙混杂,有高飞天上的白富美,也有低到尘埃里的矮矬穷,总之虽一类而九流具足. 职场菜鸟 找工作难 作为一个职场菜鸟我们要担心的第一点就是找工

北京尚学堂带你“重新”认识程序员

谈谈程序员 什么是程序员 程序员又称为计算机程序员(Computer Programmer).开发者(Developer).编码者(Coder)或计算机工程师(Computer Engineer),和网络上广泛流传的码农或程序猿同义. 程序员是彻头彻尾的脑力工作者(Mind Worker),怠于思考者绝对不能成为好的程序员.有鉴于此,类Programmer天生的就应该是Thinker的子类.就程序员所使用的思考技巧而言,Thinker的具体内涵包括逻辑(Logic)和数学(Mathematics

汇道科技:如果以后程序员写不动代码了怎么办?

最近汇道科技办公室关于"程序员写不动代码了怎么办?"引发了很多人的讨论,一开始讨论的对象只是"当事人"程序员们,后面到各行各业,同时大家讨论的几个点也引人深思: 1.35岁写不动代码了怎么办?  你不得不承认,对于新事物的兴趣在下降,就如同不再有见漂亮姑娘时的小兔乱撞,就如同不再有见到梦想时的热血跌宕.就是如此尴尬的一个年龄,偏偏又生在互联网,这个到处都是常青藤生产线的艺术品,不比资历只比朝气的行业. 首先小编认为35岁并不是一个很可怕的年纪,三十而立,三十五岁正当

阿里Java面试官分享初级Java程序员通过面试的技巧

本来想分享毕业生和初级程序员如何进大公司的经验,但后来一想,人各有志,有程序员或许想进成长型或创业型公司或其它类型的公司,所以就干脆来分享些提升技能和通过面试的技巧,技巧我讲,公司你选,两厢便利. 毕业生和初级程序员(一般是工作经验3年以下)大多处于事业的青黄不接的阶段,在找工作时往往会遇到缺乏实际项目经验的瓶颈,作为技术面试官,我也经常在面试过程中感受到这些候选人缺乏实际经验的缺陷.不过本人之前做过java兼职培训老师,也总结了些这批人群提升实际技能和面试技能的技巧,最近也老有人来问我这个,所