zoukankan      html  css  js  c++  java
  • jquery 中的选择器的学习 有点乱啊

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <title>Hello query!!</title>
        <style type="text/css">
            #Button2
            {
                359px;
            }
            .style2
            {
                32px;
            }
            .style3
            {
                28px;
            }
            .style4
            {
                24px;
            }
        </style>
        <script type="text/javascript">
            var dom = document.getElementById("btnHide");
            jquery = $(dom);
            $("#btnShow").bind("click", function (event) { $("#divMsg").show(); });
            jquery.bind("click", function (event) { $("#divMsg").hide(); });
            $("#btnChange").bind("click", function (envent) { $("#divMsg").html("Hello World, too!"); });
            $("#Button3").click(function () { $("#divParent+input").css("background", "blue"); }); //下面的按钮可以控制上面的以下所有的按钮
            $("#alterColor").click(function () { $("#Button3~[id]").css("background", "red"); });
            $("#alterTableColor").click(function () { $(".tab tr:first td").css("background", "green"); });
            $("#testBT").click(function () { $("body input:odd").css("background", "red"); });
            $("#testCK").click(function () { $("input:checked").css("background", "red"); });
            $("#testCf").click(function () { $("div:contains('aa')").css("background", "red"); });
            $("#testCF").click(function () { $("td:parent").css("background", "red"); });

            $("#testAF").click(function () { $("div[id]").css("background", "red"); });
            $("#testAF1").click(function () { $("div[id='aadiv22']").css("background", "#EDE"); });
            $("#testAF2").click(function () { $("div[id='aadiv22']").css("background", "#EAE"); });
            $("#testAF3").click(function () { $("input[name$='bb']").css("background", "#EHE"); });
            $("#testAF4").click(function () { $("div[id$='11']").css("background", "#EUE"); });
        </script>
    </head>
    <body>
        <div id="divMsg">Hello world!</div>
        <input type="button" id="btnShow" value="显示" />
        <div id="divParent"><div id="divChild">ddddd</div><div id="div1">ddddd</div><input type="button" id="btnHide" value="隐藏" /></div>
        <input type="button" id="btnChange"  value="修改后的结果为hello world,too!" />
        <input type="button" id="alterColor"  value="改变红色颜色"/>
        <input type="button" id="Button3" value="改变为蓝色"/>
        <input type="button" id="alterTableColor" title="13" value="改变表格的颜色"/>
        <input type="button" id="testBT" value="测试基本过滤器"/>
        <input type="checkbox" id="ck" value="是"  checked="checked"/>
        <input type="button" id="testCK" value="测试ck" />
        <input type="button" id="Button2" title="13"  value="dddd"/>
        <table class="tab">
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="style3">
                    &nbsp;</td>
                <td class="style4">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="style3">
                   </td>
                <td class="style4">
                    </td>
                <td>
                    <div>djjjjjjjj</div></td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="style3">
                    &nbsp;</td>
                <td class="style4">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="style3">
                    &nbsp;</td>
                <td class="style4">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
        <div id="CF">aa内容过滤器的测试</div>
        <input id="testCf" type="button" value="内容过滤器测试"/>
        <input id="testCF" type="button" value="内容过滤器测试2"/>
        <div id="aadiv11">
            <div>dddddddddd
                <div>ddddddddd</div>
                <div>ddddddddd</div>
            </div>
        </div>
        <div  id="aadiv22">gfffffffffff
            <div>ddddddd
                <div>ddddddddd</div>
                <div>ddddd</div>
            </div>
        </div>
        <div  id="bbdiv22" class="divclass">gfffffffffff
        <div>ddddddd
            <div>ddddddddd</div>
            <div>ddddd</div>
        </div>
        </div>
        <input id="testAF" type="button" value="属性过滤器测试含有id的变色"/>
        <input id="testAF1" type="button" value="属性过滤器测试1id为aadiv22的变色"/>
        <input id="testAF2" type="button" value="属性过滤器测试2id不为aa的变色"/>
        <input id="testAF3" type="button" value="属性过滤器测试3含有以name结尾的input变色"/>
        <input id="testAF4" type="button" value="属性过滤器测试4"/>
        <input id="testAF5" type="button" value="属性过滤器测试5选择所有含有id为div的变色"/>
        <input id="testAF6" value="属性过滤器测试5选择所有含有id为div的变色" type="button"/>
        <input id="testButton" value="表单选择器" type="button"/>        
    </body>
    </html>
        <script type="text/javascript">
            var dom = document.getElementById("btnHide");
            jquery = $(dom);
            $("#btnShow").bind("click", function (event) { $("#divMsg").show(); });
            jquery.bind("click", function (event) { $("#divMsg").hide(); });
            $("#btnChange").bind("click", function (envent) { $("#divMsg").html("Hello World, too!"); });
            $("#Button3").click(function () { $("#divParent+input").css("background", "blue"); }); //下面的按钮可以控制上面的以下所有的按钮
            $("#alterColor").click(function () { $("#Button3~[id]").css("background", "red"); });
            $("#alterTableColor").click(function () { $(".tab tr:first td").css("background", "green"); });
            $("#testBT").click(function () { $("body input:odd").css("background", "red"); });
            $("#testCK").click(function () { $("input:checked").css("background", "red"); });
            $("#testCf").click(function () { $("div:contains('aa')").css("background", "red"); });
            $("#testCF").click(function () { $("td:parent").css("background", "red"); });

            $("#testAF").click(function () { $("div[id]").css("background", "red"); });
            $("#testAF1").click(function () { $("div[id='aadiv22']").css("background", "#EDE"); });
            $("#testAF2").click(function () { $("div[id!='aa']").css("background", "#EAE"); });
            $("#testAF3").click(function () { $("div[id^='aa']").css("background", "#aaaddd"); });
            $("#testAF4").click(function () { $("div[id$='22']").css("background", "#aaa111"); });
            $("#testAF5").click(function () { $("div[id*='div']").css("background", "#aaa111"); });
            $("#testAF6").click(function () { $("div[class][id^='bb']").css("background", "#aaa111"); });
            $("#testButton").click(function () { $("input").css("background", "red"); });
        </script>

  • 相关阅读:
    Oracle笔记(三) Scott用户的表结构
    Oracle笔记(一) Oracle简介及安装
    Oracle笔记(七) 数据更新、事务处理、数据伪列
    Oracle笔记(六) 多表查询
    Oracle笔记(九) 表的创建及管理
    Oracle笔记(四) 简单查询、限定查询、数据的排序
    CentOS 6.3下部署LVS(NAT)+keepalived实现高性能高可用负载均衡
    PostgreSQL学习手册(十七) PL/pgSQL过程语言
    Oracle笔记(八) 复杂查询及总结
    Oracle笔记(十二) 集合、序列
  • 原文地址:https://www.cnblogs.com/lzhp/p/2680789.html
Copyright © 2011-2022 走看看