首页 前端知识 jQuery 基础、选择器和筛选器

jQuery 基础、选择器和筛选器

2024-03-11 10:03:40 前端知识 前端哥 242 248 我要收藏

【一】JQuery基础

【1】什么时Jquery

(1)定义

  • jQuery是一个流行的JavaScript库,旨在简化JavaScript编程和处理HTML文档的任务
  • 它提供了一组易于使用的功能和方法,可以加快开发速度并提高跨浏览器兼容性。
  • 一款轻量级的JS框架

(2)特点

  • 简化DOM操作:jQuery提供了简洁的语法和方法,使得选择和操作HTML元素变得更加容易。可以使用CSS选择器来选择元素,并使用链式调用方法来操作它们。
  • 事件处理:jQuery使事件处理变得更加简单。您可以使用.on()方法来附加事件处理程序,并使用.click().hover()等方法来处理常见的事件。
  • AJAX支持:jQuery提供了简化和改进AJAX(Asynchronous JavaScript and XML)操作的方法。可以使用.ajax()方法轻松地发送异步HTTP请求,并处理返回的数据。
  • 动画效果:jQuery具有丰富的动画功能,可以轻松地创建过渡效果、淡入淡出、滑动等动画效果。可以使用.animate()方法来控制元素的属性值,从而实现动画效果。
  • 跨浏览器兼容性:jQuery致力于提供跨浏览器一致性。会自动处理浏览器之间的差异,并提供相应的解决方案,以确保代码在不同浏览器上运行良好。
  • 插件生态系统:jQuery拥有丰富的插件生态系统,使开发人员能够轻松地扩展和定制功能。这些插件提供了各种功能,如日期选择器、图表库、图像轮播等。

(3)版本

  • 1.x

    • 兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。
    • 因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
  • 2.x

    • 不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。

    • 如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)3.x

  • 3.x

    • 不兼容IE678,只支持最新的浏览器。
    • 需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

【2】基本语法

(1)基本语法结构

jQuery(选择器).action

(2)简写

$(选择器).action

【3】下载和配置

(1)下载导入

  • 官网下载地址:Download jQuery | jQuery

请添加图片描述

  • 复制并保存在本地jquery-3.7.1.min.js

  • 导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>

</body>
</html>

(2)基于网络分布

  • 比需要有网络

  • jquery (v3.7.1) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

  • 复制<script>标签

  • 导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

</body>
</html>

【4】修改Pycharm默认配置

  1. 首先进入settings界面
  2. 点击Editor
  3. 再点击File and Code Templates
  4. 编辑HTML file
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>#[[$Title$]]#</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
#[[$END$]]#
</body>
</html>

【二】选择器

  • 选择器用于选取HTML元素

【1】基本选择器

(0)类型转换

  • jQuery对象 -> 标签对象
//第一个id为d1的标签
$("#d1")[0]
  • 标签对象 -> jQuery对象
$(document.getElementById("d1"))

(1)元素选择器

  • 使用元素名称作为选择器,选取所有匹配该元素名称的元素。
// 选择所有的段落元素
$("p")

(2)ID选择器

  • 使用ID属性值作为选择器,选取具有相同ID的唯一元素。
// 选择ID为"id1"的元素
$("#id1")

(3)类选择器

  • 使用类名作为选择器,选取具有相同类名的元素。
// 选择类名为"my-class"的元素
$(".my-class")

// 选择同时包含"class1"和"class2"类名的元素
$(".class1.class2")

(4)属性选择器

  • 使用元素的属性和属性值进行选择。
// 选择所有具有"title"属性的元素
$("[title]")

// 选择具有"title"属性且值为"example"的元素
$("[title='example']")

//选择具有 "href" 属性值以 "https://" 开头的所有链接
$('a[href^="https://"]')

(5)选择器组合

  • 通过逗号分隔多个选择器,同时选择多个元素。
// 选择包含"class1"或"class2"类名的元素
$(".class1, .class2")

