菜单 搜索
首页 前端知识 Javascript知识【jQuery选择器】

Javascript知识【jQuery选择器】

2024-02-27 11:02:43 前端知识 前端哥 450 646 我要收藏

目录

  • 💂 个人主页: 爱吃豆的土豆
  • 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
  • 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

  • 🏆人必有所执，方能有所成！

  • 🐋希望大家多多支持😘一起进步呀！

1，jQuery选择器

1.1：层级选择器

1.2：属性选择器、通配符选择器

1.3：基本过滤选择器

1.4：表单属性选择器

1，jQuery选择器

1.1：层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            //1、获取id为main的span标签 内 所有的div标签
            var arr1 = $("#main div");
            //alert(arr1.length);
            //2、获取id为main的span标签 内 子元素div标签
            var arr2 = $("#main>div");
            //alert(arr2.length);
            //3、获取id为main的span标签 后 第一个div兄弟标签
            var x3 = $("#main+div");
            //alert(x3[0].innerHTML);
            //4、获取id为main的span标签 后 所有的div兄弟标签
            var arr4 = $("#main~div");
            alert(arr4.length);
        });
    </script>
</head>
<body>
    <span id="main">
        <div>111111</div>
        <div>222222</div>
        <div>333333</div>
        <span>
            <div>44444</div>
        </span>
    </span>
    <div>55555</div>
    <span>
                <div>66666</div>
            </span>
    <div>77777</div>
</body>
</html>

目标：熟练掌握其他选择器

课堂练习题：

//5、获取内容体为44444的div标签
var div = $("#main>span>div");
//alert(div[0].innerHTML);
//6、获取class值为hehe标签，及标签下的所有span标签
//$(".hehe span");
//7、获取所有font标签，  以及font标签中的子标签span
//$("font>span");
//8、获取id为xixi标签，及该标签下 所有 class值为hehe的标签
//$("#xixi .hehe");
//9、仅想获取<div>666666</div>
//$("#main+span>div");

1.2：属性选择器、通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            //1、获取所有存在type属性的标签
            var arr = $("[type]");
            //alert(arr.length);//6
            //2、获取所有type属性为radio的标签
            var arr2= $("[type='radio']");
            //alert(arr2.length);
            //3、获取所有type属性含有o的标签
            var arr3 = $("[type*='o']");
            //alert(arr3.length);
            //4、获取所有input标签中的单选框，且name为sex的标签
            var arr4 = $("input[type='radio'][name='sex']");
            //alert(arr4.length);
            //5、获取所有input标签中，type不为text的标签
           var arr5= $("input[type!='text']");
           alert(arr5.length);
        });
    </script>
</head>
<body>
    用户名：<input type="text" name="uname" value="小刘"/><br />
    密码：<input type="password" name="pwd" value="123"/><br />
    性别：<input type="radio" name="sex" value="man" />男
    <input type="radio" name="sex" value="woman" />女<br />
    是否VIP：<input type="radio" name="vip" value="no" />不是
    <input type="radio" name="vip" value="yes" />是<br />
</body>
</html>

 课堂练习题：

//课堂练习题
//1、获取 所有的复选框，name属性包含 a
//$("[type='checkbox'][name*='a']");
//2、获取 所有的按钮，按钮名字 包含'提交'
//$("[type='button'][value*='提交']");
//3、获取id=hehe标签 下所有的 选择框<select> ，筛选出哪个选择框name属性=city
//$("#hehe select[name='city']");

1.3：基本过滤选择器

目标：熟练使用基本过滤选择器进行筛选操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            //1、在所有DIV标签中，获取第一个div
            var d1 = $("div:first");
            //alert(d1[0].innerHTML);
            //2、在所有DIV标签中，获取最后一个div
            var d2 = $("div:last");
            //alert(d2[0].innerHTML);
            //3、在所有DIV标签中，获取所有偶数位的div
            var arr3 = $("div:even");
            /*arr3.each(function () {
                alert(this.innerHTML);
            });*/
            //4、在所有DIV标签中，获取所有奇数位的div
            var arr4 = $("div:odd");
            /*arr4.each(function () {
                alert(this.innerHTML);
            });*/
            //5、在所有DIV标签中，获取除了第一位以外所有的div
            var arr5 = $("div:not(div:first)");
            /*arr5.each(function () {
                alert(this.innerHTML);
            });*/
            //6、在所有DIV标签中，获取索引等于1的div
            var d6 = $("div:eq(1)");
            //alert(d6[0].innerHTML);
            //7、在所有DIV标签中，获取索引大于1的div
            var arr7 = $("div:gt(1)");
            /*arr7.each(function () {
                alert(this.innerHTML);
            });*/
            //8、在所有DIV标签中，获取索引小于1的div
            var arr8 = $("div:lt(1)");
            /*arr8.each(function () {
                alert(this.innerHTML);
            });*/
        });
    </script>
