javascript基礎知識小結

原創 iteye_2722 2018-08-27 19:20
javascript基礎知識

undefind:表示不確定的類型，只是定義了一個變量，但具體什麼類型並不知道，也就是var j; 只定義但並沒有賦值

Javascript類型轉換
轉換爲Number 通過parseInt進行轉換
轉換爲String 任何數據類型+String類型=String 類型
轉換爲Boolean ture false 所有非0數字爲true,反之爲false.
Undefined,null轉換爲false

如：
if(undefined||null){
	alert("haha");
}else{
	//會走這裏
	alert("nohaha");
}
if(2){//會走這裏
	alert("haha");
}else{
	alert("nohaha");
}


數據傳遞：
基本類型爲：值傳遞
  function addNum(i){
    	i = i + 5;
  }
  function test(){
	var i = 0;
	addNum(i);
	alert(i);//打印出來的值爲0
  }


函數和事件通常是一種綁定關係，通過事件調用函數。如果綁定多個函數，中間用分號隔開

<marquee onmouseover="this.stop()" onmouseout="this.start()">跑馬燈效果，歡迎大家學習！</marquee>



選擇之後直接新打開一個頁面：
function goToUrl(){
	var s = document.getElementById("toUrl");
	if(s.options[s.selectedIndex].value != -1){
		//window.location.href="http://www." + s.options[s.selectedIndex].value + ".com";
		window.open("http://www." + s.options[s.selectedIndex].value + ".com","_blank");
	}
}

<select onchange="goToUrl();" id="toUrl">
	<option value="-1">請選擇要去的網站</option>
	<option value="sina">新浪網</option>
	<option value="baidu">百度</option>
</select>


***************************************************
這段代碼是屏閉鼠標右鍵功能及複製功能
<body onmouseup="document.selection.empty();" oncontextmenu="return false;" 
  onmousemove="document.selection.empty(); onCopy="document.selection.empty();"
   onselect="document.selection.empty();">
################################################################
動態添加事件：
<script type="text/javascript">
		function mt1(){
			alert("1");
		}
		function mt2(){
			alert("2");
		}
		function mt3(){
			alert("3");
		}
		function init(){
			var btn1 = document.getElementById("button1");
			if(window.ActiveXObject){
				//這是IE瀏覽器,需要寫全 onclick,也不需要false
				btn1.attachEvent("onclick",mt1);
			}else{//這是firefox瀏覽器
				btn1.addEventListener("click",mt1,false);
			}

			//btn1.addEventListener("click",mt2,false);
			//btn1.addEventListener("click",mt3,false);
		}
	</script>
  </head>

  <body onload="init();">
  	<input type="button" value="button1" id="button1"/>
  </body>

########################################################################
全選
隱藏，顯示層
摺疊菜單效果
###################################################################
<script language="javascript">
	function selectAll(){
		var al = document.getElementById("all");
		/*全選功能
		if(al.checked == true){
			var cbs = document.getElementsByName("cb");
			for(var i = 0; i < cbs.length; i++){
				cbs[i].checked = true;
			}
		}else{
			var cbs = document.getElementsByName("cb");
			for(var i = 0; i < cbs.length; i++){
				cbs[i].checked = false;
			}
		}
		*/	
		//全選功能
		var cbs = document.getElementsByName("cb");
		for(var i = 0; i < cbs.length; i++){
			cbs[i].checked = al.checked;
		}	
	}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    全選
      <input type="checkbox" name="checkbox2" value="checkbox" id="all" onclick="selectAll();"/>
  </p>
  <p>
    <input type="checkbox" name="cb" value="checkbox" />
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />
  </p>
</form>
</body>
</html>
####################################################################
隱藏，顯示層

<title>無標題文檔</title>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:17px;
	top:26px;
	width:96px;
	height:215px;
	z-index:1;
	background-color: #FF6600;

}
#Layer2 {
	position:absolute;
	left:806px;
	top:16px;
	width:104px;
	height:225px;
	z-index:2;
	background-color: #FF6600;
}
#Layer3 {
	position:absolute;
	left:297px;
	top:18px;
	width:353px;
	height:31px;
	z-index:3;
}
-->
</style>
<script language="javascript">
	function hiddenAll(){
		var l1 = document.getElementById("Layer1");
		var l2 = document.getElementById("Layer2");
		l1.style.display = "none";
		l2.style.display = "none";
	}
	function showAll(){
		var l1 = document.getElementById("Layer1");
		var l2 = document.getElementById("Layer2");
		l1.style.display = "block";
		l2.style.display = "block";
	}
</script>
</head>

<body>
<div id="Layer1">
  <p>test學院</p>
  <p>Js教程</p>
  <p>火熱發佈中！</p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p>　　　　<span onclick="hiddenAll();" style="cursor:pointer">關閉</span></p>
</div>
<div id="Layer2">
  <p>test學院</p>
  <p>Js教程</p>
  <p>火熱發佈中！</p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p>　　　　<span onclick="hiddenAll();" style="cursor:pointer">關閉</span></p>
</div>
<div id="Layer3">
  <div align="center"><span onclick="showAll()" style="cursor:pointer">顯示廣告</span></div>
</div>
</body>
</html>
###############################################################

摺疊菜單效果
<script language="javascript">
	function showInfo(str){
		//先隱藏所有
		for(var i = 1; i <= 3; i++){
			document.getElementById("tr"+i).style.display="none";
		}
		//顯示指定對象
		document.getElementById(str).style.display="block";
	}
</script>
</head>

<body>
<table width="166" border="1">
  <tr>
    <td height="22" style="cursor:pointer;" onclick="showInfo('tr1')">Js教程</td>
  </tr>
  <tr id="tr1">
    <td height="65" valign="top"><table width="100%" border="0">
      <tr>
        <td>第一講</td>
      </tr>
      <tr>
        <td>第二講</td>
      </tr>
      <tr>
        <td>第三講</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="22" style="cursor:pointer;" onclick="showInfo('tr2')">css教程</td>
  </tr>
  <tr id="tr2" style="display:none;">
    <td height="65" valign="top"><table width="100%" border="0">
      <tr>
        <td>第一講</td>
      </tr>
      <tr>
        <td>第二講</td>
      </tr>
      <tr>
        <td>第三講</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="23" style="cursor:pointer;" onclick="showInfo('tr3')">JavaEE教程</td>
  </tr>
  <tr id="tr3" style="display:none;">
    <td height="65" valign="top"><table width="100%" border="0">
      <tr>
        <td>第一講</td>
      </tr>
      <tr>
        <td>第二講</td>
      </tr>
      <tr>
        <td>第三講</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

#################################################################

js裏的常用對象：字符串及日期;
function testMath(){
		//round四捨五入
		//var money = document.getElementById("money").value;;
		//alert(Math.round(money));
		//random產生隨機數
		//alert(Math.floor(Math.random()*30));

	}
	function testDate(){
		var d = new Date();
		//alert(d.getYear());//取得後兩位年份
		//alert(d.getFullYear());//得到完整年份
		//alert(d.getMonth() + 1);//月份，0-11
		//alert(d.getDate());
		//alert(d.getDay());//星期幾
		//alert(d.getHours());//小時
		//alert(d.getMinutes());//分鐘
		//alert(d.getSeconds());//秒
		document.getElementById("money").value = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
		setTimeout("testDate()",1000);
	}
	function testString(){
		//var stringname= new String("字符串");
		//var s = "字符串";
		//var em = document.getElementById("money").value;//判斷電子郵件合法性
		//if(em.indexOf("@") == "-1"){
		//	alert("缺少@");
		//}
		//replace
		//while(document.getElementById("money").value.indexOf("delete") != -1){
		//d	document.getElementById("money").value=document.getElementById("money").value.replace("delete","刪除");
		}
	}
##############################################################
正則表達式：
<script language="javascript">
	function check(){
		var pattern = /^[0-9]{5}[a-zA-Z]*$/;
		var v = document.getElementById("userName").value;
		var flag = pattern.test(v);
		alert(flag);
	}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input type="text" name="textfield" id="userName"/>
  <input type="button" name="Submit" value="按鈕" onclick="check();"/>
</form>
</body>
</html>
##############################################################
javascript面向對象編程：
Javascript中類(對象)用function即函數來體現。
對象的定義與訪問
定義屬性，方法
1.使用prototype創建
2.使用this創建
3.JSON方式創建
4.其它方式創建：如動態創建
5.其它方式創建:在內置對象中添加屬性或方法

####################################################################
使用prototype創建對象：
	//定義一個對象
	function test(){
		//定義屬性
		test.prototype.username="baby";
		//定義一個方法
		test.prototype.sayHello=function(name){
			alert(name + "Hello!");
		}
		//也是定義一個方法
		test.prototype.sayHello2=sayHello_fun;
	}
	function sayHello_fun(){
		alert("Hello!");
	}


	function testObject(){
		//創建一個test對象
		var _o = new test();
		//調用test對象的屬性
		alert(_o.username);
		//調用方法
		_o.sayHello();

		var _boy = new boy();
		alert(_boy.age);
		_boy.say("Bye!");
	}

//使用this定義一個對象 
	function boy(){
		//定義對象的屬性
		this.name="小新";
		this.age=18;
		//定義方法
		this.say=function(s){
			alert(s);
		}
	}