(6)后代选择器

  • 选择某个元素的后代元素。
// 选择所有div内部的p元素
$("div p")

(7)儿子选择器

  • 选择某个元素的直接子元素。
// 选择所有列表元素中的直接子元素li
$("ul > li")

(8)毗邻选择器

  • 选择紧接在指定元素后的毗邻元素。
//选择紧接在 "myElement" 元素后的下一个兄弟元素
$('#myElement + div')

(9)兄弟选择器

  • 选择指定元素之后的所有兄弟元素。
//选择紧接在 "myElement" 元素后的所有兄弟元素中具有 "myClass" 类的元素
$('#myElement ~ .myClass');

【2】属性选择器

  • 属性选择器可以根据属性的存在、属性值的相等性、属性值的前缀、后缀或包含关系来选择元素。

(1)[attribute]

  • 选择具有指定属性的元素。
  • 例如,[href] 会选择具有 href 属性的元素。

(2)[attribute=value]

  • 选择具有指定属性并且属性值等于指定值的元素。
  • 例如,[type=text] 会选择 type 属性值为 text 的元素。

(3)[attribute~=value]

  • 选择具有指定属性并且属性值包含指定值的元素。属性值可以是多个单词,用空格分隔。
  • 例如,[class~=red] 会选择具有 class 属性值包含单词 red 的元素。
<p class="red bold">This is a paragraph.</p>
<p class="blue">This is another paragraph.</p>
<p class="red">This is a third paragraph.</p>

<script>
    //第一个和第三个 `<p>` 元素都具有 class`属性值包含单词 red,因此它们会被选中。
    $("[class~=red]")
</script>    

(4)[attribute|=value]

  • 选择具有指定属性并且属性值以指定值开头的元素,或者以指定值开头并且后面紧跟连字符(-)的元素。例如,[lang|=en] 会选择具有 lang 属性值为 en 或者以 en- 开头的元素。
<div lang="en">English content</div>
<div lang="en-US">English (United States) content</div>
<div lang="fr">French content</div>

<script>
    //第一个和第二个 <div> 元素都符合这个条件,因此它们会被选中
    $("[lang|=en]")
</script>    

(5)[attribute^=value]

  • 选择具有指定属性并且属性值以指定值开头的元素。
  • 例如,[href^=https] 会选择具有 href 属性值以 https 开头的元素。
<a href="https://www.example.com">Link 1</a>
<a href="http://www.example.com">Link 2</a>

<script>
    //选择第一个 <a> 元素
    $('[href^="https://"]')
</script>  

(6)[attribute$=value]

  • 选择具有指定属性并且属性值以指定值结尾的元素。
  • 例如,[src$=.png] 会选择具有 src 属性值以 .png 结尾的元素。
<img src="image.png" alt="Image 1">
<img src="image.jpg" alt="Image 2">

<script>
    //选择第一个 <img> 元素
    $('[src$=".png"]')
</script>  

(7)[attribute*=value]

  • 选择具有指定属性并且属性值包含指定值的元素。
  • 例如,[title*=open] 会选择具有 title 属性值包含单词 open 的元素。
<p class="red-text">Red text</p>
<p class="blue-text">Blue text</p>

<script>
    //选择第一个 <p> 元素
    $('[class*="red"]')
</script>  

(8)组合

  • 选择具有以特定属性值开头且以特定字符串结尾的元素
<a href="https://www.example.com/home">Home</a>
<a href="https://www.example.com/about">About</a>
<a href="https://www.example.com/contact">Contact</a>
<a href="https://www.example.com/products">Products</a>

<script>
    //选择第一个 <a> 元素
    $("a[href^='https:'][href$='home']")
</script>  

【3】组合选择器

(1)并集(分组)

  • 使用,号分隔
// 选择包含"class1"或"class2"类名的元素
$(".class1, .class2")

(2)交集

  • 紧挨着
// 选择同时包含"class1"和"class2"类名的元素
$(".class1.class2")

