jQuery--安装，选择器，DOM遍历，DOM集操作

下载与引用

下载

在jQuery官网下载，并保存到本地文件jQuery.3.7.1.js.

引用

在script元素中引入jQuery，并在script元素内编写jQuery代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--引入jQuery-->
    <script src="../js/jQuery.3.7.js"></script>
    <title>选择器</title>
</head>
<body>

<script>
$(function(){
// 编写jQuery代码
})
</scirpt>
    
</body>
</html>

选择器

jQuery支持多种选择器，用来选择页面中的DOM元素。其语法结构为$("选择器")。

标签选择器

选择器的内容为元素标签名称

  • 例如$("p")表示页面中所有的p标签元素。
  • 特殊的是通过'*'表示所有的元素标签，所以$("*")表示页面中的所有的标签元素
  • 当选择器器的内容是多个元素标签名，且元素之间通过逗号分隔时，表示页面中多个标签元素。例如$("p, div")表示页面中所有的p标签和div标签

id选择器

选择器的内容为#id属性名，例如$("#test")表示页面中id属性为test的元素。

class选择器

选择器的内容为.class属性名，例如$(".head")表示页面中class属性为head的元素。

属性选择器

选择器的内容为[属性名]，例如$("[href]")表示页面中具有href属性的所有元素。
属性选择器中还可以针对属性值添加限制，用于过滤掉一些非目标元素。

  • $("[属性名=属性值]")表示页面中具有'属性名'的属性，且该属性的属性值等于'属性值'的所有元素
  • $("[属性名$=属性值]")表示页面中具有'属性名'的属性，且该属性的属性值以'属性值'结尾。
  • $("[属性名^=属性值]")表示页面中具有'属性名'的属性，且该属性的属性值以'属性值'开头。
  • $("[属性名*=属性值]")表示页面中具有'属性名'的属性，且该属性的属性值包含'属性值'。
  • $("[属性名!=属性值]")表示页面中具有'属性名'的属性，且该属性的属性值不等于'属性值'的所有元素

包含选择器

包含选择器表示具有特定子元素的元素，其语法结构为$(":has(元素)")。

子元素选择器

  • $("元素标签1 元素标签2")表示选择"元素标签1"下所有的子元素，且元素标签为"元素标签2"（子元素和孙元素）
  • $("元素标签1>元素标签2")表示选择"元素标签1"下所有的直接子元素，且元素标签为"元素标签2"(子元素)

兄弟元素选择器

  • $("元素标签1+元素标签2")表示选择"元素标签1"的直接下一个兄弟元素，且元素标签为"元素标签2"
  • $("元素标签1~元素标签2")表示选择"元素标签1"后面的兄弟元素，且元素标签为"元素标签2"

位置选择器

  • $("p:first")表示页面中所有p元素中的第一个p元素
  • $("p:last")表示页面中所有p元素中的最后一个p元素
  • $("p:odd")表示页面中所有p元素，且位置为奇数的p元素
  • $("p:even")表示页面中所有p元素，且位置为偶数的p元素
  • $("p:eq(n)")表示页面中所有p元素，且位置为n的p元素
  • $("p:gt(n)")表示页面中所有p元素，且位置大于n的p元素
  • $("p:lt(n)")表示页面中所有p元素，且位置小于n的p元素
  • $("p:first-child")表示页面中所有p元素，且p元素是其父元素的第一个子元素
  • $("p:last-child")表示页面中所有p元素，且p元素是其父元素的最后一个子元素
  • $("p:only-child")表示页面中所有p元素且p元素是其父元素的唯一子元素
  • $("p:nth-child(x)")表示页面中所有p元素且p元素是其父元素的第x个子元素
  • $("li:nth-child(odd|even)")表示页面中所有li元素且li元素是第奇数个或偶数个子元素
  • $("li:nth-child(nX+Y)")表示页面中所有li元素且li元素是第nX+Y个子元素

过滤选择器

过滤选择器主要用在一般选择器的后面进行链式使用，表示对前面选择器结果的过滤。例如$("input:button")表示所有的按钮标签。

  • ":button"表示所有按钮
  • ":checkbox"表示所有多选项
  • ":file"表示用于文件上传的元素
  • ":radio"表示单选项
  • ":rest"表示重置按钮
  • ":selected"表示下拉菜单中被选中的项
  • ":submit"表示提交按钮
  • ":text"表示文本输入框
  • ":password"表示密码框
  • ":input"表示表单元素，input，select，textarea，button
  • ":image"表示图片提交按钮
  • ":header"表示所有标题元素，h1~h6
  • ":contains(文本内容)"表示所有包含文本"文本内容"的元素
  • ":not(filter)"表示反向选择
  • ":enabled"表示没有被禁用的元素
  • ":disabled"表示被禁用的元素
  • ":visible"表示所有可见的元素

