jQuery

一、JQuery了解

1 .原生JS的问题

咱们会发现原生的JS编程很费事,尤其在兼容性的问题

挑选元素,权限兼容的只要getElementById和getElementsByTagName;其他办法都有兼容问题
款式操作也有兼容问题,还得咱们自己封装，封装getStyle（）
动画也费事,也得自己封装，封装animation（）
HTML节点操作也挺费事的

JS里边费事的都是和DOM编程有关的,有兼容问题,还的咱们自己封装.

jQuery是原生JS封装的,简化了JS的DOM编程，完美的处理了原生js在DOM操作上的难题

2. JQuery

标语:

​ 写更少的代码，做更多的工作

官方毛遂自荐:

​ 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>

1. $() 挑选出来的是一个类数组

哪怕挑选的是一个独自的元素,回来的也是一个类数组

console.log($('#box'));
// [div#box]

既然是类数组，就不能直接跟原生js的语法

$('#box').style.backgroundColor = 'red';

上面写法是错的，$()选出的是jQuery目标，

假如想运用元素办法，能够加[0]，将jQuery目标转成元素目标

$('#box')[0].style.backgroundColor = 'red';

2. 运用办法（引号问题）

$(‘挑选器’)里边的引号不能丢，在jQuery中只要是以下几个不必加引号，其他悉数需求

不需求加引号的挑选

$(this)
$(document)
$(window)

3. 挑选器问题

jQuery支撑的CSS2.1一切挑选器,也支撑部分CSS3的挑选器

$('div')
$('.box')
$('.box li')
$('*')

4. 文档加载

// 文档加载完毕后履行
$(document).ready(function(){
})
// 简写计划
$(function(){
	console.log($('div'))
})

三. 挑选器

这个是jQuery 的创造 和js没有联系

写在引号里边,:当成挑选的功用符

以下都是序号，挑选器,

1. 挑选一切的p标签

$('p');
$('p').css('background-color','red');

2. 挑选榜首个p标签

$('p:first');
$('p:first').css('background-color','red');

3. 终究一个p标签

$('p:last');
$('p:last').css('background-color','red');

4. 恣意一个p标签

: eq(num)； num是要挑选出来第几个p的下标，从0开端

$('p:eq(2)');
$('p:eq(2)').css('background-color','red');

5. 选中某一个规模的p标签

: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()

6. 获取奇偶数

:odd 获取下标为奇数的标签

$('p:odd');
$('p:odd').css('background-color','red');

:even 获取下标为偶数的标签

$('p:even');
$('p:even').css('background-color','red');

留意哦
下标是从0开端的，也便是说下标为偶数的标签其实是咱们看起来的奇数标签

7. 特别的过滤器的办法

7.1 eq能够独自的提炼为办法，能够接连打点调用

$('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');

7.2 first() last() 挑选榜首个终究一个元素的办法

$('div').first().css('background-color','red')

---

$('div').last().css('background-color','red')

7.3 not() 扫除那些元素

$('div').not('.ta').css('background-color','red')

7.4 hasClass() 判别是否具有某个类名

$('div').click(function(){
	console.log($(this).hasClass('ta'))
})

8. is()

判别是不是回来true,或false

判别点击的这个p标签是不是有这个类叫做t

$('p').click(function(){
	alert($(this).is('.t'))
})

还能够判别是不是奇数的,is()里边能够写挑选器

$('p').click(function(){
	alert($(this).is(':odd'))
})

四. 序与迭代

1. 序号 eq()

依照挑选器选中的元素,然后在经过序号挑选

<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来准确挑选这个序号的某个元素.

2. index() 办法

回来这个元素在亲兄弟中的排名,无视挑选器怎样选.

<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");
})

3. each() 办法 迭代

表明遍历节点,也叫作迭代契合条件的节点

$('p').each(function(i){
	// i 为遍历的下标 0,1,2...
	$(this).css('width',50*i)
})

4. size() 办法 和 length 特点

