选择器

最新推荐文章于 2022-09-20 22:30:08 发布
最新推荐文章于 2022-09-20 22:30:08 发布
阅读量230 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41375318/article/details/103945859
版权

11-选择器-基本选择器

  • 选择器：类似于 CSS 的选择器，可以帮助我们获取元素。

  • 例如：id 选择器、类选择器、元素选择器、属性选择器等等。

  • jQuery 中选择器的语法：$();

    代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
</head>
<body>
    <div id="div1">div1</div>
    <div class="cls">div2</div>
    <div class="cls">div3</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.元素选择器   $("元素的名称")
    let divs = $("div");
    //alert(divs.length);

    //2.id选择器    $("#id的属性值")
    let div1 = $("#div1");
    //alert(div1);

    //3.类选择器     $(".class的属性值")
    let cls = $(".cls");
    alert(cls.length);

</script>
</html>

12-选择器-层级选择器

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层级选择器</title>
</head>
<body>
    <div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
        <span>s2</span>
    </div>

    <div></div>
    <p>p1</p>
    <p>p2</p>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1. 后代选择器 $("A B");      A下的所有B(包括B的子级)
    let spans1 = $("div span");
    //alert(spans1.length);

    // 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级)
    let spans2 = $("div > span");
    //alert(spans2.length);

    // 3. 兄弟选择器 $("A + B");    A相邻的下一个B
    let ps1 = $("div + p");
    //alert(ps1.length);

    // 4. 兄弟选择器 $("A ~ B");    A相邻的所有B
    let ps2 = $("div ~ p");
    alert(ps2.length);
    
</script>
</html>

13-选择器-属性选择器

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
</head>
<body>
    <input type="text">
    <input type="password">
    <input type="password">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.属性名选择器   $("元素[属性名]")
    let in1 = $("input[type]");
    //alert(in1.length);


    //2.属性值选择器   $("元素[属性名=属性值]")
    let in2 = $("input[type='password']");
    alert(in2.length);

</script>
</html>

14-选择器-过滤器选择器

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器选择器</title>
</head>
<body>
    <div>div1</div>
    <div id="div2">div2</div>
    <div>div3</div>
    <div>div4</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.首元素选择器	$("A:first");
    let div1 = $("div:first");
    //alert(div1.html());

    // 2.尾元素选择器	$("A:last");
    let div4 = $("div:last");
    //alert(div4.html());

    // 3.非元素选择器	$("A:not(B)");
    let divs1 = $("div:not(#div2)");
    //alert(divs1.length);

    // 4.偶数选择器	    $("A:even");
    let divs2 = $("div:even");
    //alert(divs2.length);
    //alert(divs2[0].innerHTML);
    //alert(divs2[1].innerHTML);

    // 5.奇数选择器	    $("A:odd");
    let divs3 = $("div:odd");
    //alert(divs3.length);
    //alert(divs3[0].innerHTML);
    //alert(divs3[1].innerHTML);

    // 6.等于索引选择器	 $("A:eq(index)");
    let div3 = $("div:eq(2)");
    //alert(div3.html());

    // 7.大于索引选择器	 $("A:gt(index)");
    let divs4 = $("div:gt(1)");
    //alert(divs4.length);
    //alert(divs4[0].innerHTML);
    //alert(divs4[1].innerHTML);

    // 8.小于索引选择器	 $("A:lt(index)");
    let divs5 = $("div:lt(2)");
    alert(divs5.length);
    alert(divs5[0].innerHTML);
    alert(divs5[1].innerHTML);
    
</script>
</html>

15-选择器-表单属性选择器

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单属性选择器</title>
</head>
<body>
    <input type="text" disabled>
    <input type="text" >
    <input type="radio" name="gender" value="men" checked>男
    <input type="radio" name="gender" value="women">女
    <input type="checkbox" name="hobby" value="study" checked>学习
    <input type="checkbox" name="hobby" value="sleep" checked>睡觉
    <select>
        <option>---请选择---</option>
        <option selected>本科</option>
        <option>专科</option>
    </select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.可用元素选择器  $("A:enabled");
    let ins1 = $("input:enabled");
    //alert(ins1.length);

    // 2.不可用元素选择器  $("A:disabled");
    let ins2 = $("input:disabled");
    //alert(ins2.length);

    // 3.单选/复选框被选中的元素  $("A:checked");
    let ins3 = $("input:checked");
    //alert(ins3.length);
    //alert(ins3[0].value);
    //alert(ins3[1].value);
    //alert(ins3[2].value);

    // 4.下拉框被选中的元素   $("A:selected");
    let select = $("select option:selected");
    alert(select.html());
    
</script>
</html>

16-选择器-选择器的小结

  • 选择器：类似于 CSS 的选择器，可以帮助我们获取元素。
  • jQuery 中选择器的语法：$();
  • 基本选择器
    • $(“元素的名称”);
    • $("#id的属性值");
    • $(".class的属性值");
  • 层级选择器
    • $(“A B”);
    • $(“A > B”);
  • 属性选择器
    • $(“A[属性名]”);
    • $(“A[属性名=属性值]”);
  • 过滤器选择器
    • $(“A:even”);
    • $(“A:odd”);
  • 表单属性选择器
    • $(“A:disabled”);
    • $(“A:checked”);
    • $(“A:selected”);
*Major*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
JavaScript- 数组对象根据相同对象分组
tian_tian_gong的博客
04-08 1124
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
相同元素分配到相同空间问题（放鸡蛋问题）详解
weilexiao的博客
01-14 746
相同元素分配到相同空间问题详解及示例
JS对数组中的对象按相同值进行分组
Min_nna的博客
02-25 1377
分组前后输出内容 const sortClass = (sortData) => { const groupBy = (array, f) => { let groups = {}; array.forEach((o) => { let group = JSON.stringify(f(o)); groups[group] = groups[group] || []; groups[group].push(o); });
js 将数组中相同的元素进行分组
Cheris_LT的博客
03-04 2557
function sortClass(sortData){ const groupBy = (array, f) => { let groups = {}; array.forEach((o) => { let group = JSON.stringify(f(o)); groups[group] = groups[group] || []; groups[group].push(o); }); return Object.
4-13 JS对象分类（原型和共有属性、对象分类、函数对象、数组分类、class语法）
前端知识库
04-21 384
原型和共有属性 1.关系 JS的对象只能存简单数据类型和地址，不能存对象 2.如何确定一个对象的原型 函数fn由谁构造，fn的原型就是谁的prototype属性对应的对象 let obj = new Object() 的原型是 Object.prototype let arr = new Array() 的原型是 Array.prototype let square = new Square() 的原型是 Square.prototype let fn = new Function() 的原型是 F
数据选择器_数据选择器_
10-01
用VHDL语言实现数据选择器，包含源码和pof文件。
城市选择器模块 城市选择器模块
05-07
城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市...
颜色选择器颜色选择器颜色选择器
08-08
颜色选择器颜色选择器颜色选择器
时间选择器
02-02
时间选择器时间选择器时间选择器时间选择器时间选择器时间选择器时间选择器时间选择器时间选择器时间选择器时间选择器时间选择器时间选择器时间选择器时间选择器时间选择器时间选择器v
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
11-21
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
Android城市选择器
07-12
很好看的Android端城市选择器（仿美团界面），使用高德地图作为定位引擎。只需引用模块即可调用城市选择器，可通用大多项目，内部Api简单易改。
微信小程序之车型选择器组件
12-15
微信小程序车型控件选择器，支持搜索，动态加载数据，仿微信联系人导航操作，暂未实现滑动匹配，后期加上，标题可静态切换
日期选择器
11-01
日期选择器,可供各种需求选择日期,使用方便快捷,而且代码少,教为美观
CSS的相邻兄弟选择器用法简单讲解
09-24
对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:
JS将数组相同的元素进行分类
qq_44604924的博客
07-04 2317
js实现将数组中相同元素进行分类，思路是先将数组去重，这里采用对象的方式进行去重，然后将相同的元素重新放入一个数组内,实例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
JavaScript随手笔记---数组中相同的元素进行分组（数据聚合） groupBy函数
JMFive的博客
09-20 3061
今天在打算从js端时序数据库TSDB中，按相同的类型的数据排在一起，并且取同一时间段最新的数据，经过查询这种思想叫做数据聚合，就是返回的数据要根据一个属性来做计算。以上就是今天要讲的内容，本文仅仅简单介绍了JS数据聚合的方法，ECS5和ECS6分别都有不同的写法。
js将数组中相同的元素进行分组 必看
web全栈开发的博客
10-20 4096
function sortClass(sortData){ const groupBy = (array, f) => { let groups = {}; array.forEach((o) => { let group = JSON.stringify(f(o)); groups[group] = groups[group] || []; groups[group].push(o); }); return Object.
javascript将数组对象里面每个值（字段）相等的进行分组
freddy的博客
09-05 1354
根据数组里面每个对象中某个共同字段进行分组
labview选择器
最新发布
04-24
LabVIEW选择器是LabVIEW编程环境中的一个重要工具，用于选择不同的操作路径或执行不同的代码块。它可以根据输入的条件或参数值来决定程序的执行流程。 在LabVIEW中，选择器通常使用Case结构来实现。Case结构类似于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值