前端基础之jQuery基础

合集 - 前端炒米粉(25)
1.前端基础之前端知识引入2.前端基础之HTTP协议介绍3.前端基础之HTML基础4.前端基础之HTML进阶5.前端基础之CSS基础6.前端基础之CSS选择器7.前端基础之CSS基本属性8.前端基础之CSS浮动和定位方式9.CSS小练习10.前端基础之JavaScript引入11.前端基础之JavaScript的数据类型12.前端基础之JavaScript数组13.前端基础之JavaScript运算符14.前端基础之JavaScript流程控制15.前端基础之JavaScript函数16.前端基础之JavaScript对象17.前端基础之JavaScriptDOM和BOM18.前端基础之原生js事件绑定案例19.前端基础之jQuery引入
20.前端基础之jQuery基础
21.前端基础之jQuery进阶22.前端基础之jQuery事件23.前端基础之jQuery重要补充24.前端框架之Bootstrap25.前端补充：url编码
收起

一、jQuery与js代码

（1）jQuery基本语法

# 原来写法
jQuery(选择器).action()
 
# 简写
秉持着jQuery的宗旨，jQuery简写$
jQuery() === $()

（2）jQuery与js代码对比

eg：将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>
<p id="p2">大河之水天上来!</p>
 
<script>
    // 原生js
    let p1Ele = document.getElementById("p1");
    let p2Ele = document.getElementById("p2");
 
    p1Ele.style.color = 'red'
    p2Ele.style.color = 'green'
 
    // jQuery
    $('#d1').css('color','red').next().css('color','green')
</script>
</body>
</html>

二、jQuery选择器

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

（1）基本选择器

基本选择器是jQuery中最常用的选择器, 也是最简单的选择器, 它通过id, class和标签名来查找DOM对象

种类 用法 描述 返回值
id $(“#myDiv”) 直接选择html中的id=“myDiv” 单个元素组成的集合
Element $(“div”) element翻译过来的意思就是元素, 所有element其实就是html已经定义的标签元素, 比如div, p, a, input等 集合元素
class $(“.myClass”) 直接选择html代码中class="myClass"的元素或元素组(因为在同一html中, class是可以存在多个同样的值的) 集合元素
* $(“*”) 匹配所有的元素, 包括, 多用于结合上下文来搜索 集合元素
selector1, selector2… selectorN $(“div, span, p.myClass”) 将每一个选择器匹配到的元素合并后一起返回, 你可以指定任意多个选择器, 并将匹配到的元素合并到集合中, p.myClass是表示匹配元素 p class=“myClass” 集合元素 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 1.改变id为one的元素的背景色为yellow
            $("#btn001").click(
                function () {
                    $("#one").css("background", "gray");
                }
            );
            // 2.改变class为mybtn的的所有元素的背景色为red
            $("#btn002").click(
                function () {
                    $(".mybtn").css("background", "red");
                }
            );
            // 3.改变元素名为div的的所有元素的背景色为black
            $("#btn003").click(
                function () {
                    $("div").css("background", "black");
                }
            );
 
            //4.改变所有元素的背景色为pink
            $("#btn004").click(
                function () {
                    $("*").css("background", "pink");
                }
            );
            //5.改变所有的<span>元素和id为two, class为mybtn 的元素的背景色为blue
            $("#btn005").click(
                function () {
                    $("span.c1, #two, .mybtn").css("background", "blue");
                }
            );
 
        });
    </script>
</head>
<body>
<button id="btn001">改变id为one的元素的背景色为gray</button>
<button id="btn002">改变class为mybtn的所有元素的背景色为red</button>
<button id="btn003">改变元素名为&lt;div&gt;的所有元素的背景色为black</button>
<button id="btn004">改变所有元素的背景色为pink</button>
<button id="btn005">改变所有的&lt;span&gt;元素和id为two, class为mytag 的元素的背景色为blue</button>
<hr/>
<div style="height: 200px; width: 300px; background-color: chartreuse" id="one">id=one</div>
<div style="height: 200px; width: 300px; background-color: pink" id="two" class="mybtn">id=two</div>
<div style="height: 200px; width: 300px; background-color: blueviolet" id="three" class="mybtn">id=three</div>
<div style="height: 200px; width: 300px; background-color: blue" id="four" class="mybtn">id=four</div>
<span style="background-color: chartreuse" class="c1">id=five</span>
<span style="background-color: chartreuse" class="c2">id=six</span>
</body>
</html>

