我们会发现原生的JS编程很麻烦,尤其在兼容性的问题
选择元素,权限兼容的只有getElementById和getElementsByTagName;其他方法都有兼容问题
样式操作也有兼容问题,还得我们自己封装，封装getStyle（）
动画也麻烦,也得自己封装，封装animation（）
HTML节点操作也挺麻烦的
JS里面麻烦的都是和DOM编程有关的,有兼容问题,还的我们自己封装.
jQuery是原生JS封装的,简化了JS的DOM编程，完美的解决了原生js在DOM操作上的难题
口号:
写更少的代码，做更多的事情
官方自我介绍:
jQuery是一个快速、小型的、特性很多的JS库，它把很多事儿都变得简单。jQuery是免费的、开源的。
版本线：
1.x版本
2.x版本
3.x版本
jQuery分压缩版和未压缩版
$ 就是jQuery的核心，query就是选择的意思
**语法**
$(‘选择器’)，jQuery(‘选择器’)
$可以用jQuery代替，$和jQuery是同一个函数
选中某个或某类元素
<style type="text/css">
p {
float:left;
width: 60px;
height: 60px;
background-color: #ccc;
margin-left: 10px;
margin-top: 10px;
}
</style>
<p></p>
<p></p>
<p></p>
<p></p>
<script src="jQuery.js"></script>
<script>
console.log($)
$('p').css('background-color','red');
</script>
哪怕选择的是一个单独的元素,返回的也是一个类数组
console.log($('#box'));
// [div#box]
既然是类数组，就不能直接跟原生js的语法
$('#box').style.backgroundColor = 'red';
上面写法是错的，$()选出的是jQuery对象，
如果想使用元素方法，可以加[0]，将jQuery对象转成元素对象
$('#box')[0].style.backgroundColor = 'red';
$(‘选择器’)里面的引号不能丢，在jQuery中只有是以下几个不用加引号，其他全部需要
不需要加引号的选择
$(this)
$(document)
$(window)
jQuery支持的CSS2.1所有选择器,也支持部分CSS3的选择器
$('div')
$('.box')
$('.box li')
$('*')
// 文档加载完毕后执行
$(document).ready(function(){
})
// 简写方案
$(function(){
console.log($('div'))
})
这个是jQuery 的发明 和js没有关系
写在引号里面,:当成筛选的功能符
以下都是序号，筛选器,
$('p');
$('p').css('background-color','red');
$('p:first');
$('p:first').css('background-color','red');
$('p:last');
$('p:last').css('background-color','red');
: eq(num)； num是要筛选出来第几个p的下标，从0开始
$('p:eq(2)');
$('p:eq(2)').css('background-color','red');
:lt(num)； 选中下标小于num的所有标签
$('p:lt(2)');
$('p:lt(2)').css('background-color','red');
:gt(num); 选中下标大于num的所有标签
$('p:gt(2)');
$('p:gt(2)').css('background-color','red');
等于就是:eq()
:odd 获取下标为奇数的标签
$('p:odd');
$('p:odd').css('background-color','red');
:even 获取下标为偶数的标签
$('p:even');
$('p:even').css('background-color','red');
注意哦
下标是从0开始的，也就是说下标为偶数的标签其实是我们看起来的奇数标签
$('p').eq(2);
$('p').eq(2).css('background-color','red');
提炼出来的好处是，可以使用变量
var num = 2;
$('p').eq(num).css('background-color','red');
// 不提炼出来的方法，只用用字符串拼接了
$('p:gt('+ num +')').css('background-color','red');
还可以组合使用
$('p:even').eq(2).css('background-color','red');
$('div').first().css('background-color','red')
$('div').last().css('background-color','red')
$('div').not('.ta').css('background-color','red')
$('div').click(function(){
console.log($(this).hasClass('ta'))
})
判断是不是返回true,或false
判断点击的这个p标签是不是有这个类叫做t
$('p').click(function(){
alert($(this).is('.t'))
})
还可以判断是不是奇数的,is()里面可以写筛选器
$('p').click(function(){
alert($(this).is(':odd'))
})
按照选择器选中的元素,然后在通过序号挑选
<div class="box1">
<p></p>
<p></p>
<p></p>
</div>
<div class="box2">
<p></p>
<p></p>
<p></p>
</div>
<script>
$('.box2 p').eq(1);
$('p').eq(1);
//按照需要的规则,上面两种写法选中并不是同一个p标签
</script>
也就是说 $()函数将返回一个对象队列,用eq来精确选择这个序号的某个元素.
返回这个元素在亲兄弟中的排名,无视选择器怎么选.
<div class="box1">
<p></p>
<p></p>
<p></p>
</div>
<div class="box2">
<p></p>
<p></p>
<p></p>
</div>
<script>
$('p').click(function(){
alert($(this).index());
})
</script>
$(this).index()是一个很常见的写法,表示触发这个事件的元素,在亲兄弟中的排名.
利用index()方法写对应
// 事件绑定在box1里面的p
$('.box1 p').click(function(){
// 改变的是box2里面的对应的p
$('.box2 p').eq($(this).index()).css("background-color","red");
})
表示遍历节点,也叫作迭代符合条件的节点
$('p').each(function(i){
// i 为遍历的下标 0,1,2...
$(this).css('width',50*i)
})
size() 方法和 length 属性是一样的的, 获取jQuery对象中元素的个数.
这两个数字永远相同
$('p').length;
$('p').size();
get()方法和eq()方法基本一致,都仰赖$()的序列,eq()返回的是jQuery对象.
而get()方法返回原生的JS元素,类似于直接jQuery元素加[0]
$('p').get(0).innerHTML = '';
$('p')[0].innerHTML = '';
CSS方法可以读取样式，可以设置样式
读取样式，可以读取计算后的样式，写一个参数，为获取值的属性
参数为属性字符串，必须加引号
读取的值有单位
$('p:first').css('background-color');
如果只设置一个属性值，需要穿两个参数，
第一个参数为需要设置值的属性
第二个参数为需要设置的值，如果为数值，不需要加单位，
$('p:first').css('background-color'，'blue');
$('p:first').css('width',200);
如果想要同时设置多个属性值，可以写成JSON
$('p:lt(3)').css({
'width': 100,
'height': 100,
'background-color': 'blue'
});
当然你也可以写多条单独设置样式
设置的属性不仅可以为改变后的值，还可以设置+= 的值，就是在原有的基础上加多少像素
$('p:eq(3)').css('width','+=20px');
$('p:eq(3)').css('width','+=20');
以上两种写法一样
$('div').attr('data-title');
$('div').attr('data-title','wuwei');
$('div').addClass('title')
$('div').removeClass('title')
$('div').click(function(){
$('div').toggleClass('title')
})
就是innerHTML
$('div').html(); // 获取值
$('div').html('<h2>this is h2</h2>'); // 设置值
就是innerText
$('div').text(); // 获取值
$('div').text('<h2>this is h2</h2>'); // 设置值
选中所有的子元素
表示选取亲儿子,不选择后代,选择所有的子元素
$('#box').children()
选择所有子元素中的div元素
$('#box').children('div')
还可以添加筛选器
$('#box').children('div:odd')
查询所有的后代选择器
返回后代所有元素的列表
$('#box').find('p')
注意,和children()方法不一样,find()方法里面,必须写参数,表示后代的谁,
find就是寻找的意思,就是你找后代里的谁
找父元素,任何一个元素只有一个父元素,
$('p').parent()
找所有的祖先元素,可以传参数,找哪一个祖先
$('p').parents('div')
找所有的亲兄弟元素节点
$('p').sibling()
可以加选择器
$('p').sibling('div')
前一个兄弟,后一个兄弟,前所有的兄弟,后所有的兄弟元素节点
查找定位父级
$('p').offsetParent('div')
在父元素后面添加子节点
父节点.append(子节点)
$('#box').append('<p>好的</p>')
var $p = $('<p>this is p</p>');
// 不能这么写 ,下面的写法是选择文档中的p标签了
$('p')
$('<p></p>')
$()不仅仅能选择节点也能创建节点
将一个jQuery元素添加到另外一个元素中
和append()方法是相反的,被动形式,追加于
$('<p>好的</p>').append($('#box'))
在父元素最前面添加节点元素
$('#box').prepend('<p>好的</p>')
prepend()被动形式插入到父元素节点最前面
$('<p>好的</p>').prepend($('#box'))
在选中的元素后面插入一个兄弟元素节点
所有p标签后面插入一个h3兄弟元素
$('p').after('<h3>我是h3标签</h3>')
在前面插入一个兄弟元素节点
$('p').before('<h3>我是h3标签</h3>')
不同于原生的方法,在兄弟节点前插入新的节点
$('<p>好的</p>').insertBefore($('p')[2])
给选中的元素外边添加一个包裹元素
$('div').wrap('<p></p>')
将所有的选中的元素外套一个元素
$('div').wrapAll('<p></p>')
将选中的元素替换掉,元素节点替换
$('div').replaceWith('<p></p>')
清空元素里面的内容
$('div').empty()
删除节点,删除页面上所有的p标签
$('div').remove()
节点克隆
参数为布尔值
$('div').clone();
$('div').clone(true);
// true表示要克隆div元素身上的事件
在jQuery里面,就连点击事件都变成回调函数了,
事件名一律不加on
$('.box1').click(function(){
// 这里就是点击box1要做的事情
})
例子:
// 鼠标进入
$('p').mouseenter(function(){
$(this).css('background-color','blue');
})
// 鼠标离开
$('p').mouseleave(function(){
$(this).css('background-color','red');
})
$('.box1').on('click',function(){
// 这里就是点击box1要做的事情
})
$('.box1').off('click')
$('.box1').one('click',function(){
// 这里就是点击box1要做的事情
})
$('.box1').hover(function(){
// 鼠标移入触发
console.log(1);
},function(){
// 鼠标移出触发
console.log(2);
})
e.target 获取的是元素的DOM元素
$(document).click(function(e){
console.log(e.target); // 原生DOM元素
})
动画方法 animate
第一个参数：终点JSON
第二个参数： 动画运行的时间，毫秒
$('p:eq(3)').animate({'margin-top': 300},2000);
第三个参数为动画运行完后的参数
背景颜色是不能在动画里渐变的,只有在回调里完成,如果想让颜色慢慢渐变需要使用css3技术.
$('p:eq(3)').animate({'margin-top': 300},2000，function(){
// alert('运行完成')；
$(this).css('background-color','red')；
});
jQuery动画默认不是匀速的 ，是easeInOut
$('p:eq(3)').animate({'top': 300},2000);
$('p:eq(3)').animate({'left': 300},2000);
jQuery的动画和我们封装的不一样，不是斜着走的，而是先向下运动，结束后在向右移动
因为jQuery默认有一个处理机制，叫做 动画排队
动画排队：
当一个元素接收到了两个animate命令后，后面的animate会排队
所以上面的动画，先竖着跑在横着跑，总动画时长为4000毫秒
如果想斜着跑就写在一个animate里面
$('p:eq(3)').animate({'top': 300,'left': 300},2000);
我们自己封装的动画方法不如它的原因就在这里，没有动画排队
这里的p选择的是多个元素，不排队同时运行动画
$('p').animate({'top': 300},2000);
show()显示,hide()隐藏,toggle()切换
使用方法:
show([time[,callback]])
参数都是可选的
$('div').show(); // 让div元素显示
$('div').hide(); // 让div元素隐藏,添加display:none
$('div').toggle();// 切换显示状态,自行带有判断,如果显示,则隐藏,如果隐藏则显示
速度单词,fast normal, slow ,参数为字符串
如果传入的为时间,则单位为毫秒数
让元素在显示与影藏之间动画运动1s,还有透明度变换,
$('div').show(1000); // 从左上角徐徐展开
$('div').hide(1000); // 徐徐缩小到左上角,运动完成添加display:none
$('div').toggle(1000);// 切换显示状态,自行带有判断,如果显示,则隐藏,如果隐藏则显示
$('input:eq(0)').click(function(){
$('div').show(1000,function(){
$(this).css('background','red'); // 动画运行完执行的回调函数
});
})
滑动,卷帘运动,这个动画改变的就只有元素的高度
使用方法:
slideDown([time[,fn]])
参数都是可选的
slideDown()方法的动画机理
一个display:none;的元素,瞬间显示,瞬间高度变为0,然后jQuery自己捕捉原有的height作为动画的重点.
最好不要用行内元素做动画
等价于:
$(‘div’).show(); // 瞬间显示
var oldHeight = $(‘div’).css(‘height’); // 记住原有高度
$(‘div’).css(‘height’:0); // 将高度设置为0
$(‘div’).animate({‘height’:oldHeight},1000); // 执行高度从0到原有高度的动画
$('div').slideDown(); // 下滑展开
$('div').slideUp(); // 上滑收回
$('div').slideToggle();// 滑动切换
$('input:eq(0)').click(function(){
$('div').slideDown();
})
$('input:eq(1)').click(function(){
$('div').slideUp();
})
$('input:eq(2)').click(function(){
$('div').slideToggle();
})
速度单词,fast normal, slow ,参数为字符串
如果传入的为时间,则单位为毫秒数
$('div').slideDown(1000);
$('div').slideDown(function(){
$(this).css('background','red')
});
$('div').show(1000,function(){
$(this).slideUp(1000,function(){
$(this).slideDown(1000,function(){
$(this).hide(1000)
})
})
})
淡入淡出的一系列方法
如果元素有opacity属性,一定要理解,你所设置的opacity值为,淡入的终点值,如果你设置为0,那么元素将永远淡入不了;
fadeIn() 动画机理:
一个display:none的元素,瞬间可见,然后透明度瞬间变为opacity:0,然后自己的opacity开始变换,如果自己没有设置opacity,就变为1
$('div').fadeIn(); // 淡入
$('div').fadeOut(); // 淡出
$('div').fadeTo(); // 淡入到哪个数字,不传参数没效果,最好是时间和最终的opacity值一样设置.
// 这个比较特殊,如果起点至比较大,就是淡出,起点值小,就是淡入
$('div').fadeToggle(); // 淡入淡出切换
$('div').fadeIn(1000); // 淡入过程1000完成
$('div').fadeOut(1000); // 淡出
$('div').fadeTo(1000); // 第一参数为过渡时间,第二个但是才是淡入到哪个数字
$('div').fadeToggle(100); // 淡入淡出切换
$('div').fadeIn(1000,function(){
});
比较特殊的是fadeTo()
fadeTo() 方法第二个参数是,透明度变换的终点值,第三个参数才是回调函数
$('div').fadeTo(1000,0.6,function(){
});
关于动画停止一共有四种,不同的参数情况不同
stop();
stop(true);
stop(true,true);
stop(false,true);
stop ()停止动画如果没有参数,则表示停止当前的animate动画,但是不清除动画队列,立即执行后面的animate动画
$('div').stop();
停止当前animate动画,并且清除动画队列,盒子此时留在停止动画时的位置
$('div').stop(true);
停止当前animate动画,盒子瞬间停当前animate动画的终点位置,并且清除动画队列,
可以理解为瞬间执行完当前动画,并且清除动画队列
$('div').stop(true,true);
瞬间完成当前的animate动画,但是不会清除动画队列,并且执行后面的动画,
$('div').stop(false,true);
有人可能会有疑问,为什么没有stop(true,false);
其实stop(true),就是stop(true,false);后面的false可以省略,
现在就明白了,stop()就是stop(false,false);
第一个参数为是否清除动画队列,true,清除动画队列,false不清除动画队列
第二个参数为,停止当前animate动画,停止后动画的位置,true为,瞬间结束动画,动画停止后位置为当前动画的终点,false,停止动画值,元素停留在停止动画的位置
动画案例:
<style type="text/css">
div {
position:absolute;
top:100px;
left:100px;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<input type="button" value="stop()">
<input type="button" value="stop(true)">
<input type="button" value="stop(true,true)">
<input type="button" value="stop(false,true)">
<div></div>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
// 添加四个动画
$('div').animate({'left':800},2000);
$('div').animate({'top':300},2000);
$('div').animate({'left':100},2000);
$('div').animate({'top':100},2000);
$('input:eq(0)').click(function(){
$('div').stop();
})
$('input:eq(1)').click(function(){
$('div').stop(true);
})
$('input:eq(2)').click(function(){
$('div').stop(true,true);
})
$('input:eq(3)').click(function(){
$('div').stop(false,true);
})
</script>
每次点击都会在动画队列里添加一个动画,动画会排队
<script type="text/javascript">
$('input:eq(0)').click(function(){
$('div').animate({'left':100},1000);
})
$('input:eq(1)').click(function(){
$('div').animate({'left':900},1000);
})
</script>
就像定时器,设表先关
用动画先关闭前面的动画
可以连续打点的调用,先清除动画队列,再行新的动画
$('input:eq(0)').click(function(){
$('div').stop().animate({'left':100},1000);
})
$('input:eq(1)').click(function(){
$('div').stop().animate({'left':900},1000);
})
瞬间完成所有动画队列
$('input:eq(4)').click(function(){
$('div').finish();
})
延迟,可以使用连续打点,必须放在运动语句之前
$('div').delay(1000).animate({'left':500},1000);
$('div').delay(1000).slideUp();
注意hide()不加参数,就不是动画,是瞬间完成的,加参数哪怕数字1也是动画
$('div').delay(1000).hide(3000);
判断一个元素是否在运动中,可以防止动画积累
$('div:eq(3)').animate({'width':900},8000);
$('div').click(function(){
alert($(this).is(':animated'))
});