JS面向对象编程基础部分(3) 4.1

最新推荐文章于 2021-10-24 19:54:08 发布

u010092682

最新推荐文章于 2021-10-24 19:54:08 发布

阅读量486

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/wangbinhui81218/article/details/22892399

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Document对象
定义：document对象代表的整个html文档，因此可以去访问到当前文档中的各个对象（元素）。
1） write() 向文档写文档或HTML表达式或JavaScript代码
2） written() 等同于write()方法，不同的是在每个表达式之后写一个换行符
PS:对于浏览器来说，输出效果是没有区别的，所以两者用处不多
3)getElementById()通过html控件id得到该控件。(如果有相同的id则只取第一个)
a.规定html文档中html号要唯一，如果不是唯一，则只取第一个元素；
b.id号不能已数字开头
6） getElementsByName() 通过html控件的名字返回对象集合
7） getElementsByTagName() 通过html的标签名返回对象集合

举例：

<script languange="javascript">
//JSd代码：


function getA(){
	//如果ID号一样，则只选择第一个id元素
	alert(document.getElementById("a").innerText);
}

function getCheckbox(){
	var hobbies=document.getElementsByName("hobby");
	for(var i=0;i<hobbies.length;i++){
		if(hobbies[i].checked){
			alert(hobbies[i].value);
		}
	}
	
}

function getTag(){
	var tag=document.getElementsByTagName("input");
	for(var i=0;i<tag.length;i++){
		alert(tag[i].value);
	}
}

</script>
</head>
<!--HTML代码-->
<body>
<!--getElementById()-->
<a href="#" id="a" οnclick="getA()">连接到百度</a><br/>
<a href="#" id="a" οnclick="getA()">连接到sohu</a><br/>
<a href="#" id="a" οnclick="getA()">连接到sina</a><br/>
<br/>
<!--getElementsByName() 注意这边有s-->
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="音乐"/>音乐
<input type="checkbox" name="hobby" value="篮球"/>篮球
<input type="button" value="tesing" οnclick="getCheckbox()"/>
<!--getElementsByTagName()-->
<input type="button" value="getElementsByTagName" οnclick="getTag()"/>

</body>

******************
**动态的创建，添加，删除html元素：

举例：

<script languange="javascript">
//JSd代码：
function newHtml(){
//创建元素
var newHtml=document.createElement("input");
//添加元素属性
newHtml.type="button";
newHtml.value="新建按钮";
newHtml.id="newHtml";
alert(newHtml.id);
/*添加样式属性
newHtml.style.position="absolute";
newHtml.style.left="100px";
newHtml.style.top="50px";
*/
//添加到div
//第一种方法
$("bntDiv").appendChild(newHtml);

}

function deleteHtml(){
	//法一：前提必须获得父元素的id
	//$("bntDiv").removeChild($("newHtml"));
	//法二：灵活获得父元素
	$("newHtml").parentNode.removeChild($("newHtml"));
}
</script>
</head>
<!--HTML代码-->
<body>
<!--getElementById()-->
<input type="button" value="动态创建添加一个按钮" οnclick="newHtml()"/>
<input type="button" value="删除一个按钮" οnclick="deleteHtml()"/>
<div id="bntDiv">按钮添加到这里</div>
</body>

*********************************
1） body.clientWidth
2） body.clientHeight
3） offsetWidth
4） offsetHeight
案例：有一小太阳，当它碰到边框后，就自动的转变方向，很多网站就有这种浮动广告。

举例：

<!--HTML代码-->
<body>
<div id="moveDiv" style="left:0px;top:0px">
<img src="2.jpg" class="movePicture"/>
</div>

