• 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>

  • 相关阅读:
    redis持久化之AOF和RDB
    pycharm快捷键
    500系列错误
    400系列错误
    Linux常用命令大全
    从浏览器输入一个地址,发送请求,经历了哪些过程(面试问题)
    401的错误分析
    301和302的区别
    数据库 语法收集 (主 mysql,次oracle,日常积累)
    python 发送邮件 smtplib.SMTPAuthenticationError: (535, b'Error: authentication failed') 以及授权码设置步骤
  • 原文地址:https://www.cnblogs.com/lixianfu5005/p/9127155.html
Copyright © 2020-2023  润新知