拍卖会列表页面布局与交互-优快云博客

本文链接：https://blog.youkuaiyun.com/wanglei_samrtfish/article/details/77197483

@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewBag.Title = "拍卖会列表";
    Layout = null;
}

@using Microsoft.AspNetCore.Html
<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>518大学生创业拍卖会</title>
    <link href="~/auctionPc/css/auction_zk.css" rel="stylesheet" />
    <link href="~/auctionPc/css/base.css" rel="stylesheet" />
    <link href="~/auctionPc/css/font-awesome.min.css" rel="stylesheet" />
    <script src="~/js/jquery-2.2.0.min.js"></script>
    <script src="~/js/lhgdialog/lhgcore.lhgdialog.min.js"></script>
    <script src="~/js/jquery-ui.min.js"></script>
    <link href="~/js/jquery-ui.min.css" rel="stylesheet" />
    <link href="~/sidebarpc/css/sidebar_style.css" rel="stylesheet" />

    <style type="text/css">
        .sele {
            color:red;
        }
        .content {
            color:blue;
        }

    </style>
    <script>
        $(document).ready(function () {

        $("ul li").bind("click", function () {
          //当前元素加样式去掉同宗的其它元素的样式
         $(this).addClass("sele").siblings().removeClass("sele");
        });

        $(".room_info dd").click(function () {
            if ($(this).hasClass("content")) {
                $(this).removeClass("content");
            } else {
                $(this).addClass("content");
            }
        });

        $("#btnSreach").bind("click", function () {

            //选择所有的form元素中的input元素
            //$("form input")
            //同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
            //$("#prev ~div")
           // 选择id值为main的所有的子元素
            //$("#main > *")
            ////第二个子节点隐藏
            ////$("ul li:nth-child(2)").hide();
            ////奇数行
            //$("ul li:nth-child(odd)");
            //// 返回所有的div元素的第一个子节点的数组
            //$("div span:first-child");
            ////返回所有的div元素的最后一个节点的数组
            //$("div span:last-child");
            ////返回所有的div中只有唯一一个子节点的所有子节点的数组
            //$("div button:only-child");
            ////div中包含John的元素
            //$("div:contains('John')")
            ////包含p标签的div
            //$("div:has(p)");
            //$("ul li:nth-child(odd)");
            //class=q的li的元素的第一个
            $("li.q:eq(0)").hide();
            //选取所有 id="demo" 的 <p> 元素
            $("p#demo").addClass("content");
            //选取所有带有 href 属性的元素
            //$("[href]").addClass("sele");
            ////选取所有带有 href 值等于 "#" 的元素。
            //$("[href='#']").addClass("sele");
           // //选取所有带有 href 值不等于 "#" 的元素。
            //$("#wl1234 >a[href!='#']").addClass("sele");
           //// 选取所有 href 值以 ".jpg" 结尾的元素。
           // $("[href$='.jpg']")
           // index 大于 2 的tr
            //$("tr:gt(2)").addClass("content");
            //index小于2的tr
            //$("tr:gt(2)").addClass("content");
            $("tr:even").addClass("sele");
            $("tr:odd").addClass("content");
            //所有标题元素 <h1> - <h6>
            $(":header").css("background-color", "#B2E0FF");
            //选择所有包含 "wl" 的 <p> 元素：
            $("p:contains(wl)").css("background-color", "#B2E0FF");
            //无子（元素）节点的所有元素
            $(":empty").css("background-color", "#B2E0FF");
           // 所有隐藏的 < p > 元素
            $("p:hidden").css("display","");
            //所有可见的表格
            $("table:visible").css("background-color", "yellow");
            //选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
            $("label + input").css("background-color", "yellow");
            //不包含checked属性的input下边的span
            $("input:not(:checked) + span").css("background-color", "red");
            //包含swansay属性的元素
            $("[swansay]").css("background-color", "red");
            //id=qss的input元素
            $("input [id=qss]").css("background-color", "#B2E0FF");
            ////id以header结尾的input元素
            $("p[id$=header]").css("background-color", "yellow");
            ////id以wl开头的input元素
            $("p[id^=wl]").css("background-color", "yellow");

            //$(":input") $(":password") $(":radio") $(":checkbox") $(":submit") $(":reset") $(":text") $(":button")$(":image") $(":file")

            //$(":enabled") $(":disabled")

            //var date = "";
            //for (var i = 1; i < 4; i++) {
            //    if ($('#d' + i).hasClass("content")) {
            //        date = date + "-" + $('#d' + i).html();
            //    }
            //}
            //alert(date);
        });

        });
     </script>
</head>
<body>

    <form method="post" enctype="multipart/form-data">
        <input type="button" class="ss-btn" id="btnSreach" value="点击" />

        </form>

    <ul>
        <li class="sele"> a</li>
        <li>b</li>
        <li>c</li>

    </ul>

     <dl class="room_info">
            <dt>入住时间</dt>
            <dd id="d1">8月27日</dd>
            <dd id="d2">8月28日</dd>
            <dd id="d3">8月29日</dd>
        </dl>
    </div>

    <ul id="s1" class="menu">
        <li class="p">A</li>
        <li class="q">B</li>
        <li class="q">C</li>
        <li class="q">D</li>
    </ul>

   <p id="demo">dssssds </p>
    <p> wl22</p>

    <div id="wl1234">
        <a>AAA</a>
        <a href="www.baidu.com">BBB</a>
        <a href="#">cccc</a>
    </div>

    <table>
        <tr><td>SSSSSSSSS</td></tr>
        <tr><td>ddddddddddddddd</td></tr>
        <tr><td>gggggg</td></tr>
        <tr><td>hhhhhhh</td></tr>
    </table>
    <h1>aaaa</h1><h2>bbbb</h2>

    <p style="display:none;" >xxxx</p>

    <input type="text" name="wl"/>ghj
    <input type="checkbox"/>fgh

    <lable >KKKK</lable><input type="text" value="test" style="background-color:indigo;"/>

<input type="checkbox" checked="checked" />bbbb <span>dddddddddfggggg</span>
    <input type="checkbox" />eeee <span>xyz</span>

    <p swansay="wsj">ddd</p>

    <input type="text" id="qss" value="test" style="background-color:indigo;"/>abcd

    <p id="main_header">Welcome to My Homepage</p>
    <p id="wlmain_header">Welcome to My Homepages</p>
</html>

jqueey练习