JS中所有全局都是window的

window的作用:在封閉空間中聲明一個(gè)全局的變量 
全局變量和函數(shù)都屬于window

javascript

 是由什么東西組成？
 ECMAScript 核心解釋器(ES5和ES6)
 DOM BOM
提供最基本的功能比如:12+5  var a = 12; function show(){}
兼容性：完全兼容。

DOM 文檔對(duì)象模型 Document Object Model

就是document 操作頁(yè)面的。
獲取元素,修改樣式,創(chuàng)建元素
兼容性：很好，有不兼容的，但是可以解決。

BOM 瀏覽器對(duì)象模型 Browser Object Model

就是window 操作瀏覽器
    window.onload
    window.alert();
  兼容性：基本不兼容，解決不了。

BOM

BOM 跟瀏覽器有關(guān)。
window
打開(kāi)一個(gè)新頁(yè)面。
window.open(地址)
window.open(地址,打開(kāi)方式);
打開(kāi)方式:
    _blank   加載到一個(gè)新的窗口
    _self    替換當(dāng)前頁(yè)面
    .....
window.location:
    alert(window.location);
    alert(window.location.href);
    window.location = 'http://www.baidu.com';
    alert(window.location.hash);  //#錨點(diǎn)信息
    alert(window.location.host);  //域名 localhost:63342
    alert(window.location.hostname); //主機(jī)名 localhost
    alert(window.location.port); //端口
    alert(window.location.protocol); //協(xié)議 http https
    alert(window.location.search); //數(shù)據(jù)信息
    alert(window.location.pathname); //路徑名
window.history:
          歷史
    window.history.forward(); //前進(jìn)
    window.history.back();   //后退
    window.history.go(數(shù)字); //去哪個(gè) 前進(jìn)：1 后退：-1 前進(jìn)2個(gè)：2
confirm:
alert('提示信息')  彈出提示框
confirm('提示信息')   ——>  也有返回值：true / false
    如果選了確定  --  true
    如果選了取消 --  false
var bDel = confirm('真的要?jiǎng)h除嗎？');
    if(bDel){
        //說(shuō)明點(diǎn)了確定，直接刪除
    }else{
        //不要?jiǎng)h
    }

DOM操作（一）

DOM樹(shù):文檔的結(jié)構(gòu)              
document
    標(biāo)簽=元素=節(jié)點(diǎn)
obj.tagName  獲取節(jié)點(diǎn)的名字
(所有的字母都是大寫(xiě)的)

DOM結(jié)構(gòu)
   獲取父節(jié)點(diǎn)(獲取他爹)
       obj.parentNode      最大的祖宗是document，在往上就是null 

   獲取子節(jié)點(diǎn)
       childNodes 獲取子節(jié)點(diǎn)，包括文本節(jié)點(diǎn)
       節(jié)點(diǎn)類(lèi)型：
            文本節(jié)點(diǎn)
            標(biāo)簽節(jié)點(diǎn)
       檢測(cè)節(jié)點(diǎn)的類(lèi)型:nodeType
                obj.nodeType
                     3  文本節(jié)點(diǎn)
                     1  標(biāo)簽節(jié)點(diǎn)    
    
children 獲取子節(jié)點(diǎn)(只包括第一層) 獲取的子節(jié)點(diǎn)不包括文本節(jié)點(diǎn)
         只包括它的第一層子節(jié)點(diǎn)，不包括它的孫子級(jí)
         獲取到的是一組元素 可以用下標(biāo)、leng

true&&alert(1);
     &&如果兩個(gè)都是真的，才是真的。如果第一個(gè)是假的，后面的不執(zhí)行。
var a = false||5;
     ||   從左往右開(kāi)始看，有真的取真的，如果都為假，取最后一個(gè)

獲取上一個(gè)兄弟節(jié)點(diǎn)
obj.previousElementSibling  兼容：高版本瀏覽器
obj.previousSibling 兼容：ie6,7,8 
兼容寫(xiě)法    obj.previousElementSibling||obj.previousSibling;    

獲取下一個(gè)兄弟節(jié)點(diǎn)
obj.nextElementSibling  兼容：高版本瀏覽器
obj.nextSibling 兼容：ie6,7,8    其他瀏覽器是文本
兼容寫(xiě)法   obj.nextElementSibling||obj.nextSibling; 

獲取首尾子節(jié)點(diǎn)
首子節(jié)點(diǎn)
父級(jí).firstElementChild 兼容高版本瀏覽器
父級(jí).firstChild  兼容ie6,7,8
兼容寫(xiě)法   父級(jí).firstElementChild||父級(jí).firstChild  

尾子節(jié)點(diǎn)
父級(jí).lastElementChild 兼容高版本瀏覽器
父級(jí).lastChild  兼容ie6,7,8
兼容寫(xiě)法    父級(jí).lastElementChild||父級(jí).lastChild   
首子節(jié)點(diǎn)   obj.children[0]; 
尾子節(jié)點(diǎn)  obj.children[obj.children.length-1];

創(chuàng)建元素
   document.createElement('標(biāo)簽名')  什么標(biāo)簽都能創(chuàng)建  
你創(chuàng)建出來(lái)的標(biāo)簽，跟html中手寫(xiě)的標(biāo)簽一模一樣，沒(méi)有任何區(qū)別。

添加元素
    父級(jí).appendChild(新創(chuàng)建的對(duì)象);
在父級(jí)的最后面添加了一個(gè)元素
    父級(jí).insertBefore(要插入的元素,插入到誰(shuí)之前);
把一個(gè)元素插入到另一個(gè)元素之前
 **必須有一條才能用  必須有插入誰(shuí)之前的元素

刪除元素
 父級(jí).removeChild(要?jiǎng)h除的對(duì)象)

克隆元素
obj.cloneNode()
obj.cloneNode(true) 深度克隆元素,包括內(nèi)容一起克隆
*注意:id也會(huì)被一起克隆。
*小貼士:以后每次使用克隆的時(shí)候都要把id去掉

上移下移:
appendChild和insertBefore有剪切功能   
    
盒子模型:width/height+padding*2+border*2
物體信息：   
obj.offsetWidth   盒子模型的寬度
obj.offsetHeight  盒子模型的高度
obj.offsetTop     距離定位父級(jí)的距離
offsetHeight                            Height
盒子模型高度                          純高度
 number                                 string 

獲取html標(biāo)簽
右下角富媒體:
    1.position:absolute; right:0; bottom:0;
    2.position:fixed; right:0; bottom:0; 不兼容ie6
自己寫(xiě):
onscroll  當(dāng)頁(yè)面滾動(dòng)時(shí)觸發(fā)。
    滾動(dòng)距離(頁(yè)面滾了多少它就是多少)
         document.documentElement.scrollTop;
    不兼容chrome
         document.body.scrollTop;
    兼容chrome
兼容寫(xiě)法：
document.documentElement.scrollTop||document.body.scrollTop;

改變窗口大小事件  onresize      
頁(yè)面滾動(dòng)事件    onscroll

滾動(dòng)距離
    document.documentElement.scrollTop||document.body.scrollTop; 獲取上下滾動(dòng)距離
    document.documentElement.scrollLeft||document.body.scrollLeft; 獲取左右滾動(dòng)距離
獲取可視區(qū)的寬高
    document.documentElement.clientHeight
獲取可視區(qū)高度
    document.documentElement.clientWidth
onfocus:
事件，獲取焦點(diǎn)的事件
onblur：
事件，失去焦點(diǎn)的事件

DOM操作（二）

結(jié)構(gòu)：parentNode    document      結(jié)構(gòu)父級(jí)
定位：offsetParent  body          定位父級(jí)
**offsetLeft 物體到有定位父級(jí)的一個(gè)左邊距離
obj.getBoundingClientRect(); 獲取絕對(duì)位置;
    .left 左邊距離頁(yè)面左邊的距離
    .top  上邊距離頁(yè)面上邊的距離
    .right  右邊距離頁(yè)面左邊的距離
    .bottom  下邊距離頁(yè)面上邊的距離