（2）组合选择器（层次选择器）

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用组合选择器。

种类 用法 描述 返回值
后代选择器 $(“ancestor descendant”) 匹配ancestor里的所有descendant(后代)元素 集合元素
儿子选择器 $(“parent>child”) 匹配parent下的所有child(子)元素 集合元素
毗邻选择器 $(“prev+next”) 匹配紧接在prev后的next元素 集合元素
弟弟选择器 $(“prev~siblings”) 匹配prev后的所有siblings元素 集合元素

注意:

js中的(“prev ~ div”)选择器只能选择"#prev"元素后面的同辈元素;

而jQuery中的 siblings 方法与位置无关, 只要是同辈节点就可以选取

// 选择 class 为 "descendant" 的后代元素
$(".ancestor .descendant").css("font-size", "16px");
 
// 选择 class 为 "child" 的直接子元素
$(".parent > .child").css("color", "red");
 
// 选择 class 为 "sibling" 的相邻兄弟元素
$(".first + .sibling").css("background-color", "yellow");
 
// 选择 class 为 "sibling" 的所有相邻兄弟元素
$(".first ~ .sibling").css("border", "1px solid black");
 
// 选择所有 <span> 元素，这些 <span> 元素是 <div> 元素的后代
$('div span').css('color', 'blue');
 
// 选择所有直接位于 <div> 元素下的 <span> 元素
$('div>span').css('font-weight', 'bold');
 
// 选择紧接在 <div> 元素后面的第一个 <span> 元素
$('div+span').css('color', 'red');
 
// 选择所有紧跟在 <div> 元素后面的 <span> 元素
$('div~span').css('font-weight', 'bold');

（3）分组与嵌套

① 分组

在 jQuery 中，你可以使用逗号 , 将多个选择器组合在一起，以实现对多个元素进行操作。这样的操作方式称为分组操作。

// 选择所有具有类名为 "box" 的 <div> 元素和所有 <p> 元素，并设置它们的字体颜色为红色
$('.box, p').css('color', 'red');
 
 
// 选择具有 id 为 "d1" 的元素、具有类名为 "c1" 的元素以及所有 <p> 元素，并设置它们的背景颜色为黄色
$('#d1,.c1,p').css('background-color', 'yellow');

② 嵌套

在 jQuery 中，你可以将选择器嵌套在另一个选择器内部，以实现更精确地定位元素。这种操作方式称为嵌套操作。

// 选择所有 <div> 元素并设置它们的背景颜色为灰色
$('div').css('background-color', 'gray');
 
// 选择所有具有类名为 "c1" 的 <div> 元素
$('div.c1').css('color', 'red');
 
// 选择具有 id 为 "d1" 的 <div> 元素并设置其文本内容
$('div#d1').text('Hello, World!');
 
// 选择具有 id 为 "container" 的元素内部的所有 <p> 元素，并设置它们的背景颜色为蓝色
$('#container p').css('background-color', 'blue');

（4）基本筛选器

选择器 描 述 示 例 返回值
:first 匹配第一个元素 $(“div:first”) 单个元素
:last 匹配最后一个元素 $(“span:last”) 单个元素
:even 匹配索引是偶数的元素 索引从0开始 $(“li:even”) 集合元素
: odd 匹配索引是奇数的元素 索引从0开始 $(“li:odd”) 集合元素
:eq(index) 匹配索引等于index的元 素(索引从0开始) $(“input:eq(2)”) 单个元素
:gt(index) 匹配索引大于index的元 素(索引从0开始) $(“input:gt(1)”) 集合元素
:lt(index) 匹配索引小于index的元 素(索引从0开始) $(“input:lt(5)”) 集合元素
:not(selector) 选择所有不匹配给定选择器的元素。 $('div:not(.special)') 集合元素
:has(element) 选取包含指定元素的元素 $('div:has("p")') 集合元素

当使用 jQuery 时，基本筛选器是非常有用的工具，可以帮助你选择文档中特定的元素。下面是一些常用的基本筛选器以及它们的详细解释和示例代码：

① :first

  • 描述：选择匹配的第一个元素。
  • 示例：选择第一个段落元素并添加类名 "first-para"。
