2020-01-02 第十六天！

call和apply

/* call和apply的区别

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

function aa(a,b){

alert('我的this是' + this + ',我的a是' + a + ',我的b是' + b);

}

aa(2,3);

aa.call('abc',2,3);//我的this是abc,我的a是2,我的b是3

aa.apply('abc',[2,3])

call和apply都可以调用函数，可以用修改this

传参方式不同 call方法将参数直接放在 apply方法要将参数放入数组中再传参

</script>

函数的继承

//父类

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方法实现属性的继承

this.job = job;

}

//方法的继承 (父类的实例赋给子类的原型)

Sclass.prototype = new Fclass();

Sclass.prototype.showJob = function(){

alert(this.job);

};

var Driver = new Sclass('tom',18,'老司机')//创建一个子类的实例//

Driver.showJob();

Driver.showAge();

Driver.showName();

</script>

新增选择器

window.onload = function(){

var div1 = document.querySelector('#div1');

console.log(div1);

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

console.log(lis.length);//8

}

<div id="div1">这是一个div元素</div>

</ul>

</script>

jQuery加载

// alert($);$是jQuery标志 function(a,b){

// return new n.fn.init(a,b)

// } jQuery的构造函数

//原生js写法页面所有节点加载完渲染完

// window.onload = function () {

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

// alert(div.innerHTML);// 获取标签里的东西这是一个div元素

// };

//jQuery的完整写法页面所有节点加载完

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

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

// alert('jquery:' +$div.html);

// })//实际开发中用ready 不用onload

//简写方法

$(function () {

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

alert($div.html() + '简写');//

})//一般用简写

</script>

jQuery选择器

#div1{

color: red;

}

.box{

color: green;

}

.list li{

margin-bottom: 10px;

}

</style>

$(function () {

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

$('.box').css({fontSize:'30px'});

$('.list li').css({

backgroundColor:'green',

// color: '#fff',

// fontSize: '20',

// marginBottom:'10px',

});

})

</script>

<body>

<div id="div1">这是一个div元素</div>

<div class="box">这是第二个div元素</div>

</ul>

</body>

选择集转移

// $('div').prev('p'); //选择div元素前面的第一个p元素

// $('div').prevAll('p'); //选择div元素前面所有的p元素

// $('div').next('p'); //选择div元素后面的第一个p元素

// $('div').nextAll('p'); //选择div元素后面所有的p元素

// $('div').closest('form'); //选择离div最近的那个form父元素

// $('div').parent(); //选择div的父元素

// $('div').children(); //选择div的所有子元素

// $('div').siblings(); //选择div的同级元素

// $('div').find('.myClass'); //选择div内的class等于myClass的元素

jQuery样式操作

$(function(){

console.log($('.div1').css('fontSize'));//16px读样式

$('.div1').css({backgroundColor:'red'});写样式

$('.div1').addClass('big');//添加行间样式

$('.div1').removeClass('div1');//移除行间样式删掉div1

})

</script>

click事件

$(function(){

$('#btn').click(function () {

$('.box').toggleClass('sty');//切换行间样式有就删没有就加 toggle切换

})

</script>

jQuery索引值

$(function(){

$('.list li').click(function () {

// alert(this.innderHTML);//原生的不能获取索引值

alert($(this).index());

// 都是指当前所点的li $this是封装好的

})

</script>

jQuery做选项卡

$(function(){

$('#btns input').click(function () {

// alert(this);

$(this).addClass('cur').siblings().

removeClass('cur');

alert($(this).index());

$('#contents div').eq($(this).index()).//eq = 内容区对应的

addClass('active').siblings().removeClass('active');

//添加激活的样式点击哪个按钮对应索引的内容会出现

})

</script>

jQuery属性操作

$(function(){

//innerHTML --> html()

console.log($('.box').html());//这是一个div元素

$('.box').html('<a href="http://www.baidu.com">百度网</a>');//不传值就是读传值就是写

$('.box').attr({title:'这是一个div!'});

//console.log($('.box').attr('class'));//box

var $src = $('#img1').attr('src');

//alert($src);//imhh/2.jpg

$('#img').attr({src:'img/1.jpg',alt:'啦啦啦'});//important 机试会考

alert($('#check').prop('checked'));//Flase

$('#check').prop({checked:true});//prop看这是的值是true还是false

// alert($('.box2').html());//<span>这是div元素里的值</span> 有标签

alert($('.box2').text());//这是div元素里的span 纯文本

})

</script>

jQuery特殊效果

// $('.box').fadeOut();//淡出

// $('.box').fadeIn();//淡入

// $('.box').fadeTogggle();//淡入

$('.box').hide();//隐藏

// $('.box').show();//显示

// $('.box').togggle();//显示隐藏

// $('.box').slideDown();//下展

// $('.box').slideUp();//上收

// $('.box').slideTogggle();//上收下展

jQuery动画

$(function(){

$('#div1').animate({

width:200,

height:200,

},1000,function () {

// alert('动画完了');

$(this).animate({marginLeft:500})

});// 默认值swing两边慢中间快 linear 匀速

})

</script>

jQuery循环

$(function(){

$(function () {

$('.list li').html('111').css({

backgroundColor:green});

$('.list li').each(function (index){//each相当于for循环 index是索引

// alert(index);

$(this).html(index);

})

</script>

2020-01-02 第十六天！

推荐阅读更多精彩内容