界面代码使用总结

    优美的界面都是经过程序们没不断的调试美化出来的，通过做视频系统也收获了不少界面操作的代码知识点，总结出来以作积累！

    

    基础——界面动态拼接

    我们需要的不是静态界面，而是通过查询操作得出的结果进行拼接，得到最终的界面。界面已有的内容很简单，比如说，以下jsp代码中已有的部分：

<span style="font-size:18px;"><pre name="code" class="html"><div id="queryresult">        <div class="recommended">            <div id="youlike"></div>        </div>                    <div class="container" id="myVideo_list"></div>    <button type="button" id="findmore" style="display:none;" class="btn btn-info" style="margin-left:50px" onclick="search1()" value="查询" >查询</button>    </div></span>

    当单击查询按钮时我们要将所查询的内容拼接到id=“youlike”节点中，那需要做的只是一个查询操作，重点是怎样将查询的结果进行动态拼接。

    说到动态拼接，听上去不是很难，先给大家展示拼接后的效果：

    界面上所有的内容都是通过拼接得出来的，那可想拼接过程肯定是复杂的，不过，我有大神相助，以下是js中从查询到最后的拼接界面所有的内容。

<span style="font-size:18px;"><pre name="code" class="html">function search1(){var querytxt=$("#querytxt").val();$("#extendstudycenter").children().remove();$.ajax({type : "POST",async : false,data:{"page":str,"rows":str1,"querytxt":querytxt},dataType:"JSON",url:'queryCollegeVideoInfo',success : function(result) {$.each(videos, function(i, value) {var htmlDiv="";                htmlDiv=htmlDiv+"<div class=" + "col-sm-3" + ">";                htmlDiv=htmlDiv+"<div class=" + "thumbnail" + " style='float:right;'>";                htmlDiv=htmlDiv+"<div><a href=" + "single.html" +">" +"<img id=" + "youLikeImg" + value.id + " src" + "" + "/></a>";                //htmlDiv=htmlDiv+"<div style='margin-top:-15px;color:#fff;text-align:right;'>"+ value.videoTime+"</div></div>";            htmlDiv=htmlDiv+"</div>";                htmlDiv=htmlDiv+"<div id=" +"videoDesc" + value.id + ">"+"<h5><a>"                 + value.videoName + "</a></h5>"+                "<div style='float:left;'><p><a style='color: #21deef;font-size:12px'>"                 + value.videoType + "</a></p></div>"                +"<div style='float:right;'><a float=right style='color:gray;font-size:12px'>"                + value.comment +"views</a></p></div>";                                 htmlDiv=htmlDiv+"</div></div></div>";                $("#youlike").append(htmlDiv);                $("#youLikeImg"+value.id).attr("src","/dmsd-itoo-video-web/"+value.videoPath); });},error : function(error) {console.info("doSearch() method error")}});return;}</span>

    JS代码解析

    界面值获取

<span style="font-size:18px;">var querytxt=$("#querytxt").val();</span>

        这个就不用多说啦，jquery方法获取界面值，另外还有js方法获取：

<span style="font-size:18px;">var querytxt=document.getElementById("querytxt").val();</span>

    

    删除某个节点下的所有节点

<span style="font-family:SimSun;font-size:18px;">$("#extendstudycenter").children().remove();</span>

    每进行一个查询，需要把之前界面已有的内容移除，然后拼接新的内容，以上代码即将id为extendstudycenter的节点下的所有子节点删除。

    替换节点内容

    查询之后如果不把界面内容先删除再拼接，还可以直接进行替换：

//替换内容标题titledocument.getElementById("title").innerHTML=htmltitle;

    将id为title的标签的内容替换为htmltitle所表示的内容。

    循环拼接界面

    js代码中$.each中的内容，即对所需界面的循环拼接，包括所有控件及其控件中的部分属性和样式。

    htmlDiv中即为界面循环拼接的结果，在 $("#youlike").append(htmlDiv); 一句中，将拼接好的htmlDiv拼接到id为youlike的节点下。

    动态给控件属性赋值

<span style="font-family:SimSun;font-size:18px;">$("#youLikeImg"+value.id).attr("src","/dmsd-itoo-video-web/"+value.videoPath);</span>

    这是一个id为youlikeImg的img控件，本句的意思是对img控件的src属性附链接地址value.videoPath（查询结果value的videoPath字段值），所得结果即<img id="youLikeImg1" src="http://localhost:8080/dmsd-itoo-video-web/images/c.jpg"/> 

    当然，技巧多得是，书到用时方恨少啊，慢慢积累，不断完善~~~ing。。。