您的位置:澳门新葡8455最新网站 > 服务器运维 > 入门jQuery选用器之过滤选取器,三个js过滤空格的

入门jQuery选用器之过滤选取器,三个js过滤空格的

发布时间:2019-12-31 04:27编辑:服务器运维浏览(116)

    澳门新葡8455最新网站,过滤空格,尤其是在一些注册页面比较实用,可以用js在客户端将空格过滤掉,在提交服务器入库

    ps.以下内容转载梦三秋网站

    复制代码 代码如下:

    今天来说一说jQuery过滤选择器中的最后一个表单对象属性过滤选择器
    此选择器主要是对所选择的表单元素进行过滤,例如选择不可用的表单元素、被选中的下拉框、多选框等等。表单对象属性过滤选择器的介绍说明如下表:

    过滤空格

    选择器 描述 返回 示例
    :enabled 选取所有可用的表单元素 集合元素 $("#form1 :enabled")选取id为“form1”的表单内的所有可用元素
    :disabled 选取所有不可用的表单元素 集合元素 $("#form2 :disabled")选取id为“form2”的表单内的所有不可用元素
    :checked 选取所有被选中的元素(单选框-radio、复选框-checkbox) 集合元素 $("input:checked")选取所有被选中的<input>元素
    :selected 选取所有被选中的选项元素(下拉列表) 集合元素 $("select :selected")选取所有被选中的选项元素(option)

    随意输几个带空格的字符串试试:

    大家有没有发现上面的表格中的说明中有这样两种代码:
    $("#form2 :disabled")和$("input:checked")
    第一个是jQuery选择器中带有空格的,第二个是没有带空格的,这两者有什么区别呢?那我们就来看看一个由空格引发的“血案”吧

    先构建如下的HTML代码:

    <div class="test">
    <div style="display:none;">Jquery教程</div>
    <div style="display:none;">Jquery学习</div>
    <div style="display:none;">Jquery插件</div>
    <div class="test" style="display:none;">PHP学习</div>
    </div>
    <div class="test" style="display:none;">Jquery插件教程</div>
    <div class="test" style="display:none;">Jquery插件学习</div>
    

     jQuery代码:

    var $test_a = $(".test :hidden");//带空格的jQuery选择器
    var $test_b = $(".test:hidden");//不带空格的jQuery选择器
    var len_a = $test_a.length;
    var len_b = $test_b.length;
    alert("带空格的jQuery选择器选出的jQuery元素是:"+len_a+"个");//输出为4个
    alert("不带空格的jQuery选择器选出的jQuery元素是:"+len_b+"个");//输出为3个
    

     之所以会出现不同的结果,这就是层次(后代)选择器和过滤选择器的不同了。

    var $test_a = $(".test :hidden");//带空格的jQuery选择器
    

     上面这段代码是选取class为"test"的元素里面的隐藏元素。(层次选择器)

    var $test_b = $(".test:hidden");//不带空格的jQuery选择器
    

     这上面的代码则是选取隐藏的class为"test"的元素

    注意:
    有的选择器的用法,必须是空格,如果不带空格的话,那就取不到元素,比如:

    $("select:selected").length;//不管任何时候,这个选择器都取不到元素,这个length必然是0
    $("select :selected");//这样才是正确的
    

     有的选择器的用法,必须不带空格,如果带空格的话,那就取不到元素,比如:

    $("input :checked").length;//不管任何时候,这个选择器都取不到元素,这个length必然是0
    $("input:checked");//这样才是正确的
    

     

    本文由澳门新葡8455最新网站发布于服务器运维,转载请注明出处:入门jQuery选用器之过滤选取器,三个js过滤空格的

    关键词: