• Jquery

    目录
    一、基本介绍
    二、下载地址
    三、基本使用
    四、jQuery对象和dom对象
    五、jQuery选择器
    六、jQuery的DOM操作
    七、总结

    相关文章

    JSP的使用JSP的使用
    JSON&AjaxJSON&Ajax

    一、基本介绍

     jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom…， 提供方法、events、选择器，并且方便地为网站提供Ajax交互。其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情。

    二、下载地址

    JQuery下载地址

     自己创建一个jquery-3.6.0.min.js文件,将页面的代码复制到这个文件里边。

    三、基本使用

    使用Jquery，只需使用script标签将其引入即可。👇

    <script type="text/javascript" src="script/jquery-3.6.0.min.js">script>

    • 1

    除了下载js文件的方式外，还可以使用CDN的方式来引入。👇

    <script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>

    • 1

    📌原生JS演示

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示title>
    <script type="text/javascript">
        // 原生js
        window.onload = function () {
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                alert("点击成功")
            }
        }
    script>
head>
<body>
    <form action="#" >
        用户名:<input type="text" name="user">br>
        <input type="submit" id="btn">
    form>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    📌Jquery演示

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示title>
    <script type="text/javascript" src="../../script/jquery-3.6.0.min.js">script>
    <script type="text/javascript">
		// JQuery
        $(function () {
            var $btn = $("#btn");
            $btn.click(function () {
                alert("点击成功");
            })
        });
    script>
head>
<body>
    <form action="#" >
        用户名:<input type="text" name="user">br>
        <input type="submit" id="btn">
    form>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    1. \$(function () {}) 相当于原生js的 window.onload = function(){}。
    2. \$("#btn")相当于原生js的document.getElementById("btn")。不能去掉 #。
    3. 由\$("#btn")得到的是JQuery对象，不是js原生的dom对象。

    四、jQuery对象和dom对象

    1. 什么是jQuery对象

     jQuery对象就是对DOM对象进行包装后产生的对象。jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么他就可以使用jQuery里的方法。
    ✅约定（非强制的）：
     如果获取的是jQuery对象，那个要在变量前面加上$。

    2. DOM对象转jQuery对象

    1. 对于一个DOM对象，只需要用$()把 DOM 对象包装起来，就可以获得一个 jQuery 对象了。$(DOM 对象)
    2. 将DOM对象转换成jQuery对象后，就可以使用jQuery方法了。👇
    // DOM对象
var btn = document.getElementById("btn");
// jQuery对象
var $btn = $(btn);

    • 1
    • 2
    • 3
    • 4

    3. jQuery对象转DOM对象

    📌方式一

    // jQuery对象
var $btn = $("#btn");
// DOM对象
var btn = $btn[0];

    • 1
    • 2
    • 3
    • 4

    📌方式二

    // jQuery对象
var $btn = $("#btn");
// DOM对象
var btn = $btn.get(0);

    • 1
    • 2
    • 3
    • 4

    👆 jQuery之所以可以这样转DOM对象，是因为jQuery底层是一个数组。如下：👇

    在这里插入图片描述

    五、jQuery选择器

     选择器是jQuery的核心, 在jQuery中, 对事件处理, 遍历DOM和Ajax操作都依赖于选择器。

    1. 基本选择器

    📌 id选择器

    $("#id名")
// 返回值：单个元素组成的集合（因为底层是数组）

    • 1
    • 2

    📌 元素选择器

    $("元素名")
// 说明：元素名就是已经定义的变迁元素，如：div,span...

    • 1
    • 2

    📌 类选择器

    $(".class名")

// 返回值：单个元素或多个元素的数组（因为class可以有多个）

    • 1
    • 2
    • 3

    📌 特殊的

    $("*")
// 匹配所有的元素

    • 1
    • 2
    $("div,span,p.myClass")
// 将匹配到的所有元素合并到一起返回

    • 1
    • 2

    2. 层次选择器

     可以通过DOM元素之间的层次关系来获取特定元素，如：子代元素、兄弟元素等。

    📌 ancestor descendant

    $("form input")
// 在给定的祖先元素下匹配所有后代元素

    • 1
    • 2

    👆这是匹配所有的后代元素，包括孙子元素等等

    📌 parent > child

    $("form > input")
// 在给定的父元素下匹配所有子元素

    • 1
    • 2

    👆这是匹配所有的子代元素

    📌 prev + next

    $("form + input")
