诚信是你价格不菲的鞋子，踏遍千山万水，质量也应永恒不变。
jQuery选择器大全总结：
jQuery选择器是一种用于在HTML文档中选择元素的强大工具。下面是一些常用的jQuery选择器的总结：
-
基本选择器：
- 元素选择器：通过元素名称选择元素，例如：
$("p")选择所有<p>元素。 - ID选择器：通过元素的唯一ID属性选择元素，例如：
$("#myElement")选择ID为 "myElement" 的元素。 - 类选择器：通过元素的class属性选择元素，例如：
$(".myClass")选择所有具有 "myClass" 类的元素。
- 元素选择器：通过元素名称选择元素，例如：
-
层级选择器：
- 后代选择器：选择指定元素的后代元素，例如：
$("parentElement descendantElement")选择 parentElement 下的 descendantElement 元素。 - 子元素选择器：选择指定元素的直接子元素，例如：
$("parentElement > childElement")选择 parentElement 的直接子元素 childElement。 - 兄弟选择器：选择与指定元素同级的元素，例如：
$("targetElement ~ siblingElement")选择 targetElement 同级的 siblingElement 元素。
- 后代选择器：选择指定元素的后代元素，例如：
-
过滤选择器：
- :first：选择第一个匹配的元素。
- :last：选择最后一个匹配的元素。
- :even：选择索引为偶数的元素，从0开始计数。
- :odd：选择索引为奇数的元素，从0开始计数。
- :eq(index)：选择指定索引位置的元素，例如：
$("li:eq(2)")选择第三个<li>元素（索引从0开始）。 - :gt(index)：选择索引大于指定值的元素，例如：
$("li:gt(2)")选择索引大于2的<li>元素。 - :lt(index)：选择索引小于指定值的元素，例如：
$("li:lt(2)")选择索引小于2的<li>元素。 - :not(selector)：选择不匹配指定选择器的元素，例如：
$("p:not(.myClass)")选择所有没有 "myClass" 类的<p>元素。
-
内容选择器：
- :contains(text)：选择包含指定文本的元素，例如：
$("p:contains('Hello')")选择包含 "Hello" 文本的<p>元素。 - :empty：选择没有子元素或文本的空元素。
- :has(selector)：选择包含符合指定选择器的元素的元素，例如：
$("ul:has(li)")选择包含<li>元素的<ul>元素。
- :contains(text)：选择包含指定文本的元素，例如：
-
可见性选择器：
- :visible：选择当前可见的元素。
- :hidden：选择当前隐藏的元素。
-
表单选择器：
- :input：选择所有
<input>、<textarea>、<select>和<button>元素。 - :text：选择所有单行文本输入框
<input type="text">元素。 - :password：选择所有密码输入框
<input type="password">元素。 - :radio：选择所有单选按钮
<input type="radio">元素。 - :checkbox：选择所有复选框
<input type="checkbox">元素。 - :submit：选择所有提交按钮
<input type="submit">元素。 - :button：选择所有按钮
<input type="button">和<button>元素。
- :input：选择所有
这些是常见的jQuery选择器，可以根据需要灵活组合使用，以选择页面中需要操作的元素。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selector Examples</title>
</head>
<body>
<div class="my-div">
<p>Hello, jQuery!</p>
</div>
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
</ul>
<input type="text" id="inputField" value="Initial Value">
<button class="my-btn">Click Me</button>
</body>
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 选择元素并操作
$(document).ready(function() {
// 元素选择器 - 选中所有 <p> 元素并修改文本内容
$("p").text("Hello, jQuery!");
// ID 选择器 - 选中具有 ID 为 "inputField" 的输入框并修改值
$("#inputField").val("New Value");
// 类选择器 - 选中类名为 "my-div" 的 <div> 元素并添加类名
$(".my-div").addClass("highlight");
// 层级选择器 - 选中 <ul> 元素下的所有 <li> 元素并添加样式
$("ul li").css("color", "blue");
// 过滤选择器 - 选中所有偶数索引的 <li> 元素并添加样式
$("li:even").css("background-color", "#f2f2f2");
// 内容选择器 - 选中包含文本 "Item 3" 的 <li> 元素并添加样式
$("li:contains('Item 3')").css("font-weight", "bold");
// 可见性选择器 - 选中可见的 <div> 元素并隐藏
$("div:visible").hide();
// 表单选择器 - 选中文本输入框并添加样式
$(":text").css("border", "2px solid red");
// 选择按钮并绑定点击事件
$(".my-btn").click(function() {
alert("Button Clicked!");
});
});
</script>
</html>
如果uni框架如何用选择器？
在uni-app框架中，可以使用类似jQuery的选择器来选择和操作页面中的元素。uni-app使用的选择器是基于原生小程序的选择器，因此它与jQuery选择器的语法略有不同，但大体上很相似。
uni-app中常用的选择器有两种方式：选择器API和选择器组件。
1. 选择器API：
uni-app提供了选择器API来选择和操作页面中的元素，该API类似于jQuery的选择器语法。
使用选择器API的基本语法如下：
uni.createSelectorQuery().select('.class-selector').fields({properties: ['property', ...]}, function(res) {
// 在这里处理选择器选中的元素
}).exec();
其中，.class-selector 是选择器，可以是类选择器、ID选择器等。
例如，要选择一个类名为 my-class 的元素，并修改其文本内容，可以这样做：
uni.createSelectorQuery().select('.my-class').fields({node: true, size: true}, function(res) {
if (res) {
res.node.innerText = "Hello, uni-app!";
}
}).exec();
2.选择器组件：
uni-app也提供了一些内置的选择器组件，类似于HTML中的表单控件。你可以直接在模板中使用这些组件，并通过相关的事件处理函数来获取和操作选择的元素。
例如，使用 <view> 标签来实现一个类似于 div 的元素，可以这样选择它：
<view class="my-class" @tap="handleTap">Click me</view>
在对应的组件或页面的脚本中，处理点击事件并获取元素：
methods: {
handleTap() {
let element = this.$refs.myElement;
if (element) {
element.innerText = "Hello, uni-app!";
}
}
}
在uni-app中，使用选择器API或选择器组件，可以很方便地选中和操作页面中的元素。这些方法可以根据你的具体需求来选择合适的方式。
在uni-app框架中，可以使用选择器API来选中和操作页面中的元素。下面是一个简单的uni-app示例代码，演示如何使用选择器API来选择一个元素并修改其文本内容：
HTML 示例代码（位于 pages/index/index.vue）：
<template>
<view class="content">
<view class="my-class" @tap="changeText">Click me</view>
</view>
</template>
<script>
export default {
methods: {
changeText() {
// 选择器API - 选中类名为 "my-class" 的元素并修改文本内容
uni.createSelectorQuery().select('.my-class').fields({node: true}, (res) => {
if (res) {
res.node.innerText = "Hello, uni-app!";
}
}).exec();
}
}
}
</script>
<style>
/* 样式省略，可以添加一些样式来美化页面 */
</style>
在上述代码中，我们使用选择器API来选择一个类名为 my-class 的元素。当点击该元素时，调用 changeText 方法，该方法会使用选择器API选中该元素，并将其文本内容修改为 "Hello, uni-app!"。
请注意，为了使上述示例代码正常工作，需要在页面中引入uni-app框架，并在script标签中的export default里添加methods属性以处理点击事件。在真实的uni-app项目中，你需要根据具体需求和业务逻辑进行选择器的使用和操作。
![[Linux]线程基本知识](https://img-blog.csdnimg.cn/cc16f1e3591a439787df18f97bb2f134.png)
