选择器

最新推荐文章于 2024-09-01 21:50:19 发布

m0_46473771

最新推荐文章于 2024-09-01 21:50:19 发布

阅读量116

点赞数

文章标签： css jquery

本文链接：https://blog.csdn.net/m0_46473771/article/details/105783623

版权

选择器@选择器

选择器

基本选择器
- id选择器
- 类选择器
- 标签选择器
- 并集选择器
层级选择器
- 后代选择器
- 子选择器
属性选择器
- 属性名称选择器
- 属性选择器
- 复合选择器
过滤选择器
- 首元素选择器
- 尾元素选择器
- 偶数选择器
- 奇数选择器
- 等于索引选择器
- 大于索引选择器
- 小于索引选择器
- 标题选择器
表单过滤选择器
- 可用元素选择器
- 不可用元素选择器
- 选中选择器
- 下拉列表选中选择器

一、基本选择器

选择器	语法
id选择器	$("#id") 获得与指定id属性值匹配的元素
类选择器	$(".类名") 获得与指定类名相同的元素
标签选择器	$(“标签名”) 获取所有匹配标签名的元素
并集选择器	$(“A,B”) 获取A元素和B元素

1.html标签

<input id="btn1" type="button" value="将id为div1的模块背景色变为蓝色"/>
<input id="btn2" type="button" value="将class为div-father的模块背景色变为粉色"/>
<input id="btn3" type="button" value="将span的模块背景色变为紫色"/>
<input id="btn4" type="button" value="将id为div2和id为div4的模块背景色变为橙色"/>
<div id="div1" class="div-father"><span class="div-son">div1-子模块1</span><span class="div-son">div1-子模块2</span><span class="div-son">div1-子模块3</span></div>
<div id="div2" class="div-father"><span class="div-son">div2-子模块1</span><span class="div-son">div2-子模块2</span><span class="div-son">div2-子模块3</span></div>
<div id="div3" class="div-father"></div>
<div id="div4" class="div-father"></div>

2.CSS

/*id选择器，设置id为div1的模块背景颜色为白色*/
#div1{
    background-color:white;
}

/*类选择器，设置class为div-father的宽度/高度/浮动/背景颜色/边框*/
.div-father{
    width:300px;
    height:150px;
    background-color:black;
    border:1px solid black;
    float: left;
}

/*标签选择器，设置所有span标签的宽度/高度/浮动/背景颜色/边框*/
span{
    width: 50px;
    height: 120px;
    float: left;
    background-color:red;
    border:1px dashed black;
}

/*并集选择器，设置id为div2和id为div3的背景颜色为黄色*/
#div2,#div4{
    background-color:yellow;
}

3.jQuery

//使用jquery之前先引入jquery
<script src="js/jquery-3.3.1.min.js"></script>

//jquery入口函数
$(function () {
    //$("选择器").click(function(){xxxx代码块}); jquery绑定单击事件
    // 将id为div1的模块背景色变为蓝色
    $("#btn1").click(function () {
        $("#div1").css("backgroundColor","blue");
    });
    // 将class为div-father的模块背景色变为粉色
    $("#btn2").click(function () {
        $(".div-father").css("backgroundColor","pink");
    });
    // 将span的模块背景色变为紫色
    $("#btn3").click(function () {
        $("span").css("backgroundColor","violet");
    });
    // 将id为div2和id为div4的模块背景色变为橙色
    $("#btn4").click(function () {
        $("#div2,#div4").css("backgroundColor","orange");
    });
});

二、层级选择器

选择器	语法
后代选择器	$(“A B”)选择A元素内部的所有B元素，包括孙
子选择器	$(".A>B") 选择A元素内部所有B子元素，不包括孙元素

1.html标签

<input id="btn1" type="button" value="将div-father所有div-son背景颜色设置为红色" />
<input id="btn2" type="button" value="将div-father子标签背景颜色设置为橙色" />
<div id="div3" class="div-father">
    <div class="div-son" >
        <div class="div-son" style="width: 50px;height:50px;border: 1px solid pink">子标签1-孙标签1</div>
        <div class="div-son" style="width: 50px;height:50px;border: 1px solid pink">子标签1-孙标签2</div>
        <div class="div-son" style="width: 50px;height:50px;border: 1px solid pink">子标签1-孙标签3</div>
        子标签1
    </div>
    <div class="div-son">
        <div class="div-son" style="width: 50px;height:50px;border: 1px solid pink">子标签2-孙标签1</div>
        <div class="div-son" style="width: 50px;height:50px;border: 1px solid pink">子标签2-孙标签2</div>
        子标签2
    </div>
    <div class="div-son">
        <div class="div-son" style="width: 50px;height:50px;border: 1px solid pink">子标签3-孙标签1</div>
        <div class="div-son" style="width: 50px;height:50px;border: 1px solid pink">子标签3-孙标签2</div>
        <div class="div-son" style="width: 50px;height:50px;border: 1px solid pink">子标签3-孙标签3</div>
        子标签3
    </div>
