首页 前端知识 【14.0】前端基础jQuery之引入

【14.0】前端基础jQuery之引入

2024-01-25 11:01:08 前端知识 前端哥 161 968 我要收藏

【14.0】前端基础jQuery之引入

【一】什么是jQuery

  • jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
  • jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“

jQuery内部封装了原生的js代码

能够通过书写更少的代码,完成js操作,类似于Python中的模块

前端叫 “类库”

兼容多个浏览器

【二】导入模块

【1】Python当中导入模块发生了哪些事?

导入模块其实需要消耗资源

在Python中,导入模块可以分为两个阶段:编译阶段和运行阶段。

在编译阶段,Python解释器会扫描并分析源代码,将导入语句转换为相应的字节码指令。这些指令会被存储在编译后的.pyc文件中,以便在之后的运行阶段使用。

在运行阶段,当执行到导入模块的语句时,Python会按照以下步骤进行模块的导入:

  1. 搜索模块:解释器首先会搜索模块是否已经加载到内存中。如果是内置模块,则直接使用;如果是标准库或第三方库,会按照一定的搜索路径进行查找。

  2. 编译模块:如果模块没有被加载到内存中,则解释器会在硬盘上找到对应的.py文件,并将其编译成字节码文件(.pyc)。编译后的字节码文件包含了模块的定义、函数、类等信息。

  3. 创建模块命名空间:解释器创建一个新的命名空间来存放模块中的变量、函数和类等。模块中的全局变量会成为该命名空间的属性。

  4. 执行模块代码:解释器开始执行模块的字节码指令,逐行解释并执行模块中的代码。这会导入模块中定义的函数、类和全局变量等。

  5. 返回模块对象:当模块中的代码执行完毕后,解释器返回一个表示该模块的模块对象。可以通过该对象访问模块中定义的内容。

总结起来,导入模块时,Python解释器会搜索、编译、执行模块的代码,并创建一个命名空间来存放模块中的变量和函数。这样,我们就可以在当前代码中使用模块中定义的功能了。

【2】jQuery中导入类库发生了哪些事?

它的文件非常小(几十kb),基本不影响网络速度

在jQuery中导入类库(也称为插件)可以通过以下步骤完成:

  1. 获取类库文件:首先需要获取所需的类库文件(通常是一个 JavaScript 文件),可以从官方网站或其他来源下载得到。

  2. 导入类库文件:将类库文件保存在项目目录中,并在 HTML 文件中使用<script>标签来导入类库文件。在<script>标签中,使用src属性指定类库文件的路径,让浏览器能够加载并执行该文件。

    <script src="path/to/jquery.js"></script>
    <script src="path/to/plugin.js"></script>

    这样,当浏览器解析到这两个<script>标签时,就会下载并执行对应的类库文件。

  3. 使用类库功能:一旦类库文件被加载和执行,就可以使用其中提供的功能了。通常,类库会扩展或增强原生 JavaScript 的功能,通过在页面中引入类库文件,我们可以使用类库提供的函数、方法或特性。

    $(document).ready(function() {
      // 在文档加载完成后执行一些代码
      // 使用类库提供的函数或方法
    });

    上述代码示例中,$符号是 jQuery 的别名,通过调用.ready()方法,我们可以确保在文档加载完成后执行传入的函数。

总结起来,导入 jQuery 类库涉及获取类库文件、在 HTML 文件中导入类库文件,并通过调用类库提供的功能来实现对页面元素的操作、动态加载和事件处理等功能。

【三】jQuery的优势

【1】详细

(1)简化DOM操作:

  • jQuery提供了强大且简洁的API,使得对DOM元素的选择、遍历和操作变得更加容易。
  • 通过使用jQuery,可以通过简洁的语法实现复杂的DOM操作,减少编写冗长代码的工作量。

(2)跨浏览器兼容性:

  • jQuery解决了不同浏览器之间的兼容性问题。
  • 它封装了一致的API,使得开发人员能够编写跨浏览器兼容的代码,无需关注各种细节和差异。

(3)丰富的插件生态系统:

  • jQuery拥有庞大的插件生态系统,涵盖了各种功能和特性,如动画效果、表单验证、图像轮播等。
  • 这些插件可以大幅度提高开发效率,让开发人员能够快速实现复杂的功能。

