javascript高級部分

時間 2019-12-11

原文原文鏈接

回顧css

回顧：
    總體：
        - HTML
        - CSS
        - JavaScript
            - 基本數據類型
            - for，while..
        - DOM
            - obj = document.getElementById('..')
            - obj.innerHtml
        - BOM:
            - setInterval。。。
        ----> 能夠完成全部操做  <----
        
        - jQuery：
            - 選擇器 $('#') $('.')
            - 篩選器 $('#').find('')  
            - 內容或屬性  
                - $('#i1').val()  input系列，select,textarea  
                - $('#i1').text()
                - $('#i1').html()
                ------------------------
                - $('#i1').attr
                - $('#i1').prop('checked',true)
                ------------------
                - $('#i1').empty()
                - $('#i1').remove()
             - css
                $('#i1').addClass
                $('#i1').removeClass
                $('#i1').css('color','xxxx')
                
                $('#i1').scrollTop()
                
                $('#i1').offset()
                $('#i1').position()
                
              - 文檔
                <div id='i1'>
                    <div>asdf</div>
                </div>
                $('$#1').append('<a>百度</a>')
                $('$#1').prepend('<a>百度</a>')
                $('$#1').after('<a>百度</a>')
                $('$#1').before('<a>百度</a>')
                
              - 事件綁定
                ...
            
            
            
        
    a. 
    


1、jQuery
        - 事件綁定
            DOM事件綁定：
                - 在標籤上綁定
                - 經過找到標籤再綁定
                <div class='c1'>
                    <div>
                        <div class='title'>菜單一</div>
                        <div class='content'>內容 一</div>
                    </div>
                    <div>
                        <div class='title'>菜單一</div>
                        <div class='content'>內容 一</div>
                    </div>
                    <div>
                        <div class='title'>菜單一</div>
                        <div class='content'>內容 一</div>
                    </div>
                    <div>
                        <div class='title'>菜單一</div>
                        <div class='content'>內容 一</div>
                    </div>
                </div>
            jQuery事件綁定：
                1. 
                    $('.title').click(function(){
                        var v = $(this).text();
                        console.log(v);
                        
                    })
                2. 
                    $('.title').bind('click',function(){
                        var v = $(this).text();
                        console.log(v);
                    })
                3. 
                    $('.c1').delegate('.title','click',function(){
                        var v = $(this).text();
                        console.log(v);
                    })
                    
                4. 
                    $('.c1').on('click','.title', function () {
                        var v = $(this).text();
                        console.log(v);
                    });
            
            頁面框架加載完成：
            之後函數都寫這裏面
 $(function () { ... })
                  
                  使用：但願查看頁面當即執行的操做
                  
            阻止默認事件的發生：
                $('#bd').click(function () {
                    var v = $(this).text();
                    alert(v);
                    return false;
                })
                
                -- Form表單驗證示例
                
        - jQuery擴展
             - $.extend({ })      $.xx
             - $.fn.extend({})    $().xx
        - 自定義jQuery組件：
             -
                  xxx.js
                 
                 (function(jq){
                    function common(){
                    
                    }
                    
                    jq.extend({
                        xx: function(){
                            common();
                        }
                    
                    })
                    
                 })($);

javasc高級部分

1.做用域

