首页 > 其他分享 >【2.0】前端基础jQuery之引入

【2.0】前端基础jQuery之引入

时间：2024-02-28 16:23:14浏览次数：16  
标签：jQuery 前端 元素 li init div 2.0 选择器 fn

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

标签：jQuery,前端,元素,li,init,div,2.0,选择器,fn
From： https://www.cnblogs.com/dream-ze/p/18040886

相关文章

  • 【1.0】jQuery引入
    【一】什么是jQuery【1】概述jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Writeless,domore.“【2】小结jQuery内部封装......
  • 2.03
    前我们的查询语句也要进行修改，这里使用的时模糊查询，因为我们传入的是具体某年某月，我们要根据这个来输出账本中有的所有在这个月中的记录。先在这个页面中取出这个值Intentintent=getIntent();month11=intent.getStringExtra("date");然后查询SQLiteDatabase......
  • 2.07
    <?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"......
  • 2.06
    <?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.a......
  • 2.09
    ?xmlversion="1.0"encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="50dp"android:b......
  • 2.08
    <?xmlversion="1.0"encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="30dp">&......
  • GitHub上整理的一些工具（Web 前端相关）
    Web服务器性能/压力测试工具/负载均衡器http_load:程序非常小，解压后也不到100Kwebbench:是Linux下的一个网站压力测试工具，最多可以模拟3万个并发连接去测试网站的负载能力ab:ab是apache自带的一款功能强大的测试工具Siege:一款开源的压力测试工具，可以根据配置对一个WEB......
  • 2024.02.01
    一些常见的状态码为：200–服务器成功返回网页404–请求的网页不存在503–服务器超时1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态码。100（继续）请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。101（切换协议）请求者已要求......
  • 2024.02.07
    模拟器卸载安装的APP的方法在做安卓的实验时遇到了一个问题需要在模拟器卸载APP，找了网上很多资料发现没有用，于是自己摸索解决了。以Pixel2API29为例1、打开模拟器，点击更多2、点击帮助（Help）3、找到菜单的快捷命令4、退出到原始的模拟器页面，输入对应的快捷键（即，Ctrl+M）出现......
  • 前端面试题（四）—— 事件委托（Event Delegation）
    一、什么是事件委托事件委托（EventDelegation）是一种常用的技术。它利用事件冒泡的特性，在父元素上监听事件，而不是在子元素上直接添加事件监听器。通过在父元素上捕获事件，然后根据事件的目标（target）来执行相应的操作，从而实现对子元素的事件处理。二、实现方式通过给父元素添加事......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99