Web前端之jQuery 一

jQuery介绍和核心

jQuery是一个快速， 小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。通过多功能性和可扩展性的结合，jQuery改变了 数百万人编写JavaScript的方式。另外它只是封装了js的dom的操作和ajax,其它的未封装。所以js是包含jquery的。由此可见，jquery的出现，使我们更加容易操作DOM。
核心思想: write less,do more写得少做的多
关于jQuery的相关资料：
官网：http://jquery.com/
汉化api文档：https://www.94xh.com/
注：
选择器是jQuery借鉴css选择器的语法而创建的一种查找要操作的节点的语法格式。比如 $(’#id’);

为什么要使用以及如何使用jQuery

为什么要使用jQuery

在用js写代码时，会遇到一些问题:
●window.onload事件有事件覆盖的问题，因此只能写一个事件。
●代码容错性差。
●浏览器兼容性问题。
●书写很繁琐，代码量多。
●代码很乱，各个页面到处都是。
●动画效果很难实现。

如何使用jQuery

step1,引入jQuery.js文件

<!-- 引包 -->
	<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

step2, 使用选择器查找要操作的节点

step3,调用jQuery对象的属性或者方法来操作相应的节点。

jQuery的两大特点

●链式编程比如.shon()和.html()可以连写成.show().htm1()。
●隐式迭代:隐式对应的是显式。隐式迭代的意思是:在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

jQuery的入口函数

入口函数：

		//1.jQuery入口函数

		//返回的是jQuery对象 如果你想获取js的document文档对象
		//jquery对象===js对象的转换
		//console.log($(document)[0]);
		console.log($(document));

		//等待文档资源加载完成之后调用此方法
		$(document).ready(function(){
			alert(1);
		});

		//2.jquery简便写法入口函数 
		$(function(){
			alert(2);
		});

		$(window).ready(function(){
			//表示图片资源加载完成之后调用
			alert(1);
		});

jQuery对象和js对象的转换

如果是js对象，更加希望转换成jquery才操作简便的dom，
因为js是包含jquery。jquery只是封装DOM事件 ajax动画，就要将js对象转换成jQuery对象。
总结：如果是jquery对象一定要调用jquery的属性和方法，
如果是js对象一定要调用的是js的属性和方法。
千万不要将这两个对象混淆
在jquery大部分的都是api（方法），length和索引是它的属性。
示例：

<div id="one"></div>
<div id="two"></div>

		$(function(){
			//获取jQuery对象
			console.log($('#two'));//伪数组

			//获取js对象
			var gTwo=document.getElementById('two');
			console.log(gTwo);//<div id="two"></div>

			//jquery对象==>js对象
			console.log($('#two')[0]);//<div id="two"></div>
			console.log($('#two').get(0));//<div id="two"></div>

			//js对象==>jquery对象
			console.log($(gTwo));//伪数组
	});

jQuery的选择器

jQuery的基本选择器

示例：

$(function(){
			//事件三步走：事件源 事件  事件驱动

			//jquery如何获取dom
			//jquery的标签选择器
			console.log($('div'));

			//js对象
			//js内部自己遍历
			//1.标签选择器
			$('div').click(function(){
				//this指的是js对象 这两句结果相同 都返回文本内容
				console.log(this.innerText);
				console.log($(this).text());
				$(this).hide(300);//让其隐藏，300指的是消失的时间，单位是毫秒。
			});

			//2.类选择器
			console.log($('.box'));
			//1.id选择器
			console.log($('#box'));
	});

层级选择器

示例：

$(function(){
			//后代选择器 空格 修改 样式属性
			$('.lists li').css('color','pink');
			//子代选择器> 亲儿子
			$('.item>a').css({color:'gold',backgroundColor:'seagreen'});
			//紧邻选择器+ 选择紧挨着的下一个元素
			$('.mama+.gugu').css({color:'#AABBCC'});
			//兄弟选择器~。选择后面的所有的兄弟元素
			$('#jiu~li').css({color:'rgb(188,188,188)'});
		});

基本过滤选择器

示例：

$(function(){
			//写法$('ul li:eq(0)')
		//1.eq:选择第一个匹配的元素
			$('ul li:eq(0)').css({color:'#AADDFF'});
		//2.gt 大于序号0的
			$('ul li:gt(0)').css({color:'pink'});
		//3.lt 小于序号0的
			$('ul li:lt(0)').css({color:'seagreen'});
		//4.odd 选择所有序号为奇数行的元素
			$('ul li:odd').css({color:'#4466CC'});
		//5.even 选择所有序号为偶数行的元素
			$('ul li:even').css({color:'#cc22EE'});
		//6. first last
			$('ul li:first').css({color:'pink'});
			$('ul li:last').css({color:'seagreen'});
		});

筛选选择器方法(重要)

示例：

$(function(){
			//find(selector) 查找后代，包括子子孙孙
			$('#box').find('p').css('color','seagreen');
			$('#box').find('.num3').css('color','pink');

			//写得少做得多 在jQuery中叫链式编程，所以我们书写的代码少了
			$('#box').find('p>.active').css('color','gold').click(function(){
				alert($(this).text());
			});

			//子代children()
			$('#box').children('.child').css('color','#AABBCC');

			//parent() 亲爹
			$('.active').parent().css('color','#994466')
			//eq(index) index是从0开始的
			$('#box').children('p').eq(1).css('font-size',30);
		});

属性选择器

示例：

$(function(){
			//常用的
			$('input[type=text]').css('background','pink');
			$('input[type=password]').css('background','seagreen');
		});

sibling()用法

sibling()可以返回被选元素的所有同级元素

<script type="text/javascript">
	$(function(){
		//eq(0)选的是第0个li标签
		//$('ul li').eq(0).siblings('.active');

		// $('ul li').click(function(){
		// 	$(this).css('color','#DDEE99').siblings('li').css('color','#CCAA77');
		// });
		//当我点击一个li标签里面的a标签时，只有被点击的变色，其他为另一个颜色
		 $('ul li').click(function(){
		 	$(this).children('a').css('color','#CCAA99').parent('li').siblings('li').children('a').css('color','#DDEE99');
			//$(this).index()获取点击的每一个li的索引，同时也是对应的p标签的索引
			$('p').eq($(this).index()).addClass('active').siblings('p').removeClass('active');
		});

	});
</script>

效果图：

jQuery动画

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的；同时还提供给了我们自定义动画的功能。

显示动画

方式一：

  $("div").show();

解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

方式二：

$('div').show(3000);

解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。

方式三：

 $("div").show("slow");

参数可以是：

• slow 慢：600ms
• normal 正常：400ms
• fast 快：200ms

解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。

方式四：

 //show(毫秒值，回调函数;
    $("div").show(5000,function () {
        alert("动画执行完毕！");
    });

解释：动画执行完后，立即执行回调函数。

总结：

上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

			//show(,)第一个参数是动画的时间，第二个参数是回调函数
			//normal默认是400ms\slow 600ms fast 200ms
				$('.box').show('slow',function(){
					$(this).text('李艳艳');
				});

隐藏动画

方式参照上面的show()方法的方式。如下：

    $(selector).hide();

    $(selector).hide(1000); 

    $(selector).hide("slow");

    $(selector).hide(1000, function(){});

实现点击按钮显示盒子，再点击按钮隐藏盒子

开关式显示隐藏动画

$('#box').toggle(3000,function(){});

显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。

滑入和滑出

1、滑入动画效果：（类似于生活中的卷帘门）

$(selector).slideDown(speed, 回调函数);

解释：下拉动画，显示元素。

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

2、滑出动画效果：

 $(selector).slideUp(speed, 回调函数);

解释：上拉动画，隐藏元素。

3、滑入滑出切换动画效果：

 $(selector).slideToggle(speed, 回调函数);

淡入淡出动画

1、淡入动画效果：

 $(selector).fadeIn(speed, callback);

作用：让元素以淡淡的进入视线的方式展示出来。

2、淡出动画效果：

$(selector).fadeOut(1000);

作用：让元素以渐渐消失的方式隐藏起来

3、淡入淡出切换动画效果：

 $(selector).fadeToggle('fast', callback);

作用：通过改变透明度，切换匹配元素的显示或隐藏状态。

参数的含义同show()方法。

自定义动画

语法：

 $(selector).animate({params}, speed, callback);

作用：执行一组CSS属性的自定义动画。

• 第一个参数表示：要执行动画的CSS属性（必选）
• 第二个参数表示：执行动画时长（可选）
• 第三个参数表示：动画执行完后，立即执行的回调函数（可选）

停止动画

$(selector).stop(true, false);

里面的两个参数，有不同的含义。

第一个参数：

• true：后续动画不执行。
• false：后续动画会执行。

第二个参数：

• true：立即执行完成当前动画。
• false：立即停止当前动画。

PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。