// 匹配所有紧接在form元素后的input元素

    • 1
    • 2

    📌 prev ~ siblings

    $("form ~ input")
// 匹配form元素之后的所有input元素

    • 1
    • 2

     👆匹配到的元素不包括form元素，并且input匹配的是和form同辈的元素，其余后辈元素不被匹配。
    和此选择器相似的方法是siblings()，这个方法获取的是他的调用对象的所有同辈元素，不管前后。

    3. 基础过滤选择器

    📌 :first

    $("tr:first")
// 返回tr的第一个元素

    • 1
    • 2

    📌 :last

    $("tr:last")
// 返回tr的最后一个元素

    • 1
    • 2

    📌 :not(selector)

    $("input:not(:checked)")
// 返回所有没有被选中的input

    • 1
    • 2

    📌 :even

    $("tr:even")
// 返回所有索引值为偶数的tr元素（0也为偶数）

    • 1
    • 2

    📌 :odd

    $("tr:odd")
// 返回所有索引值为奇数的tr元素

    • 1
    • 2

    📌 :eq(index)

    $("tr:eq(0)")
// 返回的第一个tr元素

    • 1
    • 2

    📌 :gt(index)

    $("tr:gr(0)")
// 返回所有索引值大于0的tr元素

    • 1
    • 2

    📌 :lt(index)

    $("tr:lt(3)")
// 返回所有索引值小于3的tr元素

    • 1
    • 2

    📌 :header

    $(":header")
// 用来获取h1,h2,h3...之类的标题元素

    • 1
    • 2

    📌 :animated

    $(":animated")
// 获取所有正在执行动画效果的元素

    • 1
    • 2

    4. 内容过滤选择器

    📌 :contains(text)

    $("div:contain('tom')")
// 匹配包含给定文本的元素

    • 1
    • 2

    📌 :empty

    $("td:empty")
// 匹配所有不包含子元素或者文本的空元素

    • 1
    • 2

    📌 :has(selector)

    $("div:has(p)")
// 返回所有包含p元素的div元素

    • 1
    • 2

    📌 :parent

    $("td:parent")
// 匹配所有含有子元素或者文本的元素；和empty相反

    • 1
    • 2

    5. 可见度过滤选择器

    📌 :hidden

    $("div:hidden")
// 匹配所有的不可见div元素

    • 1
    • 2

    📌 :visible

    $("td:visible")
// 匹配所有的可见div元素

    • 1
    • 2

    6. 属性过滤选择器

    📌 [attribute]

    $("div[id]")
// 匹配所有的带有id属性的div元素

    • 1
    • 2

    📌 [attribute=value]

    $("div[id='btn']")
// 匹配所有id属性值为'btn'的div元素

    • 1
    • 2

    📌 [attribute!=value]

    $("div[id!='btn']")
// 匹配所有id属性值不为'btn'的div元素

    • 1
    • 2

    📌 [attribute^=value]

    $("div[id^='btn']")
// 匹配所有id属性值以'btn'开头的div元素（如：btn1，btnws）

    • 1
    • 2

    📌 [attribute$=value]

    $("div[id$='btn']")
// 匹配所有id属性值以'btn'结尾的div元素（如：01btn，wwbtn）

    • 1
    • 2

    📌 [attribute=value]*

    $("div[id*='btn']")
// 匹配所有id属性值中包含'btn'的div元素（如：01btn，wwbtn）

    • 1
    • 2

    📌 复合属性选择器

    $("div[id][class='123']")
// [attributeFilter1][attributeFilter2][attributeFilterN] 复合属性选择器

    • 1
    • 2

    7. 子元素过滤选择器

    📌 :nth-child()

    // :nth-child(index/even/odd/equation)
$("ul li:nth-child(2)")
// 返回ul下li的第三个子元素

    • 1
    • 2
    • 3
    1. nth-child(even/odd)：能选取每个父元素下的索引值为偶(奇)数的元素。
    2. nth-child(2)：能选取每个父元素下的索引值为 2 的元素。
    3. nth-child(3n)：能选取每个父元素下的索引值是 3 的倍数 的元素。
    4. nth-child(3n+1)：能选取每个父元素下的索引值是 3n + 1 的元素。

    📌 :first-child

    $("ul li:first-child")
// 返回ul下li的第一个元素

    • 1
    • 2

    📌 :last-child

    $("ul li:last-child")
