js總結(jié)（！！！）

簡述JavaScript起源
起源于美國的Netscape公司，原名為LiveScript，后改為JavaScript，他是一種腳本語言，用于與瀏覽器實現(xiàn)對話

JavaScript三大核心
ECMAScript，
Web瀏覽器對于EMCAScript來說是一個寄宿環(huán)境，但他并不是唯一的寄宿環(huán)境。事實上，還有不計其數(shù)的其他環(huán)境可以容納ECMAScript實現(xiàn)。
文檔對象模型（Dom,Document Object Model）,
如果沒有document（文檔），DOM也就無從談起。當創(chuàng)建了一個頁面并把它加載到Web瀏覽器時，DOM就在幕后悄然而生。他根據(jù)編寫的頁面文檔創(chuàng)建一個文檔對象
瀏覽器對象模型（Bom,Browser Object Model），
BOM提供了獨立于內(nèi)容的與瀏覽器窗口進行交互的對象。由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對象是window.

javascript的特點
編寫簡單
無需編譯，直接運行
面向?qū)ο蟮木幊陶Z言

JavaScript的運用方式
內(nèi)部運用：在</body>結(jié)束語隨意位置就可以，寫入
<script type="text/javascript">
寫入腳本js
<script/>
外部鏈接：
<script type="text/javascript" src="寫入你的路徑"></script>

聲明變量：

var name='king';
console.log(name);

常亮賦值：

const PI=3.55;
const PI=3.84;
console.log(PI);

js最基本的三種輸出方式：

console.log('hello king');
document.write('hello king')
alert('hello king');

命名規(guī)范：

var name='king';
var name1='king';
var name_1='king';
var $name='king';

變量賦值：

var name='king';
var name='queen';
console.log(name);
console.log(typeof name);

聲明變量與未聲明變量：

//1.聲明變量不賦值,返回undefined
var hename
console.log(hename);

//2.直接輸出未聲明的變量,會報錯
console.log(ahflk);

數(shù)據(jù)類型的轉(zhuǎn)換：
number

var num1=10;
var num2=16;

string

var str1='king';

boolean

var boo=true;
var oo2=false;

undefined

var undef;

1)number + number = number

var num3=num1+num2;
console.log(num3);//26
console.log(typeof num3);

2)number + string = string

var str=num1+str1;
console.log(str);//10hello
console.log(typeof str);

3)number + boolean = number

var boo=num1+boo1;
console.log(boo);//11
console.log(typeof boo);

4)number + undefined = number

var und=num1+undef;
console.log(und);//NAN
console.log(typeof und);

5)string + boolean = string

var stb=str1+boo1;
console.log(stb); //kingtrue
console.log(typeof stb);

6)string + undefined = string

var sfind=str1+undef;
console.log(sfind);/kingundefined
console.log(typeof sfind);

數(shù)據(jù)類型轉(zhuǎn)換減法操作：

var num1 = 10;
var str1 = "11";
var str2 = "Hello";
var str3 = "35";
var str4 = "waht";

console.log(num1+str1);//1011
console.log(num1-str1);// -1
console.log(str1+str3);//1135
console.log(str3-str1);//24
console.log(str2-str4);//NaN

運算符-邏輯運算符：

var num = parseInt(prompt("請輸入一個數(shù)字"));
//判斷 num 是否在 0~10之間
var result=(num>=0&&num<=10);
console.log(num+"在0~10之間嗎?"+result);

轉(zhuǎn)換：
parseInt();-轉(zhuǎn)換成整數(shù);（沒有四舍五入）。

parseFloat();轉(zhuǎn)換為小數(shù)；基本不變如果是0.xx的話可省略小數(shù)點前面的0。

Number();轉(zhuǎn)換為number類型最后結(jié)果只會是unmber（數(shù)字）類型。

toString();轉(zhuǎn)換成字符串最后結(jié)果都是字符串（string);。

toFixed();按要求保留小數(shù)位數(shù)。

a.toFixed();括號里面是保留幾位小數(shù)不能過于大，有四舍五入的功能。

顯示裝換強制轉(zhuǎn)換：

parseInt();轉(zhuǎn)換成整數(shù)

var a=5.3;

var b=parseInt(a);

console.log(typeof a);

parseFloat();轉(zhuǎn)換成小數(shù)

var a='.33';

var b=parseFloat(a);

cosole.log(b);

console.log(typeof b);

Number();轉(zhuǎn)換成number類型

var a='5';

var b=Number(a);

console.log(b)

console.log(typeof b)

toSting();轉(zhuǎn)換成字符串

var a=3

var b=a.toSting();

console.log(b);

