目录

一、jquery介绍

1. jQuery概述 

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

3. DOM对象和jquery对象 

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

5. jQuery隐式迭代（重要） 

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

1. 链式编程 

 2. jQuery修改样式css方法

3. 设置类样式方法 

 三、jQuery动画

1. jQuery显示与隐藏效果 

2. 滑动效果 

3. 事件切换 

4. 淡入淡出效果 

5. 自定义动画 

 6.  停止动画排队

 四、jQuery相关操作

1. jQuery属性操作 

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

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

1.3 数据缓存 data() 

2. jQuery内容文本值 

2.1 普通元素内容 html() 

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

2.3 表单的值 val() 

3. jQuery元素操作 

3.1 遍历元素

3.2 遍历数据 

3.3 创建元素

3.4 添加元素

3.5 删除元素 

 4. jQuery尺寸

5. jQuery位置 

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

5.2 posITion()获取元素偏移 

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

 五、jQuery事件绑定和解绑

1. 事件注册 

1.1 单个事件注册 

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

2. 事件处理 off() 解绑事件 

3. 自动触发事件 

4. 事件对象 

5. 拷贝对象 extend 

---

一、jQuery介绍

1. jQuery概述 

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

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

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

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

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()可以给动态生成的元素绑定事件

2. 事件处理 off() 解绑事件 

 off()方法可以移除通过 on() 方法添加的事件处理程序

$("p").off()   //解绑p元素所有事件处理程序

$("p").off("click")  //解绑p元素上面的点击事件 

$("ul").off("click","li") //解绑事件委托 

如果有的事件只想触发一次，可以使用 one()来绑定事件

3. 自动触发事件 

 有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

element.click()  // 第一种     简写形式

element.trigger("type")  // 第二种     自动触发模式

element.triggerHandler(type)  // 第三种    自动触发模式

注意：第三种触发事件 triggerHandler()与前面两种的区别是，他不会触发元素的默认行为  （默认行为：如表单获取焦点时，光标自动闪烁，用该方法触发事件光标不闪烁） 

4. 事件对象 

事件被触发，就会有事件对象的产生

element.on(events,[selector],function(event){ }) 

阻止默认行为： event.preventDefault() 或者 return false

阻止冒泡: event.stopPropagation() 

5. 拷贝对象 extend 

 如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用 $.extend() 方法

语法：

$.extend([deep],target,object1,[objectN])

1. deep:如果设为 true 为深拷贝，默认为 false 浅拷贝

2. target:要拷贝的目标对象

3. object1:待拷贝到第一个对象的对象

4. objectN:待拷贝到第N个对象的对象

5. 浅拷贝是把被拷贝的对象 复杂数据类型中的地址 拷贝给目标对象，修改目标对象 会影响 被拷贝对象

6. 深拷贝，前面加 true，完全克隆（拷贝的对象，而不是地址），修改目标对象 不会影响 被拷贝对象 

下面来看两张图：

其中targetObj为要拷贝的对象，obj为待拷贝的对象

浅拷贝： 

 深拷贝：

---

这次的知识点总结到这里就结束了，内容可能稍稍有点多，如果你认真看完了，请收下我的大拇指👍！