jQuery_06 过滤器的使用

什么是过滤器?

过滤器就是用来筛选dom对象的,过滤器是和选择器一起使用的。在选择了dom对象后在进行过滤筛选。

jQuery对象中存储的dom对象顺序与页面标签声明有关系。

声明顺序就是dom中存放的顺序

1.基本过滤器

使用dom对象在数组中的位置来作为过滤条件的。
1.数组中第一个dom成员 语法: $("选择器:first")

2.选择最后一个dom成员 语法:$("选择器:last")

3.选择指定下标的dom成员 语法:$("选择器:eq(下标)")

4.选择大于某个下标的所有成员 语法:$("选择器:gt(下标)")

5.选择小于某个下标的所有成员 语法:$("选择器:lt(下标)")

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
      $(function () {
        //页面加载完成之后执行 相当于onload事件
        $("#btn").click(function () {
          alert("我单机了按钮");
        });
        $("#btn1").click(function () {
          var obj = $("div:first");
          obj.css("background-color", "red");
        });
        $("#btn2").click(function () {
          var obj = $("div:last");
          obj.css("background-color", "red");
        });
        $("#btn3").click(function () {
          //获取下标等于3的div
          var obj = $("div:eq(3)");
          obj.css("background-color", "green");
        });
        $("#btn4").click(function () {
          // 获取下标小于3的div
          var obj = $("div:lt(3)");
          obj.css("background-color", "orange");
        });
        $("#btn5").click(function () {
          // 获取下标大于3的div
          var obj = $("div:gt(3)");
          obj.css("background-color", "blue");
        });
      });
    </script>
    <style type="text/css">
      div {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <div id="one">我是div0</div>
    <div id="two">我是div1</div>
    <div id="">
      我是div2
      <div>我是div3</div>
      <div>我是div4</div>
    </div>
    <div>我是div5</div>
    <br />
    <br />
    <span>我是span</span>
    <br />
    <br />
    <input type="button" id="btn" value="绑定事件" /><br />
    <input type="button" id="btn1" value="获取dom中第一个对象" /><br />
    <input type="button" id="btn2" value="获取dom中最后一个对象" /><br />
    <input type="button" id="btn3" value="获取下标等于3的div" /><br />
    <input type="button" id="btn4" value="获取下标小于3的div" /><br />
    <input type="button" id="btn5" value="获取下标大于3的div" /><br />
  </body>
</html>

2.表单属性过滤器

根据对象的状态作为条件,筛选dom
1.获取可用的文本框 $(":text:enabled")

2.获取不可用的文本框 $(":text:disabled")

3.获取选中的复选框 $(":checkbox:checked")

4.获取选中的option 下拉框 $("选择器:option:selected")

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
      $(function () {
        //页面加载完成之后执行 相当于onload事件
        $("#btn1").click(function () {
          //选中可用的文本框
          var obj = $(":text:enabled");
          obj.val("hello");
        });
        $("#btn2").click(function () {
          //选中的复选框
          var obj = $(":checkbox:checked");
          for (var i = 0; i < obj.length; i++) {
            console.log(
              "dom方式" + obj[i].value + ",jQuery的方式" + $(obj[i]).val()
            );
          }
        });
        $("#btn3").click(function () {
          //选中的下拉列表框
          // var obj = $("select > option:selected");
          var obj = $("#lang>option:selected");
          console.log(obj.val());
        });
      });
    </script>
    <style type="text/css">
      div {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <p>文本框</p>
    <input type="text" id="text1" value="文本框1" /><br />
    <input type="text" id="text1" value="文本框2" disabled /><br />
    <input type="text" id="text1" value="文本框3" /><br />
    <input type="text" id="text1" value="文本框4" disabled /><br />
    <br />
    <br />
    <p>复选框</p>
    <input type="checkbox" value="游泳" />游泳<br />
    <input type="checkbox" value="健身" checked />健身<br />
    <input type="checkbox" value="电子游戏" checked />电子游戏<br />
    <br />
    <br />
    <p>下拉框</p>
    <select name="" id="lang">
      <option value="java">java</option>
      <option value="go" selected>go</option>
      <option value="python">python</option>
    </select>
    <br />
    <br />
    <p>按钮</p>
    <button id="btn1">所有的可用的文本框的值设为hello</button><br />

    <button id="btn2">显示选中的复选框</button><br />
    <button id="btn3">显示选中的下拉列表框</button><br />
  </body>
  <script>
    /* 
    表单过滤器
    根据对象的状态作为条件,筛选dom
    1.获取可用的文本框     $(":text:enabled") 
    2.获取不可用的文本框   $(":text:disabled")
    3.获取选中的复选框     $(":checkbox:checked")
    4.获取选中的option 下拉框     $("选择器:option:selected")
    */
  </script>
</html>
相关推荐
小政爱学习!20 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。25 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼32 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093335 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0011 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax