2019-04-9

闭包循环得索引值

闭包的用途：存循环的索引值

window.onload = function(){

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

闭包做私有变量计数器

闭包的用途：私有变量计数器

闭包做选项卡

给每个选项卡按钮添加点击事件：aBtn[i].onclick = function(){

遍历所有选项卡按钮：for(var j=0; j

将每个选项卡按钮都设为灰色：aBtn[j].className = '';

将每个内容区都隐藏：aCon[j].className = '';

this代表当前点击的Button对象：this.className = 'cur';

当前点击的按钮对应的内容显示：aCon[i].className = 'active';

单体创建对象

调用属性：

alert(Tom.name);

alert(Tom.age);

调用方法：

Tom.showName();

构建函数

new的作用就相当于工厂模式中最开始创建了一个空对象，最后把对象返回

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

this.showName = function(){

alert(this.name);

}

this.showAge = function(){

alert(this.age);

}

this.showJob = function(){

alert(this.job);

}

}

原型模式

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

Person.prototype.showName = function(){

alert(this.name);

}

Person.prototype.showAge = function(){

alert(this.age);

}

Person.prototype.showJob = function(){

alert(this.job);

}

}

var Lucy = new Person('lucy',18,'测试鼠');

先去自己的对象中找showName函数，再去构造函数的原型找

Lucy.showName = function(){

alert('我的名字是' + this.name);

}

//重写自身对象中的方法，不会影响其它对象

call和apply的区别

二者都可以改变当前的this，区别在于apply方法要将参数放入数组中再传参二者都可以改变当前的this，区别在于apply方法要将参数放入数组中再传参

//父类

function Fclass(name, age){

this.name = name;

this.age = age;

}

Fclass.prototype.showName = function(){

alert(this.name);

}

Fclass.prototype.showAge = function(){

alert(this.age);

}

//子类

function Sclass(name, age, job){

//属性用call或者apply的方式来继承

Fclass.call(this, name, age);

this.job = job;

}

//方法继承：将父类的一个实例赋值给子类的原型属性

Sclass.prototype = new Fclass();

Sclass.prototype.showJob = function(){

alert(this.job);

}

//由于已经继承了父类的属性和方法，所以可以直接调用

var Driver = new Sclass('tom',18,'老司机');

Driver.showName();

Driver.showAge();

Driver.showJob();

新增选择器

//如果要选择多个元素用querySelectorAll

var aLi = document.querySelectorAll('.list li');

alert(aLi.length);

jQuery加载

JS写法

window.onload = function(){

var oDiv = document.getElementById('div');

alert(oDiv.innerHTML);//这是一个div元素

}

//jQuery的完整写法

//比上面JS写法先弹出，因为window.onload是把页面元素加载、渲染完才弹出，而ready()是把所有页面的节点加载完之后就弹出了，不用等渲染了

*$(document).ready(function(){

var $div = $('#div');

alert('jQuery:' + $div.html());//jQuery:这是一个div元素

})*

简写方式

$(function(){

var $div = $('#div');//CSS样式怎么写，这里就怎么写

//html()方法相当于原生JS的innerHTML

alert($div.html() + 'jQuery');

})

jQuery选择器

选择元素的规则和css样式相同

选择集转移

修改#div1的下一个元素的样式

$('#div1').next().css({color: 'red'});

修改#div1的下面所有p标签设置样式

$('#div1').nextAll('p').css({color: 'red'});

eq(2)是选择索引等于2的第三个li，siblings()表示除第三个之外的其它兄弟li

$('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});

find()是选择div内的class等于link1的元素

$('#div2').find('.link1').css({color:'red'});

$('.list li')与$('.list').children()的区别：

原始的选择集不一样

$('.list li')不能通过end()回到父级

$('.list').children()可以通过end()回到父级

jQuery样式操作

jQuery用同一个函数即可以取值、也可以赋值

读取样式

alert($('#div1').css('fontSize'));

设置（写入）样式

$('#div1').css({background:'gold'});

增加行间样式

$('#div1').addClass('big');

减少行间样式，多个样式用空格分开

$('#div1').removeClass('div2 big');