javascript高级部分

it2022-05-08 12

回顾

回顾：整体： - 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. 执行 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()

# 直接对象 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)

转载于:https://www.cnblogs.com/zcqdream/p/6507273.html

专利

最新回复(0)