function func(){
                if(1==1){
                    var v= 123;
                }
                console.log(v);
            }
            func()
            A. 報錯(Java,C#)    B. 123(對)   C.undefined

-->javasc和python是以函數爲做用域，html

2.做用域鏈

            xo = 'root1';
            function func(){
                var xo = 'root2';
                function inner(){
                    console.log(xo);
                }
                inner();
            }
            func();

當執行console.log(xo)時，其尋找順序爲根據做用域鏈從內到外的優先級尋找，若是內層沒有就逐步向上找，直到沒找到拋出異常。java

2.
xo = 'root1';
function func(){
var xo = 'root2';
function inner(){
console.log(xo);
}
inner();
}
func();
做用域鏈
// root2
3.

xo = 'root1';
function func(){
var xo = 'root2';
function inner(){
console.log(xo);
}
return inner;
}
result = func();
result();
// 做用域鏈在函數調用以前已經建立，當尋找變量時，根據最開始建立的做用域查找
// root2

4.
xo = 'root1';
function func(){
var xo = 'root2';
function inner(){
console.log(xo);
}
xo = 'root3'
return inner;
}

result = func();
result();

5.
var xxxx;
console.log(xxxx);

function func(){
console.log(xo);
var xo = '123';
console.log(xo);
}
func()
// 提早聲明,JS
1. 預編譯：
var xo;
2. 執行

6.
function func(num){
console.log(num); // function
num = 18;
console.log(num); // 18python

function num(){
}
console.log(num); // 18
}
func(666);

a. 預編譯 AO
先編譯參數：
AO.num = undefined
AO.num = 666
再編譯變量：
若是AO中有num，則不作任何操做
不然 AO.num = undefined
最後編譯函數：
AO.num = function num(){
}app

b. 執行

7.

function func(num){
console.log(num); // function
function num(){
}
console.log(num); // function
num = 18;

console.log(num); // 18
}
func(666);

先編譯參數：
AO.num = undefined
AO.num = 666
再編譯變量：
若是AO中有num，則不作任何操做
不然 AO.num = undefined
最後編譯函數：
AO.num = function num(){
}框架

8.
function func(){
console.log(xo);
var xo = 123;
}
func()

編譯：
參數：
AO
變量：
AO.xo = undefined
執行：

- 函數和麪向對象相關
1.
function func(arg){
console.log(this,arg);
}
func(18);
// func.call(window,20);
// func.apply(window,[30]);

(function(arg){
console.log(this,arg);
})(123)

在函數被執行時，默認this是代指window對象

function func(){
window.nn = 'root';
//nn = 'root';
this.nn = 'root';
}
func()
console.log(nn);

=====>
a. 在函數內部，默認都有this變量。默認狀況下，執行函數時 this=window
b. 使用函數名.call 或者函數名.apply 能夠對函數中的this主動設置值

document.getElementById('id').onclick = function(){
// this
}

document.getElementById('id').onclick.call(DOM對象)

2. 在JS中麼有字典類型
只有對象僞形成字典形式

var dict = {
name: 'alex',
age: 18
}
等價於
var dict = new Object(); # 表示建立空字典
dict.name = 'alex';
dict.age = 18;

function Foo(name){
this.Name = name
}

Foo('root') # 當作函數時，this默認是window
var dict1 = new Foo('root1') # 當作類時，this是 dict1 同pyself
// Foo.call(dict1,'root1')
var dict2 = new Foo('root2') # 當作類時，this是 dict2

====
function Foo(name){
this.Name = name;
this.Func = function(){
console.log(this.Name);
}
}
# 當作函數
Foo('root1')
window.Name
window.Func()函數

# 當作類
obj = new Foo('root2')
obj.Name
obj.Func()this

# 直接對象
dict = {
Name: 'root3',
Func: function(){
console.log(this.Name);
}
}spa

# dict = new Object();
# dict.Name = 'root3';
# dict.Func = function(){
console.log(this.Name);
}
dict.Func()
==========================》誰調用函數，this就是誰。函數()執行時候默認window.函數()

誰調用函數，this就是誰。函數()執行時候默認window.函數()
每個函數裏都有一個this
Name = '666';
var dict = {
Name: 'root',
Age: 18,
Func: function(){
// this等於dict
console.log(this.Name); // root

function inner(){
console.log(this.Name); // 666
}
window.inner();
}
}

dict.Func();

============================
誰調用函數，this就是誰。函數()執行時候默認window.函數()
每個函數裏都有一個this
變量查找順序，做用域鏈
Name = '666';
var dict = {
Name: 'root',
Age: 18,
Func: function(){
// this等於dict
console.log(this.Name); // root
// that 等於dict
var that = this;

function inner(){
// this=window
console.log(that.Name); // root
}
window.inner();
}
}

dict.Func();

3. 原型

function Foo(name){
this.Name = name;
}
// 原型
Foo.prototype = {
Func: function(){
console.log(this.Name);
}
}prototype

obj1 = new Foo(1) obj2 = new Foo(2) obj3 = new Foo(3)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。