jQuery 基础语法

一、 jQuery 概述

1、 JS 库

仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以了

JS 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数里面，比如动画 animate、hide、show，比如获取元素等

简单理解：就是 JS 文件，里面对我们原生 JS 代码进行了存储，存放到里面。这样我们可以快速高效的使用这些封装好的函数

比如 jQuery，就是为了快速方便的操作 DOM，里面基本都是函数（方法）

2、 jQuery 概念

jQuery 是一个快速、简洁的 JS 库，其设计的宗旨是 “writeLessDoMore” ，即倡导写更少的代码，做更少的代码

j 就是 JS；Query 查询；意思就是查询 JS，把 JS 中的 DOM 操作做了封装，我们可以快速的查询使用里面的功能

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

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

jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率

3、 jQuery 优点

jQuery在线手册

• 轻量级，核心文件才 几十kb，不会影响页面加载速度
• 跨浏览器兼容，基本兼容了现在主流的浏览器
• 链式编程，隐式迭代
• 对事件、样式、动画支持，大大简化了 DOM 操作
• 支持插件扩展开发，有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等
• 免费、开源

二、 jQuery 基本使用

1、 jQuery 使用步骤

1. 引入 jQuery文件

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   

2. 然后直接使用即可

2、 jQuery 入口函数

$ (function () {
    ··· // 此处是页面 DOM 元素加载完成的入口
})
$ (document).ready(function () {
    ···  // 此处是页面 DOM 加载完成的入口
})

3、 jQuery 顶级对象

1. $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $
2. $ 是 jQuery 的顶级对象，相当于原生 JS 中的 window。把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法

4、 jQuery 对象和 DOM 对象

1. 用原生 JS 获取来的对象就是 DOM 对象
2. 用 jQuery 方法获取的元素就是 jQuery 对象
3. jQuery 对象的本质是：利用 $ 对 DOM 对象包装后产生的对象（伪数组形式存储）

• jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JS 属性和方法

这两个对象是可以相互转换的

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

1. DOM 对象转换为 jQuery 对象

   $(DOM 对象);
   

2. jQuery 对象转换为 DOM 对象

   $("div")[index];  // index 是索引号
   $("div").get(index);  // index 是索引号
   // 该对象以伪数组的形式存储
   

<div></div>
<script>
    // DOM 对象
    var div = document.querySelector("div");
	$(div);  // 转换成 jQuery 对象
	// jQuery 对象
	$("div");
	$("div")[0];  // 转换成 DOM 对象
</script>

三、 jQuery 常用 API

1、 jQuery 选择器

原生 JS 获取元素方式很多、很杂，而且兼容性情况不一致，因此 jQuery 给我们提供了封装，是获取元素同一标准

$("选择器")  // 里面选择器直接写成 CSS 选择器即可，但是要加引号

名称	用法	描述
ID 选择器	$("#id");	获取指定 ID 的元素
全选选择器	$("*");	匹配所有元素
类选择器	$(".class");	获取同一类 class 的元素
标签选择器	$(“div”);	获取同一标签所有元素
并集选择器	$(“div, p, li”);	选取多个元素
交集选择器	$(“li.current”);	交集选择器
子代选择器	$(“ul>li”);	使用 > 号，获取亲儿子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，包括孙子等

2、 隐式迭代

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

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

3、 jQuery 筛选选择器

语法	用法	描述
:first	$(“li:first”);	获取第一个 li 元素
:last	$(“li:last”);	获取最后一个 li 元素
:eq(index)	$(“li:eq(2)”);	获取到的 li 元素中，选择索引号为 2 的元素，索引号从 0 开始
:odd	$(“li:odd”);	获取到的 li 元素中，选择索引号为奇数的元素
:even	$(“li:even”);	获取到的 li 元素中，选择索引号为偶数的元素

4、 jQuery 筛选方法