(4)AJAX支持:

  • jQuery对AJAX进行了封装,使得在Web应用中进行异步请求变得更加简单。
  • 通过使用jQuery的AJAX API,可以轻松地发送AJAX请求、处理响应和更新页面内容,实现更好的用户体验。

(5)动画效果:

  • jQuery提供了丰富的动画效果和过渡效果,可以轻松地实现元素的淡入淡出、滑动、展开收起等动画效果,给网页增添了交互和生动性。

扩展性与可定制性:

  • jQuery允许开发人员根据自己的需求进行定制和扩展。
  • 开发人员可以自定义插件,编写自己的jQuery代码,并且可以根据项目需求选择只导入所需的模块,减小文件体积。

【2】小结

(1)一款轻量级的JS框架。

  • jQuery核心js文件才几十kb,不会影响页面加载速度。

(2)丰富的DOM选择器

  • jQuery的选择器用起来很方便
  • 比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。

(3)链式表达式

  • jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。

(4)事件、样式、动画支持

  • jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。

(5)Ajax操作支持

  • jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。

(6)跨浏览器兼容

  • jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。

(7)插件扩展开发

  • jQuery有着丰富的第三方的插件
    • 例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。

【四】jQuery学习内容

  1. 选择器
  2. 筛选器
  3. 样式操作
  4. 文本操作
  5. 属性操作
  6. 文档处理
  7. 事件
  8. 动画效果
  9. 插件
  10. each、data、Ajax

下载链接:jQuery官网

中文文档:jQuery AP中文文档

【五】jQuery的版本

【1】1.x:

  • 兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。
  • 因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)

【2】2.x:

  • 不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。
  • 如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)

【3】3.x:

  • 不兼容IE678,只支持最新的浏览器。
  • 需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。

【六】jQuery配置

【1】settings设置模板

  • 文件下载到本地
    • 借助于pycharm自带的模板功能
  • settings
    • Editor
      • File and Code Templates

【2】基于网络分发(CDN)

  • 直接引入jQuery提供的CDN服务(基于网络请求加载)

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

  • 后缀名区分是否已压缩

未压缩:https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js

已压缩:https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js

  • 缺点
    • 必须联网

【七】jQuery基本语法

  • 基本语法
jQuery(选择器).action()
  • 秉承jQuery宗旨,jQuery 简写成 $
jQuery(选择器) ---->  $(选择器)

【八】jQuery与原生JS代码比较

  • 将P标签内部的文本颜色改成红色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>
<p id="p1">人生得意须尽欢!</p>

<script>
    // 原生js
    let pEle = document.getElementById("p1");

    pEle.color = "red";

    // jQuery
    $('p').css("color", "blue");

</script>
</body>
</html>

【九】基本选择器

jQuery是一个流行的JavaScript库,它提供了便捷的方法来选择和操作HTML元素。以下是jQuery中的九个基本选择器:

【1】元素选择器(Element Selector):

  • 使用元素名称作为选择器,选取所有匹配该元素名称的元素。
  • 示例:选择所有段落元素
$('p');

【2】ID选择器(ID Selector):

  • 使用ID属性值作为选择器,选取具有相同ID的唯一元素。
  • 示例:选择具有 "myElement" ID的元素
$('#myElement');

【3】类选择器(Class Selector):

  • 使用类名作为选择器,选取具有相同类名的元素。
  • 示例:选择所有具有 "myClass" 类的元素
$('.myClass');

【4】属性选择器(Attribute Selector):

  • 使用元素的属性和属性值进行选择。
  • 示例:选择所有具有 "target" 属性的元素
$('[target]');
  • 示例:选择具有 "href" 属性值以 "https://" 开头的所有链接
$('a[href^="https://"]');

【5】选择器组合(Multiple Selectors):

  • 通过逗号分隔多个选择器,同时选择多个元素。
  • 示例:选择所有段落元素和具有 "myClass" 类的元素
$('p, .myClass');

【6】后代选择器(Descendant Selector):

  • 选择某个元素的后代元素。
  • 示例:选择所有 "myElement" 元素内的段落元素
$('#myElement p');

【7】子元素选择器(Child Selector):

  • 选择某个元素的直接子元素。
  • 示例:选择所有 "myElement" 元素的直接子元素中的段落元素
$('#myElement > p');

【8】下一个兄弟元素选择器(Next Adjacent Selector):

  • 选择紧接在指定元素后的下一个兄弟元素。
  • 示例:选择紧接在 "myElement" 元素后的下一个兄弟元素