// 返回ul下li的最后一个元素

    • 1
    • 2

    📌 :only-child

    $("ul li:only-child")

    • 1

     如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

    8. 表单属性过滤选择器

    📌 :enabled

    $("input:enabled")
// 匹配所有input 中不带有 disabled="disabled"的 input

    • 1
    • 2

    📌 :disabled

    $("input:disabled")
// 匹配所有 disabled="disabled"的input元素

    • 1
    • 2

    📌 :checked

    $("input:checked")
// 匹配所有复选框被选中的元素

    • 1
    • 2

    📌 :selected

    $("select option:selected")
// 匹配选中的option

    • 1
    • 2

    9. 表单选择器

    📌 :input

    $(":input")
// 匹配所有的inut，textarea，select和button元素

    • 1
    • 2

    📌 :text

    $(":text")
// 匹配所有的单行文本框

    • 1
    • 2

    📌 :password

    $(":password")
// 匹配所有的密码框

    • 1
    • 2

    📌 :radio

    $(":radio")
// 匹配所有单选按钮

    • 1
    • 2

    📌 :checkbox

    $(":checkbox")
// 匹配所有的复选框

    • 1
    • 2

    📌 :submit

    $(":submit")
// 匹配所有的提交按钮

    • 1
    • 2

    📌 :image

    $(":image")
// 匹配所有的图像域

    • 1
    • 2

    📌 :reset

    $(":reset")
// 匹配所有的充值按钮

    • 1
    • 2

    📌 :button

    $(":button")
// 匹配所有的按钮

    • 1
    • 2

    📌 :file

    $(":file")
// 匹配所有的文本域

    • 1
    • 2

    📌 :hidden

    $("input:hidden")
// 匹配所有的不可见元素（即：type=hidden的input元素）；这个选择器不仅局限于表单，也可以匹配style=hidden

    • 1
    • 2

    六、jQuery的DOM操作

    1. 查找节点，修改属性

     查找属性节点: 查找到所需要的元素之后, 可以调用jQuery对象的attr()方法来获取它的各种属性值

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示title>
    <script type="text/javascript" src="../../script/jquery-3.6.0.min.js">script>
    <script type="text/javascript">
        $(function () {
            var $btn = $("#btn");
            var $user = $("#user");
            $btn.click(function () {
				// 修改输入框内的值
                $user.attr("value","123")
            })
        });
    script>