(3)嵌套

  • .find()方法
//选择包含"class1"类名元素下的包含"class2"类名的元素
$(".class1").find(".class2")

【三】筛选器

【1】基本筛选器

  • :first:选择第一个匹配的元素。
  • :last:选择最后一个匹配的元素。
  • :even:选择索引为偶数的元素(从0开始计数)
    • 它会选择索引为0、2、4等的匹配元素。
  • :odd:选择索引为奇数的元素(从0开始计数)。
    • 它会选择索引为1、3、5等的匹配元素。
  • :eq(index):选择索引为指定值的元素,其中 index 是一个整数。
    • 它会选择与指定索引相匹配的元素。例如,:eq(2) 会选择第三个匹配的元素。
  • :gt(index):选择索引大于指定值的元素,其中 index 是一个整数。
    • 它会选择索引大于指定值的所有匹配元素。
  • :lt(index):选择索引小于指定值的元素,其中 index 是一个整数。
    • 它会选择索引小于指定值的所有匹配元素。
  • :header:选择所有标题元素(如 <h1>, <h2>, <h3> 等)。
    • 它会选择文档中所有的标题元素。
  • :not(selector):选择不匹配指定选择器的元素。
    • 它会选择不符合指定选择器条件的所有元素。
  • :has(selector):选择包含至少一个匹配指定选择器的元素。
    • 它会选择包含至少一个符合指定选择器条件的元素的所有元素。
  • :empty:选择没有子元素或文本的空元素。
  • :contains(text):选择包含指定文本 text 的元素。
  • :parent:选择有子元素或文本的元素。及父子关系或这文本内容。
<div>
  <p>This is a paragraph.</p>
</div>
<span>Some text</span>

<script>
//它将选择 <div>、<span> 和 <p> 元素,
$(":parent")
</script>
  • :animated:选择当前正在执行动画的元素。
  • :focus:选择当前获得焦点的元素。

【2】表单筛选器

  • :input:选择所有的输入元素,包括 <input><select><textarea><button> 等。

  • :text:选择所有的文本输入框,即 type="text"<input> 元素。

  • :password:选择所有的密码输入框,即 type="password"<input> 元素。

  • :radio:选择所有的单选按钮,即 type="radio"<input> 元素。

  • :checkbox:选择所有的复选框,即 type="checkbox"<input> 元素。

  • :submit:选择所有的提交按钮,即 type="submit"<input><button> 元素。

  • :reset:选择所有的重置按钮,即 type="reset"<input><button> 元素。

  • :button:选择所有的普通按钮,即 type="button"<input><button> 元素。

  • :file:选择所有的文件上传输入框,即 type="file"<input> 元素。

  • :image:选择所有的图像按钮,即 type="image"<input> 元素。

  • :enabled:选择所有启用的表单元素。

  • :disabled:选择所有禁用的表单元素。

  • :checked:选取所有被选中的复选框或单选按钮元素。

  • :selected选取所有被选中的下拉列表(<select>)元素中的选项(<option>)。

$('input[type="text"]')
$('input[type="password"]')

// 等价于上面的操作
$(':text')
$(':password')

【3】筛选器方法

  • .eq(index):选取指定索引位置的元素。

  • .first():选取第一个匹配的元素。

  • not(selector):从匹配的元素中去除指定的元素。

  • .filter(selector):根据指定的选择器筛选元素。

  • .has(selector):筛选包含指定选择器所匹配元素的元素。

  • .next():选择当前元素的下一个同级元素。

  • .nextAll():选择当前元素之后的所有同级元素。

  • .nextUntil():选择当前元素到指定元素之间的所有同级元素。

  • .parent():选择当前元素的直接父元素。

  • .parents():选择当前元素的所有祖先元素。

  • .parentsUntil():选择当前元素到指定元素之间的所有祖先元素。

  • .children():取到所有的子标签

  • .siblings():同级别上下所有标签

  • .find():根据条件筛选

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3631.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!