$('#myElement + div');

【9】后续所有兄弟元素选择器(Following Siblings Selector):

  • 选择指定元素之后的所有兄弟元素。
  • 示例:选择紧接在 "myElement" 元素后的所有兄弟元素中具有 "myClass" 类的元素
$('#myElement ~ .myClass');

【10】示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>
<div id="d1">div
    <span>div>span</span>
    <p>div>p
        <span>div>p>span</span>
    </p>
</div>
<p class="p1">p</p>
<span>span</span>
</body>
</html>
  • id 选择器
$("#d1")
// S.fn.init [div#d1]

返回的是jQuery对象

  • class选择器
$('.p1')
// S.fn.init [p.p1, prevObject: S.fn.init(1)]
  • 标签选择器
$('span')
// S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]
  • jQuery对象转标签对象
$("#d1")[0]
// <div id=​"d1">​…​</div>​
  • 标签对象jQuery对象
$(document.getElementById("d1"))
// S.fn.init [div#d1]

【十】组合选择器

  • 在jQuery中,"组合选择器"是一种使用多个选择器来选择元素的方法。通过组合不同的选择器,可以更精确地选取需要的元素。

【1】并集选择器(Union Selector):

  • 使用逗号分隔,可以同时选择多个选择器所匹配的所有元素。
  • 例如:$("selector1, selector2")

【2】后代选择器(Descendant Selector):

  • 选择某个元素的后代元素。
  • 例如:$("parent descendant")

【3】子元素选择器(Child Selector):

  • 选择某个元素的直接子元素。
  • 例如:$("parent > child")

【4】相邻兄弟选择器(Adjacent Sibling Selector):

  • 选择某个元素的下一个相邻兄弟元素。
  • 例如:$("element + sibling")

【5】兄弟选择器(General Sibling Selector):

  • 选择某个元素之后的所有兄弟元素。
  • 例如:$("element ~ siblings")

【6】过滤选择器(Filter Selector):

  • 根据特定的条件过滤选取元素。
  • 例如:$("selector").filter(condition)

【十一】分组与嵌套

在jQuery中,"分组"和"嵌套"也是常见的用法,用于选择和操作DOM元素。

【1】分组(Grouping):

  • 使用逗号将多个选择器组合在一起,可以同时选择匹配这些选择器的所有元素。
  • 例如:
$('.selector1, .selector2').doSomething();
  • 通过分组选择器,可以在一个操作中同时对多个元素进行相同的操作。

【2】嵌套(Nesting):

  • 在一个选择器内部嵌套另一个选择器,用于表示某个选择器的子元素或特定关系的元素。
  • 例如:
$('parent').find('.child').doSomething();
  • 通过嵌套选择器,可以在指定的父元素下选择特定的子元素进行操作。

  • 嵌套选择器在jQuery中非常有用,可以通过链式调用来实现更复杂的选择和操作。

  • 例如:

$('parent')
  .find('.child')
  .filter('.special')
  .doSomething();
  • 上述代码首先选择父元素
  • 然后在父元素下找到特定的子元素
  • 并进一步筛选出特定的具有".special"类名的元素
  • 最后对这些元素执行相应的操作。

【十二】组合选择器/分组与嵌套案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>

<span>span1</span>
<span>span2</span>

<div id="d1">div
    <span>
        div>span1
    </span>
    <p id="d2">div>p
        <span>
            div>p>span
        </span>
    </p>
    <span>
        div>span2
    </span>
</div>

<span>span-1</span>
<span>span-2</span>
</body>
</html>
  • id选择器
