JavaScript_07

最新推荐文章于 2024-04-20 11:21:27 发布

星锅

最新推荐文章于 2024-04-20 11:21:27 发布

阅读量216

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/yjx568135132/article/details/77086487

版权

web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.DOM操作html内容

<title>DOM操作html内容</title>
<style type="text/css">
	img{
		width:200px;
		height:200px;
	}
	#d1{
		width:300px;
		height:250px;
		background-color: gray;
	}

</style>
<script type="text/javascript">
 	window.οnlοad=function(){
 		var obj=document.getElementsByTagName("li")[0];
 		
 		//alert(obj.innerHTML); //获取  包含标签
 		
 		//obj.innerHTML="新社会的北京！"; //设置 
 		
 		//alert(obj.innerText);   //获取文本内容，去掉内层标签 
 		
 		var obj2=document.getElementsByTagName("img")[0];
 		
 		alert(obj2.title);//获取属性            节点名字 ，属性名字 
 		
 		obj2.title="这是改变后的标题!";//设置属性 
 		
 		obj2.src="./img/8.jpg";
 		
 		//作用三：设置样式 
 	}
		function f(){
			var obj=document.getElementsByTagName("div")[0];
			
			obj.style.width="400px";
			obj.style.height="400px";
			obj.style.backgroudColor="green";
			obj.style.border="2px solid red";
			
		}
		
</script>
</head>
<body>
<div id="d1">
	<ul id="d2" class="u1">
		<li>北京</li>
		<li>深圳</li>
		<li>上海</li>
		<li>广州</li>	
	</ul>
</div>
<img alt="我是图片" src="./img/IMG_2344.JPG" title="这是一张图片">
<input type="button" value="点击我" οnclick="f()"/>
</body>

2.简易的表单提交

title>简易的表单提交</title>
<script type="text/javascript">
	function f(){
		alert("获取焦点时候触发。");
	}
	function f1(){
		alert("失去焦点时候触发。");
	}
	function f2(){
		//alert("表单提交时候触发的方法");
	if(document.form1.in1.value==""){
		alert("用户名不能为空！");
		return false;
	}else if(document.form1.in2.value.length==0){
		alert("密码不能为空！");
		return false;
	}
	 return true;
	}
	
	function f3(){
		alert("select 内容被改变了。。");
	} 
	function f4(){
		alert("等页面结构内容加载完毕才会触发的onload方法");
	}
</script>
</head>
<body>
	<form action="" method="post" name="form1" οnsubmit="return f2()">
	<table>
		<tr>
		<td>用户名：</td>
		 <!-- οnfοcus="f()" οnblur="f1()" -->
		<td><input type="text" maxlength="12" name="in1" /></td>
		</tr>
		<tr>
		<td>密 码：</td>
		<td><input type="password" maxlength="12" name="in2" /></td>
		</tr>
		<tr>
			<td>选择地区：</td>
			<td>
			<select name="sel1">
				<option value="北京">北京</option>
			    <option value="上海">上海</option>
			    <option value="深圳">深圳</option>
			    <option value="广州">广州</option>	
			</select>
			</td>
		</tr>
	    <tr align="center">
	    	<td colspan="2">
	    	<input  type="submit" value="提交"/>
	    	</td>
		</tr>
	
	</table>
	
	
	</form>
</body>

3.节点操作

<title>节点操作</title>
<style type="text/css">
	div{
	background-color: gray;
	}

</style>
	<script type="text/javascript">
	/*
	增
	删
	改
	
	*/
	 function f1(){
			//创建节点
			var newObj = document.createElement("p"); //创建一个元素节点  <p></p>
			
			//添加文本内容
			var text = document.createTextNode("我是一个新添加的p段落内容。。。");  //创建一个文本节点
			
			newObj.appendChild(text); //添加子节点   <p>我是一个新添加的p段落内容..</p>
			
			var obj = document.getElementById("d1");
			
			obj.appendChild(newObj);//添加到div里面
		
	}
	</script>
</head>
<body>
	<div id="d1">
	   <p>我是div的第一个子元素</p>
		<ul id="u1">
			<li>html+css</li>
			<li>javascript</li>
			<li>mysql</li>
			<li>jsp</li>
			<li>香蕉</li>
			<li>菠萝</li>
			<li>橘子</li>
		</ul>
	    <p>我是div的第二个子元素</p>
	   </div>
	   <input type="button" value="添加子节点" οnclick="f1()"/>
