首先您需要去jQuery的官网去下载jQuery文档,然后通过javescript的src链接进去即可。恩，然后我们就可以来进行代码操作了。
<!--第一种引入方式 下载--直接引入-->
<script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<!--第二种引入方式---使用CDN引入-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
1、当所有DOM加载完毕之后执行的回调函数
写法一：
jQuery(document).ready(function(){}）
写法二：
$(document).ready(function(){}）
写法三：
$(function(){}）
注意：
1、
window.onload与jQuery的区别：前者需要图片加载之后 后者不需要。
2.jQuery ==$
2、jQuery的优势与劣势：
jq的优势:
1、轻量级：包小
2、强大的选择器
3、出色的dom操作
4、可靠的事件处理机制
5、完善的ajax
6、出色的浏览器兼容
7、链式操作方式
8、丰富的插件支持
9、完善的文档
jq的劣势:
1、
jquery分1.x、2.x、3.x的版本 1.x兼容ie6.7.8 而2.x、3.x就不在兼容。
2、不支持移动端事件
3、属性添加方式：
1、链式写法
$('#div1').css('width','100px').css('height','100px').css('background','red');
2、简单写法
$('#div1').css({
width:100,
height:100,
background:'red'
})
4、事件绑定：
第一种 on方式参数为(‘事件类型’，回调函数)
$(function(){
$('#btn').on('click',function(){
alert(1);
})
第二种 直接使用事件名添加 参数为（回调函数）
$('#btn').click(function(){
alert(22);
})
注意：
可以连加，同时给很多元素添加事件：
$('div,span,p,input').click(function(){
console.log(this.nodeName);
})
5、jQuery的一些选择器：
(除了常用的id、class、标签名 选择器，还有一些不常用选择器)
1、后代选择器
$('div ul').css({
background:'red',
})
或者：
$('#ul1>li').css({
background:'red',
})
2、临近选择器
$('#ul1~ul').css({
background:'red',
})
3、获取所有元素中第一个元素
$('div:first').css({})
4、获取所有元素中最后一个元素
$('div:last').css({})
5、获取该元素中某一个元素
$('div:nth-child(3)').css({})
6、去除所有除了给定之外的元素
$('div:not(#div1)').css({})
7、匹配所有的奇数元素，索引从0开始
$('div:even').css({})
8、匹配所有的偶数元素，索引从0开始
$('div:odd').css({})
9、选取索引为index的元素（index从0开始）
$('div:eq(1)').css({})
10、选取索引大于index的元素（index从0开始）
$('div:gt(2)').css({})
11、选取索引小于index的元素（index从0开始
$('div:lt(1)').css({})
12、内容过滤选择器
$('div:contains(1)').css({})
13、选取不包含子元素或者文本的元素
$('div:empty').css({})
14、选取含有选择区所匹配的元素的元素
$('div:has(p)').css({})
15、选取含有子元素或者文本元素
$('p:parent').css({ })
属性选择器：
16、选取属性的值为value的元素
$("div[leg=div2]").css({})
17、选取属性的值不等于value的元素
$("div[leg!=div2]").css({})
18、选取属性的值以value开始的元素
$("div[small^=1]").css({})
19、选取属性的值含有value的元素
$("div[leg*=2]").css({})
20、选取属性值以value结束的元素
$("div[leg$=2]").css({})
21、选择满足所有属性选择器的元素
$("[haha='div5'][haha*=5]").css({})
22、选取所有第二个元素
$('#wrap>div:nth-child(2)').css({})
23、选取第三个元素
$('#wrap>div:nth-child(3)').css({})
24、选取每个父元素的第一个子元素
$('#wrap>div:first-child').css({})
25、选取每个父元素的最后一个子元素
$('#wrap>div:last-child').css({})
26、选取父级中唯一的子元素。那么它将会被匹配
$('#wrap>div>p:only-child').css({})
事件绑定与移除
$('#div1').bind('mouseover mouseout mousemove',function(e){
if(e.type =='mouseover' ){
console.log('mouseover');
$(this).animate({
width:200,
height:200
},3000,'linear',function(){
alert('game over');
})
}else if(e.type =='mouseout' ){
console.log('mouseout');
$(this).animate({
width:100,
height:100
},3000,'linear',function(){
alert('game over');
})
}else if (e.type =='mousemove' ) {
console.log('mousemove');
}
})
})
注意：
$(this)--jq的写法
index()--jq的写法
事件移除：
$(function(){
$('.div1').bind('mouseover',over)
//当点击document时移除div1的事件
$('document').bind('click',function(){
$('.div1').unbind('mouseover',over)
})
function over(){
console.log('鼠标移入');
}
})
js转jq
$(function(){
//jq获取dom对象与js获取dom对象不一样
var div1 = $('.div1');
div1.css({
width:300
})
//js转jq
var div1 = $('.div1').get(0);
var div1 = $('.div1')[0];
div1.style.height = '300px';
})