</head>
<body>
    <div>11111111，索引是0</div>
    <div>22222222，索引是1</div>
    <div>33333333，索引是2</div>
    <div>44444444，索引是3</div>
    <div>55555555，索引是4</div>
    <div>66666666，索引是5</div>
    <div>77777777，索引是6</div>
    <div>88888888，索引是7</div>
</body>
</html>

 课堂练习题：

//课堂练习
//1、获取所有font标签中，除了最后一个font标签外，所有的font标签
//$("font:not(font:last)");
//2、获取所有class=hehe的标签，并将这些标签中的第一个拿到
//$(".hehe:first");
//3、获取id=x的标签，拿到这个标签下所有name=hobby的复选框，
//   将这些复选框中的偶数位拿到【综合】
//$("#x input[type='checkbox'][name='hobby']:even");

1.4：表单属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            //获取选中的复选框
            var arr1 = $("input[type='checkbox']:checked");
            /*arr1.each(function () {
                alert(this.value);
            });*/
            //获取国家下拉框中，被选中的option
            var arr2 = $("#country>option:selected");
            /*arr2.each(function () {
                alert(this.innerHTML);
            });*/
            //获取可用的表单输入项
            var arr3 = $("input:enabled");
            /*arr3.each(function () {
                alert(this.value);
            });*/
            //获取不可用的表单输入项
            var arr4 = $("input:disabled");
            alert(arr4.length);
        });
    </script>

</head>
<body>
    <h1>不可用的表单输入项</h1>
    <input type="text" disabled="disabled" />
    <input type="button" value="不可用按钮" disabled="disabled" />
    <h1>复选框</h1>
    <input type="checkbox" name="hobby" value="code"/>编程
    <input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳
    <input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读
    <hr />
    <h1>下拉选择框</h1>
    城市：<select id="city">
        <option value="">请选择</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
    </select>
    <hr />
    国家：<select id="country" multiple="multiple">
        <option value="China" selected="selected">中国</option>
        <option value="America" selected="selected">美国</option>
        <option value="Russia">俄罗斯</option>
        <option value="England">英国</option>
    </select>
</body>
</html>

课堂练习题：

//课堂练习题：
//1、获取id为x标签下，所有没有被选中的复选框【进阶】
//思路：先获取被选中复选框，进行not排除
$("#x input[type='checkbox']:not(#x input[type='checkbox']:checked)");
//2、获取form标签下，所有禁用的按钮【进阶】
//思路：先form 再按钮 最后筛选 :disabled
$("form input[type='button']:disabled");
//3、获取city下拉框内，所有没有被选中的选项【进阶】
//思路：先下拉框，然后在获取选项  进行not排除（被选中选项）
$("#city option:not(#city option:selected)");
//4、获取class=hehe的标签下，所有 未被选中 的 禁用 复选框【困难】
//思路：先.hehe标签，所有复选框 排除被选中的，筛选被禁用的
$(".hehe input[type='checkbox']:not(.hehe input[type='checkbox']:checked):disabled");

转载请注明出处或者链接地址：https://www.qianduange.cn//article/2832.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

【华为OD机试真题 JS语言】423、项目排期 、最快完成所有工作的天数 | 机试真题 思路参考 代码解析（最新C卷抽中）（通过率较高，但遇大数时间复杂度高，需优化）

2024-03-14 00:03:50

JQ效果—展开和收起

2024-03-13 00:03:45

【web前端技术】响应式画廊Gallery插件-Justified-Gallery

2024-03-13 00:03:44

jQuery怎样获得内容和属性？

2024-03-13 00:03:39

如何在正则表达式里加入变量

2024-03-13 00:03:39

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery简介及起步

2024-03-13 00:03:38

html css jquery实现轮播图自动切换、左右切换、点击切换

2024-03-13 00:03:36

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
8

jQuery事件处理

2024-03-12 01:03:32999
9

HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999
10

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！