闭包存循环索引
window.onload = function () {
var a = document.getElementsByTagName("li");
// alert(a.length)
for (var i = 0; i < a.length; i++) {
(function (i) {
a[i].onclick = function () {
alert(i)
}
})(i)
}
}
//如果直接写不用闭包则结果会循环很快，结果只会是最后一个值
面向对象
- 单体创建对象
var Tom = {
name: 'tom',
age: 18,
showname: function () {
alert('我的名字叫' + this.name);
},
showage: function () {
alert('我今年' + this.age + '岁');
}
}
Tom.showage();
alert(Tom.age)
- 工厂模式
function Person(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.showname = function () {
alert('我的名字叫' + this.name);
};
o.showage = function () {
alert('我今年' + this.age + '岁');
};
o.showjob = function () {
alert('我的工作是' + this.job);
};
return o; //必须有return
}
var tom = Person('tom', 18, '程序员');//直接调用函数
alert(tom.job)
tom.showname();
构造函数
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)
}
//不必须有return
}
var jack = new Person("jack", 22, "攻城狮");//实例化注意和面向对象中工厂的区别
// var tom = new Person('tom', 22, '程序员');
// jack.showjob()
// alert(jack.name==tom.name)
function aa(a,b) {
alert(this+" "+a+" "+b)
}
aa(1,2)
aa.call("abf",1,2)//更改this值
aa.apply("abf",[2,3])//更改this值
继承
function Father(name, age) {
this.name = name;
this.age = age;
}
Father.prototype.showname = function () {
alert(this.name)
};
Father.prototype.showage = function () {
alert(this.age)
};
//子类
function Son(name, age, job) {
Father.call(this, name, age);//属性继承
this.job = job
}
//方法继承
Son.prototype=new Father();
Son.prototype.showjob = function () {
alert(this.job)
};
var jack = new Son("jack", 18, '程序猿');
jack.showname();
jack.showage();
jack.showjob();
//不必须有return
jQuery部分选择器
$("#div1").next().css({//下一个元素
color: 'red'
})
$("#div1").nextAll().css({//也可以选择特定的元素如：$("#div1").nextAll('p')
background:'aqua'
})
$("#span1").parent().css({
width:'100px',
backgroundColor:'red',
fontSize:'30px'
})
$("#two").closest('div').css({//祖先
background:'gold'
})
$(".list").children().css({
background:'green'
})
.end().css({
background:'red'
})
$(".list2 li:eq(2)").css({
background:'black'
})
.siblings().css({//选择同级兄弟元素
background:'red'
})
$(".div2").find("#link1").css({
background:'gold'
})
增删样式
// alert($(".box1").css('font-size'))
$(".box1").css({
background:'gold'
})
$(".box1").addClass('big')
$(".box1").removeClass('box1')
点击事件
$(function () {
$("#btn").click(function () {
$(".box1").toggleClass('sty')//切换样式
})
})
获取索引值
<script>
$("#list li").click(function () {
// alert(this.innerHTML)
// alert($(this).html())//和上面一样都是获取值
alert($(this).index())//获取索引值
})
</script>
