jQuery 基础语法

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 使用步骤
引入 jQuery文件

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
然后直接使用即可

2、 jQuery 入口函数
$ (function () {
    ··· // 此处是页面 DOM 元素加载完成的入口
})
$ (document).ready(function () {
    ···  // 此处是页面 DOM 加载完成的入口
})
3、 jQuery 顶级对象
$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $
$ 是 jQuery 的顶级对象，相当于原生 JS 中的 window。把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法
4、 jQuery 对象和 DOM 对象
用原生 JS 获取来的对象就是 DOM 对象
用 jQuery 方法获取的元素就是 jQuery 对象
jQuery 对象的本质是：利用 $ 对 DOM 对象包装后产生的对象（伪数组形式存储）
jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JS 属性和方法
这两个对象是可以相互转换的

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

DOM 对象转换为 jQuery 对象

$(DOM 对象);

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 选择器即可，但是要加引号

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 方法来修改简单元素样式；也可以操作类，修改多个样式

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

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

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

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

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

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

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

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

添加类

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

删除类

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

切换类

$("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();

stop 方法用于停止动画或效果
注意：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
设置偏移量或获取元素偏移

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

position 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
其只能获取距离，不能设置偏移量
2.3 scroll
设置或获取元素被卷去的头部和左侧

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

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

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() 方法优势

可以绑定多个事件

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

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

动态创建元素，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 解决方案：

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

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

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

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

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

jQuery 插件常用的网站：

jQuery 之家
jQuery 插件库
jQuery 插件使用步骤：

引入相关文件（jQuery 和 插件文件）
复制相关 HTML、CSS、JS （调用插件）
4、 图片懒加载
图片懒加载（图片使用延迟加载，可提高网页下载速度，它也能帮助减轻服务器负载）

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

我们使用 jQuery 插件库 EasyLazyload

5、 全局滚动
插件地址：https://www.dowebok.com/demo/2014/77/