zoukankan      html  css  js  c++  java
  • JQuery选择器和方法4

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style type="text/css">
            .red {
                background-color:red;
            }
        </style>
        <script src="Scripts/jquery-1.7.1.js"></script>
        <script type="text/javascript">
            $(function () {
                //===========================1==========================
                $("#tb tr").click(function () {
                    //多个样式中间加空格:red blue,追加、删除对应样式,不影响其他样式 
                    $(this).addClass("red").siblings().removeClass("red");
                });
     
                $(":input").focus(function () {
                    $(this).addClass("red");
                }).blur(function () {
                    $(this).removeClass("red");
                });
     
     
     
                //============================2===============================
                //属性过滤器选择器
                //选取有id属性的input
                $("input[id]").css("background-color""pink");
                //选取title属性=txt的input
                $("input[title=txt]").css("background-color""pink");
                //选取name属性=abc的input 相当于getElementByName
                $("input[name=abc]").css("background-color""pink");
                $("input[name!=abc]").css("background-color","pink");
                //选取id属性包含'n1'的input
                $("input[id*=n1]").css("background-color","red");
                //其他还可以选择以(^开头 $结尾)的input
                //选取value中包含"k1"的button
                $("input[type=button][value*=k1]").css("background-color","pink");
     
     
                //==========================3============================
                //
                $("input[value=checked]").click(function () {
                    //$("input[name=sex]:checked=checked").val()也可以
                    var v = $("input[name=sex]:checked").val();
                    alert(v);
                });
     
            });
            
     
        </script>
    </head>
    <body>
        <%--1--%>
        <div>
            <table id="tb" border="1px">
                <tr>
                    <td>1111111111111111111</td>
                </tr>
                 <tr>
                    <td>1111111111111111111</td>
                </tr>
                 <tr>
                    <td>1111111111111111111</td>
                </tr>
                 <tr>
                    <td>1111111111111111111</td>
                </tr>
            </table>
        
     
        <input type="text" /><br />
        <input type="text" /><br />
        <input type="text" /><br />
        <input type="text" /><br />
        <input type="text" /><br />
        <input type="text" /><br />
        <input type="text" /><br />
     
        <%--2--%>
        <input id="t1" type="text" /><br />
        <input id="t2" type="text" /><br />
        <input id="t3" type="text" /><br />
        <input type="text" title="txt"/><br />
        <input type="text" name="abc"/><br />
        <input id="btn1" type="button" value="click1" /><br />
        <input id="btn2" type="button" value="click2" /><br />
        <input type="button" value="click3" /><br />
        <input type="button" value="click4" /><br />
     
        <%--3--%>
        <input type="radio" name="sex" value="nan" />
        <input type="radio" name="sex" value="nv" />
        <input type="button" value="checked" /><br />
     
        </div>
     
    </body>
    </html>
  • 相关阅读:
    SL复习笔记之平稳转型——基础篇(二、控件和数据访问)
    UML之用例图和类图
    SL复习笔记之平稳转型——基础篇(四、多媒体,工具提示和右键菜单)
    SL复习笔记之平稳转型——基础篇(一)
    SL复习笔记之平稳转型——基础篇(三、SL安装检测和用“刷子”刷出背景)
    平稳转型WP系列之在Windows Phone中谈“委托”、“事件”和“接口”(一、深入理解)
    UML建模之活动图和StarUML使用
    SL复习笔记之平稳转型——基础篇(五、数据绑定)
    使用html parser
    设计模式工厂模式
  • 原文地址:https://www.cnblogs.com/jiayue360/p/3168012.html
Copyright © 2011-2022 走看看