操作屬性
正常和自定義的都行
獲取自定義屬性
     obj.getAttribute('屬性名'); 
設(shè)置自定義屬性
     obj.setAttribute('屬性名','屬性值');
刪除自定義屬性
     obj.removeAttribute(名)
     成對(duì)出現(xiàn)   不能和自定義屬性混用

物體高度：
obj.offsetHeight    物體盒子模型高度
obj.scrollHeight    內(nèi)容高度
如果內(nèi)容小于offsetHeight,取得offsetHeight
如果內(nèi)容大于offsetHeight,內(nèi)容高度

innerHTML的問(wèn)題:
        innerHTML加等于的話:會(huì)清空之前身上事件
圖片對(duì)象:
   new Fuction()
   new Oject()
   new Image()  創(chuàng)建一個(gè)圖片對(duì)象
   這個(gè)東西跟在html中手寫(xiě)的img標(biāo)簽一模一樣。
   img.onload   當(dāng)圖片加載成功觸發(fā)這個(gè)事件。
   img.onerror  當(dāng)圖片加載失敗觸發(fā)這個(gè)事件。

文字提示:
   事件
       獲取焦點(diǎn)事件
           onfocus
       失去焦點(diǎn)事件
           onblur
獲取焦點(diǎn)函數(shù)
讓一個(gè)文本框上來(lái)就獲取焦點(diǎn)
    .focus() 讓一個(gè)元素獲取焦點(diǎn)
    .blur()  讓一個(gè)元素失去焦點(diǎn)
    
事件對(duì)象(event) 包含了事件的詳細(xì)信息。
    ev參數(shù)        事件對(duì)象    兼容chrome FF IE8 9 10 但是得傳參
    event       事件對(duì)象    兼容Chrome和IE系列
    var oEvent = ev||event;(他們倆個(gè)不能換位置)  
    平時(shí)注意寫(xiě)上window.onload 
    只能獲取到鼠標(biāo)和鍵盤(pán)的操作。

獲取鼠標(biāo)在可視區(qū)中的坐標(biāo):
    事件對(duì)象.clientX;       獲取可視區(qū)中X軸坐標(biāo)
    事件對(duì)象.clientY;       獲取可視區(qū)中Y軸坐標(biāo)
**以后只要是操作clientX和clientY就加上滾動(dòng)距離。
ondblclick          雙擊事件。
onmousemove         鼠標(biāo)移動(dòng)事件
        注意：移動(dòng)事件觸發(fā)的特別頻繁。所以里面別放復(fù)雜代碼。

事件冒泡:
   子級(jí)會(huì)去找父級(jí)相同的事件執(zhí)行 
   就算當(dāng)前元素沒(méi)什么沒(méi)有這個(gè)事件 也會(huì)往上冒 
   冒泡跟結(jié)構(gòu)有關(guān)  (沒(méi)事不要取消)
取消事件冒泡:
   var oEvent=ev||event; 
   oEvent.cancelBubble=true     取消事件冒泡.  IE chrome照顧IE
   oEvent.stopPropagation();   取消事件冒泡.  W3C規(guī)定

Jq的元素操作及DOM操作

Jq的元素操作

$  -  jQuery庫(kù)  jQuery()
jQuery中所有的東西，都在 $ 身上。

domReady:
$(function(){
    
});
另一種寫(xiě)法：
$(document).ready(function(){
    
});

獲取元素：
根據(jù)id:      $('#id')
根據(jù)class：  $('.class')
根據(jù)標(biāo)簽名： $('標(biāo)簽名')

加事件：
$('#id').click(fucntion(){});       
用 $ 獲取到的元素，都是 jquery的對(duì)象，不是原生的對(duì)象。

設(shè)置樣式：
$('div').css('background','red')
獲取樣式：
$('div').css('display');

設(shè)置顯示、隱藏:
顯示： .show();
隱藏： .hide();

toggle：綁定兩個(gè)或多個(gè)事件處理器函數(shù)，以響應(yīng)被選元素的輪流的 click 事件
    
