好叼色在线观看,不卡AV播放,青青草好吊日

輸出document.write();
可以輸出標(biāo)簽，例如document.write("<h1>標(biāo)簽h1</h1>");

分號(hào)可加可不加

執(zhí)行順序是順序執(zhí)行

單行注釋?zhuān)?/

多行注釋?zhuān)?**/

數(shù)據(jù)類(lèi)型：
字符串string
數(shù)字number
布爾Boolean
數(shù)組Array，定義方式：var a = [1,3,4],或者var a = new Array();此時(shí)數(shù)組大小是未定義的。
對(duì)象Object
空null
未定義
可以通過(guò)賦值為null的方式清除變量

運(yùn)算符

算數(shù)運(yùn)算符
+，-，，/，%，++，--
賦值運(yùn)算符
=，+=，-+，=，/=，%=

字符串拼接
+，字符串和其他類(lèi)型拼接，自動(dòng)把其他類(lèi)型轉(zhuǎn)換為字符串,包括布爾類(lèi)型

比較運(yùn)算符
==，返回布爾類(lèi)型，值相同就為true，類(lèi)型可以不相同
===，必須類(lèi)型和值都相同才為true

邏輯運(yùn)算符
&&
||
!取反

條件運(yùn)算符【三目運(yùn)算符】
判斷條件?為真的結(jié)果:為假的結(jié)果
i>5?"i大于5":"i小于5"

條件語(yǔ)句

if else

if(i>10){
document.write("Yes");
}

