【2.0】前端基础jQuery之引入

【一】jQuery基本语法

【1】基本语法

jQuery(选择器).action()

【2】简写

秉承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>
<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是一个流行的JavaScript库，它提供了便捷的方法来选择和操作HTML元素。

【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文档的标签内添加

posted @ 2024-02-28 16:21 Chimengmeng 阅读(33) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【2.0】前端基础jQuery之引入

【一】jQuery基本语法

【1】基本语法

【2】简写

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

【三】基本选择器

【1】元素选择器（Element Selector）：

【2】ID选择器（ID Selector）：

【3】类选择器（Class Selector）

【4】属性选择器（Attribute Selector）：

【5】选择器组合（Multiple Selectors）：

【6】后代选择器（Descendant Selector）

【7】子元素选择器（Child Selector）：

【8】下一个兄弟元素选择器（Next Adjacent Selector）

【9】后续所有兄弟元素选择器（Following Siblings Selector）

【10】示例

【四】组合选择器

【1】并集选择器（Union Selector）：

【2】后代选择器（Descendant Selector）：

【3】子元素选择器（Child Selector）：

【4】相邻兄弟选择器（Adjacent Sibling Selector）：

【5】兄弟选择器（General Sibling Selector）：

【6】过滤选择器（Filter Selector）：

【五】分组与嵌套

【1】分组（Grouping）

【2】嵌套（Nesting）

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

【七】基本筛选器

【1】:first

【2】:last

【3】:even

【4】:odd

【5】:eq(index)

【6】:gt(index)

【7】:lt(index)

【8】:header

【9】:animated

【10】:focus

【11】:contains(text)

【12】:empty

【13】:parent

【八】基本筛选器案例

【九】属性选择器

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

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

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

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

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

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

【7】案例

【十】表单筛选器

【1】引入jQuery库文件

公告

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

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

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

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

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

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