JS核心技巧精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/php398893944/article/details/7299853

小知识点:

①parseInt:解析一个字符串并返回一个整数。

a=parseInt(document.getElementById("num1").value);

②eval() 函数可计算某个字符串，并执行其中的的 JavaScript

③isNaN(num)判断num是否是数字

④indexOf() 方法可返回某个指定的字符串值在字符串中首次出现

的位置。

查找子字符串(匹配字符串)

查找到了，返回字符串出现的位置

没找到返回 -1

⑤Math.random() 来返回 0 到 1 之间的随机数。

⑥Math.round()。返回整数

var result=Math.round(Math.random()*10);返回0-10整数

Math.round(Math.random*(n-m)+m)产生m-n之间的整数：

⑦Math.max() 来返回两个给定的数中的较大的数。

Math.min() 来返回两个给定的数中的较小的数。

⑧ charAt():返回指定位置的字符串

substr():字符串的截取,可加两个参数，形如:substr

(2,2)第二个位置长度；也可以是一个参数

，则表示从这个位置截取到字符串结束

toLowerCase():把字符串转换为小写

⑨ <p id="testid">这里放了一个p</p>

document.getElementById("testid").style.display="block";

document.getElementById("testid").style.display="none";

⑩var p=document.getElementById("p");

p.style.border="1px solid red";-->js设置css样式加边框

11)

1、document.getElementById("对象的id");独立访问某一个对

象的时候使用

2、document.getElementsByName("对象的name");返回的是一个

数组(节点的列表)

var p=document.getElementsByName("p1");--><p

name="p1"></p>

3、document.getElementsByTagName("标签名称");返回的也是

一个对象数组

var p=document.getElementsByTagName("p");p标签

12)moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。

(360浏览器不支持IE和FF支持)

for(var i=0;i<200;i++){

//向右斗10

moveBy(10,0);

//向下斗10

moveBy(0,10);

//向左斗10

moveBy(-10,0);

//向上斗10

moveBy(0,-10);

}

13) 见dom-childnode0num.html

parentNode父节点

firstChild第一个子节点

lastChild最后一个子节点

nodeType节点类型 (返回1 元素节点 3 文本节点)

nodeValue节点的值

childNodes.length获取节点的个数

alert(document.getElementById("test").childNodes.length);

14)display:block显示||none不显示

document.getElementById("testid").style.display="none";

15)//获取所有的对象

var a=document.all;

var str="";

for(var i=0;i<a.length;i++){

str+="---"+a[i].tagName+"<br>";

}

document.write(str);

通过子节点设置父节点小案例：

function getTest1(){

//设置id="test1"的对象的边框颜色是1像素的红色实线

document.getElementById("test1").style.border="1px solid red";

}

//测试调用父对象

function setParent(){

1、先获取一个有父节点的对象

2、使用parentNode 获取父对象

var p1=document.getElementById("test1");

//设置父节点

p1.parentNode.style.border="1px solid pink";

//设置第一个子节点

p1.firstChild.style.border="1px solid green";

}

function getlastnode(){

//设置最后一个子节点

var lastnode=document.getElementById("test");

//alert(lastnode.lastChild.tagName);

lastnode.lastChild.style.border="1px solid black";

}

//取出子节点的值

function getvalue(){

var p=document.getElementById("test2");

//元素节点类型-->1

alert("p节点的类型"+p.nodeType);

alert(p.firstChild.nodeValue);

//文本节点-->3

alert("p->firstChild:"+p.firstChild.nodeType);

}

//获取节点个数

function getNodes(){

alert(document.getElementById("test").childNodes.length);

}

</script>

</head>

<body>

<p id="test1"><b>这是一个p</b></p>

<p id="test2">这又是一个p</p>

</div>

<input type="button" value="测试p父节点和p子节点<b>" onclick="setParent()">

</body>

dom-node