鼠標(biāo)移入：
mouseenter  mouseover
鼠標(biāo)移出：
mouseleave  mouseout
移入移出切換 ：
$('#btn').hover(function(){}, function(){});
兩個(gè)函數(shù)，分別表示移入和移出（第一個(gè)函數(shù)->移入，第二個(gè)函數(shù)->移出）
    
淡入淡出：
$('#div1').fadeIn();
$('#div1').fadeOut();

*jquery里，涉及動(dòng)畫(huà)的東西，先停止，再繼續(xù)
$('#div1').stop().fadeIn();

*調(diào)用jquery的方法時(shí)，可以采用 鏈?zhǔn)? 寫(xiě)法。
$('#div1').stop().fadeIn();
替換了：
    $('#div1').stop();
            $('#div1').fadeIn();
下拉：slideDown
收起：slideUp

自定義動(dòng)畫(huà)效果，animate  先加上stop()
animate(params,[speed],[easing],[fn])
params:一組包含作為動(dòng)畫(huà)屬性和終值的樣式屬性和及其值的集合
speed:三種預(yù)定速度之一的字符串("slow","normal", or "fast")或
        表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)
easing:要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing"
fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。
Params的屬性值必須是數(shù)字 不是數(shù)字沒(méi)辦法運(yùn)動(dòng)
改變顏色:https://bitstorm.org/jquery/color-animation/jquery.animate-colors.js

選擇器：獲取元素    
常用三種：
id:     $('#id')
標(biāo)簽：  $('標(biāo)簽名')
class： $('.class名字')

屬性：
$('li[屬性名="屬性值"]')

偽類(lèi)：
:first    第一個(gè)
:last     最后一個(gè)
:even     偶數(shù)行
:odd      奇數(shù)行
:eq(索引值)  按索引取第幾個(gè) -- 從0開(kāi)始
:lt 小于索引值
:gt 大于索引值
:contains(text)  找內(nèi)容中包含
li:has(標(biāo)簽名)  標(biāo)簽名是li下的 選中的是li
$('#box input')  嵌套選擇
       **** .eq(索引值)    獲取指定索引值的元素 

css的操作：
獲取：   .css('樣式名');  
設(shè)置：   .css('樣式名','值');
批量設(shè)置：.css({多個(gè)樣式名和值});

屬性操作：
獲取屬性：     .attr('屬性名');
設(shè)置屬性：     .attr('屬性名','值');
批量設(shè)置屬性： .attr({多個(gè)屬性名和值});

class的操作：
    增：  addClass('class名');
    刪：  removeClass('class名');

內(nèi)容的操作：
表單元素的內(nèi)容：
    原生： .value
    jq:  
        獲?。?val()
        設(shè)置：.val('設(shè)置的值');
標(biāo)簽的內(nèi)容：
    原生： innerHTML
    jq:
        獲?。?.html()
        設(shè)置： .html('設(shè)置的內(nèi)容');
對(duì)象：
   原生對(duì)象，不能用jq的方法的操作
   jq對(duì)象，不能用原生的方法操作

把jq對(duì)象轉(zhuǎn)成原生對(duì)象：  $('div')[0]
把原生對(duì)象轉(zhuǎn)成jq對(duì)象：  $(oDiv)
     jquey里，this，通常情況下(在多數(shù)情況下)，指的是原生對(duì)象(不是jq對(duì)象)。
     ***鏈?zhǔn)讲僮?
獲取索引值： .index()

Jq的DOM操作:

位置：
    原生：
        到定位父級(jí)：
            oDiv.offsetLeft
            oDiv.offsetTop
        絕對(duì)位置：
            getPos(oDiv).left
            getPos(oDiv).top
    jquery:
        到定位父級(jí)：
            $(this).position().left 
            $(this).position().top
        絕對(duì)位置：
            $(this).offset().left
            $(this).offset().top
大?。?    原生：
        盒模型：
            offsetWidth
            offsetHeight
    jquery:
        普通寬：$(this).width()  //普通,不包含border和 padding
        普通高：$(this).height()

        $(this).innerWidth() //包含 普通+ padding
        $(this).innerHeight() 

        $(this).outerWidth() //包含普通+ padding+ border
        $(this).outerHeight()  