$('p:first').addClass('first-para');

② :last

  • 描述：选择匹配的最后一个元素。
  • 示例：选择最后一个列表项并隐藏它。
$('li:last').hide();

③ :even

  • 描述：选择所有偶数位置的元素（从 0 开始计数）。
  • 示例：选择所有偶数行的表格行并添加背景色。
$('tr:even').css('background-color', 'lightgray');

④ :odd

  • 描述：选择所有奇数位置的元素（从 0 开始计数）。
  • 示例：选择所有奇数行的表格行并添加斜线样式。
$('tr:odd').css('text-decoration', 'line-through');

⑤ :eq(index)

  • 描述：选择索引值与指定值相匹配的元素（从 0 开始计数）。
  • 示例：选择第三个段落元素并改变其文本颜色。
$('p:eq(2)').css('color', 'blue');

⑥ :gt(index)

  • 描述：选择索引值大于指定值的元素（从 0 开始计数）。
  • 示例：选择索引大于 2 的所有段落元素并隐藏它们。
$('p:gt(2)').hide();

⑦ :lt(index)

  • 描述：选择索引值小于指定值的元素（从 0 开始计数）。
  • 示例：选择索引小于 3 的所有列表项并改变它们的字体大小。
$('li:lt(3)').css('font-size', '1.2em');

⑧ :not(selector)

  • 描述：选择所有不匹配给定选择器的元素。
  • 示例：选择除了类名为 "special" 的所有段落元素并添加边框样式。
$('p:not(.special)').css('border', '1px solid black');

⑨ :has(element)

  • 描述：选取包含指定元素的元素。
  • 示例：选择包含 <p> 元素的 <div> 元素。
$('div:has("p")')

（5）属性选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

选择器 描 述 示 例 返回值
[attr] 匹配拥有此属性 的元素 $(“img[alt]“) 集合元素
[attr=value] 匹配属性值为value 的元素 $(“a[title=test]“) 集合元素
[attr!=value] 匹配属性值不等于 value的元素 $(“a[title!=test]“) 集合元素
[attr^=value] 匹配属性值以value 开头的元素 $(“img[alt^=welcome]“) 集合元素
[attr$=value] 匹配属性值以value 结尾的元素 $(“img[alt$=last]“) 集合元素
[attr*=vlaue] 匹配属性值中含有 value的元素 $(“div[title*=test]“) 集合元素
[attr1][attr2]… 通过多个属性 进行匹配 $(“div[id][title*=test]“) 集合元素

① 属性存在选择器 [attribute]：

  • 选择具有指定属性的元素。
// 选择所有具有 title 属性的元素
$('[title]')

② 属性值等于选择器 [attribute=value]：

  • 选择具有指定属性值的元素。
// 选择所有 class 属性值为 "example" 的元素
$('[class="example"]')

③ 属性值以指定字符串开头选择器 [attribute^=value]：

  • 选择属性值以指定字符串开头的元素。
// 选择所有 href 属性值以 "https" 开头的元素
$('[href^="https"]')

④ 属性值包含指定字符串选择器 [attribute*=value]：

  • 选择属性值中包含指定字符串的元素。
// 选择所有 src 属性值包含 "image" 的元素
$('[src*="image"]')

⑤ 属性值以指定字符串结尾选择器 [attribute$=value]：

  • 选择属性值以指定字符串结尾的元素。
// 选择所有 href 属性值以 ".com" 结尾的元素
$('[href$=".com"]')

⑥ 属性值包含指定单词选择器 [attribute~=value]：

  • 选择属性值中包含指定单词的元素。
// 选择所有 class 属性值包含 "example" 的元素
$('[class~="example"]')

⑦ 多属性选择器 [attribute1][attribute2]：

  • 选择同时具有多个属性的元素。
// 选择所有同时具有 title 和 class 属性的元素
$('[title][class]')

这些属性选择器可以帮助我们根据元素的属性来精确选择和操作元素。我们可以根据自己的需要结合使用这些选择器，以便更好地操作 DOM 元素。

（6）表单筛选器

