jquery 选择器

最新推荐文章于 2022-05-27 15:03:51 发布

o_瓜田李下_o

最新推荐文章于 2022-05-27 15:03:51 发布

阅读量269

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_43931625/article/details/107706597

版权

jquery 选择器

********************

基本选择器

#id：id选择器，选择名称为id的elem

.class：类选择器，选择标签class为指定class的elem

elem：标签选择器，如：$("div")

*：通配符选择器，选择所有标签

elem1，elem2：群组选择器，选择多个标签

********************

层次选择器

$("elem elem2 ")：选取elem的后代中所有的elem2元素

$("elem > elem2")：选取elem子元素elem2

$("elem").next()：选取elem之后的第一个同层次元素

$("elem").next("elem2")：选取elem之后的第一个elem2同层次元素

$("elem").nextAll()：选取elem之后的所有同层次元素

$("elem").nextAll("elem2")：选取elem之后的所有为elem2的同层次元素

$("elem").prev()：选取elem之前的第一个同层次元素

$("elem").prev("elem2")：选取elem之前的第一个为elem2的同层次元素

$("elem").prevAll()：选取elem之前的所有同层次元素

$("elem").prevAll("elem2")：选取elem之前的所有为elem2的同层次元素

$("elem").siblings()：选取elem所有同层次元素

$("elem").siblings("elem2")：选取elem所有为elem2的同层次元素

示例：$("elem elem2")、$("elem>elem2")

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery/jquery-3.5.1.min.js"></script>
</head>
<style>
    div{
        height:150px;
        width: 150px;
        margin: 10px;
        border: coral 2px solid;
    }

    .inner{
        height: 40px;
        width: 50px;
        margin: 10px;
        border: purple 2px solid;
        font-size: 10px;
    }
</style>

<script>
    $(function () {
        $("#btn").click(function () {
            $("div").css("background","aquamarine")
        })

        $("#btn2").click(function () {
            $("body>div").css("background","deeppink");
        })

        $("#btn3").click(function () {
            $("body div").css("background","purple");
        })
    })
</script>
<body>
<div id="1" align="center">