zoukankan      html  css  js  c++  java
  • Jquery form选择器

     Jqeury对form元素筛选。测试代码如下:

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
    div {
    height: 100px;
    100px;
    border: 1px solid red;
    }
     
    .highColor {
    color: yellow;
    }
    </style>
    </head>

    <body>
    <form id="form1" action="#">
    <div class="aaa">
    <label for="aa">aaaaabbbb</label>
    <label for="aa">333333</label>
    </div>
    <input type="text" value="慢慢显示" hidden="true"><br/>
    <input name="add" value="可用文本" /><br/>
    <input name="email" value="不可用文本框" disabled="disabled" /><br/>
    <input name="che" value="可用文本" /><br/>
    <input name="name" value="不可用文本框" disabled="disabled" /><br/>
    <br/><br/>
    <input type="checkbox" name="newsletter" value="test1" checked="checked">测试一
    <input type="checkbox" name="newsletter" value="test2">测试二
    <input type="checkbox" name="newsletter" value="test3">测试三
    <input type="checkbox" name="newsletter" value="test4" checked="checked">测试四
    <input type="checkbox" name="newsletter" value="test5">测试五
    <div id="divText"></div>
    <br/><br/> 下拉列表1:
    <br/>
    <select name="test1" multiple="multiple" style="height:100px">
    <option selected="selected">浙江</option>
    <option >湖南</option>
    <option >天津</option>
    <option selected="selected">北京</option>
    <option >广州</option>
    <option selected="selected">湖北</option>

    </select><br/><br/> 下拉列表2:
    <br/>
    <select name="test1">
    <option >浙江</option>
    <option >湖南</option>
    <option >天津</option>
    <option selected="selected">北京</option>
    <option >广州</option>
    <option >湖北</option>

    </select><br/><br/>
    <div>

    <ul>
    <li>hahaha0<span>hahaha1</span></li>
    <li>hahaha1</li>
    <li>hahaha2</li>
    <li>hahaha3</li>
    <li>hahaha4</li>

    </ul>

    </div>
    </form>
    <script>
    //三、过滤选择器的使用,一般都是用:。
    $(function() {
    $("input:enabled").val("我是可用的");
    $("input:disabled").val("我是不可用的");

    var length = $("input:checked").length;

    //获取多选中选中的内容
    //var selectedStr = $("select:first option:selected").text();
    //获取多选中选中的个数----------------这个很重要
    //var selectedStr = $("select:first option:selected").length;
    //获取多选框中第N个选中的内容,index从0开始。----------------这个很重要
    // var selectedStr = $("select:first option:selected").get(0).textContent;
    //这个属于延伸自己拓展:表示select的子代第一个子代被选中的元素,并获取。如果没被选中,则报错。
    //var selectedStr = $("select :first:selected").get(0).textContent;


    // alert("length=" + length + "; selectedStr=" + selectedStr);

    // var length1 = $("#form1 :input").length; //这个是form中元素的个数,不只是input框
    // alert("length1=" + length1);
    // var str = $(".aaa").get(0).children("label").get(0).textContent;
    // var str = $(".aaa").children("label:first").text();
    // alert(str);

    //filter 对所有子代进行筛选符合条件的。返回自身$("div ul li")集合
    // $("div ul li").filter(":contains(hahaha3),:contains(hahaha1)").addClass("highColor");
    //find 对所有子代进行筛选符合条件的,返回$("div ul li")所有子元素集合
    //$("div ul ").find(":contains(hahaha3),:contains(hahaha1)").addClass("highColor");
    $("div ul ").find(":contains(hahaha3),:contains(hahaha1)").css("color", "red");


    })
    </script>

    </body>

    </html>

  • 相关阅读:
    权值线段树模版
    P2679 [NOIP2015 提高组] 子串
    P3747 [六省联考 2017] 相逢是问候
    P2822 [NOIP2016 提高组] 组合数问题
    P2331 [SCOI2005]最大子矩阵
    P1854 花店橱窗布置
    P5888 传球游戏
    Hard | LeetCode 42. 接雨水 | 单调栈 | 双指针
    Medium | LeetCode 621. 任务调度器 | 设计
    Medium | LeetCode 166. 分数到小数 | 数学
  • 原文地址:https://www.cnblogs.com/lixianfu5005/p/9127155.html
Copyright © 2011-2022 走看看