我的理解_我的见解-CSDN博客

本文链接：https://blog.csdn.net/lwg910919an/article/details/54096916

B/S ：浏览器/服务器模式通过浏览器打开的就是这种模式服务器指的是可以提供特殊服务的电脑。

C/S ：客户端/服务器模式系统，比如OA系统，qq，为知笔记。

js是一种脚本。
写js的步骤：
1、分析：结构，样式，事件
2、布局
3、样式：一开始消失
4、js：onmouseover onmouseout

js：
ECMAScript：解析器我 01 false true
DOM：文档对象模型：赋予js操控节点的能力
BOM：浏览器对象模型：赋予js操控浏览器窗口的能力

变量的命名：
类型前缀+首字母大写
object oBtn oNews
array aLi aDiv
function fnShow
get Element By Id 驼峰命名法
获取元素通过 id名：通过id获取元素（节点）

get Elements By Tag Name
获取元素们通过标签名字：通过标签获取元素们

程序结构：
1、顺序结构
2、条件结构
if（判断条件）{
语句1；
}
else{
语句2；
}
嵌套
多条件分支
3、循环语句
for（var i=0；i<5；i++）{
alert(i);
}
var i=0; 初始值
while(i<5){ 判断值
alert(i);
i++; 自增值
}

关于新浪的一个下拉的问题

<!DOCTYPE html>

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{margin: 0;padding: 0;list-style: none;}
           ul{width: 100px;}
           ul li{
               width: 100px;
               height: 50px;
               border: 1px solid yellow;
               line-height:50px;
               text-align: center;
           }
           .two li:hover{background: yellow;}
           .two{display: none;}
           .up{background: url(img/scroll_up.png) no-repeat;}
           .down{background: url(img/scroll_down.png) no-repeat;}
       </style>
       <script type="text/javascript">
//           window.οnlοad=function(){
           function show(){

               var oBtn=document.getElementById('btn');
               var oMenu=document.getElementById('menu');
               var aBian=oMenu.getElementsByTagName('li');

               if(oMenu.style.display=='block'){
                   oMenu.style.display='none';
                   oBtn.className='down';
               }
               else{
                   oMenu.style.display='block';
                   oBtn.className='up';
               }

               oBtn.οnmοuseοver=function(){
                   oMenu.style.display='block';
               }
               oBtn.οnmοuseοut=function(){
                   oMenu.style.display='none';
               }

           }
       </script>
   </head>
   <body>
       <ul id="btn" class="down" οnclick="show()">
           <li>移动客户端
               <ul id="menu" class="two">
                   <li>新浪微博</li>
                   <li>新浪微博</li>
                   <li>新浪微博</li>
                   <li>新浪微博</li>
                   <li>新浪微博</li>
                   <li>新浪微博</li>
                   <li>新浪微博</li>
                   <li>新浪微博</li>
                   <li>新浪微博</li>
               </ul>
           </li>
       </ul>
   </body>

</html>

上面使用的是循环

通过自己的理解找到问题的关键

布局结构样式事件

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>sina</title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
               list-style: none;
           }
           #menu{
               margin: 50px;
           }
           #title{
               width: 106px;
               height: 40px;
               line-height: 40px;
               text-align: center;
               font-size: 12px;
               color: #4c4c4c;
               position: relative;
           }
           #title:hover{
               background: #edeef0;
           }
           #title span{
               width: 16px;
               height: 11px;
               display: block;
               position: absolute;
               top: 16px;
               right: -5px;
           }
           #title .up{
               background: url(img/updown.png) no-repeat;
           }
           #title .down{
               background: url(img/updown.png) no-repeat 0 -11px;
           }
           #news_list{
               width: 114px;
               border: 1px solid #ebbe7a;
               border-top: none;
               display: none;
           }
           #news_list li{
               width: 114px;
               height: 32px;
               border-bottom: 1px solid #fecc5b;
           }

           #news_list li a{
               color: #333333;
               font-size:12px;
               line-height: 32px;
               text-decoration: none;
               display: block;
               padding-left: 15px;
           }
           #news_list li a:hover{
               background-color: #fff5da;
               color: #e67902;
           }

       </style>
       <script type="text/javascript">
           window.οnlοad=function(){
               var oTitle=document.getElementById('title');
               var oNewsList=document.getElementById('news_list');
               var oSpan=document.getElementById('span');

               oNewsList.οnmοuseοver=oTitle.οnmοuseοver=function(){
                   oNewsList.style.display='block';
                   oSpan.className='up';
               }

               oNewsList.οnmοuseοut=oTitle.οnmοuseοut=function(){
                   oNewsList.style.display='none';
                   oSpan.className='down';
               }

//               oNewsList.οnmοuseοver=function(){
//                   oNewsList.style.display='block';
//                   oSpan.className='up';
//               }
//
//               oNewsList.οnmοuseοut=function(){
//                   oNewsList.style.display='none';
//                   oSpan.className='down';
//               }
           }
       </script>
   </head>
   <body>
       <div id="menu">
           <p id="title">移动客户端<span id="span" class="down" ></span></p>
           <ul id="news_list">
               <li><a href="javascript:">新浪微博</a></li>
               <li><a href="javascript:">新浪微博</a></li>
               <li><a href="javascript:">新浪微博</a></li>
               <li><a href="javascript:">新浪微博</a></li>
               <li><a href="javascript:">新浪微博</a></li>
               <li><a href="javascript:">新浪微博</a></li>
               <li><a href="javascript:">新浪微博</a></li>
               <li><a href="javascript:">新浪微博</a></li>
               <li><a href="javascript:">新浪微博</a></li>
           </ul>
       </div>
   </body>

</html>
上面使用的是双移动的效果