AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JQuery①中

2023-08-17 32
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JQuery①中

3、过滤选择器

基本过滤器

:first

获取第一个元素
:last

获取最后个元素




:not(selector)

去除所有与给定选择器匹配的元素


even

匹配所有素引值为偶数的元素,从o开始计数


:odd

匹配所有索引值为奇数的元素，从o开始计数


:eq(index

匹配一个给定素引值的元素


gt(index)

匹配所有大于给定索引值的元素


:t(index)

匹配所有小于给定素引值的元素


:header

匹配如h1,h2,h3之类的标题元素


:animated

匹配所有正在执行动画效果的元素


03基本的过滤选择器_.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini {
            width: 55px;
        | height: 55 px;
            background-color: #aaa;
            font-size: 12px;
        }
        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function anmateit() {
                $("#mover").slideToggle("show",anmateit);
            }
            anmateit();
        });
        $(document).ready(function () {
            // $(function () { //的全写
            //1.选择第一个div元素
            $("#btn1").click(function () {
                //css() 方法可以设置或获取样式
                $("div:first").css("background-color","#bbffaa");
            });
            //2.选择最后一个div元素
            $("#btn2").click(function () {
                $("div:last").css("background-color","#bbffaa");
            });
            //3.选择class不为one的所有div元素
            $("#btn3").click(function () {
                $("div:not(.one)").css("background-color","#bbffaa");
            });
            //4.选择索引值为偶数的所有div元素
            $("#btn4").click(function () {
                $("div:even").css("background-color","#bbffaa");
            });
            //5.选择索引值为奇数的所有div元素
            $("#btn5").click(function () {
                $("div:odd").css("background-color","#bbffaa");
            });
            //6.选择索引值为大于3的所有div元素
            $("#btn6").click(function () {
                $("div:gt(3)").css("background-color","#bbffaa");
            });
            //7.选择索引值为等于3的所有div元素
            $("#btn7").click(function () {
                $("div:eq(3)").css("background-color","#bbffaa");
            });
            //8.选择索引值为小于3的所有div元素
            $("#btn8").click(function () {
                $("div:lt(3)").css("background-color","#bbffaa");
            });
            //9.选择所有标题元素
            $("#btn9").click(function () {
                $(":header").css("background-color","#bbffaa");
            });
            //10.选择当前正在执行动画的所有元素
            $("#btn10").click(function () {
                $(":animated").css("background-color","#bbffaa");
            });
            //11.选择没有执行动画的最后一个div
            $("#btn11").click(function () {
                $("div:not(:animated):last").css("background-color","#bbffaa");
            });
        });
    </script>
</head>
<body>
<!--  <div>
        :first
        :last
        :not(selector)
        :even
        :odd
        :eq(index)
        :gt(index)
        :lt(index)
        :header
        :animated
    </div>   -->
    <input type="button" value="选择第一个div元素" id="btn1"/>
    <input type="button" value="选择最后一个div元素" id="btn2"/>
    <input type="button" value="选择class不为one的所有div元素" id="btn3"/>
    <input type="button" value="选择索引值为偶数的所有div元素" id="btn4"/>
    <input type="button" value="选择索引值为奇数的所有div元素" id="btn5"/>
    <input type="button" value="选择索引值为大于3的所有div元素" id="btn6"/>
    <input type="button" value="选择索引值为等于3的所有div元素" id="btn7"/>
    <input type="button" value="选择索引值为小于3的所有div元素" id="btn8"/>
    <input type="button" value="选择所有标题元素" id="btn9"/>
    <input type="button" value="选择当前正在执行动画的所有元素" id="btn10"/>
    <input type="button" value="选择没有执行动画的最后一个元素" id="btn11"/>
    <br>
        <h3>过滤选择器.</h3>
    <div class="one" id="one">
        id为one,class 为one的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
        id为two,class为one,title为test的div
        <div class="mini" title="other">class为mini,title为other</div>
        <div class="mini" title="test">class为mini,title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini" title="tesst">class为mini,title为tesst</div>
    </div>
    <div class="hide">class为"hide"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div>
        包含input的type为"hidden"的div
        <input type="hidden" size="8">
    </div>
    <div id="mover">
        正在执行动画的div元素
    </div>
</body>
</html>

内容过滤器:

:contains(text)

匹配包含给定文本的元素

:empty

匹配所有不包含子元素或者文本的空元素


:parent

匹配含有子元素或者文本的元素


:has(selector)

匹配含有选择器所匹配的元素的元素