选择器 描 述 示 例 返 回
:input 匹配所有input, textarea, select, button元素 $(“input”) 集合元素
:text 匹配所有文本框 $(“:text”) 集合元素
:password 匹配所有密码框 $(“:password”) 集合元素
:radio 匹配所有单选框 $(“:radio”) 集合元素
:checkbox 匹配所有所有多选框 $(“:checkbox”) 集合元素
:submit 匹配所有提交按钮 $(“:submit”) 集合元素
:image 匹配所有图像按钮 $(“:image”) 集合元素
:button 匹配所有按钮 $(“:button”) 集合元素
:checked 匹配所有被选中的复选框或单选按钮元素 $(':checked')
:reset 匹配所有重置按钮 $(“:reset”) 集合元素
:file 匹配所有上传域 $(“:file”) 集合元素

在 jQuery 中，表单筛选器可以帮助您选择表单元素，如输入框、复选框、下拉列表等。以下是一些常用的表单筛选器及其详细解释：

① :input

  • 选择所有的 <input>、<select>、<textarea> 和 <button> 元素。
// 选择所有表单元素
$(':input')

② :text

  • 选择所有类型为文本的 <input> 元素。
// 选择所有文本输入框
$(':text') == $('input[type="text"]')

③ :password

  • 选择所有类型为密码的 <input> 元素。
// 选择所有密码输入框
$(':password') == $('input[type="password"]')

④ :radio

  • 选择所有类型为单选按钮的 <input> 元素。
// 选择所有单选按钮
$(':radio')

⑤ :checkbox

  • 选择所有类型为复选框的 <input> 元素。
// 选择所有复选框
$(':checkbox')

⑥ :submit

  • 选择所有类型为提交按钮的 <input> 元素。
// 选择所有提交按钮
$(':submit')

⑦ :image

  • 选择所有类型为图像的 <input> 元素。
// 选择所有图像按钮
$(':image')

⑧ :button

  • 选择所有类型为按钮的 <button> 元素。
// 选择所有按钮元素
$(':button')

⑨ :checked

  • 选择所有被选中的复选框或单选按钮元素。
// 选择所有被选中的复选框或单选按钮
$(':checked')

⑩ :reset

  • 匹配所有重置按钮
// 选择所有重置按钮元素
$(':reset')

⑪ :file

  • 匹配所有上传域
// 选择所有上传区域
$(':file')

这些表单筛选器可以帮助您轻松地选择和操作表单元素。根据您的需求，结合使用这些筛选器可以更方便地操作表单中的不同类型的元素。

（7）表单对象属性过滤选择器

选择器 描 述 示 例 返回值
:checked 匹配所有被选中的元素 (含单选框，复选框) $(“input:checked”) 集合元素
:disabled 匹配所有不可用 的元素 $(“form :disabled”) 集合元素
:selected 匹配所有被选中的 选项元素 $(“select :selected”) 集合元素
:enabled 匹配所有可用元素 $(“form :enabled”) 集合元素

① checked属性

  • 用于选择被选中的复选框或单选按钮。
// 选择被选中的复选框
$('input[type="checkbox"]:checked')
 
// 选择被选中的单选按钮
$('input[type="radio"]:checked')

② disabled属性

  • 用于选择被禁用的表单元素。
// 选择所有被禁用的输入框
$("input:disabled")

③ selected属性

  • 用于选择下拉列表中被选中的选项。
// 选择下拉列表中被选中的option元素
$('select option:selected')

④ :enabled属性

  • 选取所有可用的表单元素。
  • 可用元素指的是没有被禁用（disabled）的元素。
// 选择所有可用的输入框
$("input:enabled")

⑤ 特殊情况

$(':checked')  # 它会将checked和selected都拿到
ce.fn.init {0: input, 1: option, length: 2, prevObject: ce.fn.init}
$(':selected')  # 它不会，只拿selected
ce.fn.init {0: option, length: 1, prevObject: ce.fn.init}
 
$('input:checked')  # 自己加一个限制条件，只拿checked
ce.fn.init {0: input, length: 1, prevObject: ce.fn.init}

（8）筛选器方法

  • .eq(index)：选取指定索引位置的元素。
// 选取索引为2的列表项
$("li").eq(2)
  • .first()：选取第一个匹配的元素。
// 选取第一个div元素
$("div").first()
  • .last()：选取最后一个匹配的元素。
// 选取最后一个段落元素
$("p").last()
  • .not(selector)：从匹配的元素中去除指定的元素。
