jQuery基础知识之选择器

最新推荐文章于 2022-08-25 23:22:41 发布

请叫我均哥

最新推荐文章于 2022-08-25 23:22:41 发布

阅读量366

点赞数

文章标签： jQuery获取元素 jQuery选择器

本文链接：https://blog.csdn.net/qq_28568283/article/details/50751560

版权

前面的博客中，我简单的介绍了一些jQuery中的选择器，现在我介绍更多的选择器给大家。

一、基础选择器
一个有很多格子的盒子里装满不同颜色的球，且有几种不同的大小，相同大小的球放在同一个格子里，且每种颜色的球各有多个，并对每个球编号。
1.#id选择器$(“#id”),选取指定id元素，取出某个编号的球

2.element标签元素选择器 $("Tag"),如选取段落标签p语句为$ (“div”)，取出同一个格子里的球

3.class选择器， $(".class");千万记住要加一点"."，如$ (“.red”),取出红色的球

4.选择器，这是个最牛逼的选择器， $("*"),选择所有，如$ (“div “),取出div格子里的所有球

5.sele1,sele2,…seleN,选择自己喜欢的球，$(“.red,.green”),用”,”，隔开

6.ance desc 选择器，也叫祖先（ancestor），后辈（descendent）选择器,是一种层次选择器，如 $(“div span”).css(“background-color”,”blue”);选取div中的span元素并将其背景色改为bule

7.parent>child选择器，这个选择器只有一级，选取父辈的子元素,$如(“div>p”).css(“background-color”,”blue”);

8.prev+next选择器，远亲不如近邻选择器。prev在前面，next是prev后面第一个出现的所选取标签的元素，如$(“p+span”),选取p后面第一个span标签

9.prev~siblings选择器，选择后面全部相邻的元素，如$(“p+a”),选取p后面全部的a标签元素
代码如下:(其余代码自己可以尝试一下)

<html>
    <head>
        <title>prev ~ siblings选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <div>
            码农家族
            <label></label>
            <p></p>
            <label></label>
            <label></label>
        </div>
        <label></label>

        <script type="text/javascript">
            $("p~label").css("border", "solid 1px red");
            $("p~label").html("我们都是p先生的粉丝");
        </script>
    </body>
</html>

css

div, p, label
{
    float: left;
    border: solid 1px #ccc;
    margin: 5px;
    padding: 5px;
}
p,label
{
    width:230px;
    height:30px;
}
p
{
    border: solid 1px red;
}