size() 办法和 length 特点是相同的的, 获取jQuery目标中元素的个数.

这两个数字永久相同

$('p').length;
$('p').size();

5. get() 办法

get()办法和eq()办法根本共同,都仰赖$()的序列,eq()回来的是jQuery目标.

而get()办法回来原生的JS元素,类似于直接jQuery元素加[0]

$('p').get(0).innerHTML = '';
$('p')[0].innerHTML = '';

五. CSS 办法

CSS办法能够读取款式，能够设置款式

1. 读取款式值

读取款式，能够读取核算后的款式，写一个参数，为获取值的特点

参数为特点字符串，有必要加引号

读取的值有单位

$('p:first').css('background-color');

2. 设置一个特点值

假如只设置一个特点值，需求穿两个参数，

榜首个参数为需求设置值的特点

第二个参数为需求设置的值，假如为数值，不需求加单位，

$('p:first').css('background-color'，'blue');
$('p:first').css('width',200);

3. 一起设置多个特点值

假如想要一起设置多个特点值，能够写成JSON

$('p:lt(3)').css({
	'width': 100,
	'height': 100,
	'background-color': 'blue'
});

当然你也能够写多条独自设置款式

4. 设置的特点能够多样

设置的特点不只能够为改动后的值，还能够设置+= 的值，便是在原有的基础上加多少像素

$('p:eq(3)').css('width','+=20px');
$('p:eq(3)').css('width','+=20');

以上两种写法相同

5. 设置获取自定义特点attr()

5.1 获取自定义特点

$('div').attr('data-title');

5.2 设置自定义特点

$('div').attr('data-title','wuwei');

6. 关于class类名

6.1 增加类名 addClass()

$('div').addClass('title')

6.2 删去类名 removeClass()

$('div').removeClass('title')

6.3 切换类名 triggerClass()

$('div').click(function(){
	$('div').toggleClass('title')
})

7. 关于节点值

7.1 html()

便是innerHTML

$('div').html();  // 获取值
$('div').html('<h2>this is h2</h2>'); // 设置值

7.2 text()

便是innerText

$('div').text();  // 获取值
$('div').text('<h2>this is h2</h2>'); // 设置值

六. 节点联系

1. children()

选中一切的子元素

表明选取亲儿子,不挑选子孙,挑选一切的子元素

$('#box').children()

挑选一切子元素中的div元素

$('#box').children('div')

还能够增加挑选器

$('#box').children('div:odd')

2. find()

查询一切的子孙挑选器

回来子孙一切元素的列表

$('#box').find('p')

留意,和children()办法不相同,find()办法里边,有必要写参数,表明子孙的谁,

find便是寻觅的意思,便是你找子孙里的谁

3. parent()

找父元素,任何一个元素只要一个父元素,

$('p').parent()

4. parents()

找一切的先人元素,能够传参数,找哪一个先人

$('p').parents('div')

5. sibling()

找一切的亲兄弟元素节点

$('p').sibling()

能够加挑选器

$('p').sibling('div')

6. prev() next() prevAll() nextAll()

前一个兄弟,后一个兄弟,前一切的兄弟,后一切的兄弟元素节点

7. offsetParent()

查找定位父级

$('p').offsetParent('div')

七. 节点操作

1. append()

在父元素后边增加子节点

父节点.append(子节点)

$('#box').append('<p>好的</p>')

1.2 $()能够将一个一般的节点字符串转成jQuery目标

var $p = $('<p>this is p</p>');
// 不能这么写 ,下面的写法是挑选文档中的p标签了
$('p')

1.3 创立节点

$('<p></p>')

$()不只仅能挑选节点也能创立节点

2. appendTo()

将一个jQuery元素增加到别的一个元素中

和append()办法是相反的,被迫方式,追加于

$('<p>好的</p>').append($('#box'))

3. prepend()

在父元素最前面增加节点元素

$('#box').prepend('<p>好的</p>')

4. prependTo()

prepend()被迫方式刺进到父元素节点最前面

