jQuery 基础语法

端木冷勋
2023-12-01

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/

 类似资料: