jQuery加載
為什么JQuery寫法彈出的速度快
比JS原生寫法先彈出，因?yàn)閣indow.onload是把頁面元素加載、渲染完才彈出，而ready()是把所有頁面的節(jié)點(diǎn)加載完之后就彈出了，不用等渲染了
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery加載</title>
<script type="text/javascript" src="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');
alert($div.html() + '簡寫');//這是一個(gè)div元素簡寫
})
</script>
</head>
<body>
<div id="div">這是一個(gè)div元素</div>
</body>
</html>
jquery選擇器
jquery選擇器可以快速地選擇元素，選擇規(guī)則和css樣式相同，使用length屬性判斷是否選擇成功。
$(document) //選擇整個(gè)文檔對(duì)象
$('li') //選擇所有的li元素
$('#myId') //選擇id為myId的網(wǎng)頁元素
$('.myClass') // 選擇class為myClass的元素
$('input[name=first]') // 選擇name屬性等于first的input元素
$('#ul1 li span') //選擇id為為ul1元素下的所有l(wèi)i下的span元素
對(duì)選擇集進(jìn)行修飾過濾(類似CSS偽類)
$('#ul1 li:first') //選擇id為ul1元素下的第一個(gè)li
$('#ul1 li:odd') //選擇id為ul1元素下的li的奇數(shù)行
$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個(gè)li
$('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個(gè)之后的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素
對(duì)選擇集進(jìn)行函數(shù)過濾
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等于myClass的div元素
$('div').filter('.myClass'); //選擇class等于myClass的div元素? ? ? ? 過濾filter
$('div').first(); //選擇第1個(gè)div元素
$('div').eq(5); //選擇第6個(gè)div元素
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery選擇器</title>
<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"></script>
<script type="text/javascript">
$(function () {
$('#div1').css({color:'pink'});
$('.box').css({fontSize:'30px'});
$('.list li').css({
background:'skyblue',
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>
</html>
選擇集轉(zhuǎn)移
$('div').prev('p'); //選擇div元素前面的第一個(gè)p元素---同級(jí)的上一個(gè)元素
$('div').prevAll('p'); //選擇div元素前面所有的p元素---同級(jí)的上面所有的元素
$('div').next('p'); //選擇div元素后面的第一個(gè)p元素---同級(jí)的下一個(gè)元素
$('div').nextAll('p'); //選擇div元素后面所有的p元素---同級(jí)的下面所有的元素
$('div').closest('form'); //選擇離div最近的那個(gè)form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級(jí)元素
$('div').find('.myClass'); //選擇div內(nèi)的class等于myClass--選孩子的
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇集轉(zhuǎn)移</title>
<script type="text/javascript" src="JS/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
// $('#div1').next().css({color:'red'});//修改div元素后面的第一個(gè)p元素樣式
$('#div1').nextAll('p').css({color:'red'});/*修改div元素后面所有的p元素樣式*/
/*選兄弟的*/
//prev()前面的
//prevAll()前面所有的
// $('#span01').parent().css({
// width:'100px',
// height:'100px',
// background:'gold'
// });//選擇父親元素
$('#span01').closest('div').css({
width:'100px',
height:'100px',
background:'gold'
});//選擇離他最近的祖先元素
// $('.list li')//選擇完.list li不能返回父元素
// $('.list li')與$('.list').children()的區(qū)別：
// 原始的選擇集不一樣
// $('.list li')不能通過end()回到父級(jí)
// $('.list').children()可以通過end()回到父級(jí)
$('.list').children().css({
height:'30px',
background:'gold',
marginBottom:'10px',
}).end().css({
background:'orange'
})
//eq(2)是選擇索引等于2的第三個(gè)li，siblings()表示除第三個(gè)之外的其它兄弟li
$('.list2 li:eq(2)').css({
background:'yellow'
}).siblings().css({
background:'skyblue'});
//find()是選擇div內(nèi)的class等于link1的元素
$('#div2').find('.link1').css({color:'red'});
})
</script>
</head>
<body>
<div id="div1">這是一個(gè)div元素</div>
<div>這是第二個(gè)div元素</div>
<p>這是一個(gè)p元素</p>
<div id="#div2">
<p>
<a href="#" class="link1">百度網(wǎng)</a>
<span id="span01">這是個(gè)SPAN</span>
</p>
</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>
<ul class="list2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
