Javascript知识【jQuery选择器】

吃这么好

已于 2022-08-08 17:40:03 修改

阅读量1.1k

点赞数 7

分类专栏： Javascript和前端框架

于 2022-08-08 17:38:14 首次发布

本文链接：https://blog.csdn.net/m0_64550837/article/details/126231445

版权

jQuery 层级选择器属性选择器过滤选择器 DOM操作

关键词由CSDN通过智能技术生成

Javascript和前端框架专栏收录该内容

33 篇文章 3 订阅

订阅专栏

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

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

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

1，jQuery选择器

1.1：层级选择器

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

课堂练习题：

//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");