本文介绍: 【14.0】前端基础jQuery之引入【一】什么是jQueryjQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“jQuery内部封装了原生的js代码能够通…
【14.0】前端基础jQuery之引入
【一】什么是jQuery
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
能够通过书写更少的代码，完成js操作，类似于Python中的模块
前端叫 “类库”
【二】导入模块
【1】Python当中导入模块发生了哪些事？
在Python中，导入模块可以分为两个阶段：编译阶段和运行阶段。
在编译阶段，Python解释器会扫描并分析源代码，将导入语句转换为相应的字节码指令。这些指令会被存储在编译后的.pyc文件中，以便在之后的运行阶段使用。
在运行阶段，当执行到导入模块的语句时，Python会按照以下步骤进行模块的导入：
-
搜索模块：解释器首先会搜索模块是否已经加载到内存中。如果是内置模块，则直接使用；如果是标准库或第三方库，会按照一定的搜索路径进行查找。
-
编译模块：如果模块没有被加载到内存中，则解释器会在硬盘上找到对应的.py文件，并将其编译成字节码文件(.pyc)。编译后的字节码文件包含了模块的定义、函数、类等信息。
总结起来，导入模块时，Python解释器会搜索、编译、执行模块的代码，并创建一个命名空间来存放模块中的变量和函数。这样，我们就可以在当前代码中使用模块中定义的功能了。
【2】jQuery中导入类库发生了哪些事？
在jQuery中导入类库(也称为插件)可以通过以下步骤完成：
-
导入类库文件：将类库文件保存在项目目录中，并在 HTML 文件中使用
<script>标签来导入类库文件。在<script>标签中，使用src属性指定类库文件的路径，让浏览器能够加载并执行该文件。<script src="path/to/jquery.js"></script> <script src="path/to/plugin.js"></script> -
使用类库功能：一旦类库文件被加载和执行，就可以使用其中提供的功能了。通常，类库会扩展或增强原生 JavaScript 的功能，通过在页面中引入类库文件，我们可以使用类库提供的函数、方法或特性。
$(document).ready(function() { // 在文档加载完成后执行一些代码 // 使用类库提供的函数或方法 });上述代码示例中，
$符号是 jQuery 的别名，通过调用.ready()方法，我们可以确保在文档加载完成后执行传入的函数。
总结起来，导入 jQuery 类库涉及获取类库文件、在 HTML 文件中导入类库文件，并通过调用类库提供的功能来实现对页面元素的操作、动态加载和事件处理等功能。
【三】jQuery的优势
【1】详细
(1)简化DOM操作：
(2)跨浏览器兼容性：
(3)丰富的插件生态系统：
(4)AJAX支持：
(5)动画效果：
扩展性与可定制性：
【2】小结
(1)一款轻量级的JS框架。
(2)丰富的DOM选择器
(3)链式表达式
(4)事件、样式、动画支持
(5)Ajax操作支持
(6)跨浏览器兼容
(7)插件扩展开发
【四】jQuery学习内容
【五】jQuery的版本
【1】1.x：
【2】2.x：
【3】3.x：
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
【六】jQuery配置
【1】settings设置模板
【2】基于网络分发(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代码比较
<!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)：
$('#myElement');【3】类选择器(Class Selector)：
$('.myClass');【4】属性选择器(Attribute Selector)：
$('[target]');$('a[href^="https://"]');【5】选择器组合(Multiple Selectors)：
$('p, .myClass');【6】后代选择器(Descendant Selector)：
$('#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]- 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]【十】组合选择器
【1】并集选择器(Union Selector)：
【2】后代选择器(Descendant Selector)：
【3】子元素选择器(Child Selector)：
【4】相邻兄弟选择器(Adjacent Sibling Selector)：
【5】兄弟选择器(General Sibling Selector)：
【6】过滤选择器(Filter Selector)：
【十一】分组与嵌套
在jQuery中，”分组“和”嵌套“也是常见的用法，用于选择和操作DOM元素。
【1】分组(Grouping)：
$('.selector1, .selector2').doSomething();- 通过分组选择器，可以在一个操作中同时对多个元素进行相同的操作。
【2】嵌套(Nesting)：
$('parent').find('.child').doSomething();$('parent')
.find('.child')
.filter('.special')
.doSomething();【十二】组合选择器/分组与嵌套案例
<!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)]【十三】基本筛选器
【1】:first
- 选择第一个匹配元素。
【2】:last
- 选择最后一个匹配元素。
【3】:even
【4】:odd
【5】:eq(index)
【6】:gt(index)
【7】:lt(index)
- 选择索引小于指定值index的元素(索引从开始)。
【8】:header
- 选择所有标题元素(例如h1、h2等)。
【9】:animated
【10】:focus
- 选择当前获得焦点的元素。
【11】:contains(text)
【12】:empty
【13】:parent
- 选择有子元素或文本的元素。
【十四】基本筛选器案例
- 拿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]")
【2】选择具有特定属性值的元素：$("[attribute=value]")
- 例如，选择所有”href“属性值为”https://example.com“的链接元素：
$("a[href='https://example.com']")
【3】选择具有包含特定属性值的元素：$("[attribute*=value]")
【4】选择具有以特定属性值开头的元素：$("[attribute^=value]")
- 例如，选择所有”href”属性值以”https://”开头的链接元素：
$("a[href^='https://']")
【5】选择具有以特定属性值结尾的元素：$("[attribute$=value]")
【6】选择具有以特定属性值开头且以特定字符串结尾的元素：$("[attribute^=value][attribute$=value]")
【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)]【十六】表单筛选器
【演示】
原文地址:https://blog.csdn.net/Chimengmeng/article/details/131588736
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_16169.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