</body>

4.节点关系

<title>节关系</title>
<style type="text/css">
	div{
		background-color: gray;
	}
</style>
<script type="text/javascript">
	/*
	关系：
		1.子节点
		2.父节点
		3.兄弟节点
	*/
	window.οnlοad=function(){
	
	var obj = document.getElementById("u1");
	
	var child = obj.firstElementChild; //第一个子节点 
	
	var  child2 = obj.lastElementChild;//获取最后一个子元素 
	
	child.style.color="red";
	child2.style.color="green";
	
	//获取任意子节点的方法
	
	var allChild = obj.children;  //获取所有的子节点
	//alert(allChild.length);
	
	var child4 = allChild[3];
	
	child4.style.color="blue";
	
	//alert(child.innerHTML);
	
	//获取父节点
	var parent = obj.parentNode;
	
	parent.style.border="2px solid red";
	
	//兄弟节点
	 var bro1=obj.previousElementSibling;//上一个兄弟节点
	 
	 bro1.style.color="green";
	 
	 var bro2=obj.nextElementSibling; //下一个兄弟节点 
	 
	 bro2.style.color="red";
	 
	}
	
</script>
</head>
<body>
	<div id="d1">
	   <p>我是div的第一个子元素</p>
		<ul id="u1">
			<li>html+css</li>
			<li>javascript</li>
			<li>mysql</li>
			<li>jsp</li>
			<li>香蕉</li>
			<li>菠萝</li>
			<li>橘子</li>
		</ul>
	    <p>我是div的第二个子元素</p>
	</div>
	
</body>

5.事件问题

<title>事件问题</title>
<style type="text/css">
   #d1{
      width: 250px;
      height: 250px;
      background-color: green;
      line-height: 250px;
      text-align: center;
      margin: 0 auto;
   }
</style>
 <script type="text/javascript">
    /*
        句柄
      事件源
     */
  //定义事件的方式：1.内嵌方式    2.注册监听
    window.onload = function(){
    	
    	//内嵌
    	var obj = document.getElementsByTagName("input")[0];
    	
    	obj.onclick = function(){
    		alert("input被点击了。。。。");
    	}
    	
    	
    	//给div内嵌事件
      /* var obj2 = document.getElementById("d1");
    	
    	obj2.onmouseover =  function(){
    		alert("鼠标移进div");
    	}
    	obj2.onmouseout =  function(){
    		alert("鼠标移出div");
    	} */
    	
    	var obj3 = document.getElementsByTagName("body")[0];
    	
    	//鼠标按下的的时候触发
    	obj3.onmousedown =function(){
    		alert("body被点击了。。");
    	}
    	
    	
    	
    }
    
    //注册监听
    function f(){
    	 alert("第二个input也被点击了。。。");
    }
    
 </script>
</head>
<body>
    <input type="button" value="我是第一个按钮"/><br>
    <input type="button" value="我是第二个按钮" οnclick="f()"/><br>
    
    <div id = "d1">
          我是一个 div
    </div>
</body>

6.属性操作

<title>属性操作</title>
<style type="text/css">
   img{
		width:250px;
		height:250px;
	}

</style>
<script type="text/javascript">
		function f1() {
			var obj=document.getElementsByTagName("img")[0];
			alert(obj.getAttribute("title"));	
		}
		function f2(){
			var obj1=document.getElementsByTagName("img")[0];
			var obj2=document.getElementsByTagName("img")[1];
			
			obj1.setAttribute("src","./img/IMG_2344.JPG");
			
			obj2.setAttribute("src","./img/8.jpg");
		}
		 function f3(){
	    	  var obj2 = document.getElementsByTagName("img")[1];
	    	  
	    	  obj2.removeAttribute("title");//删除属性
	    	   
	      }
</script>
</head>
<body>
	<img alt="" src="./img/8.jpg" title="我是第一张图片">
	<img alt="" src="./img/IMG_2344.JPG" title="我是第二张图片"><br>
	<input type="button" value="添加设置属性" οnclick="f1()"/>
	<input type="button" value="修改属性" οnclick="f2()"/>
	<input type="button" value="删除属性" οnclick="f3()"/>
</body>
</html>