Asp.Net 之Jquery知识点运用

        1.先把要用的body内的代码写好。

 <div id="ulBox">
        <h3>下面的Ulid为"ulList1"</h3>
        <ul id="ulList1">
            <li class="fruit">苹果(class=fruit)</li>
            <li class="fruit">西瓜(class=fruit)</li>
            <li class="vegetable" id="cucumber">黄瓜(id=cucumber)(class=vegetable)</li>
            <li id="tomato" class="vegetable">西红柿(id=tomato)(class=vegetable)</li>
            <li class="fruit">菠萝(class=fruit)</li>
        </ul>
        <h3>下面的Ulid为"ulList2"</h3>
        <ul id="ulList2">
            <li class="fruit">香蕉(class=fruit)</li>
            <li class="fruit">椰子(class=fruit)</li>
            <li id="flower">西兰花(id=flower)(class=vegetable)</li>
            <li class="fruit">火龙果(class=fruit)</li>
            <li id="potato" class="vegetable">土豆(id=potato)(class=vegetable)</li>
        </ul>

        <hr />
        <input type="button" value="重置页面样式" id="btnRest" />
    </div>
    <div id="inputBox">
        <input type="button" value="jq的id选择器" id="btnId" /><input type="text" id="textId" /><br />
        <input type="button" value="jq的标签选择器" id="btnTag" />页面元素限制,这里只让大家使用li标签<br />
        <input type="button" value="jq的class选择器" id="btnClass" /><input type="text" id="textClass" /><br />
        <input type="button" value="jq的text方式设置值" id="btnText" /><input type="text" id="textText" /><br />
        <input type="button" value="jq的html方式取值" id="btnHtml" /><input type="text" id="textHtml" /><br />
        <input type="button" value="jq的value方式取值-取文本框→" id="btnValue" /><input type="text" id="textValue" /><br />

    </div>

         2.然后把标签中的样式写好，主要是好看，对吧，嘻嘻

    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
        }

        div {
            margin: 0px;
            border: 1px solid #00942b;
            text-align: center;
        }

        #ulBox {
            float: left;
        }

        #inputBox {
            float: right;
            text-align: left;
        }

        ul {
            text-align: left;
            border: 1px solid #00942b;
            padding: 0px;
        }

        h2 {
            text-align: center;
        }

        input {
             200px;
        }

        table {
            height: 200px;
            border: 1px solid black;
            border-collapse: collapse;
        }

        td {
            border: 1px solid #0094ff;
        }
    </style>

               3.然后就开始运用Jquery的知识点了。

<script type="text/javascript">
        //页面资源加载完毕调用
        $(function () {
            //-----------------设置样式适应屏幕-----------------------
            //1.设置ul的外部div 的宽度
            $("#ulBox").css({ "width": window.innerWidth / 2 - 2 + "px" });
            //2.设置ul的外部div 的宽度
            $("#inputBox").css({ "width": window.innerWidth / 2 - 2 + "px" });
            //注意,因为两边的边框各占了1个像素,所以上面需要减2

            //------------------为所有li添加高亮选中------------------
            //保存选中的li标签
            var liSel;
            $("li").click(function () {
                $(this).css("color", "red");
                liSel = this;
            })

            //-----------------注册各个按钮的点击事件-----------------
            //1.重置按钮的点击事件--将所有的li标签的背景颜色还原
            $("#btnRest").click(function () {
                //刷新页面
                window.location = window.location;
            })
            //2.id选择器
            $("#btnId").click(function () {
                //获取文本值
                var Text = $("#textId").val();
                //设置背景颜色
                $("#"+Text).css("backgroundColor","#00942b");
                //打印代码
                alert("$("#" + Text + ").css("backgroundColor", "#00942b");");
            })

            //3.标签选择器
            $("#btnTag").click(function () {
                //设置背景颜色
                $("li").css("backgroundColor", "pink");
                //打印代码
                alert("   $("li").css("backgroundColor", "pink");");
            })

            //4.class选择器
            $("#btnClass").click(function () {
                //获取文本值
                var etext = $("#textClass").val();
                //设置背景颜色
                $("." + etext).css("backgroundColor","yellow");
                //打印代码
                alert("$("." + etext + ").css("backgroundColor", "yellow");");
            })

            //5.Text()方法
            $("#btnText").click(function () {
                //非空判断
                if (liSel != null) {
                    //获取文本值
                    var text = $("#textText").val();
                    //设置选中li标签的文本值
                    $(liSel).text(text);
                    //打印代码
                    alert("$(lisel).text("+text+");");
                }
            })

            //6.html()方法
            $("#btnHtml").click(function () {
                //非空判断
                if (liSel != null) {
                    //获取文本值
                    var htmls = $("#textHtml").val();
                    //设置选中li标签的文本值
                    $(liSel).html(htmls);
                    //打印代码
                    alert("$(lisel).html(" + htmls + ");");
                }
            })

            //7.val()方法
            $("#btnValue").click(function () {
                //打印value值
                alert($("#textValue").val());
                //打印代码
                alert("$(#textValue").val()")");
            })

        })
    </script>