菜鸟学习Javascript20170116
9.流程控制
順序結(jié)構(gòu)
普通的一行行執(zhí)行代碼
?條件結(jié)構(gòu)--分支結(jié)構(gòu)--選擇結(jié)構(gòu)
? ? ? ? ?1.單路分支
? ? ? ??? ? ? If（條件）{ ?條件成立時(shí)執(zhí)行碼 ? ??}
? ? ? ??2.雙路分支
? ? ? ??? ?If（條件）{?
? ? ? ? ? ? ? ? ? ? ? ?條件成立時(shí)執(zhí)行的代碼
? ? ? ? ? ? ? ? ??}
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ?條件不成立時(shí)執(zhí)行的代碼
? ? ? ? ? ? ? ? ?}
? ? ? ??3.多路分支
? ? ? ? ? ?用于范圍
? ??? ? if(條件1)
? ? ? ? ? ? ? ? ?{ 條件1成立時(shí)執(zhí)行的代碼}
? ? ? ? ?else? if(條件2)
? ? ? ? ? ? ? ? ? { 條件2成立時(shí)執(zhí)行的代碼}
? ? ? ? ? ? ? ? ? ?---?
? ? ? ? ? else? if(條件 n)
? ? ? ? ? ? ? ? ? { 條件n成立時(shí)執(zhí)行的代碼}else{ 條件1、2至n不成立時(shí)執(zhí)行的代碼}
? ? ? ?單個(gè)匹配
? ? ???switch(表達(dá)式)
? ? ? ? ? ?{
? ? ? ? ? ? ? case值1:執(zhí)行代碼塊 1break;
? ? ? ? ? ? ? case值2:執(zhí)行代碼塊 2break;
? ? ? ? ? ? ? ...
? ? ? ? ? ? ? case值n:執(zhí)行代碼塊 nbreak;
? ? ? ? ? ? ?default:與 case值1 、 case值2...case值n 不同時(shí)執(zhí)行的代碼
? ? ? ?}
? ? ? 4.嵌套分支
? ? ? ? ???If（）{
? ? ? ? ? ? ? ? ? ? ?If（）{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Switch(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ?循環(huán)結(jié)構(gòu)
? ? ? ?While（）
? ? ? ? ? ? ? ? ?while(判斷條件){? ? 循環(huán)語句 }
? ? ? ? Do-while（）
? ? ? ? ? ? ????do{? ? 循環(huán)語句 }while(判斷條件)?
? ? ? ?For（）
? ? ? ? ? ? ?for ?(初始化變量;循環(huán)條件;循環(huán)迭代)
? ? ? ? ? ? ? ? ? ?{? ? ? ? 循環(huán)語句? }
? ? ??? ? ? ? js中for循環(huán)用的最多
? ? ? ? ? ? For（var i=1；i<=9; i++）{
? ? ? ? ? ? ?For(var j =1; j<=i; j++)
? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Document.write(j+”x”+i+”=”+(j*i)+””+””)
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? Document.write(“<br>”);
??? ? ?}
?
10.函數(shù)
????Javascript中的函數(shù)。
????函數(shù)：是一段完成“指定功能”的已經(jīng)“命名”的代碼段。
????函數(shù)只用“調(diào)用”才能使用到，調(diào)用，通過名稱（可以在聲明之前，也可以在聲明之后）【可以重復(fù)調(diào)用】。
?
????或者
????function 函數(shù)名（）
????{
????函數(shù)體；
????}
????????
????function text[函數(shù)名]（a,b,c,d，參數(shù)5,）{
??????功能段（一條，活多條）
??????Return 值
????}
????例子function add(x,y){
????Sum = x + y;
????Document.write(sunm);
????}
?????
????add(4,5);
?????
??
????text（）;【函數(shù)調(diào)用，引號(hào)不能省】
????1.函數(shù)名
????2.參數(shù)：根據(jù)需要使用參數(shù)
????3.函數(shù)體（功能）
????4.返回值（可選）
?????
????函數(shù)名不加（）時(shí)，這個(gè)函數(shù)名就代表整個(gè)這個(gè)函數(shù)
?????
????回調(diào)函數(shù) ，聲明
?
????????使用情況：
????????1.函數(shù)的作用 -- 決定我去不去使用
????????2.函數(shù)的參數(shù) --決定我怎么用
????????3.返回值 ????--決定我使用后如何處理
11.函數(shù)默認(rèn)值設(shè)置和內(nèi)置函數(shù)
變量
全局變量：在函數(shù)外面聲明的變量。
局部變量：在函數(shù)內(nèi)部聲明的變量，只有在函數(shù)內(nèi)部使用，函數(shù)結(jié)束失效。
初始化默認(rèn)參數(shù)
?
? ? ? ? ? ?<script>
function text(a,b,c)
{?
a = a ? a : 1;//如果a=a，則輸出a，不等于輸出1
b = b ? b : 2;
c = c ? c : 3;
?
alert(a+","+b+","+c);
}
text();//函數(shù)調(diào)用
</script>
函數(shù)參數(shù)初始化
通過arguments改變參數(shù)個(gè)數(shù)
?
? ? ? ? ? <script>
function canshubutong(a,b){
alert(arguments.length);
alert(arguments[3]);
}
canshubutong(1,2,4,6);
</script>
arguments改變參數(shù)
不管默認(rèn)幾個(gè)參數(shù)，調(diào)用函數(shù)愿意輸出幾個(gè)就幾個(gè)，arguments就是這么一個(gè)任性的存在。
內(nèi)置函數(shù)
parseInt() 函數(shù)可解析一個(gè)字符串，并返回一個(gè)整數(shù)。ps（內(nèi)置函數(shù)很多，只是舉例一個(gè)）
變量
全局變量：在函數(shù)外面聲明的變量。
局部變量：在函數(shù)內(nèi)部聲明的變量，只有在函數(shù)內(nèi)部使用，函數(shù)結(jié)束失效。
12.javascript對(duì)象
????1.基于對(duì)象的操作方式（面向?qū)ο蠓庋b、繼承、多態(tài)）
????2.將相關(guān)的操作使用一個(gè)對(duì)象完成，看作是一個(gè)整體
????Javascript ?類
???????????????
?????字符串對(duì)象
??????數(shù)學(xué)對(duì)象
??????數(shù)組
??????時(shí)間對(duì)象
?????
????對(duì)象中存的內(nèi)容？
??????一。屬性（變量）
??????二。方法（函數(shù)）
?????都是和這個(gè)對(duì)象相關(guān)的
?????
????1.聲明對(duì)象
????2.使用對(duì)象
????3.使用系統(tǒng)對(duì)象
????步驟 1.找到對(duì)象
?????????2.實(shí)例化對(duì)象
?????????3.使用對(duì)象
????對(duì)象實(shí)例.屬性 （取值 ，賦值）
????對(duì)象實(shí)例[“屬性名”]
????對(duì)象實(shí)例.方法
?
????系統(tǒng)內(nèi)置對(duì)象?
????自定義對(duì)象?
????和對(duì)象有關(guān)的一些操作
????遍歷對(duì)象
????
????遍歷對(duì)象兩個(gè)方式
????For（變量 in 對(duì)象）{
????}
?????
????With（對(duì)象）{
???????所有方法如果不加對(duì)象都是 括號(hào)對(duì)象的方法
????}
????群組討論給出理解：
?????
????number,string,boolean,undefined,null五種基本數(shù)據(jù)類型和Object復(fù)雜數(shù)據(jù)類型（基本引用類型），
基本類型不是對(duì)象，而他們具備一些方法屬性，是因?yàn)樵谠L問這個(gè)基本類型時(shí)后臺(tái)自動(dòng)創(chuàng)建了一個(gè)對(duì)應(yīng)的基本包裝類型的對(duì)象，在代碼自行完立即銷毀,
引用類型一直存在于當(dāng)前作用域，基本包裝類型只存在一行代碼的執(zhí)行瞬間，然后立即被銷毀
Object?/?Array?/?Function?/?Date?/?RegExp?/?Error?/?Map?/?Set?…引用類型
Object基本引用類型，Array、Function等都是Object的實(shí)例
?????
????提升：
????衍生點(diǎn)：typeof?a（判斷a的數(shù)據(jù)類型）?a?instanceof?b（判斷a是否是b的實(shí)例）?a.constructor（獲取a的構(gòu)造函數(shù)）
?
13.Javascript內(nèi)置對(duì)象應(yīng)用
Math 靜態(tài)對(duì)象，不用new。
常見用方法：取上 ceil（）
????????????隨機(jī)random（）
????????????割舍floor（）
????????????四舍五入 round（）
????????????最大max（x,y）
????????????最小min(x,y)
?
正則表達(dá)式對(duì)象：
????????????方式一：re ?= ?//
????????????方式二：re ?= new RegExp（）；
?
????????????例子
????????????Var ??zz = /^a/i;
????????????Var ??zz = new RegExp（“^a”,“i”）
????????????Alert(typeof(xx));
?
14.數(shù)組的聲明與應(yīng)用
一. 數(shù)組的作用
???????????只要是批量的數(shù)據(jù)都需要使用數(shù)組聲明
?
二.如何聲明數(shù)組
???????????1.快速聲明數(shù)組
?
????????????Var 數(shù)組名字 = [元素1，元素2，元素3，元素……]；
????????????Var ??name = [“zhangsan”,”lisi”,wangwu”];
????????????Var ?arrs = [[“aaa”,”bbb”,”ccc”],[1,2,3,4],];
?
????????????2. 使用Array對(duì)象
Var arr =new ?Array（“元素1”，“元素2”）；
?
三．遍歷數(shù)組
?
?
四．數(shù)組的處理{內(nèi)置處理方法}
sort()對(duì)數(shù)組的元素進(jìn)行排序
?
???var ?arrary = [1,9,4,3,6,8,2,7,0];
????arrary.sort();//sort（方式是排序，而且是數(shù)字個(gè)數(shù)相等的排序）
????/*倒敘排列*/
????arrary.sort(function(a,b){
????if(a > b){
????return -1;
????}
????else if(a==b){
????return 0;
????}
????else{
????return 1;
????}
????
????})
????
????document.write(arrary);
?
????還有 push()向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度。
?????unshift()?向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。
?????shift()刪除并返回?cái)?shù)組的第一個(gè)元素
?????????join() ???把數(shù)組的所有元素放入一個(gè)字符串。元素通過指定的分隔符進(jìn)行分隔
15.?DOM操作
?作用
??????DOM（Document Object Model）
??????1.document 文檔 ?HTMl XML文件
????????標(biāo)記語言（標(biāo)簽似的）
????????<body>
??????????????<div>
????????????????????<a>gaga</a>
??????????????</div>
????????</body>
??????2.Object 對(duì)象（HTML元素 轉(zhuǎn)成的對(duì)象（js對(duì)象））
???????????注意：如果使用js操作HTML文檔，就需要選中HTML文檔結(jié)構(gòu)轉(zhuǎn)成JS對(duì)象
?????????????a。操作屬性
?????????????B。操作內(nèi)容
???????????????????innerText（IE） textContent（火狐）
???????????????????innerHTML
???????????????????outeText
???????????????????outHTML
?????????????????表單
?????????????????????Value ?例如 input標(biāo)簽和textare
?????????????C。操作樣式
???????????????????aobj.style.backgroundColor = “red”;
???????????????????aobj.style.fontSize = “75px”;
?????????????????
???????????????????ClassName
???????????????????aobj.className = “text”;
???????????????????aobj.className+=”??demo”;
?
?
???????????????????利用for in 遍歷所有標(biāo)簽屬性和方法
?
???????????????????Var pro = “”；
???????????????????For ( pro in 對(duì)象名)
????????????????????{
??????????????????????Document.write(“a.”+pro+”=”+aobj[pro]+”<br>”);
????????????????????}
????????????????????
??????????有了以上三點(diǎn)的操作之前先轉(zhuǎn)成對(duì)象。
?
??????????轉(zhuǎn)成對(duì)象的兩種形式：
??????????????1.標(biāo)記名（多個(gè)）：id（唯一） ，name（多個(gè)）。
??????????????Document 中的三個(gè)方法
??????????????
??????????????Var ?objs = document.getEleMentsByTagName(“div”);
??????????????Var ?objs = document.getEleMentById(“one”);
??????????????Var ?objs = document.getEleMentByName(“two”);
?
??????????????2.通過數(shù)組
?
??????????????Document.all = [object]
????????????????????Document.appplets = [object]
????????????????????Document.embeds
????????????????????Document.script
????????????????????Documnet.forms
????????????????????Document.p_w_picpaths
????????????????????Doucment.anchors
????????????????????doucment.styleSheets
????????????????????Doucment.links
?
?
????????????????????Document.body
????????????????????Document.frames
????????????????????Document.title
?
?????????????數(shù)字訪問 7中方式
????????????????Document.forms[1] ????????????????
????????????????Document.forms[“名字”]
????????????????Document.forms.item[1]
????????????????Document.forms.item(“名字”)
????????????????Document.forms.名字
????????????????Document.名字
????????????????Document[“名字”]
?
????????????????中括號(hào)[ ] 和 點(diǎn) . 相當(dāng)于 （……的）
????????????????
??????????????????????
16.?DOM操作 之model
在 HTML DOM 中，所有事物都是節(jié)點(diǎn)。DOM 是被視為節(jié)點(diǎn)樹的 HTML。
?一、講文檔想成一個(gè)倒數(shù)，每一個(gè)部分（元素，內(nèi)容，屬性，注釋）都是一節(jié)點(diǎn)。
?二、只要知道一個(gè)節(jié)點(diǎn)，按照關(guān)系找到其他節(jié)點(diǎn)
???????父節(jié)點(diǎn) ??????????????????????parentNode
???????子節(jié)點(diǎn)（第一個(gè)，最后一個(gè)） ????childNodes ???????firstChild ??????????lastCHild
???????同胞節(jié)點(diǎn)（上一個(gè) 下一個(gè)） ???nextSibling ???????previousSibling
????????
??????每個(gè)節(jié)點(diǎn)只有一個(gè)父節(jié)點(diǎn)多個(gè)子節(jié)點(diǎn)
三、找到節(jié)點(diǎn)，節(jié)點(diǎn)類型nodeType，節(jié)點(diǎn)名nodeName，節(jié)點(diǎn)值nodeValue
?
??????每個(gè)節(jié)點(diǎn)都擁有包含著關(guān)于節(jié)點(diǎn)某些信息的屬性。
?
??????nodeName 屬性含有節(jié)點(diǎn)的名稱。
??????元素節(jié)點(diǎn)的nodeName是標(biāo)簽名稱
??????屬性節(jié)點(diǎn)的nodeName是屬性名稱
??????文本節(jié)點(diǎn)的nodeName永遠(yuǎn)是#text
??????文檔節(jié)點(diǎn)的nodeName永遠(yuǎn)是#document
?
?????nodeType 屬性可返回節(jié)點(diǎn)的類型
?
元素 ????????????返回值?1
屬性 ??????????????：?2
文本? ? ? ? ? ? ? ? ? ? ? 3
注釋? ? ? ? ? ? ? ? ? ? ? 8
文檔? ? ? ? ? ? ? ? ? ? ? 9
?
?
可以在一個(gè)文檔流中
? 1。創(chuàng)建節(jié)點(diǎn)
? ? ?document.createElement(“img”);
? ? ?appendChild();
? ? ?insertBefore();
? 2。添加到文檔流中
? 3。刪除節(jié)點(diǎn)
? ? ?removeChild（）；
轉(zhuǎn)載于:https://blog.51cto.com/ls123/1892100
總結(jié)
以上是生活随笔為你收集整理的菜鸟学习Javascript20170116的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： is_numeric函数的引起的一个BU
- 下一篇： elasticsearch 查询模板