call和apply
<script type="text/javascript">
/*
call和apply的区别
二者都可以改变当前的this，区别在于apply方法要将参数放入数组中再传参
*/
function aa(a,b){
alert('我的this是' + this + ',我的a是' + a + ',我的b是' + b);
}
//我的this是[object Window],我的a是2,我的b是3
// aa(2,3);
//我的this是abc,我的a是2,我的b是3
// aa.call('abc',2,3);
//我的this是abc,我的a是2,我的b是3
aa.apply('abc', [2,3]);
</script>
函数的继承
<script type="text/javascript">
//父类
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();
</script>
新增选择器
<script type="text/javascript">
window.onload = function(){
var oDiv = document.querySelector('#div1');
alert(oDiv);//弹出[object HTMLDivElement]，表示选择了该Div
//如果要选择多个元素用querySelectorAll
var aLi = document.querySelectorAll('.list li');
alert(aLi.length);//8
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
jQuery加载
| <script type="text/javascript" src="[js/jquery-1.12.4.min.js] (js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | // 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'); |
| | }) |
| | </script> |
| | </head> |
| | <body> |
| | <div id="div">这是一个div元素</div> |
| | </body> |
jQuery选择器
| <style type="text/css"> |
| | #div1{ |
| | color: red; |
| | } |
| | .box{ |
| | color: green; |
| | } |
| | .list li{ |
| | margin-bottom: 10px; |
| | } |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js] (js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $(function(){ |
| | //选择元素的规则和css样式相同 |
| | $('#div1').css({color: 'pink'}); |
| | $('.box').css({fontSize: '30px'}); |
| | $('.list li').css({ |
| | background: 'green', |
| | color: '#fff', |
| | fontSize: '20px', |
| | marginBottom: '10px' |
| | }); |
| | }) |
| | </script> |
| | </head> |
| | <body> |
| | <div id="div1">这是一个div元素</div> |
| | <div class="box">这是第二个div元素</div> |
| | <ul class="list"> |
| | <li>1</li> |
| | <li>2</li> |
| | <li>3</li> |
| | <li>4</li> |
| | <li>5</li> |
| | <li>6</li> |
| | <li>7</li> |
| | <li>8</li> |
| | </ul> |
| | </body> |
选择集转移
| <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $(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'}); |
| | }) |
| | </script> |
jQuery样式操作
| <style type="text/css"> |
| | .div2{ |
| | color: red; |
| | } |
| | .big{ |
| | font-size: 30px; |
| | } |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $(function(){ |
| | /*jQuery用同一个函数即可以取值、也可以赋值*/ |
| | //读取样式 |
| | alert($('#div1').css('fontSize'));//16px |
| | //设置（写入）样式 |
| | $('#div1').css({background:'gold'}); |
| |
|
| | //增加行间样式 |
| | $('#div1').addClass('big'); |
| | //减少行间样式，多个样式用空格分开 |
| | $('#div1').removeClass('div2 big'); |
| | }) |
| | </head> |
| | <body> |
| | <div id="div1" class="div2">这是一个div元素</div> |
| | </body> |
click事件
| <style type="text/css"> |
| | .box{ |
| | width: 200px; |
| | height: 200px; |
| | background-color: gold; |
| | } |
| | .sty{ |
| | background-color: green; |
| | } |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $(function(){ |
| | // 给按钮绑定click事件 |
| | $('#btn').click(function(){ |
| | //重复切换sty样式 |
| | $('.box').toggleClass('sty'); |
| | }) |
| | }) |
| | </script> |
| | </head> |
| | <body> |
| | <input type="button" value="切换" id="btn"> |
| | <div class="box"></div> |
| | </body> |
jQuery索引值
| <style type="text/css"> |
| | .list li{ |
| | height: 30px; |
| | margin-bottom: 10px; |
| | background-color: gold; |
| | } |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $(function(){ |
| | $('.list li').click(function(){ |
| | // alert(this.innerHTML);//弹出标签中的内容 |
| | }) |
| | }) |
| | </script> |
| | </head> |
| | <body> |
| | <ul class="list"> |
| | <li>1</li> |
| | <li>2</li> |
| | <li>3</li> |
| | <li>4</li> |
| | <li>5</li> |
| | <li>6</li> |
| | <li>7</li> |
| | <li>8</li> |
| | </ul> |
| | </body> |
