jquery是現(xiàn)在前端工程師必須掌握的一項(xiàng)技能歉摧，它極大的簡(jiǎn)化了js編程灿意，相對(duì)來(lái)說(shuō)比較容易學(xué)習(xí)牡彻。
jquery:js庫(kù)扫沼，很多JS功能集成在一起。
官網(wǎng)：http://jquery.com/ 下載：https://code.jquery.com/jquery/
v3.1.1-最新版本
3.x
2.x
1.x
下載：https://code.jquery.com/jquery/
國(guó)內(nèi)目前用的最多：jQuery Core 1.7.2庄吼，最穩(wěn)定的版本
1.x:亞非拉 ie6 7 8 9 ffchrome
2.x:歐美 不兼容ie 6 7 8
3.x：新出的
jquery和js有什么區(qū)別
jquery:用戶群：不懂JS的人(只會(huì)切圖的前端后臺(tái)程序員) 相對(duì)簡(jiǎn)單缎除。
原生js：用戶群：專業(yè)的前端工程師 難。
jquery能做的原生的JS都能做到反之則不然总寻。
window.onload 器罐、domReay
$(document).ready的簡(jiǎn)寫:$(function(){//....});
<script src="js/domReady.js"></script>
<script src="js/jquery-1.7.2.js"></script>
<script>
window.onload = function(){
alert('window.onload');
}; //頁(yè)面加載完成(html css img video audio flash...)才執(zhí)行JS
domReady(function(){
alert('domReady');
}); //dom結(jié)點(diǎn)完成（html css）
$(function(){
alert('jquery');
});
$(document).ready(function(){
});
</script>
$:--jquery核心
寫任何jquery相關(guān)的東西，都是要用到$
獲取元素：
JS：document.getElementById//ByTagName
Jquery:--$('input')
就是css中的寫法
里獲取元素：css中怎么寫jquery就怎么寫
<style>
div{
width: 100px; height: 100px; background: red;
}
</style>
<script src="js/jquery-1.7.2.js"></script>
<script>
/*window.onload = function(){
var oBtn = document.getElementsByTagName('input')[0];
var oDiv = document.getElementsByTagName('div')[0];
oBtn.onclick = function(){
oDiv.style.background = 'blue';
};
};*/
//原生js寫法
$(function(){
$('input').click(function(){
$('div').css('background','yellow');
});
});
//jq寫法
</script>
<body>
<input type="button" value="變色">
<div></div>
</body>
原生JS：
onclick渐行、onmouseover轰坊、onmouseout、onmousedown殊轴、onmousemove衰倦、onmouseup、onmouseenter旁理、onmouseleave……
jq:click mouseover……事件不帶on
*選擇器
根據(jù)標(biāo)簽名：$('input')
根據(jù)ID：$('#btn1')
根據(jù)class:$('.classname')
$(function(){
$('#btn1').click(function(){
$('.on').css('background','yellow');
});
});
根據(jù)屬性來(lái)獲确恪：[屬性名='屬性值']//'"交叉（嵌套）用引號(hào)，外單引里雙引，外雙引里單引驻襟，避免發(fā)生
偽類：
:first
:last
:even
:odd
:eq(索引值)
:lt(4)小于索引值
:gt(4)大于索引值
:contains(文本)包含指定文本的(如：包含a字母)
:has(標(biāo)簽名)包含指定標(biāo)簽的
設(shè)置樣式：
.css('background','yellow');//設(shè)置一個(gè)
.css({'background':'yellow','width':200});設(shè)置多個(gè)樣式
<style>
div{
width: 200px;
height: 200px;
background: red;
}
</style>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
alert($('div').eq(0).css('width'));
});
</script>
</head>
<body>
<div></div>
</body>
顯示：.show()
隱藏：.hide();
<style>
div{
width: 100px;
height: 100px;
background: red;
display: none;
}
</style>
<script src="js/jquery-1.7.2.js"></script>
<script>
/*window.onload = function(){
var oBtn1 = document.getElementsByTagName('input')[0];
var oBtn2 = document.getElementsByTagName('input')[1];
var oDiv = document.getElementsByTagName('div')[0];
oBtn1.onclick = function(){
oDiv.style.display = 'block';
};
oBtn2.onclick = function(){
oDiv.style.display = 'none';
};
};*/
$(function(){
$('#btn1').click(function(){
//$('div').css('display','block');
$('div').show();
});
$('#btn2').click(function(){
//$('div').css('display','none');
$('div').hide();
});
});
</script>
<body>
<input type="button" value="顯示" id="btn1">
<input type="button" value="隱藏" id="btn2">
<div class="on">000</div>
</body>
