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 {
             width: 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 /  -  + "px" });
             //2.设置ul的外部div 的宽度
             $("#inputBox").css({ "width": window.innerWidth /  -  + "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>