//JSON方式創建對象 鍵值對方式 建議使用這種方式
	function testJson(){
		//創建一個obj的對象
		var obj = {name:"abc",age:18};
		alert(obj.age);

	}
	function showObj(o){
		alert(o.name);
		//alert(o["name"]);
	}
	function strToObj(){
		//定義一個字符串
		var strObject = "{name:'bcd',age:22}";
		showObj(eval("("+strObject+")"));
	}
JSON方式創建的對象可以傳遞，可以與字符串之間進行轉換，轉換後以鍵值對存在，eval函數，將字符串轉換爲對象
	function test1(){}
	function runTest1(){
		//創建一個對象，並動態的添加屬性及方法
		var o = new test1();
		o.name="火狐";
		o.age=33;
		o.sayHello=function(){
			alert("haha,Hello!");
		}
		//alert(o.name);
		o.sayHello();
	}

在內置對象中添加屬性或方法
	function testWindow(){
		window.alert("nihao");
		window.prototype.shuo=function(s){
			alert(s);
		}
		shuo("你好！");
	}
#####################################################
對象的繼承
//定義一個 人 對象
function Person(){
	//這是定義一個靜態屬性
	Person.cityName="北京";
	Person.prototype.name="張三";
	Person.prototype.age=30;
	Person.prototype.sayHello=function(){
		alert("Hello!");
	}

}
//定義一個學生對象
function Student(){
	//定義一個屬性
	Student.prototype.schoolName="中國大學";	
	//定義私有屬性
	var gfName = "lingling";
}
function testExt(){
	Student.prototype = new Person();//繼承的關鍵！
	var stu = new Student();
	//alert(stu.name);
	//stu.sayHello();
	//alert(stu.schoolName);
	////alert(stu.gfName);//結果爲undefind 因爲訪問了private的屬性
	//重新賦值
	//stu.name="李四";
	//alert(stu.name);//結果爲 李四

	var p = new Person();
	alert(p.cityName);//調用靜態屬性：不能通過實例對象調用，結果爲undefind
	alert(Person.cityName);//通過類方式直接調用靜態屬性 結果爲:北京
}

##########################################################
備註：使用this及prototype定義都是公有的屬性或者方法
直接使用var 定義，爲私有屬性或方法，只能在其內部訪問，不能通過對象去調用
##########################################################

Javascript面向對象和所有面向對象編程語言一樣，都是通過實例化的方式進行訪問，兩個對象間的非靜態變量不會被幹擾。

JSON中，屬性可以是方法，甚至可以是一個子對象。
使用靜態變量，需要實例化一下function，告訴瀏覽器它不是函數，而是對象

function test(){
	//定義一個靜態的屬性
	test.cityName = "北京";
	test.prototype.name="張三";
	test.prototype.age=19;
}
	//json裏可以定義方法，屬性也可以是對象
var jobj = 
{
	name : "王五",
	sex : "男",
	age : 33,
	sayHello : function(){alert("Hello!");},
	subObj : {
		subName : "小A"
	}
};

var jsonArray = ["aaa","bbb"];

function run(){
	window.o = function(s){
		alert(s);
	}
	/*
	var t = new test();
	var t1 = new test();
	t1.name = "李四";
	alert(t.name);//張三
	alert(t1.name);//李四
	*/
	//alert(jobj.name);
	//jobj.sayHello();
	//alert(jobj.subObj.subName);
	//alert(jsonArray[0]);//訪問數組
	//jobj.name = "找六";
	//alert(jobj.name);//結果爲 找六
	//jsonArray[0] = "111";
	//alert(jsonArray[0]);//111

	alert(test.cityName);//結果爲undefind
	new test();
	alert(test.cityName);結果：北京

	//var t = new test();
	//var t1 = new test();
	//alert(test.cityName);結果爲：北京
	//alert(t.cityName);//undefind javascript中，實例對象不能訪問靜態變量
	o("hehehe");
}

#############################################################

方法重寫 覆蓋：
function test(){
	test.cityName = "北京";
	test.prototype.name="張三";
	test.prototype.age=19;
	test.prototype.sayHello=function(){
		alert("Hello!");
	}
}
function run(){
	var t = new test();
	//方法重寫
	t.sayHello = function(){
		alert("您好！");
	}
	t.sayHello();
}


##################################################
重寫window 對象的alert方法
<script language="javascript">
	function test(){
		test.cityName = "北京";
		test.prototype.name="張三";
		test.prototype.age=19;
		test.prototype.sayHello=function(){
			alert("Hello!");
		}
	}
	function run(){		
		window.alert = function(s){
			var o = document.getElementById("Layer1");
			o.innerHTML = "<input name=a type=button value=關閉 onClick='hiddenWindow()'/>" + s;
			o.style.display = "block";
		}
		//通過內置對象方式給對象添加新的方法  很有用
		window.o = function(s){
			alert(s);
		}
		//直接調用  
		o("hahahaha");
	}
	function hiddenWindow(){
		var o = document.getElementById("Layer1");
		o.style.display = "none";
	}
