Web前端之jQuery 一

- jQuery介绍和核心
- 为什么要使用以及如何使用jQuery
- - jQuery的入口函数
- jQuery对象和js对象的转换
jQuery的选择器
- jQuery的基本选择器
- 层级选择器
- 基本过滤选择器
- 筛选选择器方法(重要)
- 属性选择器
- sibling()用法
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()用的多。