小笔记-CSDN博客

本文链接：https://blog.csdn.net/sunny_girl_123/article/details/47700209

1、点“ . ”和“ [ ] ”的原理是一样的，只不过有的时候" [ ] "但" . "不一定可行

div.style.width=parseInt(div.style.width)+5+'px';
    		div.style.height=parseInt(div.style.height)+5+'px';
    		div.style.borderBottomWidth=parseInt(div.style.borderBottomWidth)+10+'px';

2、两种遍历方式：

var arr=['zhao' , 'qian' , 'sun' ,'li'];//
	for(var i=0; i<arr.length; i++)
	{
		console.log(arr[i]);
	}

	var obj ={name:'lisi' ,age: '29',area: 'bj'};
	for(var k in obj)
	{
		console.log(k + '~' + obj[k]);
	}

3、有的时候要用 " || " 来解决兼容性问题

4、以下是关于字符串的一些内容：

div.style.width=parseInt(div.style.width)+5+'px';
    		div.style.height=parseInt(div.style.height)+5+'px';
    		div.style.borderBottomWidth=parseInt(div.style.borderBottomWidth)+10+'px';

var str='helloworld';
	console.log(str.length);
	console.log(str.substr(2,3));//截取
console.log(str.indexof('he'));//找子串并返回位置

5、paresInt可以使字符串变成数字

eg:

div.style.width=parseInt(div.style.width)+5+'px';
    		div.style.height=parseInt(div.style.height)+5+'px';
    		div.style.borderBottomWidth=parseInt(div.style.borderBottomWidth)+10+'px';

6.更换图片的时候使用的if () {} else {} 语句牵扯到了字符串的使用中的indexOf

eg:

var div=document.getElementsByTagName('div')[0];
    		if(div.className.indexOf("test1")>=0)
    		{
    			div.className="test2";
    		}
    		else
    		{
    			div.className="test1";
    		}

7.查找各种东西

eg：

<body>
    	<h1>关键是找对象</h1>
    	<div id='test1'>
    		<p>p1</p>
    		<p>p2</p>
    		<p>p3</p>
    	</div>
    	<div class="test2">class test2</div>
    	<input type="test" name="username" id="" value='poly'>
    </body>
    <script type="text/javascript">
    		//用ID查找，返回值是”对象“
    		alert(document.getElementById('test1'));

    		//用标签查询，返回值是？是对象的集合，即使只找到一个对象，也包装成对象集合返回
    		ps=document.getElementsByTagName('p');
    		ps[1].style.background='green';

    		//对于表单元素，可以用name来查询，返回值是？
    		alert(document.getElementsByName('username')[0].value);
    		document.getElementsByName('username')[0].value='zhang';

    		//按照类名查找，返回对象集合
    		document.getElementsByClassName('test2')[0].style.background='gray';

    		//找子节点 children不包含空白文本
    		//alert(document.getElementById('test1').childNodes.length);
    		alert(document.getElementById('test1').children.length);

    		//找父节点
    		document.getElementsByTagName('p')[2].parentNode.style.border='1px solid green';
    </script>