<script languange="javascript">
//JSd代码：
/*测试的时候请别再用document.write()来测试了，因为他会不断刷新页面把原来的页面内容覆盖导致错误*/
var directX=1;
var directY=1;
var left=$("moveDiv").style.left;
var top=$("moveDiv").style.top;
var moveDivX=parseInt(left.substring(0,left.indexOf('p')));
var moveDivY=parseInt(top.substring(0,top.indexOf('p')));
function move(){
	moveDivX+=50*directX;
	moveDivY+=50*directY;
	//document.write("aa");
	
	$("moveDiv").style.left=moveDivX+"px";
	$("moveDiv").style.top=moveDivY+"px";
	if((moveDivX+$("moveDiv").offsetWidth)>=document.body.clientWidth||moveDivX<=0){
		directX=-directX;
	}
	if((moveDivY+$("moveDiv").offsetHeight)>=document.body.clientHeight||moveDivY<=0){
		directY=-directY;
		
	}

}

setInterval("move()",50);
</script>

</body>

*************************
拖拽窗口：（未实现）

<!--HTML代码-->
<body>

<div id="parentWindow" style="left:50px;top:50px">
<div id="sonWindow" οnmοusedοwn="startDrag(this,event)" οnmοuseοver="drag(this,event)" οnmοuseup="stopDrag(this,event)">点击该区域拖拽移动窗口</div>
</div>

<script languange="javascript">
//JSd代码：
/*
未实现完全拖拽功能，当在拖拽区点击按下后在外部弹起时，moveable就会一直变true；
则会导致一旦鼠标移动到拖拽区时，窗口自动移动。
*/
var parentWindowX=$("parentWindow").style.left;
var parentWindowY=$("parentWindow").style.top;
var moveable=false;
var stop=false;
var tempMouseX;
var tempMouseY;
function startDrag(obj,event){
	moveable=true;
	parentWindowX=parseInt($("parentWindow").style.left);
	//parentWindowX=parseInt(parentWindowX.substring(0,parentWindowX.indexOf('p')));
	parentWindowY=parseInt($("parentWindow").style.top);
	//parentWindowY=parseInt(parentWindowY.substring(0,parentWindowY.indexOf('p')));
	tempMouseX=event.clientX;
	tempMouseY=event.clientY;
}
function drag(obj,event){
	if(moveable){
	parentWindowX+=(event.clientX-tempMouseX);
	parentWindowY+=(event.clienty-tempMouseY);
	$("parentWindow").style.left=parentWindowX+"px";
	$("parentWindow").style.top=parentWindowY+"px";
	
	}
}
function stopDrag(obj,event){
	stop=true;
	moveable=false;
	
}
</script>
</body>

/*******************************************
坦克游戏1.0

<!--HTML代码-->
<body οnkeydοwn="doSomething(event)">
<div id="gameDiv">
<div style="background-image:url('tank.gif');background-position-y:0px;width:40px;height:40px;position:absolute" id="tank"></div>
</div>
<input type="button" value="上"/>
<input type="button" value="右"/>
<input type="button" value="下"/>
<input type="button" value="左"/>

<script language="javascript">
function Tank(tankX,tankY,direct){
	this.tankX=tankX;
	this.tankY=tankY;
	this.direct=direct;
	var speed=5;
	//初始化tank位置
	$("tank").style.left=this.tankX+"px";
	$("tank").style.top=this.tankY+"px";
	//移动函数
	this.move=function(event){
		
		switch(event.keyCode){
			case 65://a表示左
				this.tankX-=speed;
				$("tank").style.backgroundPositionY="40px";
				break;
			case 83://s表示向下
				this.tankY+=speed;
				$("tank").style.backgroundPositionY="80px";
				break;
			case 68://d表示右
				this.tankX+=speed;
				$("tank").style.backgroundPositionY="120px";
				break;
			case 87://w表示上
				this.tankY-=speed;
				$("tank").style.backgroundPositionY="0px";
				break;
		}

		//统一处理移动
		$("tank").style.left=this.tankX;
		$("tank").style.top=this.tankY;
	}
}

//根据按键来判断不同的操作
function doSomething(event){
	if(event.keyCode==65||event.keyCode==83||event.keyCode==68||event.keyCode==87){
		myTank.move(event);
	}
}
//对象选取函数
function $(id){
	return document.getElementById(id);
}
//创建我的tank
var myTank=new Tank(110,260,0);
</script>
</body>

*/**************************************************

**仿sohu首页菜单切换：

<script language="javascript">
	function change1(obj){
		obj.style.backgroundColor="black";
		if(obj.id=="zhaosheng"){

			$("content1").style.display="block";
			$("content2").style.display="none";
			
		}else if(obj.id=="liuxue"){
			$("content2").style.display="block";
			$("content1").style.display="none";
		}
	}
	function change2(obj){
		obj.style.backgroundColor="yellow";
	}

	function $(id){
		return document.getElementById(id);
	}
</script>
</head>
<!--HTML代码-->
<body>
<!--总的DIV-->
<div class="newsDiv">
<!--导航栏DIV-->
<div class="navigator">
	<ul>
		<li id="zhaosheng" οnmοuseοver="change1(this)" οnmοuseοut="change2(this)" style="background-color:yellow;">招生</li>
		<li id="liuxue" οnmοuseοver="change1(this)" οnmοuseοut="change2(this)" style="background-color:yellow;">留学</li>
		<li>考研</li>
	</ul>
</div>
<!--新闻标题Div1-->
<div class="content1" id="content1" style="display:block;">
	<ul>
		<li><a href="#">招生招生招生招生</a></li>
		<li><a href="#">招生招生招生招生</a></li>
		<li><a href="#">招生招生招生招生</a></li>
		<li><a href="#">招生招生招生招生</a></li>
		<li><a href="#">招生招生招生招生</a></li>
		<li><a href="#">招生招生招生招生</a></li>
		<li><a href="#">招生招生招生招生</a></li>
		<li><a href="#">招生招生招生招生</a></li>
	</ul>
</div>
<!--新闻标题Div2-->
<div class="content2" id="content2" style="display:none;">
	<ul>
		<li><a href="#">留学留学留学留学</a></li>
		<li><a href="#">留学留学留学留学</a></li>
		<li><a href="#">留学留学留学留学</a></li>
		<li><a href="#">留学留学留学留学</a></li>
		<li><a href="#">留学留学留学留学</a></li>
		<li><a href="#">留学留学留学留学</a></li>
		<li><a href="#">留学留学留学留学</a></li>
		<li><a href="#">留学留学留学留学</a></li>
	</ul>
</div>

</div>
</body>

**************************

**使用js实现的简单购物车功能:
？？一定要注意οnkeyup="return getPrice()"中药用return;不然会无效这个方法
??而且这边一定要用onkeyup方法

<script language="javascript">

	var fruite=document.getElementsByName("fruit");
	var inputNum=document.getElementsByName("count");
	var count=0;
	function getPrice(obj){
		var totalPrice=0;
		for(var i=0;i<fruite.length;i++){
			if(fruite[i].checked&&inputNum[i].value){
				switch(fruite[i].value){
					case '10':
						count=parseInt($("count1").value);
						//alert($("count1").value);
						break;
					case '20':
						count=parseInt($("count2").value);
						//alert($("count2").value);
						break;
					case '30':
						count=parseInt($("count3").value);
						//alert($("count3").value);
						break;
					case '40':
						count=parseInt($("count4").value);
						//alert($("count4").value);
						break;
				}
			totalPrice+=(count*parseFloat(fruite[i].value));
			}
		}
	$("totalPrice").innerText=totalPrice+"";

	}

function $(id){
	return document.getElementById(id);
}

</script>
</head>
<!--HTML代码-->
<body>
<input type="checkbox" name="fruit" value="10" οnclick="getPrice(this)"/>苹果 10元  数量<input type="text" name="count" id="count1" οnkeyup="return getPrice(this)"/></br>
<input type="checkbox" name="fruit" value="20" οnclick="getPrice(this)"/>雪梨 20元  数量<input type="text" name="count"  id="count2" οnkeyup="return getPrice(this)"/></br>
<input type="checkbox" name="fruit" value="30" οnclick="getPrice(this)"/>香蕉 30元  数量<input type="text" name="count" id="count3" οnkeyup="return getPrice(this)"/></br>
<input type="checkbox" name="fruit" value="40" οnclick="getPrice(this)"/>荔枝 40元  数量<input type="text" name="count" id="count4" οnkeyup="return getPrice(this)"/></br>
总价为：<span id="totalPrice"> </span>元
</body>

****************************
动态的生成选择下拉框，并能构成在另外一个文本框中显示用户选择的内容

<select id="myCourse" οnchange="getCourse();">
<option value="" selected>--请选择一门课程--</option>
</select><br/> 
<textarea id="myares" cols=30 rows=10>
</textarea>
<script language="javascript"> 
var last_select_num=3;
//加入从数据库中查询，发现用户上次选择了3门课程 
var myOption=document.createElement("OPTION");
//动态添加第一门课程java myOption.value="java"; 
myOption.text="java"; 
myCourse.add(myOption); 
var myOption=document.createElement("OPTION");
//动态添加第二门课程
oracle myOption.value="oracle";
myOption.text="oracle";
myCourse.add(myOption); 
var myOption=document.createElement("OPTION");
//动态添加第三门课程
j2ee myOption.value="j2ee";
myOption.text="j2ee";
myCourse.add(myOption);
//注意这两种方式的结果，有什么区别 
function getCourse(){
myares.value+="你选中了1:"+myCourse.value+"\r\n";
//在文本域中“\r\n”表示回车换行。 
//myares.value="你选中了:"+myCourse.options[myCourse.selectedIndex].innerText;
//每次只输出一行文本 } </script>

**********************************

复选框全选和取消(说明：该代码实现两种方法[超链接，复选框])
<script type="text/javascript"> 
function selectCheck(obj){
var fruits=document.getElementsByName("fruit")
	if(obj.innerText=='全选'){ 
	  for(var i=0;i<fruits.length;i++){
	  fruits[i].checked=true; 
	  } 
	}else{ 
	  for(var i=0;i<fruits.length;i++){
	    fruits[i].checked=false; 
	    } 
	  } 
	   } 
	    //响应复选框 
	    function selectcheck2(){
	    var fruits=document.getElementsByName("fruit") 
	    if(myselect.checked){ 
	    for(var i=0;i<fruits.length;i++){
	    fruits[i].checked=true; 
	    } 
	    }else{
	    for(var i=0;i<fruits.length;i++){
	    fruits[i].checked=false;
	    } 
	    } 
	    }
	    </script>
	    <input type="checkbox" name="fruit" value="10" οnclick="gouwu(this)"/>苹果10元<br> 
	    <input type="checkbox" name="fruit" value="20" οnclick="gouwu(this)">香蕉20元<br> 
	    <input type="checkbox" name="fruit" value="30" οnclick="gouwu(this)">西瓜30元<br/> 
	    <input type="checkbox" name="fruit" value="40" οnclick="gouwu(this)"/>栗子40元<br/>
	    <input type="checkbox" name="fruit" value="50" οnclick="gouwu(this)"/>哈密瓜50元<br>
	    <a href="#" οnclick="selectCheck(this)">全选</a> 
	    <a href="#" οnclick="selectCheck(this)">取消</a><br/>
	    <input type="checkbox" id="myselect" οnclick="selectcheck2()">是否全选

u010092682

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS面向对象编程基础部分(3) 4.1

Document对象定义：document对象代表的整个html文档，因此可以去访问到当前文档中的各个对象（元素）。1） write() 向文档写文档或HTML表达式或JavaScript代码2） written() 等同于write()方法，不同的是在每个表达式之后写一个换行符PS:对于浏览器来说，输出效果是没有区别的，所以两者用处不多3)getElementById()通过
复制链接

扫一扫

专栏目录