</script>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:221px;
	top:136px;
	width:290px;
	height:151px;
	display:none;
	color:#FFFFFF;
	z-index:1;
	background-color: #0033CC;
}
-->
</style>
</head>

<body>
<div id="Layer1">
</div>
<input name="看結果" type="button" value="看結果"  onclick="run();"/>
</body>
</html>

##################################################
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

網絡請求：簡單的封裝一個請求

我們可以新建一個 server 文件夾 ，裏面創建一個server.js 文件，來集中處理我們項目中用到的請求： var server = function(url, type, params) { return new Promi

昨夜太平长安888 2020-07-08 03:15:41

省市三級聯動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例

本文主要列舉了省市三級聯動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例。前段時間需要作一個的Web前端應用，需要用多個框架，一個典型的應用場景是省市三級聯動，基於此應用，特將三種主要的aja

zrz009 2020-07-08 11:14:16

JQuery 之Ajax 示例

 jQuery之ajax post篇------Code <script type="text/javascript">function adddata()    {     var typeName=$("#<%=this.typeNa

zrz009 2020-07-08 11:14:16

Ajax 中AnimationExtender控件的用法和屬性

  功能：         用來美化、裝飾網站等。 屬性：          OnLoad：表示要觸發的事件是加載頁面時。           On

ethan永不言弃 2020-07-08 09:21:00

aJax請求不走後臺405排查

     本地起tomcat服務默認是http的，但是ajax請求的url是https，也就是跨域了。      然後不走後臺，瀏覽器F12顯示405      所以要配置一下tomcat，參考tomcat8.5配置http

做猪呢，最重要的是开森啦 2020-07-08 08:57:55

Jquery調用WebMethod(PageMethod) NET2.0

必須在WebConfig下的system.web節點加入此配置信息    <httpModules>      <add name="ScriptModule" type="System.Web.Handlers.ScriptModule

jarryzhong 2020-07-08 05:30:21

RESTful開發風格

面試題：你平時是怎麼設計接口的？ 基於RESTful風格設計接口，RESTful風格主要體現在資源上，每一個資源都有唯一的URL標識。對於不同的行爲，使用對應的http-method操作。對於相同的URL，如果http-met

CD4356 2020-07-08 04:25:07

jquey 驗證表單是否存在不能爲空（ajax+validattion） .

 <%@page pageEncoding="utf-8"%> <%@include file="../../common/head.jsp"%>

JohnnyHuang_ 2020-07-08 02:59:43

小試JavaScript多線程

    這兩天一直在弄ajax，用多了才發現了ajax 的cache問題，請求了好多次，得到了確是相同的結果，經常我想在請求的同時去做一些其它的事情，我在想javascript裏有沒有辦法用多線程，經過在網上查找找到了結果。    法寶就

bhbhjackyin 2020-07-08 02:35:54

JavaScript 網頁信息採集Demo

     目前可以從淘寶的商品列表的起始頁開始自動翻頁直到最後一頁，然後將信息保存到Excel文件中。但對頁面顯示格式有要求，以後可以繼續改進，只做嘗試！用到了Thread , Jquery  Ajax   如: 女裝:http://li

bhbhjackyin 2020-07-08 02:35:54

關於初學ASP.NET技術的學習順序問題

前前後後有很多詢問ASP.NET的學習順序問題，在此就向打算系統學習ASP.NET技術的初學者談談我的建議。 　　如果你已經有較多的面向對象開發經驗，

yazoli2002 2020-07-08 02:32:31

Extjs系列實例四

顯示寵物列表頁面   JSP頁面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getConte

夜光寒 2020-07-07 23:44:02

struts +ajax驗證，總提示服務器無返回數據

下面是js的驗證 <script type="text/javascript">         $(document).ready(function(){            $.formValidator.initConfig({

ok_pig 2020-07-07 23:01:01

前後端數據交互-json 你還不會傳集合嗎?

文章目錄json前端jsp後端配置導入beancontroller測試結果後端控制檯前端控制檯 json json(JavaScript Object Notation) 是一種數據格式，就是將key和value按規範封裝成一串字

唔仄lo咚锵 2020-07-07 22:40:07

動態添加tab選項卡及tab頁面內容（ajax請求json數據）

作者：mandy 1.實現效果 2.html部分： <div id="ifrContentId"></div> 3.js部分 $(document).ready(function () {

Insightzen_xian 2020-07-07 22:21:01