jQuery 是一个快速、简洁的 JS库，其设计宗旨是 “write Less , Do More”,即倡导写更少的代码，做更多的事情

jQuery 封装了 javascript 常用的功能代码，优化了 DOM操作、事件处理、动画设计和 Ajax交互

$是 jQuery 的顶级对象，在代码中可以使用 jQuery 代替 $，但通常都直接使用$

学习 jQuery本质：就是学习调用这些函数（方法）

jQuery使用前提：引入jQuery文件

网址：jQuery 进入该链接下载jQuery文件，和代码放在同一目录下

像图片所示引入即可

2. jQuery基本使用——入口函数

⭐方法一（推荐）：
$(function( ) {
...// 此处是页面DOM加载完成的入口
});

方法二：
$(document).ready(function(){
...//此处是页面DOM加载完成的入口
});

说明：

1.等着 DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。

2. 相当于原生 js中的 DOMContentLoaded,当页面主要元素加载完毕即执行

3. DOM对象和jQuery对象

1.用原生JS获取来的对象就是DOM对象
例如： var s = document.querySelector('div'); //s 是DOM对象

2. jQuery方法获取的元素就是jQuery 对象
例如：$('div'); // $('div')就是一个jQuery 对象

3. jQuery对象本质是：利用 $ 对 DOM对象包装后产生的对象（伪数组形式存储）

4. jQuery 对象只能使用 jQuery 方法， DOM 对象则使用原生的 JavaScript 属性和方法

4. DOM对象和jQuery对象相互转换

因为原生的 js 比 jQuery更大，原生的一些属性和方法 jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为 DOM对象才能使用

1.DOM对象转换为 jQuery 对象： $(DOM对象)

例如： $('div');

如果是用DOM方法获取过来的DOM对象就不用加单引号

例如： var demo = document.querySelector('div');

$(demo);

2. jQuery 对象转换为 DOM对象（两种）

方法一：
$('div')[index] index是索引号

方法二：
$('div').get(index) index是索引号

如转换完后使用 DOM的play方法，$('video')[0].play()

关于jQuery的选择器，其实和CSS很类似，博主会另外写一篇博客来分享它。不过放心，即使你们没学过，也可以看的懂哟~

5. jQuery隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做 隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作。

例子：给四个 div 设置背景颜色为粉色【jQuery对象不能使用 style】

$("div").css("background","pink");

案例：按下某个按钮，当前按钮背景颜色发生变化，其余的按钮不变

<script> 
  $(function(){
          //1.隐式迭代  给所有的按钮都绑定了点击事件
            $("button").click(function(){
           // 2.当前的元素变化背景颜色
                $(this).css("background","pink");
             //3.其余的兄弟去掉背景颜色  隐式迭代
                $(this).siblings("button").css("background","");
            })
        });
</script>

二、jQuery链式编程及样式操作

1. 链式编程

链式编程是为了节省代码量，看起来更优雅

例子：把当前点击的元素颜色变为红色，当前元素的其余兄弟不变色

$(this).css('color','red').sibling().css('color','');

使用链式编程一定注意是哪个对象执行样式

2. jQuery修改样式css方法

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式

1. 参数只写属性名，则是返回属性值

$(this).css("color");

2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css("color","red");

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({"color":"white","font-size":"20px"});

3. 设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点

如类名叫 current；
1. 添加类
$("div").addClass("current");

2. 移除类
$("div").removeClass("current");

3. 切换类(有就移除，没有就添加)
$("div").toggleClass("current");

原生JS中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名.

三、jQuery动画

1. jQuery显示与隐藏效果

显示：
show([speed,[easing],[fn]])

隐藏：
hide([speed,[easing],[fn]])

切换：
toggle([speed,[easing],[fn]])

参数：
（1）参数都可以省略，无动画直接显示
（2）speed: 三种预定速度之一的字符串（“slow”,"normal",or"fast"）或表示动画时常的毫秒数值（如：1000）
（3）easing:（Optional）用来指定切换效果，默认是“swing”,可用参数“linear”
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