// 取 div 标签
$("div")
S.fn.init(2) [div#d1, div.d2, prevObject: S.fn.init(1)]

// 取 id为d1的div标签
$('div#d1')
// S.fn.init [div#d1, prevObject: S.fn.init(1)]
  • 组合选择器/并列/混合使用
$('#d1,.p1,p')
// S.fn.init(2) [div#d1, p#p1, prevObject: S.fn.init(1)]
  • 后代选择器
$('div span')
// S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]
  • 儿子后代选择器
$('div>span')
// S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
  • 紧挨着的标签
$('div+span')
// S.fn.init [span, prevObject: S.fn.init(1)]
  • 所有兄弟便签
$('div~span')
// S.fn.init(2) [span, span, prevObject: S.fn.init(1)]

【十三】基本筛选器

  • jQuery提供了许多基本筛选器,其中包括十三个常用的基本筛选器。
  • 下面是这些基本筛选器的详细介绍:

【1】:first

  • 选择第一个匹配元素。

【2】:last

  • 选择最后一个匹配元素。

【3】:even

  • 选择索引为偶数的匹配元素(索引从开始)。

【4】:odd

  • 选择索引为奇数的匹配元素(索引从开始)。

【5】:eq(index)

  • 选择索引为指定值index的元素(索引从开始)。

【6】:gt(index)

  • 选择索引大于指定值index的元素(索引从开始)。

【7】:lt(index)

  • 选择索引小于指定值index的元素(索引从开始)。

【8】:header

  • 选择所有标题元素(例如h1、h2等)。

【9】:animated

  • 选择当前正在执行动画的元素。

【10】:focus

  • 选择当前获得焦点的元素。

【11】:contains(text)

  • 选择包含指定文本text的元素。

【12】:empty

  • 选择没有子元素或文本的空元素。

【13】:parent

  • 选择有子元素或文本的元素。

可以使用:even筛选器选择表格中的偶数行,并使用:contains筛选器选择包含特定文本的元素。

【十四】基本筛选器案例

  • 拿ul下的所有li标签
$('ul li')
/* S.fn.init(10) [li, li, li, li.l1, li, li, li, li, li#d1, li, prevObject: S.fn.init(1)] */
  • 只拿第一个/最后一个
$('ul :first')
// S.fn.init [li, prevObject: S.fn.init(1)]
$('ul :last')
// S.fn.init [li, prevObject: S.fn.init(1)]
  • 只拿索引为偶数的标签
$('ul :even')
/* S.fn.init(5) [li, li, li, li, li#d1, prevObject: S.fn.init(1)] */
  • 只拿索引为奇数的标签
$('ul :odd')
/* S.fn.init(5) [li, li.l1, li, li, li, prevObject: S.fn.init(1)] */
  • 拿到索引大于2的所有元素
$('ul :gt(2)')
// S.fn.init(7) [li.l1, li, li, li, li, li#d1, li, prevObject: S.fn.init(1)]
  • 移除满足元素的标签
$('ul li:not("#d1")')
S.fn.init(9) [li, li, li, li.l1, li, li, li, li, li, prevObject: S.fn.init(1)]

【十五】属性选择器

【1】选择具有特定属性的元素:$("[attribute]")

  • 例如,选择所有具有"src"属性的图片元素:$("img[src]")

【2】选择具有特定属性值的元素:$("[attribute=value]")

  • 例如,选择所有"href"属性值为"https://example.com"的链接元素:$("a[href='https://example.com']")

【3】选择具有包含特定属性值的元素:$("[attribute*=value]")

  • 例如,选择所有"src"属性值包含"image"的图片元素:$("img[src*='image']")

【4】选择具有以特定属性值开头的元素:$("[attribute^=value]")

  • 例如,选择所有"href"属性值以"https://"开头的链接元素:$("a[href^='https://']")

【5】选择具有以特定属性值结尾的元素:$("[attribute$=value]")

  • 例如,选择所有"src"属性值以".jpg"结尾的图片元素:$("img[src$='.jpg']")

【6】选择具有以特定属性值开头且以特定字符串结尾的元素:$("[attribute^=value][attribute$=value]")

  • 例如,选择所有"src"属性值以"images/"开头且以".jpg"结尾的图片元素:$("img[src^='images/'][src$='.jpg']")

【7】案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>
<input type="text" username="dream">
<input type="text" username="chimeng">
<p username="dream"></p>
</body>
</html>
$('username')
// S.fn.init [prevObject: S.fn.init(1)]

// 取属性中带有username的标签
$('[username]')
// S.fn.init(3) [input, input, p, prevObject: S.fn.init(1)]

// 取属性中带有username并且值为 dream的标签
$('[username="dream"]')
// S.fn.init(2) [input, p, prevObject: S.fn.init(1)]

// 取属性中带有username并且值为 dream的p标签
$('p[username="dream"]')
// S.fn.init [p, prevObject: S.fn.init(1)]

【十六】表单筛选器

【演示】

  • 【1】根据需要引入jQuery库文件。

  • 可以通过在HTML文档的标签内添加

转载请注明出处或者链接地址:https://www.qianduange.cn//article/364.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!