call和apply
<script type="text/javascript">
/*
call和apply的區(qū)別
二者都可以改變當(dāng)前的this，區(qū)別在于apply方法要將參數(shù)放入數(shù)組中再傳參
*/
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>
函數(shù)的繼承
<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;
}
//方法繼承：將父類的一個(gè)實(shí)例賦值給子類的原型屬性
Sclass.prototype = new Fclass();
Sclass.prototype.showJob = function(){
alert(this.job);
}
//由于已經(jīng)繼承了父類的屬性和方法，所以可以直接調(diào)用
var Driver = new Sclass('tom',18,'老司機(jī)');
Driver.showName();
Driver.showAge();
Driver.showJob();
</script>
新增選擇器
<script type="text/javascript">
window.onload = function(){
var oDiv = document.querySelector('#div1');
alert(oDiv);//彈出[object HTMLDivElement]，表示選擇了該Div
//如果要選擇多個(gè)元素用querySelectorAll
var aLi = document.querySelectorAll('.list li');
alert(aLi.length);//8
}
</script>
</head>
<body>
<div id="div1">這是一個(gè)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已經(jīng)引進(jìn)來了，這是它的一個(gè)構(gòu)造函數(shù) |
| |
|
| | //JS寫法 |
| | window.onload = function(){ |
| | var oDiv = document.getElementById('div'); |
| | alert(oDiv.innerHTML);//這是一個(gè)div元素 |
| | } |
| |
|
| | //jQuery的完整寫法 |
| | //比上面JS寫法先彈出，因?yàn)閣indow.onload是把頁面元素加載、渲染完才彈出，而ready()是把所有頁面的節(jié)點(diǎn)加載完之后就彈出了，不用等渲染了 |
| | /*$(document).ready(function(){ |
| | var $div = $('#div'); |
| | alert('jQuery:' + $div.html());//jQuery:這是一個(gè)div元素 |
| | })*/ |
| |
|
| | //簡寫方式 |
| | $(function(){ |
| | var $div = $('#div');//CSS樣式怎么寫，這里就怎么寫 |
| | //html()方法相當(dāng)于原生JS的innerHTML |
| | alert($div.html() + 'jQuery'); |
| | }) |
| | </script> |
| | </head> |
| | <body> |
| | <div id="div">這是一個(gè)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(){ |
| | //選擇元素的規(guī)則和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">這是一個(gè)div元素</div> |
| | <div class="box">這是第二個(gè)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> |
選擇集轉(zhuǎn)移
| <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()是同級(jí)的上一個(gè)元素，prevAll()是同級(jí)的上面所有的元素 |
| | //next()是同級(jí)的下一個(gè)元素，nextAll()是同級(jí)的下面所有的元素 |
| |
|
| | //修改#div1的下一個(gè)元素的樣式 |
| | $('#div1').next().css({color: 'red'}); |
| |
|
| | //修改#div1的下面所有p標(biāo)簽設(shè)置樣式 |
| | $('#div1').nextAll('p').css({color: 'red'}); |
| |
|
| | //選擇上一級(jí)的父元素 |
| | /*$('#span01').parent().css({ |
| | width:'100px', |
| | height:'100px', |
| | background:'gold' |
| | })*/ |
| |
|
| | //獲取祖級(jí)用$('#span02').parent().parent()不可取，可用 closest('div')獲取離span02最近的div |
| | //closest可以選擇離自己最近的元素，元素可以是父級(jí)，也可以是子集 |
| | $('#span01').closest('div').css({ |
| | width:'200px', |
| | height:'200px', |
| | background:'pink' |
| | }) |
| |
|
| | /* |
| | $('.list li')與$('.list').children()的區(qū)別： |
| | 原始的選擇集不一樣 |
| | $('.list li')不能通過end()回到父級(jí) |
| | $('.list').children()可以通過end()回到父級(jí) |
| | */ |
| | $('.list').children().css({ |
| | background:'gold', |
| | height:'30px', |
| | marginBottom:'10px' |
| | }).end().css({ |
| | background:'green' |
| | }) |
| |
|
| | //eq(2)是選擇索引等于2的第三個(gè)li，siblings()表示除第三個(gè)之外的其它兄弟li |
| | $('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'}); |
| |
|
| | //find()是選擇div內(nèi)的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用同一個(gè)函數(shù)即可以取值、也可以賦值*/ |
| | //讀取樣式 |
| | alert($('#div1').css('fontSize'));//16px |
| | //設(shè)置（寫入）樣式 |
| | $('#div1').css({background:'gold'}); |
| |
|
| | //增加行間樣式 |
| | $('#div1').addClass('big'); |
| | //減少行間樣式，多個(gè)樣式用空格分開 |
| | $('#div1').removeClass('div2 big'); |
| | }) |
| | </head> |
| | <body> |
| | <div id="div1" class="div2">這是一個(gè)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(){ |
| | //重復(fù)切換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);//彈出標(biāo)簽中的內(nèi)容 |
| | }) |
| | }) |
| | </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> |