语法	用法	说明
parent()	$(“li”).parent();	查找父级
children(selector)	$(“ul”).children(“li”);	查找最近一级（亲儿子）子代选择器
find(selector)	$(“ol”).find(“li”);	相当于后代选择器
siblings(selector)	$(".first").siblings(“li”);	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll();	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".last").prevtAll();	查找当前元素之前所有的同级元素
hasClass(class)	$(“div”).hasClass(“protected”);	检查当前元素是否有某个特定的类
eq(index)	$(“li”).eq(2);	获取到的 li 元素中，选择索引号为 2 的元素，索引号从 0 开始

index(): 获取索引号

parents(“选择器”)：选择符合条件的祖先元素

5、 jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式

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

6、 链式编程

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

$(function () {
    $("li").click(function () {
        $(this).css("background", "pink").siblings().css("background", "");
    });
});

即重复的代码可以省略，直接写在第一行代码后面

四、 jQuery 样式操作

1、 操作 CSS 方法

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

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

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

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

   $("div").css("width", "300px");
   

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

   $(this).css({"width": "20px", "background-color": "red"});
   

   如果是符合属性则必须采用驼峰命名法，如果属性值不是数字，则必须加引号

2、 设置类样式方法

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

1. 添加类

   $("div").addClass("current");  // 注意不要添加 .
   

2. 删除类

   $("div").removeClass("current");  // 注意不要添加 .
   

3. 切换类

   $("div").toggleClass("current");  // 如果没有这个类就添加，有就删除这个类
   

3、 JQuery 类操作和 className 区别

原生 JS 中 className 会覆盖元素原先里面的类名

jQuery 里面类操作只是对指定类进行操作，不影响原先的类名

五、 jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

1、 显示和隐藏

show();  // 显示
hide();  // 隐藏
toggle();  // 反转

1.1 语法规范

show([speed, [easing], [fn]]);

参数：

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

2、 滑动

slideDown();  // 下拉
slideUp();  // 上拉
slideToggle();  // 反转

2.1 语法规范

slideDown([speed, [easing], [fn]]);

参数：

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

3、 淡入淡出

fadeIn();  // 淡入以隐藏的元素
fadeOut();
fadeToggle();
fadeTo();

3.1 语法规范

fadeIn([speed, [easing], [fn]]);
// 参数和滑动的参数类似，注意fadeTo
fadeTo([speed], opacity, [easing], [fn]);  // opacity：修改不透明度

4、 自定义动画

animate(params, [speed], [easing], [fn]);

参数：

• params：想要修改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性，则需要采取驼峰命名法。其余参数可以省略
• speed：三种预定速度之一的字符串（slow，normal，fast）或表示动画时长的毫秒数值
• easing：用来指定切换效果，默认是 swing，可用参数 linear
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

<div></div>
<script>
    $(function () {
    $("div").click(function(){
        $("div").animate({
            left: 500,
            top: 200,
            opacity: 0.6,
        }, 500, 'linear', function () {
            alert("移动完成")
        });
    });
});
</script>

5、 事件切换

hover([over, ], out)

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

参数：

• over：鼠标移动到元素上要触发的函数（相当于 mouseenter）
• out：鼠标移出元素要触发的函数（相当于 mouseleave）

$(".nav>li").hover(function () {
    // 鼠标经过
    $(this).children("ul").slideDown(200);
}, function () {
    // 鼠标离开
    $(this).children("ul").slideUp(200);
});
// 也可以写成
$(".nav>li").hover(function () {
    $(this).children("ul").slideToggle(200);
});

6、 动画队列及其停止排队方法

6.1 动画或效果队列

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

6.2 停止排队

stop();

1. stop 方法用于停止动画或效果
2. 注意：stop 写到动画或者效果的前面，相当于停止结束上一次动画

$(".nav>li").hover(function () {
    $(this).children("ul").stop().slideToggle(200);
});  // 写在动画前面，相当于停止结束上一次动画

六、 jQuery 属性操作

1、 元素固有的属性

所谓元素固有属性就是元素本身自带的属性，比如 a 标签里面的 href