可視區(qū)大?。?寬：$(window).width()
高：$(window).height()
滾動(dòng)條：
    原生 ：  
        document.documentElement.scrollTop || document.body.scrollTop;
    jquery:
        $(document).scrollTop()
        $(document).scrollLeft();

兄弟們：
$(this).siblings() ;
DOM操作：
創(chuàng)建元素： $('<p>fffff</p>')

append:
    A.append(B);     // 在A里面追加B (后面)
appendTo:
    A.appendTo(B);   //把A放到B里面（后面）
prepend:
    A.prepend(B);  // 在A里面追加B （前面）
prependTo:
    A.prependTo(B);  //把A放到B里面（前面）
after:
    A.after(B);        //把B放到A后面 （外面）
before:
    A.before(B);       //把B放到A前面 （外面）
insertAfter:
    A.insertAfter(B);   //把A放到B后面 （外面）
insertBefore:
    A.insertBefore(B);  //把A放到B前面（外面）

刪除元素：
remove:
    $('選中的元素').remove('id/css/tag/嵌套/...');

jq事件：

在jquery里，所有的事件，都是綁定的。
綁定，解綁，委托：
    -------------------------------------
    1.7 開(kāi)始，下面的方式，都棄用
        bind()      unbind()   直接綁定
        live()      die()      通過(guò)冒泡
        delegate    undelegate 更精確的小范圍使用事件委托
    --------------------------------------

綁定：  on
   簡(jiǎn)單綁定： $(obj).on('事件名',function(){});
   傳遞數(shù)據(jù)： $(obj).on('事件名','選擇器',{數(shù)據(jù)},function(ev){
                     ev.data // 就是傳過(guò)來(lái)的數(shù)據(jù)
            });
   多個(gè)事件：  $(obj).on('事件名1 事件名2...',function(){});
                       ***多個(gè)事件用空格分開(kāi)

解綁定： off
   $(obj).off();  //全部事件都消失了
   $(obj).off('事件名');  //指定的事件消失

委托： on
   $(obj).on('事件名','選擇器',function(ev){
            **函數(shù)里面的this是選擇器(可以是jq任何選擇器)
           //var aaa=ev.target||ev.srcElement
           //**$(aaa)轉(zhuǎn)成jq對(duì)象 才能操作
   });


one:
    $(obj).one('事件名',function(){});  一次性事件
  模擬:
    $(obj).on('事件名',function(){
            alert(123)
            $(obj).off();
        
    })

右鍵：
contextmenu

return false:
   阻止默認(rèn)行為 并且 阻止冒泡

單獨(dú)阻止默認(rèn)行為：ev.preventDefault()
單獨(dú)阻止冒泡：ev.stopPropagation()

*jquery里的事件詳情 ev ，做了兼容處理，不用 ev||event

循環(huán)：兩種寫(xiě)法
   $('li').each(function(index,element){
       //index --  i
       //element  --  aLi[i]
       element  原生對(duì)象
       $(element) jq 對(duì)象
  })
   $.each(要循環(huán)的東西，function(i,v){
       //要循環(huán)的東西 可以是原生對(duì)象
   });

小工具：
   $.browser.msie  是否是ie  false/true
   $.trim(str)      去除首尾空格
   $.type       測(cè)試類(lèi)型

jquery:
    js 庫(kù)

為什么流行：
    1）本身確實(shí)有很多封裝好的功能
    2）可擴(kuò)展性非常強(qiáng)
        ---導(dǎo)致很多jquery插件出現(xiàn)了

自定義插件：
    $.fn.toRed = function(){
        //實(shí)現(xiàn)插件的代碼
        在插件里，this  就 jquery對(duì)象。
    }

批量寫(xiě)插件：
    $.fn.extend({
        toRed:function(){
            this.css('','')
        },
        toBlue:function(){
            this.css('','')
        }
    });
//可以單獨(dú)放在js文件里面
***注意自定義插件放在window.onload($()) 外面