</div>

2.CSS

.div-father{
    background-color: white;
    width: 1800px;
    height: 1000px;
    border: 1px solid black
}
.div-son{
    background-color: blue;
    float: left;
    width: 250px;
    height: 250px;
    border: 1px solid green;
}

3.jQuery

$(function () {
    //后代选择器
    $("#btn1").click(function () {
        $(".div-father .div-son").css("backgroundColor", "red");
    })
    //子选择器
    $("#btn2").click(function () {
        $(".div-father>.div-son").css("backgroundColor", "orange");
    })
});

三、属性选择器

选择器	语法
属性名称选择器	$(“A[属性名]”) 包含指定属性的选择器
属性选择器	$(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
复合选择器	$(“A[属性值=‘值’][]…”) 包含多个属性条件的选择器

1.html标签

<!--属性为title的标签背景色变为红色-->
<input id="btn1" type="button" value="属性为title的标签背景色变为红色"/>
<!--属性title的值等于test1的标签背景颜色变为绿色-->
<input id="btn2" type="button" value="属性title的值等于test1的标签背景颜色变为绿色"/>
<!--属性title的值以te开始的标签背景颜色变为黄色-->
<input id="btn3" type="button" value="属性title的值以te开始的标签背景颜色变为黄色"/>
<!--属性title的值以st结束的标签背景颜色变为橙色-->
<input id="btn4" type="button" value="属性title的值以st结束的标签背景颜色变为橙色"/>
<!--属性title的值含有es的标签背景颜色变为紫色-->
<input id="btn5" type="button" value="属性title的值含有es的标签背景颜色变为紫色"/>
<!--选取有属性id的标签，然后在结果中选取title值含有“es”的标签背景颜色变为粉色-->
<input id="btn6" type="button" value="选取有属性id的标签，然后在结果中选取title值含有“es”的标签背景颜色变为粉色"/>

<div class="div-atttribute" title="test1">标签title属性为test1的标签</div>
<div class="div-atttribute" title="test1">标签title属性为test1的标签</div>
<div class="div-atttribute" title="test2">标签title属性为test2的标签</div>
<div class="div-atttribute" title="test2">标签title属性为test2的标签</div>
<div class="div-atttribute" title="test2">标签title属性为test2的标签</div>
<div class="div-atttribute" title="try">标签title属性为try的标签</div>
<div class="div-atttribute" title="try">标签title属性为try的标签</div>
<div class="div-atttribute" title="teach">标签title属性为teach的标签</div>
<div class="div-atttribute" title="best">标签title属性为best的标签</div>
<div class="div-atttribute" title="test" id="div1">标签title属性为test且有id的标签</div>

2.CSS

.div-atttribute{
    width: 300px;
    height: 200px;
    float: left;
    background-color: white;
    border: 1px solid black;
}

3.jQuery

$(function () {
    //属性为title的标签背景色变为红色
    $("#btn1").click(function () {
        $(".div-atttribute[title]").css("backgroundColor","red");
    });
    //属性title的值等于test1的标签背景颜色变为绿色
    $("#btn2").click(function () {
        $(".div-atttribute[title='test1']").css("backgroundColor","green");
    });
    //属性title的值不等于test1的标签背景颜色变为绿色
    // $("#btn2").click(function () {
    //     $(".div-atttribute[title!='test1']").css("backgroundColor","green");
    // });
    //属性title的值以te开始的标签背景颜色变为黄色
    $("#btn3").click(function () {
        $(".div-atttribute[title^='te']").css("backgroundColor","yellow");
    });
    //属性title的值以st结束的标签背景颜色变为橙色
    $("#btn4").click(function () {
        $(".div-atttribute[title$='est']").css("backgroundColor","orange");
    });
    //属性title的值含有es的标签背景颜色变为紫色
    $("#btn5").click(function () {
        $(".div-atttribute[title*='es']").css("backgroundColor","violet");
    });
    //选取有属性id的标签，然后在结果中选取title值含有“es”的标签背景颜色变为粉色
    $("#btn6").click(function () {
        $(".div-atttribute[id][title*='es']").css("backgroundColor","pink");
    });
});

四、过滤选择器

选择器	语法
首元素选择器	A:first 获得选择的元素中的第一个元素
尾元素选择器	A:last 获得选择的元素中的最后一个元素
非元素选择器	A:not(selector) 不包括指定内容的元素
偶数选择器	A:even 偶数，从0开始计数
奇数选择器	A:odd 奇数，从0开始计数
等于索引选择器	A:eg(index) 等于于指定索引元素
大于索引选择器	A:gt(index) 大于指定索引元素
小于索引选择器	A:lt(index) 小于指定索引元素
标题选择器	:header 获得标题元素（h1-h6），固定写法

1.html

<input id="btn1" type="button" value="把第一个div的背景颜色变为红色"/>
<input id="btn2" type="button" value="把最后一个div的背景颜色变为蓝色"/>
<input id="btn3" type="button" value="把class不为one的所有div的背景颜色变为绿色"/>
<input id="btn4" type="button" value="把索引值为偶数div的背景颜色变为黄色"/>
<input id="btn5" type="button" value="把索引值为奇数div的背景颜色变为橙色"/>
<input id="btn6" type="button" value="把索引值大于3的div的背景颜色变为黑色"/>
<input id="btn7" type="button" value="把索引值等于3的div的背景颜色变为紫色"/>
<input id="btn8" type="button" value="把索引值小于3的div的背景颜色变为淡红色"/>
<input id="btn9" type="button" value="把所有标题元素的背景颜色变为淡蓝色"/>

<div class="one">class为one的div元素</div>
<div class="one">class为one的div元素</div>
<div class="one">class为one的div元素</div>
<div class="one">class为one的div元素</div>
<div class="one">class为one的div元素</div>
<div class="two">class为two的div元素</div>
<div class="two">class为two的div元素</div>
<div class="two">class为two的div元素</div>
<div class="two">class为two的div元素</div>
<div class="two">class为two的div元素</div>
<h1 class="one">class为one的标题元素1</h1>
<h1 class="one">class为one的标题元素2</h1>
<h1 class="one">class为one的标题元素3</h1>
<h1 class="two">class为two的标题元素1</h1>

2.CSS

div{
    background-color: white;
    width: 200px;
    height: 150px;
    float: left;
    border: 1px solid black;
}
h1{
    background-color: silver;
    width: 200px;
    height: 150px;
    float: left;
    border: 1px solid black;
}

3.jQuery

$(function () {
//把第一个div的背景颜色变为红色
    $("#btn1").click(function () {
        $("div:first").css("backgroundColor","red");
    });
//把最后一个div的背景颜色变为蓝色
    $("#btn2").click(function () {
        $("div:last").css("backgroundColor","blue");
    });
//把class不为one的所有div的背景颜色变为绿色
    $("#btn3").click(function () {
        $("div:not(.one)").css("backgroundColor","green");
    });
//把索引值为偶数div的背景颜色变为黄色
    $("#btn4").click(function () {
        $("div:even").css("backgroundColor","yellow");
    });
//把索引值为奇数div的背景颜色变为橙色
    $("#btn5").click(function () {
        $("div:odd").css("backgroundColor","orange");
    });
//把索引值大于3的div的背景颜色变为黑色
    $("#btn6").click(function () {
        $("div:gt(3)").css("backgroundColor","black");
    });
//把索引值等于3的div的背景颜色变为紫色
    $("#btn7").click(function () {
        $("div:eq(3)").css("backgroundColor","violet");
    });
//把索引值小于3的div的背景颜色变为淡红色
    $("#btn8").click(function () {
        $("div:lt(3)").css("backgroundColor","palevioletred");
    });
//把所有标题元素的背景颜色变为淡蓝色
    //cornflowerblue
    $("#btn9").click(function () {
        $(":header").css("backgroundColor","cornflowerblue");
    });
});

五、表单过滤选择器

选择器	语法
可用元素选择器	enabled获得可用元素
不可用元素选择器	disabled获得不可用元素
选中选择器	checked获得单选/复选框选中的元素
下拉列表选中选择器	selected获得下拉列表选中的元素

1.html

<input id="btn1" type="button" value="利用jQuery的val()方法改变表单内可用<input>元素的值"/>
<input id="btn2" type="button" value="利用jQuery的val()方法改变表单内不可用<input>元素的值"/>
<input id="btn3" type="button" value="利用jQuery的length属性获取复选框选中的个数"/>
<input id="btn4" type="button" value="利用jQuery的length属性获取下拉框选中的个数"/>
<input type="text" value="可用值1"/>
<input type="text" value="可用值2"/>
<input type="text" value="不可用值1" disabled="disabled"/>
<input type="text" value="不可用值2" disabled="disabled"/>
<br/>
<input type="checkbox" value="复选框-选项1"/>复选框-选项1
<input type="checkbox" value="复选框-选项2"/>复选框-选项2
<input type="checkbox" value="复选框-选项3"/>复选框-选项3
<input type="checkbox" value="复选框-选项4"/>复选框-选项4

<select multiple="multiple">
    <option>下拉列表-选项1</option>
    <option>下拉列表-选项2</option>
    <option>下拉列表-选项3</option>
</select>

2.jQuery

$(function () {
    $("#btn1").click(function () {
       $("input[type='text']:enabled").val("aaa");
    });
});
$(function () {
    $("#btn2").click(function () {
        $("input[type='text']:disabled").val("bbb");
    });
});
$(function () {
    $("#btn3").click(function () {
        alert($("input[type='checkbox']:checked").length);
    });
});
$(function () {
    $("#btn4").click(function () {
        alert($("option:selected").length);
    });
});

m0_46473771

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器

选择器@选择器选择器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在...
复制链接

扫一扫