javascript高级部分

回顾

回顾：

    整体：

        - 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. 

一、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是以函数为作用域，

2.作用域链

            xo = 'root1';

            function func(){

                var xo = 'root2';

                function inner(){

                    console.log(xo);

                }

                inner();

            }

            func();

当执行console.log(xo)时，其寻找顺序为根据作用域链从内到外的优先级寻找，如果内层没有就逐步向上找，直到没找到抛出异常。

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); // 18

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(){
}

b. 执行

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()

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

# 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);
}
}

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