遍历DOM

通过选择器选中元素后，利用一些方法可以访问到与该元素相关的其他DOM元素。

遍历子元素

利用选择器的children()方法可以获取选择器元素下的所有直接子元素。
如果在children函数中传入选择器，则表示选择满足选择器的所有直接子元素。

  • $("div").children()表示div元素下所有的直接子元素
  • $("div").children("p")表示div元素下所有的p标签直接子元素

利用选择器的find(元素选择器)方法可以获取选择器元素下的所有指定的后代元素。

  • $("div").find("p")表示div元素下所有的后代p元素
  • $("div").find("*")表示div元素下所有的后代元素

遍历同胞元素

利用选择器的siblings()方法可以获取选择器元素同胞元素。
如果在siblings函数中传入选择器，则表示选择满足选择器的所有同胞元素。

  • $("div").siblings()表示div元素的所有同胞元素
  • $("div").siblings("p")表示div元素的所有同胞p元素

利用选择器的next()方法可以获取选择器元素的下个一同胞元素。
prev()方法和next()方法类似表示上一个同胞元素。

  • $("div").next()表示div元素的下一个同胞元素
  • $("div").prev()表示div元素的上一个同胞元素

利用选择器的nextAll()方法可以获取选择器元素的后面所有的同胞元素。
prevAll()方法和nextAll()方法类似表示前面所有的同胞元素。

  • $("div").nextAll()表示div元素的所有跟随的同胞元素
  • $("div").prevAll()表示div元素的所有前面的同胞元素

利用选择器的nextUntil(目标元素)方法可以获取选择器元素和目标元素之间的所有同胞元素
prevUntil()方法和nextUntil()方法类似表示目标元素和选择器元素之间的所有同胞元素。

  • $("h1").nextUntil("h6")表示h1标签和h6标签之间所有的同胞元素
  • $("h1").prevUntil("h6")表示h6标签和h1标签之间所有的同胞元素

遍历父元素

利用选择器的parent()方法可以访问选择器的直接父元素。

  • $("div").parent()表示div元素的直接父元素

利用选择器的parents()方法可以访问选择器的所有父元素。

  • $("div").parents()表示div元素的所有父元素

利用选择器的parentsUntil()方法可以访问到给定元素之间的所有父元素

  • $("span").parentsUntil("div")表示到span到div之间的所有父元素

DOM集的相关操作

由于选择器或DOM遍历时往往获取到的是多个DOM元素的集合，jQuery中也提供了一些针对DOM元素集合的操作方法。

长度

通过length属性可以获取DOM元素集中元素的个数。

  • $("img").length表示页面中img元素的个数

获取特定元素

通过get()方法可以获取指定索引的元素集中的元素。
元素集的索引从0开始。

  • $("img").get(0)表示获取页面中第一个img元素
  • $("img").get()表示将页面中img元素集转换成数组集

添加元素

通过add()方法可以向元素集中添加元素。

  • $("img[alt]").add("img[title]")表示在具有alt属性的img标签集上添加具有title属性的img标签集

删除元素

通过not()方法可以从元素集中删除元素。

  • $("li[title]").not("[title*=tom]")表示从具有title属性的li标签集中，删除title属性值包含tom的li标签集

过滤元素

通过filter()方法可以从元素集中选出满足条件的元素集

  • $("li[title]").filter("[title*=tom])表示从具有title属性的li标签集中，选出属性值包含tom的li标签集

filter()方法还可以传入一个筛选函数，筛选函数的形参为索引值，如果返回值为true则保留该元素，否则删除

$("div[class=container]").click(function(){
    let oindex = $("div[class=container]").index(this);
    $("div[class=container]").filter(function(index){
        return index == oindex;
    }).addClass("myclass")
})

遍历元素集

通过each()方法可以遍历元素集中的每个元素，其形参为一个函数，该函数以索引值为参数。
如果要操作元素集中的每个元素，需要借助this关键字。

$(function(){
    $("img").each(function(index){
        this.title = "这是第"+(index+1)+"幅图, id是："+ this.id;
    })
})
posted @ 2024-06-22 20:23  Python习者  阅读(8)  评论(0)    收藏  举报