04内容过滤选择器_.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini {
            width: 55px;
        | height: 55 px;
            background-color: #aaa;
            font-size: 12px;
        }
        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function anmateit() {
                $("#mover").slideToggle("show",anmateit);
            }
            anmateit();
        });
        $(document).ready(function () {
            //1.选择文本含有‘di’的div元素
            $("#btn1").click(function () {
                $("div:contains('di')").css("background-color","#bbffaa");
            });
            //2.选择不含有子元素（或文本元素）的div元素
            $("#btn2").click(function () {
                $("div:empty").css("background-color","#bbffaa");
            });
            //3.选择含有class为mini的div元素
            $("#btn3").click(function () {
                $("div:has(.mini)").css("background-color","#bbffaa");
            });
            //4.选择含有子元素（或文本元素）的div元素
            $("#btn4").click(function () {
                $("div:parent").css("background-color","#bbffaa");
            });
        });
    </script>
</head>
<body>
<!--  <div>
        :contains(text)
        :empty
        :has(selector)
        :parent
    </div>   -->
    <input type="button" value="选择文本含有‘di’的div元素" id="btn1"/>
    <input type="button" value="选择不含有子元素（或文本元素）的div元素" id="btn2"/>
    <input type="button" value="选择含有class为mini的div元素" id="btn3"/>
    <input type="button" value="选择含有子元素（或文本元素）的div元素" id="btn4"/>
    <br>
    <h3>过滤选择器.</h3>
    <div class="one" id="one">
        id为one,class 为one的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
        id为two,class为one,title为test的div
        <div class="mini" title="other">class为mini,title为other</div>
        <div class="mini" title="test">class为mini,title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini" title="tesst">class为mini,title为tesst</div>
    </div>
    <div class="hide">class为"hide"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div>
        包含input的type为"hidden"的div
        <input type="hidden" size="8">
    </div>
    <div id="mover">
        正在执行动画的div元素
    </div>
</body>
</html>

属性过滤器:

[attribute]

匹配包含给定属性的元素。

[attribute=value]

匹配给定的属性是某个特定值的元素


[attribute!=value]

匹配所有不含有指定的属性，或者属性不等于特定值的元素。


[attribute^=value]

匹配给定的属性是以某些值开始的元素


[attribute$=value]

匹配给定的属性是以某些值结尾的元素


[attribute*=value]

匹配给定的属性是以包含某些值的元素


[attrSel1][attrSel2l][attrSelN]

复合属性选择器，需要同时满足多个条件时使用。



表单过滤器:

表单

:input

匹配所有input,textarea, select和button 元素

:text

匹配所有文本输入框


password

匹配所有的密码输入框


:radio

匹配所有的单选框


:checkbox

匹配所有的复选框


:submit

匹配所有提交按钮


reset

匹配所有重置按钮



:button

匹配所有按钮


:file

匹配所有文件域

:hidden

匹配所有不可见的元素或type为hidden的元素

表单对象的属性

enabled

匹配所有可用元素


disabled

匹配所有不可用元素


checked

匹配所有选中的被选中的元素（复选框、单选框等、不包括select中的opinion）


selected

匹配所有选中的opinion元素


08表单对象属性过滤选择器_.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini {
            width: 55px;
        | height: 55 px;
            background-color: #aaa;
            font-size: 12px;
        }
        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //1.对表单内可用input赋值操作
            $("#btn1").click(function () {
                //var():可以操作表单项的属性值
                //它可以设置或获取
                $(":text:enabled").val("我是万能的程序员");
            });
            //2.对表单内不可用input赋值操作
            $("#btn2").click(function () {
                $(":text:disabled").val("管你可用不可用，反正我是万能的程序员");
            });
            //3.获取多选框选中的个数使用size()方法获取选取到的元案集合的元素个数
            $("#btn3").click(function () {
                alert($(":checkbox:checked").length);
            });
            //4.获取多选框，每个选中的value值
            $("#btn4").click(function () {
                //获取全部选择的复选框标签对象
                var $checkboxes=$(":checkbox:checked");
                //老式遍历
                // for (var i=0;i<$checkboxes.length;i++){
                //     alert($checkboxes[i].value);
                // }
                //each()是JQuery对象提供遍历元素的方法
                //在遍历的function中，有一个this对象，这个this对象就是当前遍历到的dom对象
                $checkboxes.each(function () {
                    alert(this.value);
                });
            });
            //5.获取下拉框选中的内容
            $("#btn5").click(function () {
                //获取选中的option对象
                var $options = $("select option:selected");
                //遍历获取到的option对象的文本内容
                $options.each(function () {
                    alert(this.innerHTML);
                })
            });
        });
    </script>
</head>
<body>
<!--  <div>
        表单
        :input
        :radio
        :checkbox
        :password
        :text
        :submit
        :image
        :reset
        :button
        :file
        :hidden
        表单对象的属性
        enabled
        disabled
        checked
        selected
    </div>   -->
