JS面向物件程式設計基礎部分(3) 4.1
定義：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" onclick="getA()">連線到百度</a><br/> <a href="#" id="a" onclick="getA()">連線到sohu</a><br/> <a href="#" id="a" onclick="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" onclick="getCheckbox()"/> <!--getElementsByTagName()--> <input type="button" value="getElementsByTagName" onclick="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="動態建立新增一個按鈕" onclick="newHtml()"/> <input type="button" value="刪除一個按鈕" onclick="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" onmousedown="startDrag(this,event)" onmouseover="drag(this,event)" onmouseup="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 onkeydown="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" onmouseover="change1(this)" onmouseout="change2(this)" style="background-color:yellow;">招生</li>
<li id="liuxue" onmouseover="change1(this)" onmouseout="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實現的簡單購物車功能:
？？一定要注意onkeyup="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" onclick="getPrice(this)"/>蘋果 10元 數量<input type="text" name="count" id="count1" onkeyup="return getPrice(this)"/></br>
<input type="checkbox" name="fruit" value="20" onclick="getPrice(this)"/>雪梨 20元 數量<input type="text" name="count" id="count2" onkeyup="return getPrice(this)"/></br>
<input type="checkbox" name="fruit" value="30" onclick="getPrice(this)"/>香蕉 30元 數量<input type="text" name="count" id="count3" onkeyup="return getPrice(this)"/></br>
<input type="checkbox" name="fruit" value="40" onclick="getPrice(this)"/>荔枝 40元 數量<input type="text" name="count" id="count4" onkeyup="return getPrice(this)"/></br>
總價為：<span id="totalPrice"> </span>元
</body>
****************************
動態的生成選擇下拉框，並能構成在另外一個文字框中顯示使用者選擇的內容
<select id="myCourse" onchange="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" onclick="gouwu(this)"/>蘋果10元<br>
<input type="checkbox" name="fruit" value="20" onclick="gouwu(this)">香蕉20元<br>
<input type="checkbox" name="fruit" value="30" onclick="gouwu(this)">西瓜30元<br/>
<input type="checkbox" name="fruit" value="40" onclick="gouwu(this)"/>栗子40元<br/>
<input type="checkbox" name="fruit" value="50" onclick="gouwu(this)"/>哈密瓜50元<br>
<a href="#" onclick="selectCheck(this)">全選</a>
<a href="#" onclick="selectCheck(this)">取消</a><br/>
<input type="checkbox" id="myselect" onclick="selectcheck2()">是否全選相關推薦
JS面向物件程式設計基礎部分(3) 4.1
Document物件 定義：document物件代表的整個html文件，因此可以去訪問到當前文件中的各個物件（元素）。 1） write() 向文件寫文件或HTML表示式或JavaScript程式碼 2） written() 等同於write()方法，不同的是在每個表示式
原生js面向物件程式設計-選項卡(自動輪播)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生js面向物件程式設計-選項卡(自動輪播)</title> <
帶你一分鐘理解閉包--js面向物件程式設計
上一篇《簡單粗暴地理解js原型鏈--js面向物件程式設計》沒想到能攢到這麼多贊，實屬意外。分享是個好事情，尤其是分享自己的學習感悟。所以網上關於原型鏈、閉包、作用域等文章多如牛毛，很多文章寫得很深入很專業，而我卻喜歡用更簡單方式來解說簡單的事情。 什麼是閉包？ 先看一段程式碼：
面向物件程式設計基礎
面向物件程式設計 面向物件程式設計：Object Oriented Programming，簡稱OOP，是一種程式設計方法。 面向物件面向過程區別 完成自我介紹功能，面向過程完成功能 stu_a = { "name":"A" "age":18, "home
使用JAVA實現面向物件程式設計基礎
第一章 物件和封裝： 構造方法特點： 方法名和類名相同 沒有返回值型別 系統預設提供無參構造方法 自己編寫構造方法後系統不提供預設構造方法 作用： 完成物件的例項化工作 方法過載(OverLoad) 在同一個類中，方法名相同，引數列表不同的方法稱為方法的過載 引數列表不同指引數個數,
JS面向物件程式設計
什麼是面向物件程式設計（OOP）？用物件的思想去寫程式碼，就是面向物件程式設計。 面向物件程式設計的特點 抽象：抓住核心問題 封裝：只能通過物件來訪問方法 繼承：從已有物件上繼承出新的物件 多型：多物件的不同形態 物件的組成 屬性：物件下面的變數叫做物件的屬性
JAVA面向物件程式設計基礎
方法： 1、類似函式 public class Demo { int sum() { return 1+1; } public static void main(String[] args) {
JS原型鏈--js面向物件程式設計
原型鏈理解起來有點繞了，網上資料也是很多，每次晚上睡不著的時候總喜歡在網上找點原型鏈和閉包的文章看，效果極好。 不要糾結於那一堆術語了，那除了讓你腦筋擰成麻花，真的不能幫你什麼。簡單粗暴點看原型鏈吧，想點與程式碼無關的事，比如人、妖以及人妖。 1）人是人他媽生的，妖是
JS面向物件程式設計（二） JS中的建構函式！
JS中的建構函式是JS面向物件程式設計的核心，雖然ES6已經引入了Class類的概念，但是論靈活性還是建構函式更勝一籌。 一段程式碼，先對建構函式有基本的認識： function Animal(name, type) { this.name =
python面向物件程式設計基礎
演示了 Python 類與物件的程式設計基礎， 包括屬性、方法、繼承、組合、動態建立類。 python 版本： 2.7.5 class SimpleClass(object): ''' a simple demo for python class
JS面向物件程式設計之：封裝、繼承、多型
一、封裝 （1）封裝通俗的說，就是我有一些祕密不想讓人知道，就通過私有化變數和私有化方法，這樣外界就訪問不到了。然後如果你有一些很想讓大家知道的東西，你就可以通
python之面向物件程式設計基礎
面向物件程式設計是一種程式設計正規化，在面向物件程式設計中有一個很重要的概念就是類。 什麼是類呢？類是一個抽象的概念，它是一類具有共同特徵的具體物件的抽象描述。比如在一個學校有張三，李四，王五等學生，他們都是具體的一個個物件（也稱作例項），把他們抽象成一個概念
python08-面向物件程式設計基礎
面向物件程式設計(Object Oriented Programming, OOP)，物件中包含了資料與對資料進行操作的方法。python中自定義的物件即是類(class)，類定義的一個個實體叫做例項(instance)。 1 類與例項 >>&g
面向物件程式設計基礎入門(vb.net版)
幾乎在 Visual Basic 中執行的所有操作都與物件關聯。如果您第一次接觸面向物件的程式設計，則下列術語和概念將幫助您入門。 類和物件單詞“類”和“物件”在面向物件的程式設計中使用得非常多，很容易將它們混淆。一般來說，“類”是一些內容的抽象表示形式，而“物件”是類所表示
Python面向物件程式設計基礎學習筆記
類名大寫開頭； 建構函式 class Obj(Object) nouse = "helo" #類變數,例項共享(類似每個例項複製了一份,而不是static成員), 無法在函式中直
python 面向物件程式設計-基礎
首先先來對比一下之前學習的內容： 面向過程：根據業務邏輯從上到下寫壘程式碼函式式：將某功能程式碼封裝到函式中，日後便無需重複編寫，僅呼叫函式即可面向物件：對函式進行分類和封裝，讓開發“更快更好更強...”面向過程程式設計最易被初學者接受，其往往用一長段程式碼來實現指定功能
js 面向物件程式設計的繼承
父類建構函式 function Animal(){ this.species ='動物'; } 字類建構函式 function Cat(name){ Animal.call(this,arguments); this.name=name; } 建立字類物件呼
第一篇：面向物件程式設計基礎（上）
面向物件程式設計（Object Oriented Programming）,簡稱OOP。是java程式設計的核心，也是java web應用開發的核心。主要有三個概念：封裝，繼承，和多型。 簡要闡述下三個概念：1、封裝：封裝是OOP語言的優點之一。把一個物件的資
Js面向物件程式設計——繼承（組合繼承）
繼承（組合繼承） Js面向物件程式設計——繼承（組合繼承） Js面向物件程式設計——繼承（組合繼承） 示例： function SuperType(name){ this.name=name; this.colors=["
Js面向物件程式設計——建立物件（工廠模式）
建立物件——工廠模式 建立物件——工廠模式 建立物件——工廠模式 工廠模式是軟體工程領域一種廣為人知的設計模式，這種模式抽象了建立具體物件的過程。考慮到在ECMAScript種無法建立類，開發人員就發明了一種函式，用函式來封裝以特定介面