jquery是现在前端工程师必须掌握的一项技能，它极大的简化了js编程，相对来说比较容易学习。
jquery:js库，很多JS功能集成在一起。
官网：http://jquery.com/ 下载：https://code.jquery.com/jquery/
v3.1.1-最新版本
3.x
2.x
1.x
下载：https://code.jquery.com/jquery/
国内目前用的最多：jQuery Core 1.7.2，最稳定的版本
1.x:亚非拉 ie6 7 8 9 ffchrome
2.x:欧美 不兼容ie 6 7 8
3.x：新出的
jquery和js有什么区别
jquery:用户群：不懂JS的人(只会切图的前端后台程序员) 相对简单。
原生js：用户群：专业的前端工程师 难。
jquery能做的原生的JS都能做到反之则不然。
window.onload 、domReay
$(document).ready的简写:$(function(){//....});
<script src="js/domReady.js"></script>
<script src="js/jquery-1.7.2.js"></script>
<script>
window.onload = function(){
alert('window.onload');
}; //页面加载完成(html css img video audio flash...)才执行JS
domReady(function(){
alert('domReady');
}); //dom结点完成（html css）
$(function(){
alert('jquery');
});
$(document).ready(function(){
});
</script>
$:--jquery核心
写任何jquery相关的东西，都是要用到$
获取元素：
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
*选择器
根据标签名：$('input')
根据ID：$('#btn1')
根据class:$('.classname')
$(function(){
$('#btn1').click(function(){
$('.on').css('background','yellow');
});
});
根据属性来获取：[属性名='属性值']//'"交叉（嵌套）用引号，外单引里双引，外双引里单引，避免发生
伪类：
:first
:last
:even
:odd
:eq(索引值)
:lt(4)小于索引值
:gt(4)大于索引值
:contains(文本)包含指定文本的(如：包含a字母)
:has(标签名)包含指定标签的
设置样式：
.css('background','yellow');//设置一个
.css({'background':'yellow','width':200});设置多个样式
<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>