$('<p>好的</p>').prepend($('#box'))

5. after()

在选中的元素后边刺进一个兄弟元素节点

一切p标签后边刺进一个h3兄弟元素

$('p').after('<h3>我是h3标签</h3>')

6. before()

在前面刺进一个兄弟元素节点

$('p').before('<h3>我是h3标签</h3>')

7.insertBefore()

不同于原生的办法,在兄弟节点前刺进新的节点

$('<p>好的</p>').insertBefore($('p')[2])

8. wrap()

给选中的元素外边增加一个包裹元素

$('div').wrap('<p></p>')

9. wrapAll()

将一切的选中的元素外套一个元素

$('div').wrapAll('<p></p>')

10. replaceWith()

将选中的元素替换掉,元素节点替换

$('div').replaceWith('<p></p>')

11. empty()

清空元素里边的内容

$('div').empty()

12. remove()

删去节点,删去页面上一切的p标签

$('div').remove()

13. clone

节点克隆

参数为布尔值

$('div').clone();
$('div').clone(true);
// true表明要克隆div元素身上的工作

八. 工作监听

1. 经过工作名绑定工作

在jQuery里边,就连点击工作都变成回调函数了,

工作名一概不加on

$('.box1').click(function(){
	// 这儿便是点击box1要做的工作
})

比如:

// 鼠标进入
$('p').mouseenter(function(){
	$(this).css('background-color','blue');
})
// 鼠标脱离
$('p').mouseleave(function(){
	$(this).css('background-color','red');
})

2. 经过on绑定工作

$('.box1').on('click',function(){
	// 这儿便是点击box1要做的工作
})

3. 免除工作绑定off

$('.box1').off('click')

4. 只绑定一次工作one()

$('.box1').one('click',function(){
	// 这儿便是点击box1要做的工作
})

5. 移入移出工作

$('.box1').hover(function(){
	// 鼠标移入触发
	console.log(1);
},function(){
	// 鼠标移出触发
	console.log(2);
})

6. 工作目标工作源

e.target 获取的是元素的DOM元素

$(document).click(function(e){
	console.log(e.target);   // 原生DOM元素
})

九. animate 办法

动画办法 animate

1. animate 办法的运用

榜首个参数：结尾JSON

第二个参数： 动画运转的时刻，毫秒

 $('p:eq(3)').animate({'margin-top': 300},2000);

2. 动画运转完的回调函数

第三个参数为动画运转完后的参数

布景色彩是不能在动画里突变的,只要在回调里完结,假如想让色彩渐渐突变需求运用css3技能.

$('p:eq(3)').animate({'margin-top': 300},2000，function(){
	// alert('运转完结')；
	$(this).css('background-color','red')；
});

jQuery动画默许不是匀速的 ，是easeInOut

3. 动画排队

3.1. 同一个元素的不同动画会排队

 $('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);

咱们自己封装的动画办法不如它的原因就在这儿，没有动画排队

3.2. 不同的元素动画不会排队 是一起的

这儿的p挑选的是多个元素，不排队一起运转动画

 $('p').animate({'top': 300},2000);

十. 动画相关的办法

1. 内置的show(),hide(),toggle()办法

show()显现,hide()躲藏,toggle()切换

运用办法:

show([time[,callback]])

参数都是可选的

1.1 没有参数的时分

$('div').show();  // 让div元素显现
$('div').hide();  // 让div元素躲藏,增加display:none
$('div').toggle();// 切换显现状况,自行带有判别,假如显现,则躲藏,假如躲藏则显现

1.2 假如有数值参数,将变为动画,榜首个参数为运动速度或时刻

速度单词,fast normal, slow ,参数为字符串

假如传入的为时刻,则单位为毫秒数

让元素在显现与影藏之间动画运动1s,还有透明度改换,

$('div').show(1000);  // 从左上角缓缓打开
$('div').hide(1000);  // 缓缓缩小到左上角,运动完结增加display:none
$('div').toggle(1000);// 切换显现状况,自行带有判别,假如显现,则躲藏,假如躲藏则显现

1.3 第二个参数为运动完结后的回调

$('input:eq(0)').click(function(){
	$('div').show(1000,function(){
		$(this).css('background','red');  // 动画运转完履行的回调函数
	});
})

2. slideDown(),slideUp(),slideToggle()

滑动,卷帘运动,这个动画改动的就只要元素的高度

运用办法:

slideDown([time[,fn]])

参数都是可选的

2.1 不加参数的状况

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();
})

