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>