console.log(ty

toFiexd();按要求保留幾位小數(shù)

var a=14.95;

var b=a.toFixed(1);

console.log(b);

三目運算法：條件+？score>=60?就是條件；

如: (

var score=prompt('成績')

var result=score>=60?'合格':'不合格';

alert(result); )

滿足兩個條件（

var sleep=prompt('請輸入您的睡眠時間')

var result=sleep>=8?'正常':'不正常';

var result=sleep<=10?'正常':'不正常';

alert(result); ）

符號引用：

與（和，且）：&&；

或：||

非：！去與它相反的（如果他是對的用“非”的話就是錯的）

有假且（&&）為假，有真或（||）為真意思是

在“和”（&&）里只要有一個是假的那他整個都是假的

在“或”（||）里面有一個是真的那么他全部都是真的

在和（&&）里面有一個是假的它輸出的就是false 在或里面有一個是真的那么他輸出的就是true

循環(huán)語句：while

var a=1;

while(a<=10){

console.log('GOGOGO');

a++;

}

(1-100)

var a=1;

while(a<=100){

document.write(a);

a++;

}

var a=1;

while(a<=100){

document.write(a++);//++a:偶數(shù);a++:奇數(shù)；

a++;

}

模：

var a=1;

while(a<=100){

if(a%2==0){

console.log(a);

};

a++;

};

var a=1;

while(a<=100){

console.log(a);

a+=a=2;

};

for循環(huán)語句：

for(1.聲明一個（多個）變量;條件;對變量進行操作)

for(var i=1;i<=10; i++){

console.log('hello word');

}

for(var i=1;i<=100; i++){

console.log(i);

}

for(var i=1;i<=100;i++){

if (i%2==0){

console.log(i);

}

//奇數(shù)：

for(var i=1,sum=0;i<=100;i++){

if(i%2==1){

sum=sum+i;

}

console.log(sum);

//偶數(shù)：

for(var i=1,sum=0;i<=100;i++){

if(i%2==0){

sum=sum+i;

}

console.log(sum);

求出數(shù)組中的最大值：

var arr=[1,3,4,2,5];

for(var i=0,sum=arr[0];i<=arr.length;i++){

if(arr[i]>sum){

        sum=arr[i];

  }

}

console.log(sum);

1.遍歷數(shù)組，同時聲明變量sum并且賦值為數(shù)組中的某個元素

2如果數(shù)組中的當前元素大于sum，就把數(shù)組中的當前元素賦值給sum

3.輸出sum

for循環(huán)：

//五行星星:

for(var a=1;a<=5;a++){

document.write('
');

for(var b=1;b<=10;b++){

document.write('*')

}

//三角星星:

for(var a=1;a<=5;a++){

document.write('
');

for(var b=1;b<=a;b++){

document.write('*')

}

//99乘法表:

for(var a=1;a<=9;a++){

document.write('
');

for(var b=1;b<=a;b++){

document.write(b+''+a+'='+(ab)+'\t')

}

數(shù)組:內(nèi)存中的一段存儲空間，多個變量的集合創(chuàng)建一個數(shù)組(聲明)

var arr=[]; 聲明了一個空數(shù)組

var arr=new Array();

給數(shù)組中添加值

var arr=[1,2,3,4,5];

var arr1=['a','b','c','d'];

var arr2=[true,false]

數(shù)組中的值不限制數(shù)據(jù)類型

數(shù)組不限制長度

兩個特點

1.下標:標識數(shù)組中元素的位置，從0開始，遞增不重復

2.長度 length

var arr=[1,2,3,4,5,6,7,8,9];

            0 1 2 3 4 5 6 7 8

console.log(arr.length)

輸出數(shù)組中下標為4的值

consolze.log(arr[4])

數(shù)組的長度等于最大下標+1

給數(shù)組下標為11的位置處添加元素

arr[11]='a'

console.log(arr);

//數(shù)組API:

1.String();把數(shù)組轉(zhuǎn)換成字符串

var arr=[1,2,3,4,5];

var str=String(arr);

console.log

2.join('拼接符');拼接，最后拼接成的是字符串

如果沒有拼接符，默認等于String;

var arr=['h','e','l','l','o'];

var str=arr.join('-');

var str=arr.join('');

var str=arr.join();

console.log(str);

3.const();拼接結(jié)果還為數(shù)組

var arr=['a','b','c'];

var arr2=[1,2,3,4,5];

var str=arr.concat(1,2);

var str=arr.concat(arr2);

console.log(str);

4.slice(starti,endi+1);截取

特點:1含頭不含尾

2.如果省略第二個參數(shù)，默認從starti開始截取到結(jié)尾

3.如果一個參數(shù)都不寫，相當于復制原數(shù)組

4.支持負數(shù)參數(shù)

var arr=['a','b','c','d','e','f','g'];

      0  1  2  3  4  5  6

var str=arr.slice(2,5);

var str=arr.slice(2);

var str=arr.slice();

var str=arr.slice(-3,-1);

console.log(str);

5.splice(starti,n);

刪除插入替換

var arr=['a','b','c','d','e','f'];

      0  1  2  3  4  5

刪除:

var str=arr.splice(3,2);

插入var str=arr.splice(3,0,'1','2');

替換

var str=arr.splice(3,2,'A','B');

console.log(str);

console.log(arr);

6.翻轉(zhuǎn)

var arr=[1,2,3,4,5];

var str=arr.reverse();

console.log(str);

7.push();給數(shù)組末尾添加元素

var arr=[1,2,3,4,5];

var str=arr.push('a',10);

console.log(arr);

pop();刪除數(shù)組末尾的元素

var arr=[1,2,3,4,5];

var str=arr.pop();

console.log(arr);

unshift();給數(shù)組開頭添加一個元素

var arr=['a','b','c']

var str=arr.unshift('fff');

console.log(arr);

shift();刪除

var arr=[1,2,3,4,5];

var str=arr.shift();

console.log(arr);

//Dom: 操作頁面元素(增刪改查)

1.查找：

一.通過元素間的關系查找

1)父子關系

parentElement 查找一個元素的父元素

console.log(ceshi.parentElement) //查找id為ceshi的父元素

ceshi.parentElement.style.backgroundColor='#ccf'; //設置ceshi父元素的背景色

children 查找一個元素的所有子元素(輸出為數(shù)組形式)

console.log(ceshi.children); //查找id為ceshi的所有子元素(!結(jié)果為數(shù)組形式!)

ceshi.children[2].style.color='#f00';//給ceshi的子元素中下標為2的設字體顏色

var a=ceshi.children; //給ceshi的所有子元素的設置字體顏色

for(var i=0;i

ceshi.children[i].style.backgroundColor='#0f0';

}

console.log(ceshi.children[2].children[0].children[2])

var b=ceshi.children[2].children[0].children[2];

b.style.color='#50f';

firstElementChild 查找一個元素的第一個子元素(輸出為原來的形式)

lastElementChild 查找一個元素的最后一個子元素(輸出為原來的形式)

// console.log(ceshi.firstElementChild.)

2）兄弟關系

previousElementSibling 前一個兄弟

nextElementSibling 下一個兄弟

//找陽光的快樂生活

var c=ceshi.firstElementChild.nextElementSibling.children[0].firstElementChild.nextElementSibling;

console.log(c);

c.style.backgroundColor='#00f';

//找回村的誘惑

var d=ceshi.children[2].previousElementSibling.firstElementChild.lastElementChild;

console.log(d);

d.style.color='#ff0';

找兒子去哪兒

var e=ceshi.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.lastElementChild

console.log(e);

e.style.backgroundColor='#0ff';

二.通過HTML查找

1）通過id查找

var ele=document.getElementById('id號'); //只能找到一個

var id=document.getElementById('ceshi');

console.log(id);

id.style.backgroundColor='#f0f';

2)通過class查找

var ele=document.getElementsByClassName('class名'); //可以找到多個并且返回一個動態(tài)集合(數(shù)組)

var main=document.getElementsByClassName('main');

console.log(main);

main[0].style.backgroundColor='#ff0';

3)通過標簽名查找

var ele=document.getElementsByTagName('標簽名') //可以找到多個并且返回一個動態(tài)集合(數(shù)組)

var li=document.getElementsByTagName('li');

console.log(li);

for(var i=0;i

li[i].style.color='#c2c';

};

4)通過name屬性查找

var ele=document.getElementsByName('name'); //可以找到多個返回動態(tài)集合 (數(shù)組)

var uname=document.getElementsByName('uname');

console.log(uname)

三.通過選擇器查找

var ele=document.querySelector('選擇器'); //只能找到一個

var lia=document.querySelector('#ceshi>li>ul>li:last-child');

console.log(lia);

lia.style.color='#f0f';

var ele=document.querySelectorAll('選擇器'); 查找所有返回動態(tài)集合 (數(shù)組)

var liall=document.querySelectorAll('.main>li');

console.log(liall);

for(var i=0;i

liall[i].style.backgroundColor='#cf0';

}

//函數(shù)：預先定義好的，可以被反復利用的代碼塊

 function fn(){fn 表示函數(shù)名

   代碼

   console.log('hello js');

例：<body>

function myFunction(a,b){

    alert('hello js');

}

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

function myFunction(a,b){

    alert(a*b);

}

外鏈接

var bth=document.getElementById('btn');

bth.onclick=function(){

    alert('點擊');

}

</script>

</body>

練習：

div{

    width:200px;

    height:200px;

    background:green;

}

</style>
<body>

<div></div>
</body>
<script>
第一種方法

var a=document.getElementById('btn');

a.onclick=function(){

var b=document.querySelector('div');

b.style.display='none';

var a=document.getElementById('btn');

a.onclick=function(){

var b=document.querySelector('div');

b.style.display='block';

}

第二種方法
var btn=document.querySelector('#btnn');

var div=document.querySelector('div');

var num=1;

btn.onclick=function(){

 if(num==1){

     div.style.display='none';

     num=0;

 }else{

     div.style.display='block';

     num=1;

 }

}
</script>

正則：

1.search

search(/正則/);判斷是否包含符合規(guī)定的關鍵詞

varstr='you can you up';varstrs=str.search(/you/);//返回關鍵詞的位置varstrs=str.search(/uoy/);//找不到返回-1console.log(strs);

2.match

match(/正則/); 獲得所有和正則匹配的關鍵詞

varstr='good good study,Day day up';// var strs=str.match(/d/);varstrs=str.match(/d/gi);console.log(strs);

3.exec

exec();既獲得每個關鍵詞的位置又獲得每個關鍵詞的內(nèi)容

varstr='good good study,Day day up';varreg=/day/g;console.log(reg.exec(str));

4.replace

replace(/正則/ig,'替換值'); 替換

varstr='no zuo no die';varstrs=str.replace(/no/ig,'*');console.log(strs);

5.spilit

spilit(/正則/);切割 //切割完返回一個數(shù)組

varstr='no,zuo,no,die';varstrs=str.split(/,/);console.log(strs);

js輪播實現(xiàn)：

var banner=document.querySelectorAll('.banner>ul>li>a>img');
var point=document.querySelectorAll('.banner>p>span');
var timer;
var i=0;

function play(){
  timer=setInterval(function(){
        banner[i].style.display='none';
        point[i].style.background='#8b8b8b';
        i++;
        if(i>1){
            i=0;
        }
        banner[i].style.display='block';
        point[i].style.background='#ff8800
    },2000)
}

play();

//給box添加鼠標移入移出事件
var box=document.querySelector('.banner>ul');
box.onmouseover=function(){
    clearInterval(timer);
}

box.onmouseout=function(){
play();
}

//點擊圓點切換

for(var j=0;j<point.length;j++){
point[j].index=j;
point[j].onclick=function(){
var nu=this.index;
for(var b=0;b<point.length;b++){
banner[b].style.display='none';
point[b].style.background='#8b8b8b';
}
banner[nu].style.display='block';
point[nu].style.background="#ff8800";
}
}

計時器：

css樣式

<button class='btn1'>停止一次性定時器</button>
<button class='btn2'>停止永久性定時器</button>
script 一次性定時器

var btn1=document.querySelector('.btn1');
var btn2=document.querySelector('.btn2');
function show(){
console.log('這是一次性定時器');
}//一次性定時器
script 永久性定時器

var timer=setTimeout(show,3000);
btn1.onclick=function(){
clearTimeout(timer);
}

function print(){
console.log('這是永久性定時器');
}
var times=setInterval(print,1000);
btn2.onclick=function(){
clearTimeout(times);
}
instanceof：

var newObj=clone(student);
student.friend[0]='rose';
console.log(student.friend[0]);
console.log(newObj.friend[0]);
事件委托：
事件委托：可以簡單第理解為將子集的事件委托給父級來處理
div

<div class='boxs'>
<button class='btn1'>按鈕1</button>
<button class='btn2'>按鈕2</button>
</div>
script 第一種寫法

var btn1 = document.querySelector(".btn1");
var btn2 = document.querySelector(".btn2");
btn1.addEventListener("click",function(){
console.log(this.innerHTML)
})
btn2.addEventListener("click",function(){
console.log(this.innerHTML)
})
script 第二種寫法

var btnArray = document.querySelectorAll("button");
for(var i = 0;i<btnArray.length;i++){
btnArray[i].addEventListener("click",function(){
console.log(this.innerHTML)
})
}
第三種:使用事件委托的方式實現(xiàn)

var box=document.querySelector('.boxs');
box.addEventListener('click',function(event){
var target=event.target;
console.log(target.innerHTML);
})

仿微博發(fā)表評論：
1)css樣式
{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
input{
border:0;
}
li{
list-style: none;
}
.container{
width:800px;
margin:0 auto;
/border:1px solid #000;/
padding:20px;
}
input{
border:1px solid #666;
width:100%;
height:100px;
padding-left:10px;
}
.content>p{
font-weight: bold;
font-size: 20px;
padding:10px;
}
.content>p>span{
font-weight: normal;
font-size:14px;
margin-left:400px;
}
.content>button{
width:70px;
height:40px;
line-height: 40px;
background: #e4393c;
border-radius: 5px;
border:0;
font-size: 16px;
font-weight: bold;
color:#fff;
margin-top:10px;
margin-left:90%;
}
.main{
width:100%;
border:1px solid #000;
overflow: hidden;
border-radius: 20px;
margin-top:20px;
padding:0 10px;
}
.main>img,.main>p{
float:left;
}
.main>img{
width:100px;
height:100px;
}
.main>p{
width:500px;
height:100px;
line-height: 100px;
padding-left:50px;
/border:1px solid #000;*/
}
.main>button{
width:70px;
height:40px;
line-height: 40px;
background: #e4393c;
border-radius: 5px;
border:0;
font-size: 16px;
font-weight: bold;
color:#fff;
float:right;
margin-top:30px;
}
2)div
<div class='container'>
<div class='content'>
<p>你想對樓主說點什么 <span>你最多可輸入30個字符</span></p>
<input type="text" name="" placeholder="請輸入你想要說的內(nèi)容">
<button>發(fā)表</button>
</div>
</div>
3)script
把圖片做成隨機數(shù)

    inputs.onclick=function(){
        this.parentElement.parentElement.removeChild(this.parentElement)
    }
}

}
var textarea=document.getElementById("text");
var inputs=document.getElementById("ipt");
var txt=document.getElementById("txt");
ipt.onclick=function(){
var txtValue=textarea.value;
if(txtValue.length>0){
var divs=document.createElement("div");
var imgs=document.createElement("img");
var ps=document.createElement("p");
var inputs=document.createElement("input");
divs.setAttribute("class","creatediv");
imgs.setAttribute("class","createimg");
ps.setAttribute("class","createdivs");
inputs.setAttribute("class","createinput");
imgs.src="pic/1.jpg";
inputs.type="butto";
inputs.value="刪除";
ps.innerHTML=txtValue;
divs.appendChild(imgs);
divs.appendChild(ps);
divs.appendChild(inputs);
if(txt.children.length==0){
txt.appendChild(divs)
}else{
txt.appendChild(divs,get_firstChild(txt));
}

        inputs.onclick=function(){
            this.parentElement
                    .parentElement
                    .removeChild(this.parentElement)
        }

    }
}

更改網(wǎng)頁背景色：
window.onload=function(){
document.body.bgColor="#000";
定時器一秒鐘顯示一個星星一秒鐘調(diào)用star一次
window.setInterval("star()",1000);
25 }
動畫主函數(shù)：
function star(){
//創(chuàng)建圖片節(jié)點
var imgObj = document.createElement("img");
//添加src屬性
imgObj.setAttribute("src","images/lele.jpg");
//添加width屬性 getRandom()隨機數(shù)函數(shù)
var width = getRandom(20,120);
imgObj.setAttribute("width",width);

添加層疊樣式表屬性(style屬性行內(nèi)樣式)

var x = getRandom(0,window.innerWidth);
var y = getRandom(0,window.innerHeight);
    //設置坐標 x y 為未知數(shù)
    imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");
     
    //添加onclick事件屬性
    //this 代表當前對象,this是一個對象,只能在函數(shù)內(nèi)使用
    imgObj.setAttribute("onclick","removeImg(this)");
    //將圖片節(jié)點,掛載到<body>的父節(jié)點下
    document.body.appendChild(imgObj);

函數(shù):求隨機數(shù)函數(shù)：
function getRandom(min,max){
var random = Math.random()*(max-min)+min;
//向下取整
random = Math.floor(random);
//返回結(jié)果
return random;
}
函數(shù):刪除節(jié)點
function removeImg(obj){
document.body.removeChild(obj);
}
動態(tài)創(chuàng)建表格：
var json='[{"ename":"Tom", "salary":10000, "age":25},{"ename":"John", "salary":11000, "age":28},{"ename":"Mary", "salary":12000, "age":25}]';
var emps=eval(json);
var table=document.createElement('table');
var thead=document.createElement('thead');
var tr=document.createElement('tr');
for(var key in emps[0]){
var th=document.createElement('th');
th.innerHTML=key;
tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
//創(chuàng)建tbody
var tbody=document.createElement('tbody');
table.appendChild(tbody);
for(var i=0;i<emps.length;i++){
var tr=document.createElement('tr');
for(var key in emps[i]){
var td=document.createElement('td');
td.innerHTML=emps[i][key];
tr.appendChild(td);
}
tbody.appendChild(tr);
}

document.getElementById('data').appendChild(table);

一次性定時器：setTimeout
清除一次性定時器用clearTimeout

var timer=setTimeout(show,3000);
btn1.onclick=function(){
clearTimeout(timer);
}
永久性定時器：setInterval
清除永久性定時器用clearInterval

var times=setInterval(print,1000);
btn2.onclick=function(){
clearInterval(times);
}

萬年歷：
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}

.ul{
width:500px;
background: #999;
overflow: hidden;
padding-bottom: 10px;
}
.ul li{
float:left;
width:100px;
margin-left:20px;
height:50px;
line-height: 50px;
text-align: center;
background: #000;
color:#fff;
margin-top:10px;
}
div{
width:500px;
height:50px;
border:1px solid #000;
}
.ul>li>ul{
display:none;
}
</style>
<body>
<ul class='ul'>
<li>
1
<ul>
<li>1</li>
</ul>
</li>
<li>
2
<ul>
<li>2</li>
</ul>
</li>
<li>
3
<ul>
<li>3</li>
</ul>
</li>
<li>
4
<ul>
<li>4</li>
</ul>

</li>
<li>
    5
    <ul>
        <li>5</li>
    </ul>
</li>
<li>
    6
    <ul>
        <li>6</li>
    </ul>
</li>
<li>
    7
    <ul>
        <li>7</li>
    </ul>
</li>
<li>
    8
    <ul>
        <li>8</li>
    </ul>
</li>
<li>
    9
    <ul>
        <li>9</li>
    </ul>
</li>
<li>
    10
    <ul>
        <li>10</li>
    </ul>
</li>
<li>
    11
    <ul>
        <li>11</li>
    </ul>
</li>
<li>
    12
    <ul>
        <li>12</li>
    </ul>
</li>

</ul>
<div></div>
<script>
var li = document.querySelectorAll('.ul>li');
var div = document.querySelector('div');
for(var i = 0; i < li.length; i++) {
li[i].onmouseover = function() {
this.style.background = '#fff';
this.style.color = '#f00';
div.innerHTML = this.children[0].children[0].innerHTML;
}
li[i].onmouseout = function() {
this.style.background = '';
this.style.color = '';
}
}
</script>

Date 對象用于處理日期和時間。

 創(chuàng)建 Date 對象的語法：

var myDate=new Date();

 Date對象的方法：

Date()    //返回當日的日期和時間
getDate()  //從 Date 對象返回一個月中的某一天 (1 ~ 31)
getDay()  //從 Date 對象返回一周中的某一天 (0 ~ 6)
getMonth()  //從 Date 對象返回月份 (0 ~ 11)
getFullyare  //從 Date 對象以四位數(shù)字返回年份
getHours()  //返回 Date 對象的小時 (0 ~ 23)
getMinutes()  //返回 Date 對象的分鐘 (0 ~ 59)
getSeconds()  //返回 Date 對象的秒數(shù) (0 ~ 59)
getMilliseconds()  //返回 Date 對象的毫秒(0 ~ 999)

等等有很多對象方法API，可以去w3school官網(wǎng)查找學習

date示例如下：
JavaScript代碼塊

function time() {
        var a = new Date(); //獲取當前時間
        var year = a.getFullYear(); //年
        var month = a.getMonth(); //月
        var dat = a.getDate(); //日
        var day = a.getDay(); //周
        var hour = a.getHours(); //時
        var min = a.getMinutes(); //分
        var sec = a.getSeconds(); //秒
        document.write('現(xiàn)在時間' + year + '年' + month + '月' + dat + '日，星期' + day + '\t' + hour + '時' + min + '分' + sec + '秒'); //最后拼接在一塊
}   
time();   //調(diào)用

效果：

image

當然這個效果是靜態(tài)的效果并不會動的效果，如果你想要附加給他走起來的效果的得用到定時器，定時器分為：一次定時器setTimeout、永久定時器setInterval；

永久定時器setInterval寫法：
注釋：設置一個定時器，到達指定時間執(zhí)行我們的操作,然后定時器并沒有停止，以后每隔這么長時間，都重新執(zhí)行我們的操作

setInterval(function() {
        var a = new Date(); //獲取當前時間
        var year = a.getFullYear(); //年
        var month = a.getMonth(); //月
        var dat = a.getDate(); //日
        var day = a.getDay(); //周
        var hour = a.getHours(); //時
        var min = a.getMinutes(); //分
        var sec = a.getSeconds(); //秒
        document.getElementById('date').innerHTML = '現(xiàn)在時間' + year + '年' + month + '月' + dat + '日，星期' + day + '\t' + hour + '時' + min + '分' + sec + '秒'; //最后拼接在一塊，輸出到指定地點
})

一次定時器setTimeout寫法：
注釋：設置一個定時器，到達指定的時間,執(zhí)行我們的操作，定時器停止

setTimeout(function() {
        var a = new Date(); //獲取當前時間
        var year = a.getFullYear(); //年
        var month = a.getMonth(); //月
        var dat = a.getDate(); //日
        var day = a.getDay(); //周
        var hour = a.getHours(); //時
        var min = a.getMinutes(); //分
        var sec = a.getSeconds(); //秒
        document.getElementById('date').innerHTML = '現(xiàn)在時間' + year + '年' + month + '月' + dat + '日，星期' + day + '\t' + hour + '時' + min + '分' + sec + '秒'; //最后拼接在一塊
},2000)    //2000意思就是兩秒之后執(zhí)行操作

一、認識正則
1、什么是正則
正則就是一個事物的規(guī)則。什么是正則表達式，就是描述事物規(guī)則的式子。
2、正則能幫我們干什么？
1）做表單驗證
2）制作QQ表情
3）制作小偷程序
正則就是做字符串的查找、匹配、分割、替換。是字符串方法的升級版。
3 、正則難學嗎？
這是一個郵箱的正則表達式 \w+@\w+(.com|.cn|.org|.net){1,3}
對不懂正則規(guī)則的人，正則就是一堆亂七八糟的字符串就，正則像醫(yī)生的字，道士的符，就是天書。只要學習這個規(guī)則，其實正則對我們來說就非常簡單了。正則非常好學。
4 如何學習正則
學好正則只需要學兩個東西
1）正則表達式：就是描述事物規(guī)則的式子
2）正則函數(shù)：沒有正則函數(shù)，正則表達式就是一堆亂七八糟的字符串，正則表達式要起作用，必須和正則函數(shù)一起使用。
二、正則的基本語法
1 聲明一個正則對象
①用正則構(gòu)造函數(shù)
var patt = new RegExp(‘正則表達式’，’修飾符’);
②使用正則字面量的方式
var patt = /正則表達式（描述事物規(guī)則的字符串）/修飾符;
2 正則表達式
正則表達式分四塊內(nèi)容，只要學好這四塊，你就可描述任務事物的規(guī)則了。
如我們可以定義一個電話號碼的規(guī)則表達式，這樣就可以檢查一個字符串是否是電話號碼了。
① 定界符，正則中的定界符就是定義正則表達式邊界的。符號是 / /,作用就是告訴程序，定界符內(nèi)的是正則表達式，要按照正則的語法規(guī)則進行解析。
② 原子，自然界中的原子就是組成物質(zhì)的最小單位。正則中的原子是組成正則表達式的最小單位。原子分三種
（1）普通原子
（2）轉(zhuǎn)義符號、特殊符號,常見的轉(zhuǎn)義符號有\(zhòng)n 換行 \r回車 \t 水平制表符 /輸出定界符 \”輸出雙引號。。。。。。
（3）通配符
\d 表示任意一位數(shù)字0-9 \D任意一位非數(shù)字非0-9
\w 表示任意一位數(shù)字、字母下劃線 \W任意一位非數(shù)字字母下劃線
\s 表示任意一位空白字符如空格 \S任意一位非空白字符
\b 表示一個單詞的邊界空格 \B表示非單詞邊界非空格
③ 元字符
元字符是修飾原子的，不能單獨單獨存在
（1）[] 從多個原子中選一個
(2) ^ 如果是出現(xiàn)在[]中，表示取反的意思，一定不能有
(3) ^ 如果出現(xiàn)在正則表達式開頭，表示以xxx開頭的意思
(4) $如果出現(xiàn)在正則表達式結(jié)尾，表示以xxx結(jié)尾的意思 /^ a$ / 字符串要匹配此表達式，必須滿足三個條件
1 字符串以a開頭
2 字符串以a結(jié)尾
3 字符串只能含一個a
/^ a+$/ 字符串要匹配此表達式，必須滿足三個條件
1 字符串以a開頭
2 字符串以a結(jié)尾
3 字符串可以含一個或多個a
（5）+ 表示匹配前面的原子一次或多次，大于0次
（6）? 表示匹配前面的原子0次或1次
（7）* 表示匹配前面的原子0次1次或多次，任意次
（8）{m} 匹配前面的原子m次
（9）{m,} 前面的原子最少出現(xiàn)m次
（10）{m,n} 前面的原子最少出現(xiàn)m次,最多出現(xiàn)n次
(11) | 從多分支中選一個 abc|opq|xyz
(12) . 表示除了換行符以外的任意符號
（13） .* 匹配任意字符（除換行符）任意多次，這種匹配是貪婪匹配，如果有好幾部分滿足，取最長符合要求的子串
（14） .*? 不貪婪的匹配任意符號任意多次
（15）（）叫做模式單元
他的幾個作用
1 把（）中的內(nèi)容作為整體處理 ab|c a(b|c)
2 ()中的內(nèi)容會在內(nèi)存中單獨存放一份，方便使用
3通過正則的匹配函數(shù)，返回一個數(shù)組，數(shù)組中下標為0的元素中放的是滿足正則規(guī)則的子串，下標為1的元素中放的是，第一個（）中匹配的內(nèi)容，下標為1的元素中放的是，第一個（）中匹配的內(nèi)容，依次類推。
4如果不想匹配括號中的內(nèi)容使用(?:) 三元運算符
④ 修飾符
i 忽略大小寫
m 把字符串作為多行對待
g 全局匹配
3 正則函數(shù)
分兩大類，一類是字符串的正則方法，一類是正則對象的方法
一字符串的正則方法
string.match()
string.search()
string.replace()
string.split()
二正則對象的方法
patt.test()
patt.exec()
patt.complie()

重點、幾個例子

點擊導航欄內(nèi)容變
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
a{
text-decoration: none;
}
.container{
width:600px;
margin:100px auto;
}
.nav{
height:40px;
line-height: 40px;
overflow: hidden;
}
.nav li{
float:left;
}
.nav li a{
display:inline-block;
width:150px;
height:40px;
text-align: center;
color:#fff;
background: #000;
}
.nav li:first-child a{
background: #f00;
}

    /*box*/
    .box{
        position: relative;
    }
    .box li{
        width:600px;
        height:300px;
        line-height: 300px;
        text-align: center;
        position: absolute;
        background: #eee;
        display: none;
    }
    .box li:first-child{
        display: block;
    }
</style>

</head>
<body>
<div class='container'>

<ul class='nav'>
<li><a href="#">新聞</a></li>
<li><a href="#">娛樂</a></li>
<li><a href="#">綜藝</a></li>
<li><a href="#">軍事</a></li>
</ul>
<ul class='box'>
<li>還在打王者LOL呢？國家大事你關心了么？</li>
<li>元芳薛之謙事件你怎么看？</li>
<li>娛樂圈的那點事，潛規(guī)則？</li>
<li>淘寶雙十一你們是不是又要剁手了？</li>
</ul>
</div>

<script>
  //找到nav中的li
    var navLi=document.querySelectorAll('.nav li');
  //找到box中的li
    var boxLi=document.querySelectorAll('.box li');
  //遍歷navLi
    for(var i=0;i<navLi.length;i++){
        navLi[i].index=i;
        navLi[i].onclick=function(){
            //獲取當前的索引值
          var num=this.index;
        for(var j=0;j<navLi.length;j++){
            //統(tǒng)一樣式
            navLi[j].firstElementChild.style.background='#000';
            boxLi[j].style.display='none';
        }  
        navLi[num].firstElementChild.style.background='#f00';  
        boxLi[num].style.display='block';  
        }
    }
</script>

萬年歷
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}

.ul{
    width:500px;
    background: #999;
    overflow: hidden;
    padding-bottom: 10px;
}
.ul li{
    float:left;
    width:100px;
    margin-left:20px;
    height:50px;
    line-height: 50px;
    text-align: center;
    background: #000;
    color:#fff;
    margin-top:10px;
}
div{
    width:500px;
    height:50px;
    border:1px solid #000;
}
.ul>li>ul{
    display:none;
}

</style>
<body>
<ul class='ul'>
<li>
1
<ul>
<li>春節(jié)</li>
</ul>
</li>
<li>
2
<ul>
<li>二月二龍?zhí)ь^</li>
</ul>
</li>
<li>
3
<ul>
<li>三八婦女節(jié)</li>
</ul>
</li>
<li>
4
<ul>
<li>4444444444</li>
</ul>

    </li>
    <li>
        5
        <ul>
            <li>五月勞動節(jié)</li>
        </ul>
    </li>
    <li>
        6
        <ul>
            <li>666666666</li>
        </ul>
    </li>
    <li>
        7
        <ul>
            <li>777777777</li>
        </ul>
    </li>
    <li>
        8
        <ul>
            <li>888888888</li>
        </ul>
    </li>
    <li>
        9
        <ul>
            <li>999999999</li>
        </ul>
    </li>
    <li>
        10
        <ul>
            <li>十月一日國慶節(jié)</li>
        </ul>
    </li>
    <li>
        11
        <ul>
            <li>11111111111</li>
        </ul>
    </li>
    <li>
        12
        <ul>
            <li>1212121212</li>
        </ul>
    </li>
</ul>
<div></div>
<script>
    var li = document.querySelectorAll('.ul>li');
    var div = document.querySelector('div');
    for(var i = 0; i < li.length; i++) {
        li[i].onmouseover = function() {
            this.style.background = '#fff';
            this.style.color = '#f00';
            div.innerHTML = this.children[0].children[0].innerHTML;
        }
        li[i].onmouseout = function() {
            this.style.background = '';
            this.style.color = '';
        }
    }
</script>

js輪播實現(xiàn)

var banner=document.querySelectorAll('.banner>ul>li>a>img');
var point=document.querySelectorAll('.banner>p>span');
var timer;
var i=0;

function play(){
  timer=setInterval(function(){
        banner[i].style.display='none';
        point[i].style.background='#8b8b8b';
        i++;
        if(i>1){
            i=0;
        }
        banner[i].style.display='block';
        point[i].style.background='#ff8800
    },2000)
}

play();

//給box添加鼠標移入移出事件
var box=document.querySelector('.banner>ul');
box.onmouseover=function(){
    clearInterval(timer);
}

box.onmouseout=function(){
play();
}

//點擊圓點切換

....................................................收工

最后編輯于：2018.09.03 08:32:47

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 227,967評論 6贊 531
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 98,273評論 3贊 415
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 175,870評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經(jīng)常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,742評論 1贊 309
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,527評論 6贊 407
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 55,010評論 1贊 322
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,108評論 3贊 440
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 42,250評論 0贊 288
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 48,769評論 1贊 333
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 40,656評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,853評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,371評論 5贊 358
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 44,103評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,472評論 0贊 26
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,717評論 1贊 281
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,487評論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,815評論 2贊 372

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

js總結(jié)（！！！）

js總結(jié)（！！！）

添加層疊樣式表屬性(style屬性行內(nèi)樣式)

Date 對象用于處理日期和時間。

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

js總結(jié)（！！！）

添加層疊樣式表屬性(style屬性 行內(nèi)樣式)

Date 對象用于處理日期和時間。

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

添加層疊樣式表屬性(style屬性行內(nèi)樣式)