1.1 获取属性值

element.prop("attr");

1.2 设置属性值

element.prop("attr", "val");

<input type="checkbox" name="" id="">
<script>
    $(
        function () {
            $("input").change(function () {  // 当复选框里面的值改变的时候
                console.log($("input").prop("checked"));
                $("input").prop("checked", "true");
            })  
        }
    )
</script>

2、 元素自定义属性

2.1 获取属性值

element.attr("attrName");

2.2 设置属性值

element.attr("attrName", "val");

其也可以修改 h5 自定义属性

3、 数据缓存

elemen
t.data();

data 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构；一旦页面刷新，之前存放的数据都将被移除

<span></span>
<script>
    $(function() {
        $("span").data("uname", "andy");
        console.log($("span").data("uname"));
    })
</script>

获取 h5 自定义属性 data-index 时，第一个属性不需要写 data-，其余返回的是数字型

<span data-index = "1"></span>
<script>
    $(function() {
        console.log($("span").data("index"));
    })
</script>

七、 jQuery 元素内容

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

1、 普通元素内容

html();  // 获取元素的内容，相当于原生的 innerHTML;
html("content");  // 设置元素内容

2、 元素文本内容

text();  // 相当于原生的 innerText;
text("content");  // 修改文本内容

3、 设置表单值

val();  // 获取表单的值，相当于原生的 value;
val("content");  // 设置表单值

var num = 1.35555;
console.log(num.toFixed(2));  // 保留两位小数

八、 jQuery 元素操作

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

1、 遍历元素

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

语法1

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

var arr = ["red", "green", 'pink'];
$("div").each(function (index, demoEle) {
    // 第一个参数一定是索引号，名称可以是 i
    // 第二个参数是 DOM 对象，其没有 jQuery 方法
    $(demoEle).css("color", arr[index]);
});

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

参数：

• index：每个元素的索引号

• demEle：每个 DOM 元素对象，不是 jQuery 对象

  所以，想要使用 jQuery 方法，需要给这个 DOM 元素转换为 jQuery 对象 $(demoEle)

语法2

$.each($("div"), function(index, demoEle) {});
// 遍历元素，主要用于遍历数据，处理数据

第一个参数，可以传入对象、数组和元素等

2、 创建元素

语法

var li = $("<li>我是创建的元素</li>");  // 动态创建一个 li 标签

3、 添加元素

3.1 内部添加

语法

$("ul").append(li);  // 将创建的 li 标签放入 ul 里面
$("ul").prepend(li);  // 内部添加并且放到内容的最前面

append 方法，把内容放入匹配元素内部最后面，类似于原生的 appendChild

3.2 外部添加

语法

element.after("content");  // 把内容放到目标元素的后面
element.before("content");  // 把内容放入目标元素前面

外部添加元素是兄弟关系；内部添加关系是父子关系

4、 删除元素

element.remove();  // 删除匹配元素（本身）
element.empty();  // 删除匹配元素集合中所有的节点，不删除本身
element.html("");  // 清空匹配的元素里面的字节点，不删除本身

九、 jQuery 尺寸、位置操作

1、 jQuery 尺寸

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

以上宽度为空，则是获取相应值，返回数字类型

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

参数不用写单位

2、 jQuery 位置

位置主要有三个：offset() / position() / scrollTop() / scrollLeft()

2.1 offset

设置偏移量或获取元素偏移

1. offset 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
2. 该方法有两个属性：left 和 top 用于获取距离文档顶部的距离
3. 可以设置元素的偏移：offset({top: 20, left: 30})

2.2 position

获取元素位移

1. position 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
2. 其只能获取距离，不能设置偏移量

2.3 scroll

设置或获取元素被卷去的头部和左侧

1. scrollTop 方法设置或返回被选定元素被卷去的头部

   $(function () {
       $(window).scroll(function () {
           console.log($(document).scrollTop());  // 得到被卷去头部的距离，如果里面传值，就可以设置位置
       });
   });
   // 返回顶部
   $("body, html").stop().animate({  // 注意不能使用文档做动画，而是元素做动画
       scrollTop: 0,  
   });
   