<input type="button" value="对表单内可用input赋值操作" id="btn1"/>
<input type="button" value="对表单内不可用input赋值操作" id="btn2"/>
<input type="button" value="获取多选框选中的个数使用size" id="btn3"/>
<input type="button" value="获取多选框，每个选中的value值" id="btn4"/>
<input type="button" value="获取下拉框选中的内容" id="btn5"/>
<br/>
<h3>表单对象属性过滤选择器</h3>
<form id="form1" action="#">
    可用元素:<input nane="add" value="可用文本框1"/><br>
    不可用元素:<input name="email" disabled="disabled" value="不可用文本框"/><br>
    可用元素:<input name="che" value="可用文本框2"/><br>
    不可用元素:<input name="name" disabled="disabled" value="不可用文本框"/><br>
    <br>
    多选框:<br>
    <input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1
    <input type="checkbox" name="newsletter" value="test2"/>test2
    <input type="checkbox" name="newsletter" value="test3"/>test3
    <input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4
    <input type="checkbox" name="newsletter" value="test5"/>test5
    <br><br>
    下拉列表1:<br>
    <select name="test" multiple="multiple" style="..." id="sele1">
        <option>浙江</option>
        <option selected="selected">辽宁</option>
        <option>北京</option>
        <option selected="selected">天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
    <br><br>
    下拉列表2:<br>
    <select name="test2">
        <option>浙江</option>
        <option>辽宁</option>
        <option selected="selected">北京</option>
        <option>天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
</form>
</body>
</html>
文章标签：
JavaScript
索引
数据安全/隐私保护
日星月云
目录
相关文章
王同学睡醒了
|
12月前
|
JavaScript 前端开发
jQuery学习（十二）—jQuery中对象的查找方法总结
jQuery学习（十二）—jQuery中对象的查找方法总结
王同学睡醒了
108 0
入冉心
|
存储 JavaScript 前端开发
举例jQuery里的十五种操作
举例jQuery里的十五种操作
入冉心
75 0
光明顶阳顶天
|
2月前
|
存储 JavaScript 前端开发
jQuery 对属性的操作
【10月更文挑战第8天】
光明顶阳顶天
14 1
lvbb66
|
4月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
lvbb66
38 2
阿甘兄
|
JavaScript 前端开发
前端基础 -JQuery之 对属性的操作
前端基础 -JQuery之 对属性的操作
阿甘兄
49 0
程序员-刘华强
|
7月前
|
JavaScript
JQuery的定义
JQuery的定义
程序员-刘华强
48 0
.昭阳.
|
JavaScript 前端开发 CDN
jQuery补充
jQuery补充
.昭阳.
225 0
日星月云
|
JavaScript 前端开发 API
JQuery①上
JQuery①上
日星月云
42 0
日星月云
|
JavaScript 索引
JQuery①下
JQuery①下
日星月云
54 0
日星月云
|
JavaScript 前端开发
JQuery②2
JQuery②2
日星月云
45 0

热门文章

最新文章

  • 1
    面试必问的4种单点登录的实现方式，你知道几个？
  • 2
    测试开启MySQL performance_schema后对性能的影响
  • 3
    Java发送Http请求（HttpClient）
  • 4
    Github Pages+Hexo+阿里云域名绑定
  • 5
    在PyTorch中使用DistributedDataParallel进行多GPU分布式模型训练
  • 6
    分析: GetBuffer, ReleaseBuffer, GetBufferSetLength(转载)
  • 7
    IBatis.Net学习笔记七--日志处理
  • 8
    写给人类的机器学习 翻译完成
  • 9
    面试准备技巧
  • 10
    OpenJudge就算概论-过滤多余的空格
  • 1
    发送UDP数据免费API接口教程
    24
  • 2
    发送TCP数据免费API接口教程
    21
  • 3
    《C++助力无监督学习：挖掘数据潜在结构的高效之道》
    24
  • 4
    《C++ 中 RNN 及其变体梯度问题的深度剖析与解决之道》
    22
  • 5
    Flask 框架防止 SQL 注入攻击的方法
    27
  • 6
    Flask框架的安全机制与其他框架相比有哪些优势和劣势？
    21
  • 7
    正确配置Flask以提高应用的安全性
    18
  • 8
    用 Python 实现快速排序算法。
    16
  • 9
    利用Python内置函数实现的冒泡排序算法
    21
  • 10
    AutoGLM的一小步，人机交互进化的一大步
    17

    • 相关课程

    更多
  • jQuery开发教程
  • Vue.js 入门与实战
  • Node.js 入门教程文档
  • JavaScript入门与实战
  • 前端开发CSS基础
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • 23-Vue.js在前端...1506518547.pdf
  • Javascript中的对象
  • JavaScript函数

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • CSS基础教程
  • 搭建Node.js编程环境
    • 下一篇
    无影云桌面