head>
<body>
    <form action="#" >
        用户名:<input type="text" name="user" id="user">br>
        <input type="submit" id="btn">
    form>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    2. 创建节点

    2.1 基本介绍

    1. 创建节点: 使用 jQuery 的工厂函数 $(): $(html标签) 会根据传入的 html 标记字符串创建一个 jQuery 对象, 并返回。
    2. 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中。
    3. 当创建单个元素时, 需注意闭合标签和使用标准的 HTML 格式. 例如创建一个

      元素, 可以使用$("\

      ")或 $("\

      \

      "), 但不能使用 $("\

      ") 或 $("\

      ")。

    4. 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建。

    2.2 插入方式

    这里所说的对象都指jQuery对象。

    📌 内部插入法

    // 向每个匹配的元素的内部的结尾处追加内容
// 例如：A.apppend(B)，表示将B对象添加到A对象内部的结尾处
append(content)

// 将每个匹配的元素追加到指定的元素中的内部结尾处
// 例如：A.apppendTo(B)，表示将A对象添加到B对象内部的结尾处
appendTo(content)

// 向每个匹配的元素的内部的开始处插入内容
// 例如：A.perpend(B)，表示将B对象添加到A对象内部的开头处
prepend(content)

// 向每个匹配的元素的内部的开始处插入内容
// 例如：A.perpendTo(B)，表示将A对象添加到B对象内部的开头处
prependTo(content)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    💡 内部插入法是在元素内部插入内容，该内容会成为该元素的子元素或节点。

    📌 外部插入法

    // 在每个匹配的元素之后插入内容
// 例如：A.after(B)，表示将B对象添加到A对象的后面，B成为A的兄弟节点，B在A之后
after(content)

// 在每个匹配的元素之前插入内容
// 例如：A.before(B)，表示将B对象添加到A对象的前面，B成为A的兄弟节点,B在A之前
before(content)

// 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
// 例如：A.insertAfter(B)，表示将A对象添加到B对象的后面，A成为B的兄弟节点，A在B之后
insertAfter(content)

// 把所有匹配的元素插入到另一个、指定的元素元素集合的前面
// 例如：A.insertBefore(B)，表示将A对象添加到B对象的前面，A成为B的兄弟节点,A在B之前
insertBefore(content)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    💡外部插入法是在元素外部插入内容，该内容会成为该元素的兄弟节点。

    3. 删除节点

    1. remove()

     remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用。

    1. empty()

     清空节点 – 清空元素中的所有后代节点(不包含属性节点)。

    4. 复制节点

    1. clone()

     克隆匹配的 DOM 元素, 返回值为克隆后的副本。但此时复制的新节点不具有任何行为。

    1. clone(true)

     复制元素的同时也复制元素中的的事件（即克隆了这个元素身上所绑定的所有动作、行为）。

    5. 替换节点

    1. replaceWith()

     将所有匹配的元素都替换为指定的HTML或DOM/juqery元素。A.replaceWith(B)（用B替换A）

    1. replaceAll()

     颠倒了的replaceWith()。A.replaceAll(B)（用A替换B）

    💡注意:
     若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失。

    {% endnote %}

    6. 属性操作

    1. attr()：获取属性和设置属性。
    2. attr()：传递一个参数时, 即为某元素的获取指定属性。
    3. attr()：传递两个参数时, 即为某元素设置指定属性的值。
    4. jQuery中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(),height(), width(), css() 等。
    5. removeAttr()：删除指定元素的指定属性。

    7. 样式操作

    1. 获取 class 和设置 class：class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成。
    2. 追加样式：addClass()，参数就是css样式表中定义的那个。
    3. 移除样式：removeClass() — 从匹配的元素中删除全部或指定的 class。
    4. 切换样式：toggleClass() — 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它。
    5. 判断是否含有某个样式：hasClass() — 判断元素中是否含有某个 class, 如果有, 则返回true; 否则返回 false。

    8. 获取HTML，文本值

    1. html()：设置或返回所选元素的内容（包括HTML标记）。
    2. text()：读取和设置某个元素中的文本内容。
    3. val()：读取和设置某个元素中的值。

    9. 常用的遍历节点方法

    1. 取得匹配元素的所有子元素组成的集合： children() 该方法只考虑子元素而不考虑任何后代元素
    2. 取得匹配元素后面的同辈元素的集合：next()/nextAll();
    3. 取得匹配元素前面的同辈元素的集合：prev()/prevAll();
    4. 取得匹配元素前后所有的同辈元素：siblings()
    5. 获取指定的第几个元素：nextAll().eq(index)
    6. 对获取到的同辈元素进行过滤：nextAll().filter("标签")

    📌演示

    $("div[class='one']").children().each(function (){
	alert("子 div 的内容是~~~ " + $(this).text());
})

// 其余集合的遍历方式都差不多

    • 1
    • 2
    • 3
    • 4
    • 5

    👆$(this)相当于当前遍历到的这个元素。

    10. CSS-DOM操作

    CSS属性描述
    css()设置或返回匹配元素的样式属性。
    height()设置或返回匹配元素的高度。
    offset()返回第一个匹配元素相对于文档的位置。
    offsetParent()返回最近的定位祖先元素。
    position()返回第一个匹配元素相对于父元素的位置。
    scrollLeft()设置或返回匹配元素相对滚动条左侧的偏移。
    scrollTop()设置或返回匹配元素相对滚动条顶部的偏移。
    width()设置或返回匹配元素的宽度。

    七、总结

     以上就是Jquery的全部内容，讲了一些Jquery常用的方法。想要详细了解的小伙伴，可以到👉jQuery API 3.5.1 速查表👈去查看。如果文章有描述不正确或者错误的地方，还望指正。您可以留言📫或者私信我。🙏

    最后希望大家多多 关注+点赞+收藏^_^，你们的鼓励是我不断前进的动力！！！
    感谢感谢~~~🙏🙏🙏

  • 相关阅读:
    [云原生之k8s] Kubernetes原理
    Python反序列化免杀上线CS
    软件设计模式系列之四——简单工厂模式
    CTRL C V
    Python高级语法----Python C扩展与性能优化
    Python下sensor_msgs.msg.PointCloud2数据的高效读取
    2310D必须在构造器中初化嵌套构的字段
    Java代码hello word
    设计模式之单例模式
    mongodb——概念介绍（文档，集合，固定集合，元数据，常用数据类型）
  • 原文地址：https://blog.csdn.net/qq_35947021/article/details/127767407