switch
switch(i){
case 1:
document.write("是1");
break;
case 2:
document.write("是2");
break;
defualt:
document.write("不滿(mǎn)足");
break;

循環(huán)

for

for(;;)

for in

var j = ['4',34,'hi',3434]
for(i in j)
{
document.write(i);

while&do while

函數(shù)

定義

function 函數(shù)名(){
函數(shù)體;
}

對(duì)大小寫(xiě)敏感，function必須是小寫(xiě)

調(diào)用

1、<script>標(biāo)簽內(nèi)調(diào)用
<script>function demo(){alert("this is demo";)
demo();
</script>
2、HTML中調(diào)用
<script>function demo(){alert("this is demo";)</script>
<form>
<input type="button" value="按鈕" onclick="demo()";
</form>

帶參數(shù)的函數(shù)

局部變量和全局變量

聲明在函數(shù)之外，或者在函數(shù)內(nèi)部不用var聲明，[例如在函數(shù)內(nèi)部，m=10，則調(diào)用完此函數(shù)后，m就是全局變量了]任何地方都可以使用；
聲明在函數(shù)內(nèi)部，只有在函數(shù)內(nèi)部可以使用。

異常處理

異常捕獲

try{
發(fā)生異常的代碼塊;
}catch(err){
錯(cuò)誤信息處理;
}
function demo(){
try{alert(str);}
catch (err){
alert(err);}
}

image.png

throw語(yǔ)句
<form>
<input id='txt' type='text'>
<input id='btn' type ='button' onclick='demo()' value='按鈕'>
</form>
<script>
function demo()
{
try { var a = getElementById('txt').value;
if(a==''){
throw "用戶(hù)輸入為空";
}
catch (err){
alert(err);
}
}
</script>

事件

<button mouseout="onOut(this)" onmouseover="Onover(this)"></button>
//這里的this指向當(dāng)前的函數(shù)
<script>
function onOver(ooj){
ooj.innerHTML = "hello";
}
function onOut(ooj){
ooj.innerHTML="world";
}
</script>

DOM

Document Object Model

DOM

DOM操作HTML

DOM操作HTML元素、HTML屬性、CSS，事件

DOM操作HTML

1、改變HTML輸出流
注意不要在文檔加載完成之后使用document.write(),這會(huì)覆蓋該文檔。
2、尋找元素
id，getElementById("id_name")

標(biāo)簽
geElementByTagName("tag_name")
會(huì)找到第一個(gè)

3、改變HTML內(nèi)容
使用innerHTML
getElementByTagName("div").innerHTML="None";

4、改變HTML屬性：
使用attribute,例如a的href屬性，和img的src屬性

<a  id="link_to_baidu" href="baidu.com"</a>
<button onclik="demo()">按鈕</button>

<script>
document.getElementById("link_to_baidu").;
</script>

DOM操作CSS

語(yǔ)法：document.getElementById(id).style.property=new style

修改CSS

DOM EventListener

背景：通過(guò)改一個(gè)函數(shù)名稱(chēng)，就需要改相對(duì)應(yīng)的調(diào)用其函數(shù)的名稱(chēng)，如果代碼量大的話(huà)會(huì)很麻煩。

因此，使用句柄。

document.getElementById(id).addEventListener("動(dòng)作",function_name)

句柄

使用句柄，不會(huì)覆蓋，而是會(huì)順序執(zhí)行。

removeEventListener用法同add，會(huì)移除前面已經(jīng)存在的句柄。

Javascript事件

事件流

1、描述的是在頁(yè)面接受的順序；

2、事件冒泡：
由最具體的元素接收，然后逐級(jí)向上傳播至最不具體的元素的節(jié)點(diǎn)包括文檔
button --> div -->body -->html

3、事件捕獲：
從最不具體的節(jié)點(diǎn)接收事件，而最具體的節(jié)點(diǎn)應(yīng)該是最后接收事件
html -- > body --> div --> button

事件處理

1、直接添加到HTML結(jié)構(gòu)中

2、DOM0級(jí)事件處理
把一個(gè)函數(shù)值賦值給一個(gè)事件處理程序?qū)傩?/p>

<button id="btn"> 按鈕</button>
<script>
var btn = document.getElementById("btn");
btn.onclick=function(){alert("Hi1")}
btn.onclick=function(){alert("Hi2")}
</script>

此時(shí)點(diǎn)擊按鈕只會(huì)出現(xiàn)第二個(gè)，第一個(gè)被覆蓋了。

3、DOM2級(jí)事件處理
addEventListener("事件名","事件處理函數(shù)","布爾值");

true:事件捕獲
false:事件冒泡
removeEventListener();

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div>
    <button id="btn">按鈕</button>    

    </div>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click",demo1);
btn.addEventListener("click",demo2);
btn.addEventListener("click",demo3);
function demo1(){
    alert("This DOM2 1")
};
function demo2(){
    alert("This DOM2 2")
};
function demo3(){
    alert("This DOM2 3")
};
</script>
</body>
</html>

這里不會(huì)覆蓋
4、IE事件處理程序【版本<=8】
attachEvent
detachEvent
對(duì)于兼容性的問(wèn)題，可以通過(guò)判斷

var btn = document.getElementById("btn");
if(btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else{btn.onclick=demo();
  function demo()
    {
          alert("hello")
    };

事件對(duì)象

1、事件對(duì)象

在觸發(fā)DOM事件的時(shí)候都會(huì)產(chǎn)生一個(gè)對(duì)象

2、對(duì)象事件event：

** type：獲取事件類(lèi)型**

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div>
    <button id="btn">按鈕</button>    

    </div>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("mouseover",demo);
    function demo(event){
    alert(event.type);
}
</script>
</body>
</html>

target：獲取事件目標(biāo)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div>
    <button id="btn">按鈕</button>    

    </div>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("mouseover",demo);
    function demo(event){
    alert(event.target);
}
</script>
</body>
</html>

target

stopPropagation():阻止事件冒泡

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="div">
    <button id="btn">按鈕</button>    

    </div>
<script>

var btn = document.getElementById("btn");
var div = document.getElementById("div");
btn.addEventListener("click",demo1);
    function demo1(event){
    alert(event.target);
    event.stopPropagation();阻止事件冒泡，即div調(diào)用的函數(shù)將不會(huì)被調(diào)用，這個(gè)很有用
}
div.addEventListener("click",demo2);
    function demo2(event){
    alert(event.type);
}
</script>
</body>
</html>

preventDefault():阻止事件默認(rèn)行為
例如阻止a標(biāo)簽的點(diǎn)擊鏈接跳轉(zhuǎn)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="div">
        <a  id="aid">測(cè)試鏈接</a>
        <button id="btn">按鈕</button>    

    </div>
<script>

var btn = document.getElementById("btn");
var div = document.getElementById("div");
var ado = document.getElementById("aid");
btn.addEventListener("click",demo1);
div.addEventListener("click",demo2);
ado.addEventListener("click",demo3)

    function demo1(event){
    alert(event.target);
    event.stopPropagation();//阻止了div對(duì)應(yīng)的事件函數(shù)的觸發(fā)。
}
    function demo2(event){
    alert(event.type);
}
    function demo3(event){
    event.preventDefault();//阻止了默認(rèn)跳轉(zhuǎn)
    event.stopPropagation();//阻止了div對(duì)應(yīng)的事件函數(shù)的觸發(fā)。
}


</script>
</body>
</html>

內(nèi)置對(duì)象

對(duì)象

JavaScript張所有事物都是對(duì)象
每個(gè)對(duì)象帶有屬性和方法
JavaScript允許自定義對(duì)象

自定義對(duì)象

1、定義并創(chuàng)建對(duì)象實(shí)例；

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="div">
        <p>Hi there</p>
        <p>It's Me</p>
        <p>Yes</p>
    </div>
<script>
    people = new Object();
    people.name = "Juha";
    people.age='25';//以上三行也可被替代為：people = {name:"juha",age:"25"};
    document.write("name:"+people.name,";age:"+people.age)

</script>
</body>
</html>

2、使用函數(shù)定義對(duì)象，然后創(chuàng)建新的對(duì)象實(shí)例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="div">
        <p>Hi there</p>
        <p>It's Me</p>
        <p>Yes</p>
    </div>
<script>
    function people(name,age){
        this._name = name;
        this._age = age;
    }
    person = new people("juha","25")
    document.write("name:"+person._name,";age:"+person._age)
</script>
</body>
</html>

內(nèi)置對(duì)象

String對(duì)象
處理已有的字符串，單引號(hào)雙引號(hào)均可以。
常用屬性及方法：
長(zhǎng)度：str.length
索引：str.indexOf("指定字符串")，-1表示不存在
內(nèi)容匹配：str.match("字符串")
替換：str.replace("原字符串","新字符串")
大小寫(xiě)轉(zhuǎn)換：toUpperCase()/toLowerCase()
字符串轉(zhuǎn)為數(shù)組：str.split("分隔符")

字符串常見(jiàn)屬性及方法

Date對(duì)象
用于處理日期和時(shí)間
var date = new Date();

常用方法：
date.getFullYear()獲取年份
date.getTime()獲取毫秒
date.setFullYear(yyyy-mm-dd)設(shè)置具體日期
getHours() 小時(shí)
getMinites()分鐘
getSeconds()秒

Array對(duì)象

數(shù)組

concat
不會(huì)改變連接前后的值
a=[1,2]
b=[3,4]
c=a.concat(b)//c為[1,2,3,4]

sort
會(huì)改變順序
a=['t','b','l']
a.sort()//為['b','l','t']

push()
會(huì)添加到原數(shù)組中
a=[1,2]
a.push(3);//此時(shí)a為[1,2,3]

reverse()
會(huì)改變?cè)瓟?shù)組的排序
a=[1,2,3]
a.reverse()

Math對(duì)象
執(zhí)行常見(jiàn)的算術(shù)任務(wù)
Math.round()
Math.random()
結(jié)合parseInt可以取到1~10的隨機(jī)整數(shù)值：
parseInt(Math.random()*10)
Math.max()
Math.max(1,5,6,3,12)結(jié)果是12

Math.min()

Math.abs()

Javascript DOM對(duì)象控制HTML

常見(jiàn)方法

getElemensByName
getElemensByName("name")存儲(chǔ)的是一個(gè)數(shù)組
getElemensByTagName與getElemensByName用法一致

getAttribute("attr_name")
獲取節(jié)點(diǎn)對(duì)象的指定屬性名稱(chēng)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="div">
        <p name='test' id='no'>Hi there</p>
        <p name='test'>It's Me</p>
        <p name='test'>Yes</p>
    </div>
<script>
    var  p = document.getElementById('no')；//獲取id為no的元素對(duì)象   document.write(p.getAttribute('name')//打印出id為no節(jié)點(diǎn)對(duì)應(yīng)的name屬性

</script>
</body>
</html>

setAttribute("屬性名","屬性值")

childNodes()
子節(jié)點(diǎn)獲取的是一個(gè)對(duì)象列表
parentNode()
父節(jié)點(diǎn)只能有一個(gè)。

createEement()

var body = document.body;
var input = document.createElement("input");//創(chuàng)建節(jié)點(diǎn)類(lèi)型
inpute.type="button";//節(jié)點(diǎn)的類(lèi)型
input.value="按鈕";//新建節(jié)點(diǎn)的名稱(chēng)
body.appendChild(input);//body添加目標(biāo)子節(jié)點(diǎn)

inserBefore()
插入節(jié)點(diǎn)

    var div = document.getElementById('div')
    var body = document.body;
    var input = document.createElement("input");//創(chuàng)建節(jié)點(diǎn)類(lèi)型
    var node = document.getElementById('2');
    input.type="button";//節(jié)點(diǎn)的類(lèi)型
    input.value="按鈕";//新建節(jié)點(diǎn)的名稱(chēng)
    div.insertBefore(input,node);//div添加目標(biāo)子節(jié)點(diǎn),在node之前

offsetHeight不包含滾動(dòng)條
var width = document.body.offsetwidth||document.documentElement.offsetwidth//這里的||是兼容性的寫(xiě)法

var height = document.body.offsetheight||document.documentElement.offsetheight
scrollHeight包含滾動(dòng)條

瀏覽器對(duì)象對(duì)象

window對(duì)象

window對(duì)象是BOM的核心，window對(duì)象值當(dāng)前的瀏覽器窗口；
所有JavaScript全局對(duì)象、函數(shù)以及變量均自動(dòng)成為window對(duì)象的成員；
全局變量是window對(duì)象的屬性
全局函數(shù)是window對(duì)象的方法
甚至HTML DOM的document也是window對(duì)象的屬性之一，因?yàn)閐ocument是全局的，因此使用時(shí)省略了前面的window.

window尺寸

window.innerHeight - 瀏覽器窗口內(nèi)部高度
window.innerWidth - 瀏覽器窗口內(nèi)部寬度

window方法

常用方法：
window.open(路徑,名稱(chēng),樣式) 打開(kāi)新窗口
window.close() 關(guān)閉當(dāng)前窗口

計(jì)時(shí)器

1、計(jì)時(shí)事件：
通過(guò)使用JavaScript，可以在一個(gè)設(shè)定的時(shí)間間隔之后來(lái)執(zhí)行代碼，而不是函數(shù)被調(diào)用后立即執(zhí)行；
2、計(jì)時(shí)方法：
a、setInterval(function(){function_name},interval_value) - (這里為啥是函數(shù)里調(diào)函數(shù)呢，是因?yàn)椴徽{(diào)的話(huà)就只會(huì)執(zhí)行一次)間隔指定的毫秒數(shù)不停的執(zhí)行指定的代碼【這里有點(diǎn)疑問(wèn)，即便是我設(shè)置間隔值為0一樣執(zhí)行】
clearInterval() 方法用于停止setInterval()方法執(zhí)行的函數(shù)代碼

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="div">
        <p name='test' id='no'></p>
        <p name='test' id ='2'>It's Me</p>
        <button onclick="stopTime()">停止時(shí)間</button>
    </div>
<script>
    // function demo(){
        var mytime = setInterval(function(){
            getTime();
        },0);//這里有個(gè)疑問(wèn)，后面的這個(gè)值我甚至可以設(shè)置為0.

    function getTime(){
        var date = new Date();
        var t = date.toLocaleTimeString();
        document.getElementById('no').innerHTML=t;
    }
    function stopTime(){
        clearInterval(mytime);//需要傳入上面的mytime
    }

</script>
</body>
</html>

b、setTimeout() - 暫停指定的毫秒數(shù)后執(zhí)行指定的代碼；
clearTimeout() 方法用于停止執(zhí)行setTimeout()方法的函數(shù)代碼

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body onload="myWin()">

    <div id="div">
        <p name='test' id='no'></p>
        <p name='test' id ='2'>It's Me</p>
        <button onclick="stopWin()">Control</button>
    </div>
<script>
    // function demo(){
        var win;
        function myWin(){
            alert("hi");
            win=setTimeout(function(){myWin()},2000);//這里寫(xiě)win的原因是為了下面可以clear，win作為參數(shù)。
        }
        function stopWin(){
            clearTimeout(win)
        }


</script>
</body>
</html>

History對(duì)象

window.history 對(duì)象包含瀏覽器的歷史url集合

history.back() 與瀏覽器點(diǎn)擊后退按鈕功能相同
history.forward() 與瀏覽器點(diǎn)擊前進(jìn)按鈕功能相同;

history.go() 進(jìn)入歷史中的某個(gè)頁(yè)面，進(jìn)入上一個(gè)頁(yè)面，需要給的值是-1，即history.go(-1)此功能可以結(jié)合是否正確登錄判斷之后應(yīng)該跳轉(zhuǎn)的頁(yè)面?！具@個(gè)還需要再學(xué)習(xí)】

Location對(duì)象

window.location對(duì)象用于獲得當(dāng)前頁(yè)面的地址(url),并把瀏覽器重定向到新的頁(yè)面。
Location對(duì)象的屬性：
location.hostname 返回web主機(jī)的域名
location.pathname 返回當(dāng)前頁(yè)面的路徑和文件名
location.port 返回web主機(jī)的端口
location.protocal 返回使用的web協(xié)議
location.href 返回當(dāng)前頁(yè)面的url
location.assign() 加載新的文檔，可以在括號(hào)內(nèi)填寫(xiě)地址，使用onclick事件調(diào)用

Location對(duì)象

Screen對(duì)象

window.screen 對(duì)象包含有關(guān)用戶(hù)屏幕的信息

screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度
screen.height - 屏幕高度
screen.width - 屏幕寬度

JS瀑布流效果 - 布局

js里的第十集，每太看明白，可能太累了，下次繼續(xù)看

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

JavaScript學(xué)習(xí)筆記

JavaScript學(xué)習(xí)筆記

運(yùn)算符

條件語(yǔ)句

循環(huán)

for

while&do while

函數(shù)

定義

調(diào)用

局部變量和全局變量

異常處理

異常捕獲

事件

DOM

DOM操作HTML

DOM操作CSS

DOM EventListener

Javascript事件

事件流

事件處理

事件對(duì)象

1、事件對(duì)象

2、對(duì)象事件event：

內(nèi)置對(duì)象

對(duì)象

自定義對(duì)象

內(nèi)置對(duì)象

Javascript DOM對(duì)象控制HTML

瀏覽器對(duì)象對(duì)象

window對(duì)象

window尺寸

window方法

計(jì)時(shí)器

History對(duì)象

Location對(duì)象

Screen對(duì)象

JS瀑布流效果 - 布局

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JavaScript學(xué)習(xí)筆記

運(yùn)算符

條件語(yǔ)句

循環(huán)

for

while&do while

函數(shù)

定義

調(diào)用

局部變量和全局變量

異常處理

異常捕獲

事件

DOM

DOM操作HTML

DOM操作CSS

DOM EventListener

Javascript事件

事件流

事件處理

事件對(duì)象

1、事件對(duì)象

2、對(duì)象事件event：

內(nèi)置對(duì)象

對(duì)象

自定義對(duì)象

內(nèi)置對(duì)象

Javascript DOM對(duì)象控制HTML

瀏覽器對(duì)象對(duì)象

window對(duì)象

window尺寸

window方法

計(jì)時(shí)器

History對(duì)象

Location對(duì)象

Screen對(duì)象

JS瀑布流效果 - 布局

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1、事件對(duì)象