// 去除具有类名为selected的列表项
$("li").not(".selected")
  • .filter(selector)：根据指定的选择器筛选元素。
// 筛选具有类名为highlight的div元素
$("div").filter(".highlight")
  • .has(selector)：筛选包含指定选择器所匹配元素的元素。
// 筛选包含列表项的ul元素
$("ul").has("li")

拿到标签下面的标签

  • .next()：选择当前元素的下一个同级元素。
// 拿到 id为 d1的标签下一个标签
$('#d1').next()
  • .nextAll()：选择当前元素之后的所有同级元素。
// 拿到 id为 d1的标签下的所有标签
$('#d1').nextAll()
  • .nextUntil()：选择当前元素到指定元素之间的所有同级元素。
    • 不包括最后一个
// 拿到 id为 d1的标签下的直到结束条件的所有标签
$('#d1').nextUntil()
 
// 拿到 id为 d1的标签下的直到class为c1的标签的所有标签
$('#d1').nextUntil('.c1')

类上面，拿到标签上面的标签

  • .prev()：选择元素之前紧邻的同级元素。
// 选择具有类名 "c1" 的元素前面紧邻的同级元素
$('.c1').prev()

注意：

如果 $('.c1') 选择的元素是第一个同级元素，那么 .prev() 将不会选择任何元素，因为没有前面的同级元素。

  • prevAll()：选择匹配元素之前的所有同级元素，而不仅仅是紧邻的前一个元素。
// 选择具有类名 "c3" 的元素之前的所有同级元素
$('.c3').prevAll()
  • .prevUntill()：选择所有匹配元素之前的所有同级元素，直到遇到指定的选择器、元素或 jQuery 对象为止。
// 选择在具有 .selected 类的 <li> 元素之前的所有 <li> 元素，并将它们的文本颜色设置为红色。
$("li.selected").prevUntil(".selected").css("color", "red");

取父标签

  • .parent()：选择当前元素的直接父元素。
// 选择了 p 元素的父元素，并将其边框样式设置为红色。
$("p").parent().css("border", "2px solid red");
  • .parents()：选择当前元素的所有祖先元素。
// 选择了 p 元素的所有祖先元素，并将它们的背景颜色设置为浅蓝色。
$("p").parents().css("background-color", "lightblue");
  • .parentsUntil()：选择当前元素到指定元素之间的所有祖先元素。
// 选择了 p 元素的祖先元素，直到遇到类名为 grandparent 的祖先元素为止，然后将它们的边框样式设置为绿色。
$("p").parentsUntil(".grandparent").css("border", "2px solid green");
  • .children()：取到所有的子标签
// 选择了类名为 parent 的元素所有的子标签，并将它们的文字颜色设置为红色。
$(".parent").children().css("color", "red");
 
// 选择了类名为 parent 的元素的直接子元素 p ，并将它们的文字颜色设置为蓝色。
$(".parent").children("p").css("color", "blue");
  • .siblings()：同级别上下所有标签
// 选择了类名为 selected 的元素在同一层级的其他元素，并将它们的背景颜色设置为浅蓝色。
$(".selected").siblings().css("background-color", "lightblue");
  • .find()：从某个区域内筛选出想要的标签
// 选择了类名为 parent 的元素下的所有 p> 元素，并将它们的文本颜色设置为绿色。
$(".parent").find("p").css("color", "green");
等价于
$('.parent p')
  • 等价关系
$('div span:first')
ce.fn.init {0: span, length: 1, prevObject: ce.fn.init}
$('div span').first()
ce.fn.init {0: span, length: 1, prevObject: ce.fn.init}
 
$('div span:last')
ce.fn.init {0: span, length: 1, prevObject: ce.fn.init}
$('div span').last()
ce.fn.init {0: span, length: 1, prevObject: ce.fn.init}
 
$('div span:not("#d3")')
ce.fn.init {0: span, 1: span, length: 2, prevObject: ce.fn.init}
$('div span').not("#d3")
ce.fn.init {0: span, 1: span, length: 2, prevObject: ce.fn.init}
posted @   Xiao0101  阅读(21)  评论(0)  编辑  收藏  举报
相关博文：
· 前端基础之CSS选择器
· 前端基础之jQuery进阶
· 【2.0】前端基础jQuery之引入
· 【14.0】前端基础jQuery之引入
· 05 jQuery
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示

目录