2. scroll 对象的到元素距离头部的距离

十、 jQuery 事件

1、 jQuery 事件注册

1.1 单个事件

element.条件(function () {事件处理程序});

1.2 事件处理

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

element.on(events, [sleector], fn);

参数：

• events：一个或多个事件，如果事件函数相同用空格分开的事件类型
• selector：元素的子元素选择器
• fn：回调函数，即绑定在元素身上的监听函数

$("div").on({
    mouseenter: function () {
        $(this).css("backgroundColor", "red");
    },
    click: function() {
        $(this).css("backgroundColor", "pink");
    }
});  // 事件函数不相同
$("div").on("mouseenter mouseleave", function () {
    $(this).toggleClass(".nav");
})  // 事件函数一样

on() 方法优势

1. 可以绑定多个事件

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

   $("div").on("click", "li", function () {
   	alert(11); 
   });  // click 是绑定在 ul 身上的，但是触发的对象是 ul 里面的小 li
   

3. 动态创建元素，click 没有办法绑定事件，on 可以给未来生成的元素绑定事件

2、 jQuery 事件解绑

利用 off 解绑事件

$("div").off();  // 解除 div 里面绑定的所有事件
$("div").off("click", function () {});  // 解除点击事件，后面还可以添加监听函数
$("ul").off("click", "li");  // 解除事件委托

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

3、 jQuery 自动触发事件

trigger();

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

$("div").on("click", function () {
    alert(11);
});  
// 自动触发事件
// 1. 元素.事件();该事件会触发元素的默认行为
$("div").click();
// 2. 元素.trigger("事件");该事件会触发元素的默认行为
$("div").trigger("click");
// 3. triggerHandler("事件");，该事件不会触发元素的默认行为
$("div").triggerHandler("click");

3、 jQuery 事件对象

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

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

十一、 jQuery 其他方法

1、 jQuery 拷贝对象

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

语法

$.extend([deep], target, object1, [object2]);

参数：

• deep：如果为 true 为深拷贝，默认为浅拷贝
• target：要拷贝的目标对象
  • 浅拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
  • 深拷贝，前面加 true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象
    • 把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起
• object1：待拷贝到第一个对象的对象

$(function () {
    var to = {
        id: 0,
        name: "Make",
    };
    var obj = {
        id: 1,
        name: "Andy",
    };  // 会覆盖 to 原来的数据
    $.extend(to, obj);
});

2、 jQuery 多库共存

问题概述：

jQuery 使用 $ 作为标识符，随着 jQuery 的流行，其他 JS 库也会用这 $ 作为标识符，这样一起使用会引起冲突

客观需求：

需要一个解决方案，让 jQuery 和其他库 JS 库不存在冲突，可以同时存在，这就叫做多库共存

jQuery 解决方案：

1. 把里面的 $ 符号统一改为 jQuery，比如：jQuery("div");

2. jQuery 变量规定新的名称：$.noConflict()

   var otherName = $.noConflict();  // 让 jQuery 释放对 $ 的控制权，让用户自己决定
   

3、 jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成

注意：这些插件也是依赖于 jQuery 来完成的，所以必须要先引入 jQuery 文件，因此也称为 jQuery 插件

jQuery 插件常用的网站：

1. jQuery 之家
2. jQuery 插件库

jQuery 插件使用步骤：

1. 引入相关文件（jQuery 和 插件文件）
2. 复制相关 HTML、CSS、JS （调用插件）

4、 图片懒加载

图片懒加载（图片使用延迟加载，可提高网页下载速度，它也能帮助减轻服务器负载）

当我们页面滑动到可视区域，再显示图片

我们使用 jQuery 插件库 EasyLazyload

5、 全局滚动

插件地址：https://www.dowebok.com/demo/2014/77/