5.jQuery——过滤选择器/基本过滤选择器/属性过滤选择器/可见性过滤器/表单选择器

其他 2019-04-13 02:38:35 阅读次数: 0

简介：介绍jQuery常用的过滤选择器

1.基本过滤选择器

1.过滤选择器简介

  1. 过滤选中的元素中的第一个：$("div:first")
  2. 过滤选中元素中的最后一个：$("div:last")
  3. 过滤选中元素中类名不为one的元素:$("div:not(.one)")
  4. 可以根据选中元素的索引的奇偶数进行过滤:$("div:even") 【偶数】$("div:odd")【奇数】
  5. 可以指定选中元素的索引进行过滤:$("div:eq(3)")【索引等于3、索引是从0开始计算的】
  6. 可以指定选中元素大于某个索引进行过滤：$("div:gt(3)") 【索引大于3】$("div:lt(3)")【索引小于3】
  7. 可以过滤动画的元素、和当前焦点所在的元素$(":focus")【当前焦点所在元素】$(":animated")【动画元素】
  8. 可以过滤标题所有元素：$(":header")

    2.具体例子如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>基本过滤选择器</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!--   引入jQuery -->
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="lib/assist.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function(){
      	//选择第一个div元素
      	$("#btn1").click(function(){
      		$("div:first").css("background","#bfa");
      	});
      	//选择最后一个div元素
      	$("#btn2").click(function(){
      		$("div:last").css("background","#bfa");
      	});
      	//选择class不为one的div
      	$("#btn3").click(function(){
      		$("div:not(.one)").css("background","#bfa");
      	});
      	//选择索引值为偶数的div元素
      	$("#btn4").click(function(){
      		$("div:even").css("background","#bfa");
      	});
      	//选择索引值为奇数的div元素
      	$("#btn5").click(function(){
      		$("div:odd").css("background","#bfa");
      	});
      	//选择索引值等于3的div元素
      	$("#btn6").click(function(){
      		$("div:eq(3)").css("background","#bfa");
      	});
      	//选择索引值大于3的div元素
      	$("#btn7").click(function(){
      		$("div:gt(3)").css("background","#bfa");
      	});
      	//选择索引值小于3的div元素
      	$("#btn8").click(function(){
      		$("div:lt(3)").css("background","#bfa");
      	});
      	//选择所有标题元素元素比如h1 h2 h3
      	$("#btn9").click(function(){
      		$(":header").css("background","#bfa");
      	});
      	//当前正在执行动画的元素
      	$("#btn10").click(function(){
      		$(":animated").css("background","#bfa");
      	});
        //选择当前获取焦点的所有元素
      	$("#btn11").click(function(){
      		$(":focus").css("background","#bfa");
      	});
      });
    </script>
</head>
<body>
    <h3>
        基本过滤选择器.
    </h3>
    <button id="reset">
        手动重置页面元素
    </button>
    <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br />
    <br />
    <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的元素." id="btn6" />
    <input type="button" value="选择索引值大于3的元素." id="btn7" />
    <input type="button" value="选择索引值小于3的元素." id="btn8" />
    <input type="button" value="选择所有的标题元素." id="btn9" />
    <input type="button" value="选择当前正在执行动画的所有元素." id="btn10" />
    <input type="button" value="选择当前获取焦点的所有元素." id="btn11" />
    <br />
    <br />
    <!-- 测试的元素 -->
    <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 style="display: none;" class="none">
        style的display为"none"的div
    </div>
    <div class="hide">
        class为"hide"的div
    </div>
    <div>
        包含input的type为"hidden"的div<input type="hidden" size="8" />
    </div>
    <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

2.属性过滤选择器

1.属性过滤选择器

简介：jQuery：可以根据元素的属性进行过滤

  1. 含有title属性的div元素：$("div[title]")
  2. title属性等于test的div元素：$("div[title=test]")
  3. title属性不等于test的div元素：$("div[title!=test]")（没有title属性的div也将被选中）
  4. 选取title属性的值以te开始的div元素$("div[title^=te]")
  5. 选取title属性的值以est结束的div元素$("div[title$=est]")
  6. 选取title属性的值含有es的div元素:$("div[title*=es]")

组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素$("div[id][title*=es]")

2.属性过滤选择器程序代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>属性选择器</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!--   引入jQuery -->
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="lib/assist.js" type="text/javascript"></script>
    <script type="text/javascript">
         $(function(){
         	//选取含有 属性title 的div元素.
         	$("#btn1").click(function(){
         		$("div[title]").css("background","#bfa");
         	});
         	//选取 属性title值等于“test”的div元素.
         	$("#btn2").click(function(){
         		$("div[title='test']").css("background","#bfa");
         	});
         	//选取 属性title值不等于“test”的div元素(没有属性title的也将被选中).
         	$("#btn3").click(function(){
         		$("div[title!='test']").css("background","#bfa");
         	});
         	//选取 属性title值 以“te”开始 的div元素." id="btn4
         	$("#btn4").click(function(){
         		$("div[title^='te']").css("background","#bfa");
         	});
         	//选取 属性title值 以“est”结束 的div元素.
         	$("#btn5").click(function(){
         		$("div[title$='est']").css("background","#bfa");
         	});
         	//选取 属性title值 含有“es”的div元素.
         	$("#btn6").click(function(){
         		$("div[title*=es]").css("background","#bfa");
         	});
         	//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素
         	$("#btn7").click(function(){
         		$("div[id][title*=es]").css("background","#bfa");
         	});
         });
    </script>
</head>
<body>
    <button id="reset">
        手动重置页面元素
    </button>
    <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
    <h3>
        属性选择器.
    </h3>
    <input type="button" value="选取含有 属性title 的div元素." id="btn1" />
    <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" />
    <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3" />
    <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4" />
    <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5" />
    <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6" />
    <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素."
           id="btn7" />
    <br />
    <br />
    <!-- 测试的元素 -->
    <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 style="display: none;" class="none">
        style的display为"none"的div
    </div>
    <div class="hide">
        class为"hide"的div
    </div>
    <div>
        包含input的type为"hidden"的div<input type="hidden" size="8" />
    </div>
    <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

3.可见性过滤器

1.可见性过滤器

  1. 查找所有可见的div元素：$("div:visible")
  2. 查找body内所有隐藏的元素$("body :hidden")
  3. 查找div隐藏函数的个数$('div:hidden').length
  4. input type='hidden'且div style='display:none;'都视为隐藏元素

2.程序例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>可见性过滤选择器</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!--   引入jQuery -->
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(function(){
       	$("#reset").click(function(){
       		window.location.reload();
       	});
       	$("#btn_visible").click(function(){
       		$("div:visible").css("background","#ffbbaa");
       	});
       	$("#btn_hidden").click(function(){
       		alert("不可见的元素有："+$('body :hidden').length+"个\n"+
       		"其中不可见的div元素："+$('div:hidden').length+"个\n");
       		$("div:hidden").show(3000).css("background","#bbffaa");
       	});
       });
    </script>
</head>
<body>
    <h3>
        可见性过滤选择器.
    </h3>
    <button id="reset">
        手动重置页面元素
    </button><br />
    <br />
    <input type="button" value="选取所有可见的div元素." id="btn_visible" />
    <br />
    <input type="button" value="选取所有不可见的元素.包括&lt;input type='hidden'/&gt;和&lt;div style='display:none;'&gt;."
           id="btn_hidden" />
    <br />
    <br />
    <!-- 测试的元素 -->
    <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 style="display: none;" class="none">
        style的display为"none"的div
    </div>
    <div class="hide">
        class为"hide"的div
    </div>
    <div>
        包含input的type为"hidden"的div<input type="hidden" size="8" />
    </div>
    <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

4.表单选择器和转义字符（\\）

1.表单选择器代码

 var $alltext = $("#form1 :text");
            var $allpassword = $("#form1 :password");
            var $allradio = $("#form1 :radio");
            var $allcheckbox = $("#form1 :checkbox");

            var $allsubmit = $("#form1 :submit");
            var $allimage = $("#form1 :image");
            var $allreset = $("#form1 :reset");
            var $allbutton = $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
            var $allfile = $("#form1 :file");
            var $allhidden = $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
            var $allselect = $("#form1 select");
            var $alltextarea = $("#form1 textarea");

            var $AllInputs = $("#form1 :input");
            var $inputs = $("#form1 input");

猜你喜欢

转载自blog.csdn.net/qq_35574190/article/details/89217242
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022