一般情况下，我们都不加参数直接显示隐藏就可以了

2. 滑动效果

滑出：
slideDown([speed,[easing],[fn]])

滑入：
slideUp([speed,[easing],[fn]])

切换：
slideToggle([speed,[easing],[fn]])

参数同上

3. 事件切换

hover([over,]out)

（1）over: 鼠标移到元素上要触发的函数（相当于 mouseenter）

（2）out: 鼠标移出元素要触发的函数（相当于 mouseleave）

1.事件切换 hover 就是鼠标经过和离开的复合写法

2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

案例：鼠标经过 ul 滑出，鼠标离开，ul滑入

写法一：

 $(".nav>li").hover(function(){
         //鼠标经过 滑出
            $(this).children("ul").slideDown(200);
        },function(){
           //鼠标离开  滑入
            $(this).children("ul").slideUp(200);
        })

写法二：

如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

 $(".nav>li").hover(function(){
           $(this).children("ul").slideToggle();
       })

4. 淡入淡出效果

淡入：
fadeIn([speed,[easing],[fn]])

淡出：
fadeOut([speed,[easing],[fn]])

切换：
fadeToggle([speed,[easing],[fn]])

参数同上

渐进方式调整到指定的不透明度：
fadeTo([speed,opacity,[easing],[fn]])

效果参数：
（1）opacity透明度必须写，取值0~1之间
（2）speed:同上，必须写
后面两者内容同上

5. 自定义动画

语法：
animate(params,[speed,[easing],[fn]])

参数
（1）params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法。其余参数都可以省略

其余三个同上

案例：点击 button 按钮让 div 盒子做动画

<script>
        $(function(){
            $("button").click(function(){
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
</script>

6. 停止动画排队

1.动画或效果队列
动画或效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

2. 停止排队
stop()

（1）stop()方法用于停止动画或效果
（2）注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画，写到后面则不执行动画了

$(this).children("ul").stop().slideToggle();

四、jQuery相关操作

1. jQuery属性操作

1.1 设置或获取元素固有属性值prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href,比如<input>元素里面的type

1.获取属性语法
prop("属性")

2.设置属性语法
prop("属性"，“属性值”)

代码：

 $(function(){
            $("a").prop("href");  //获取a标签的 href属性
            $("a").prop("title","我们都挺好");  //更改 a 标签的title内容
            $("input").change(function(){
                console.log($(this).prop("checked"));   //当表单的check属性发生变化时打印输出它的值
            })
        })

1.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index="1"

1.获取属性语法
attr("属性") //类似原生 getAttribute()

2.设置属性语法
attr("属性","属性值") //类似原生 setAttribute()

该方法也可以获取H5自定义属性

1.3 数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素的结构。一旦页面刷新，之前存放的数据都将被移除，同时，还可以读取 HTML5自定义属性 data-index，只不过获取时不需要加 data- ，得到的是 数字型

1.附加数据语法
data("name","value") //向被选元素附加数据

2.获取数据语法
data("name") // 向被选元素获取数据

例子：给span标签加数据

 $("span").data("uname","andy"); //数据缓存 data() 这个里面的数据是存放在元素的内存里面,在页面中看不见
 console.log($("span").data("uname"));
 console.log($("div").data("index")); //获取 data-index自定义属性

2. jQuery内容文本值

主要针对元素的内容还有 表单的值 操作

2.1 普通元素内容 html()

相当于原生 inner HTML

html() //获取元素的内容

html("内容") //设置元素的内容

获取到的包含标签

代码演示：

<body>
    <div><i>你好</i></div>
    <ul></ul>
    <script>
        $(function(){
            console.log($("div").html());
        })
    </script>
</body>

2.2 普通元素文本内容 text()

相当于原生 innerText

text() //获取元素的文本内容

text("文本内容") // 设置元素的文本内容

2.3 表单的值 val()

相当于原生 value

val() //获取表单的文本内容

val("内容") //设置表单的文本内容

3. jQuery元素操作

主要是遍历、创建、添加、删除元素操作

3.1 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历

语法：

$("div").each(function(index,domEle){
xxx;
})

1.each()方法遍历匹配的每一个元素。主要用DOM处理，each每一个

2.里面的回调函数有2个参数： index是每个元素的索引号; domEle是每个 DOM元素对象，不是 jQuery对象，且index和domEle可以自己命名

3.所以要想使用 jquery方法，需要给这个dom元素转换为 jquery对象
$(domEle)

4.获取标签里的值得到的是字符串，如果要做运算，需要转换为数字型，用 parseInt

3.2 遍历数据

$.each(object,function(index,element){ xxx; } )

遍历元素：
$.each($("div"),function(i,e){ })

遍历数组：
$.each(arr,function(i,e){ })

遍历对象：
$.each({name:"andy", age:18},function(i,e){ })

1.$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象

2.里面的函数有2个参数： index是每个元素的索引号; element 遍历内容

3.3 创建元素

语法：

$("<li></li>");

动态的创建了一个 <li>

3.4 添加元素

1. 内部添加

element.append("内容");
把内容放入匹配元素内部最后面，类似原生 appendChild

element.prepend("内容")；
把内容放入匹配元素内部最前面

如
var li = $("<li>新创的li</li>");
$("ul").append(li);
$("ul").prepend(li);

2.外部添加

element.after("内容") //把内容放入目标元素后面

element.before("内容") //把内容放入目标元素前面

① 内部添加元素，生成之后，它们是父子关系

② 外部添加元素，生成之后，它们是兄弟关系

3.5 删除元素

element.remove() //删除匹配的元素（本身）

例如：
$("ul").remove();下列用法相同

element.empty() //删除匹配的元素集合中所有的子节点

element().html("") //清空匹配的元素内容

二三两种，都是删除子节点

4. jQuery尺寸

语法	用法
width() / height()	取得匹配元素宽度和高度值只算 width/height
innerWidth() / innerHeight()	取得匹配元素宽度和高度值包含 padding
outerWidth() / outerHeight()	取得匹配元素宽度和高度值包含 padding 、border
outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值包含 padding、border、margin

以上参数为空，则是获取相应值，返回的是数字型

如果参数为数字，则是修改相应值

参数可以不必写单位

5. jQuery位置

5.1 offset() 设置或获取元素偏移

① offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系

② 该方法有2个属性 left、top。 offset().top 用于获取距离文档顶部的距离， offset().left 用于获取距离文档左侧的距离

③ 可以设置元素的偏移： offset({top:10, left: 30});

代码：

$(function(){
   console.log($(".son").offset());
   console.log($(".son").offset().top);
   $(".son").offset({
      top: 200,
      left: 200
})
})

5.2 position()获取元素偏移

position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准

里面也有2个属性，top 和 left

注意：这个方法只能获取不能设置偏移

console.log($(".son").position());

5.3 scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

即可以通过 $("div").scrollTop(100)；来设置使页面一打开就已经卷去100的高度

其中可以使用 animate动画返回顶部，animate动画函数里面有个 scrollTop属性，可以设置位置

但是是元素做动画，因此 $("body,html").animate({scrollTop:0})

五、jQuery事件绑定和解绑

1. 事件注册

1.1 单个事件注册

语法：

element.事件（function(){ }）

如：$("div").click(function(){ 事件处理程序 })

1.2 事件处理on()绑定事件

on() 方法再匹配元素上绑定一个或多个事件的事件处理函数

语法：

element.on(events,[selector],fn)

1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown"

2. selector:元素的子元素选择器

3. fn:回调函数即绑定在元素身上的侦听函数

on方法优势1：

可以绑定多个事件，多个处理事件处理程序

例如： $("div").on({

mouseover:function(){},

mouseout:function(){},

click:function(){}

});

如果事件处理程序相同

$("div").on("mouseover mouseout",function(){

$(this).toggleClass("current");

});

on()方法优势2：

可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

例如： $("ul").on("click","li",function(){

alert("hello world!");

});

on()方法优势3：

动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件