小强的HTML5移动开发之路(30)—— JavaScript回顾5

一、查找

第一种方式:依据id查找

var obj = document.getElementById(id);   //document是HTMLDocument的实例

<html>
	<head>
		<script>
			function f1(){
				var obj = document.getElementById(‘a1‘); //双引号,单引号都可以
				//innerHTML属性:可以访问或者设置节点的html的属性值
				//alert(obj.innerHTML); 
				obj.innerHTML = "为什么点我"; //双引号单引号都可以
			}
			function f2(){
				var obj = document.getElementById(‘d1‘);
				alert(obj.innerHTML);
			}
			function f3(){
				var obj = document.getElementById(‘username‘);
				//value属性:可以获取文本输入框的值和改变值
				alert(obj.value); //获得值
				obj.value = ‘abc‘;//改变值
			}
			
		</script>
	</head>

	<body style="font-size:30px;font-style:italic;">
		<!--javascript:; 表示是一个空白的js语句-->
		<a href="javascript:;" id="a1" onclick="f1();">click me</a><br/>
		<div id="d1" ><span>你好</span></div><br/>
		<input type="text" id="username" name="username"/><br/>
		<input type="button" value="点我吧" onclick="f3();"/>
	</body>
</html> 
第二种方式

var arr = node.getElementsByTagName(‘tagName‘);

<html>
	<head>
		<style>
			ul{
				list-style-type:none;	
			}
			ul li{
				float:left;
				border:1px solid black;
				margin-left:10px;
				width:100px;
				height:40px;
				background-color:red;
				cursor:pointer;				
			}
			.selected{
				background-color:#ff88ee;
			}
		</style>
		<script src="myjs.js"></script>
		<script>
			function doAction(index){
				var arr = $(‘u1‘).getElementsByTagName(‘li‘);
				for(i=0; i<arr.length; i++){
					arr[i].className = ‘‘;
				}
				var obj = $(‘l‘+index);
				obj.className = ‘selected‘;
			}
		</script>
	</head>
	<body style="font-size:30px;">
		<ul id="u1">
			<li onmouseover="doAction(1);" id="l1">选项一</li>
			<li onmouseover="doAction(2);" id="l2">选项二</li>
			<li onmouseover="doAction(3);" id="l3">选项三</li>
		</ul>
	</body>
</html> 
第三种方式

使用遍历的方式(浏览器兼容性差)

parentNode

previousSibling 前一个兄弟

nextSibling 下一个兄弟

childNodes 所有子节点

firstChild 前一个子节点

lastChild 后一个子节点

遍历的方式因为有浏览器的兼容性问题,尽量少用

二、创建

document.createElement(tagName);            //tagName表示标记名

三、添加

node.appendChild(obj);  //作为最后一个孩子添加

node.insertBefore(obj, refNode);  //添加到refNode的前面

node.replaceChild(obj, refNode);  //替换refNode

四、删除

node.removeChild(obj);

<html>
	<head>
		<script src="myjs.js"></script>
		<script>
			function f1(){
				var obj = document.createElement(‘div‘);	
				obj.innerHTML = ‘兴趣最重要...‘;
				obj.className = ‘s1‘;
			//	$(‘d1‘).appendChild(obj);	
			//	$(‘d1‘).insertBefore(obj, $(‘a1‘));	
			//	$(‘d1‘).replaceChild(obj, $(‘a1‘));
				$(‘d1‘).removeChild($(‘a1‘));
			}
		</script>
		<style>
			.s1{
				width:200px;
				height:100px;
				background-color:red;
			}
		</style>
	</head>
		
	<body style="font-size:30px;" id="d1">
<!-- 		<a href="javascript:alert(‘hello‘);">如何学好java</a>  -->
		<a id="a1" href="javascript:;" onclick="f1();">如何学好java</a>
	</body>
</html>

五、样式

第一种方式:修改节点的className属性

比如:var obj = document.getElementById(‘id1‘);    obj.className = ‘s1‘; //使用s1样式  ****见例子:表单验证****

第二种方式:修改节点的style属性

1.必须是内联样式

2.如果要修改的样式属性名包括"-",比如background-color,则要按照如下方式修改node.style.backgroundColor = ‘red‘;

<html>
	<head>
		<style>
			#d1{
				width:80px;
				height:80px;
				background-color:blue;
				position:relative;
			}
		</style>
		<script src="myjs.js"></script>
		<script>
			function f1(){
				var v1 = parseInt($(‘d1‘).style.left);
				$(‘d1‘).style.left = v1 + 50 + ‘px‘;
			}
		</script>
	</head>
	<body>
		<div id="d1" style="left:10px;"></div>
		<input type="button" value="click me"
		onclick="f1();"/>
	</body>
</html>

如何禁止浏览器的两种默认行为:

点击连接,浏览器会向href属性指向的地址发请求

点击表单提交按钮,浏览器会提交表单

禁止的方式

<a href="" onclick="return false;"></a>

<from onsubmint="return false;"></form>






郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。