2.2 榜首个参数为运动速度或时刻

速度单词,fast normal, slow ,参数为字符串

假如传入的为时刻,则单位为毫秒数

$('div').slideDown(1000);

2.3 第二个参数为回调函数

$('div').slideDown(function(){
	$(this).css('background','red')
});

2.4 结合上面两种办法主动履行

$('div').show(1000,function(){
	$(this).slideUp(1000,function(){
		$(this).slideDown(1000,function(){
			$(this).hide(1000)
		})
	})
})

3. fadeIn(),fadeOut(),fadeTo(),fadeToggle();

淡入淡出的一系列办法

假如元素有opacity特点,一定要了解,你所设置的opacity值为,淡入的结尾值,假如你设置为0,那么元素将永久淡入不了;

fadeIn() 动画机理:

一个display:none的元素,瞬间可见,然后透明度瞬间变为opacity:0,然后自己的opacity开端改换,假如自己没有设置opacity,就变为1

3.1 不加参数履行淡入淡出

$('div').fadeIn();      // 淡入
$('div').fadeOut();     // 淡出 
$('div').fadeTo();      // 淡入到哪个数字,不传参数没作用,最好是时刻和终究的opacity值相同设置.
			// 这个比较特别,假如起点至比较大,便是淡出,起点值小,便是淡入
						

$('div').fadeToggle();  // 淡入淡出切换

3.2 榜首个参数为速度或时刻

$('div').fadeIn(1000);      // 淡入进程1000完结
$('div').fadeOut(1000);     // 淡出 
$('div').fadeTo(1000);      // 榜首参数为过渡时刻,第二个可是才是淡入到哪个数字
$('div').fadeToggle(100);  // 淡入淡出切换

3.3 第二个参数是回调函数

$('div').fadeIn(1000,function(){
});

比较特别的是fadeTo()

fadeTo() 办法第二个参数是,透明度改换的结尾值,第三个参数才是回调函数

$('div').fadeTo(1000,0.6,function(){
});

4. stop() 中止动画

关于动画中止一共有四种,不同的参数状况不同

stop();
stop(true);
stop(true,true);
stop(false,true);

4.1 stop()没有参数的状况

stop ()中止动画假如没有参数,则表明中止当时的animate动画,可是不铲除动画行列,当即履行后边的animate动画

$('div').stop();

4.2 stop(true)

中止当时animate动画,而且铲除动画行列,盒子此刻留在中止动画时的方位

$('div').stop(true);

4.3 stop(true,true)

中止当时animate动画,盒子瞬间停当时animate动画的结尾方位,而且铲除动画行列,

能够了解为瞬间履行完当时动画,而且铲除动画行列

$('div').stop(true,true);

4.4 stop(false,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>

4.5 stop()能够用来避免动画堆集

每次点击都会在动画行列里增加一个动画,动画会排队

<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);
})

5. finish()

瞬间完结一切动画行列

$('input:eq(4)').click(function(){
	$('div').finish();
})

6. deley()

推迟,能够运用接连打点,有必要放在运动句子之前

$('div').delay(1000).animate({'left':500},1000);
$('div').delay(1000).slideUp();

留意hide()不加参数,就不是动画,是瞬间完结的,加参数哪怕数字1也是动画

$('div').delay(1000).hide(3000);

7. is(“:animted”)

判别一个元素是否在运动中,能够避免动画堆集

$('div:eq(3)').animate({'width':900},8000);
$('div').click(function(){
	alert($(this).is(':animated'))
});