一, call和apply
call和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();
三, 新增选择器
window.onload = function(){
var oDiv = document.querySelector('#div1');
alert(oDiv);//弹出[object HTMLDivElement],表示选择了该Div
//如果要选择多个元素用querySelectorAll
var aLi = document.querySelectorAll('.list li');
alert(aLi.length);//8
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
四, jQuery加载
// alert($);//弹出function (a,b){return new n.fn.init(a,b)}表示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选择器
#div1{
color: red;
}
.box{
color: green;
}
.list li{
margin-bottom: 10px;
}
$(function(){
//选择元素的规则和css样式相同
$('#div1').css({color: 'pink'});
$('.box').css({fontSize: '30px'});
$('.list li').css({
background: 'green',
color: '#fff',
fontSize: '20px',
marginBottom: '10px'
});
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
六, 选择集转移
$(function(){
//prev()是同级的上一个元素,prevAll()是同级的上面所有的元素
//next()是同级的下一个元素,nextAll()是同级的下面所有的元素
//修改#div1的下一个元素的样式
$('#div1').next().css({color: 'red'});
//修改#div1的下面所有p标签设置样式
$('#div1').nextAll('p').css({color: 'red'});
//选择上一级的父元素
/*$('#span01').parent().css({
width:'100px',
height:'100px',
background:'gold'
})*/
//获取祖级用$('#span02').parent().parent()不可取,可用closest('div')获取离span02最近的div
//closest可以选择离自己最近的元素,元素可以是父级,也可以是子集
$('#span01').closest('div').css({
width:'200px',
height:'200px',
background:'pink'
})
/*
$('.list li')与$('.list').children()的区别:
原始的选择集不一样
$('.list li')不能通过end()回到父级
$('.list').children()可以通过end()回到父级
*/
$('.list').children().css({
background:'gold',
height:'30px',
marginBottom:'10px'
}).end().css({
background:'green'
})
//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'});
})
这是一个p元素
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
七, jQuery样式操作
.div2{
color: red;
}
.big{
font-size: 30px;
}
$(function(){
/*jQuery用同一个函数即可以取值、也可以赋值*/
//读取样式
alert($('#div1').css('fontSize'));//16px
//设置(写入)样式
$('#div1').css({background:'gold'});
//增加行间样式
$('#div1').addClass('big');
//减少行间样式,多个样式用空格分开
$('#div1').removeClass('div2 big');
})
八, click事件
.box{
width: 200px;
height: 200px;
background-color: gold;
}
.sty{
background-color: green;
}
$(function(){
// 给按钮绑定click事件
$('#btn').click(function(){
//重复切换sty样式
$('.box').toggleClass('sty');
})
})
九, jQuery索引值
.list li{
height: 30px;
margin-bottom: 10px;
background-color: gold;
}
$(function(){
$('.list li').click(function(){
// alert(this.innerHTML);//弹出标签中的内容
alert($(this).index());//弹出下标
})
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
十, jQuery做选项卡
.btns{
width: 500px;
height: 50px;
}
/*选项卡的样式*/
.btns input{
width: 100px;
height: 50px;
background-color: #ddd;/*默认灰色*/
color: #666;
border: 0px;
}
/*被选中的选项卡的样式*/
.btns input.cur{
background-color: gold;
}
/*内容区的样式*/
.contents div{
width: 500px;
height: 300px;
background-color: gold;
display: none;/*默认隐藏*/
line-height: 300px;
text-align: center;
}
/*被选中的内容区的样式*/
.contents div.active{
display: block;
}
$(function(){
$('#box1 #btns input').click(function() {
//失去焦点,避免出现默认的蓝框
$(this).blur();
//this是原生的对象
// alert(this);//弹出[object HTMLInputElement],说明this就是当前点击的input元素
//jQuery的this对象使用时要用$()包起来,这样就可以调用jQuery的方法了
//给当前元素添加选中样式,为兄弟元素移除选中样式
$(this).addClass('cur').siblings().removeClass('cur');
//$(this).index()获取当前按钮所在层级范围的索引值
//显示对应索引的内容区,隐藏其它兄弟内容区
$('#box1 #contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
$('#box2 #btns input').click(function() {
$(this).blur();
$(this).addClass('cur').siblings().removeClass('cur');
$('#box2 #contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
})
十一, jQery属性操作
$(function(){
/*
alert($('.box').html());//这是一个div元素
$('.box').html('百度网');
*/
/*
读写值为布尔类型的属性用prop方法
读写值为非布尔类型的属性用attr方法
*/
/*
$('.box').attr({title:'这是一个div!'});//写入title属性,并赋值
alert($('.box').attr('class'));//读属性class的值,弹出box
*/
/*
var $src = $('#img1').attr('src');
alert($src);//img/1.png
$('#img1').attr({
src:'img/2.gif',
alt:'图片二'
});
*/
/*
alert($('#check').prop('checked'));//选中为true,非选中为false
$('#check').prop({checked:true});//设置默认勾选
*/
// alert($('.box2').html());//这是div元素内的span
alert($('.box2').text());//这是div元素内的span
})
多选
这是div元素内的span
十二, jQery特殊效果
.box{
width: 200px;
height: 200px;
background-color: gold;
display: none;
}
$(function(){
$('#btn').click(function(){
// $('.box').fadeOut();//淡出
// $('.box').fadeIn();//淡入
// $('.box').fadeToggle();//切换淡入淡出
// $('.box').toggle();//切换显示隐藏
$('.box').slideToggle();//切换上收和下展
})
})