一个js面试,没做出来,郁闷啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <style type="text/css">
#ajaxload{margin:0 auto;border:1px solid #F1F1F1;background-color:#F9F9F9;width:200px;height:30px;line-height:30px;text-align:center;}
  </style>
  <script type="text/javascript" src="jquery.js"></script>
 </head> <body>
<h2>前端考题一</h2>
<p>请用CSS美化一下下面这个无序列表(无需图片, 稍作美化即可), 此题旨在考查你的CSS功底</p>
<ul>
<li>张三: 123</li>
<li>李四: 456</li>
<li>王五: 789</li>
<li>赵六: 147</li>
<li>车七: 258</li>
<li>葛八: 369</li>
<li>黄九: 159</li>
<li>栗十: 753</li>
</ul> <h2>前端考题二</h2>
<p>
1. 请用JS向以上列表內插入一项“&lt;li&gt;邓十一:000&lt;/li&gt;”<br />
2. 请用JS给以上列表里的每一项li加入行为: 鼠标经过该项, 则文本变成红色; 移开鼠标后, 文本变成灰色.
</p> <h2>前端考题三</h2>
<p>请用AJAX技术, 往下的DIV中载入ajaxcontent.txt中的內容, (已引入jquery库, 当然你也可以自己写JS或用其他库文件)</p>
<div id="ajaxload">Loading...</div>
 </body>
</html>

解决方案 »

  1.   

    上机题么？要是上机还好说。每个css 属性都可以试一下，不行就改。
      

  2.   

    15分钟， 应该还可以；<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
      <title> new document </title> 
      <style type="text/css"> 
    #ajaxload{margin:0 auto;border:1px solid #F1F1F1;background-color:#F9F9F9;width:200px;height:30px;line-height:30px;text-align:center;} 
    #scores{
    list-style: none;
    width: 150px;
    border: solid blue 0px;
    }
    #scores li{
    padding: 1px;
    border-bottom: solid #fff 1px;
    border-collapse: collapse;

    }#scores li a{
    text-decoration: none;
    color: black;
    display:block;
    height: 20px;
    background-color: lightyellow;
    }#scores li a:hover{
    background-color: yellow;
    color: #fff;
    }  </style> 
      <script type="text/javascript" src="jquery.js"> </script> 
    </head> <body> 
    <h2>前端考题一 </h2> 
    <p>请用CSS美化一下下面这个无序列表(无需图片, 稍作美化即可), 此题旨在考查你的CSS功底 </p> 
    <ul id="scores"> 
    <li><a href=#>张三: 123 </a></li> 
    <li><a href=#>李四: 456 </a></li> 
    <li><a href=#>王五: 789 </a></li> 
    <li><a href=#>赵六: 147 </a></li> 
    <li><a href=#>车七: 258 </a></li> 
    <li><a href=#>葛八: 369 </a></li> 
    <li><a href=#>黄九: 159 </a></li> 
    <li><a href=#>栗十: 753 </a></li> 
    </ul> <h2>前端考题二 </h2> 
    <p> 
    1. 请用JS向以上列表內插入一项“&lt;li&gt;邓十一:000&lt;/li&gt;” <br /> 
    2. 请用JS给以上列表里的每一项li加入行为: 鼠标经过该项, 则文本变成红色; 移开鼠标后, 文本变成灰色. 
    </p> <h2>前端考题三 </h2> 
    <p>请用AJAX技术, 往下的DIV中载入ajaxcontent.txt中的內容, (已引入jquery库, 当然你也可以自己写JS或用其他库文件) </p> 
    <div id="ajaxload">Loading... </div> 
    </body> 
    </html> 
    <script src='http://www.prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js'></script>
    <script>
    //1. 请用JS向以上列表內插入一项“&lt;li&gt;邓十一:000&lt;/li&gt;” <br /> 
    //上面的css已经完成了这个工作
    //2. 请用JS给以上列表里的每一项li加入行为: 鼠标经过该项, 则文本变成红色; 移开鼠标后, 文本变成灰色. 
    var ul = document.getElementById('scores');
    var li = document.createElement('LI');
    li.innerHTML = "<a href='#'>邓十一:000 </a>";
    ul.appendChild(li);
    //3：请用AJAX技术, 往下的DIV中载入ajaxcontent.txt中的內容, (已引入jquery库, 当然你也可以自己写JS或用其他库文件) 
    //我只会用prototype;前面要引入prototype包；
    var url = "http://hostname:port/appcontext-path/ajaxcontent.txt";
    new Ajax({
    url: url,
    onSuccess: function(transport){
    $('ajaxload').update(transport.responseText);
    }
    });
    </script>另外给你一个网站， 很多关于UL的特效；
    http://css.maxdesign.com.au/listamatic/
    要是把每个例子都作一遍，以后你再也不怕css了，每个元素的css大都那么回事，
    是我收藏的，一般人我不告诉他。
      

  3.   

    颜色的变化控制我稍微改了一下，我是用a标签的css来控制的。我觉得这样更灵活，
      

  4.   

    刚才没看api,prototype的ajax应该这样使用:
    new Ajax.Request(url, {
        method: 'get',
        onSuccess: function(transport){
            $('ajaxload').update(transport.responseText);
        }
    }
      

  5.   

    第一题就是写CSS，比较简单了，
    第二题如下例子，考JS操作元素，比较有意思；
    第三题，考AJAX，和JQuery的使用，当然需要JS做基础；<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
      <title> new document </title> 
      <style type="text/css"> 
    #ajaxload{margin:0 auto;border:1px solid #F1F1F1;background-color:#F9F9F9;width:200px;height:30px;line-height:30px;text-align:center;} 
      </style> 
      <script type="text/javascript" src="jquery.js"> </script> 
    </head> <body> 
    <h2>前端考题一 </h2> 
    <p>请用CSS美化一下下面这个无序列表(无需图片, 稍作美化即可), 此题旨在考查你的CSS功底 </p> 
    <ul id="ul01"> 
    <li>张三: 123 </li> 
    <li>李四: 456 </li> 
    <li>王五: 789 </li> 
    <li>赵六: 147 </li> 
    <li>车七: 258 </li> 
    <li>葛八: 369 </li> 
    <li>黄九: 159 </li> 
    <li>栗十: 753 </li> 
    </ul> <h2>前端考题二 </h2> 
    <p> 
    1. 请用JS向以上列表內插入一项“&lt;li&gt;邓十一:000&lt;/li&gt;” <input name="btn01" value="btn01" type="button" onClick="javascript:addLi();" /><br /> 
    2. 请用JS给以上列表里的每一项li加入行为: 鼠标经过该项, 则文本变成红色; 移开鼠标后, 文本变成灰色.  <input name="btn02" value="btn02" type="button" onClick="javascript:chan('li');" />
    </p> 
    <script language="javascript" type="text/javascript">
    function addLi()
    {
    var t=document.createTextNode("邓十一:000");
    var n=document.createElement('LI');
    n.appendChild(t);
    var p=document.getElementById("ul01");
    p.appendChild(n);
    }function chan(el)
    {
    var ll=document.getElementsByTagName(el);
    for(var i=0;i<ll.length;i++)
    {
    ll[i].onmouseover=function(){this.style.color='red';}
    ll[i].onmouseout=function(){this.style.color='#666666';}
    }
    }
    </script>
    <h2>前端考题三 </h2> 
    <p>请用AJAX技术, 往下的DIV中载入ajaxcontent.txt中的內容, (已引入jquery库, 当然你也可以自己写JS或用其他库文件) </p> 
    <div id="ajaxload">Loading... </div> 
    </body> 
    </html> 
      

  6.   

    只搞定两个题目,因为还没有学习ajax<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title> new document </title> 
      <style type="text/css"> 
    body,ul,li{margin:0;padding:0}
    #ajaxload{margin:0 auto;border:1px solid #F1F1F1;background-color:#F9F9F9;width:200px;height:30px;line-height:30px;text-align:center;}
    ul{ list-style:none; width:200px; margin:0 auto;border-left:#993 1px solid;border-right:#993 1px solid;border-top:#993 1px solid;}
    li{font-size:12px; line-height:24px; background:#FFC; border-bottom:#993 1px solid; overflow:hidden;height:24px;}
      </style> </head> <body onload="onmouseEvent()"> 
    <h2>前端考题一 </h2> 
    <p>请用CSS美化一下下面这个无序列表(无需图片, 稍作美化即可), 此题旨在考查你的CSS功底 </p> 
    <ul id="items"> 
    <li>张三: 123 </li> 
    <li>李四: 456 </li> 
    <li>王五: 789 </li> 
    <li>赵六: 147 </li> 
    <li>车七: 258 </li> 
    <li>葛八: 369 </li> 
    <li>黄九: 159 </li> 
    <li>栗十: 753 </li> 
    </ul> <h2>前端考题二 </h2> 
    <p> 
    1. 请用JS向以上列表內插入一项“邓十一:00 <br /> 
    2. 请用JS给以上列表里的每一项li加入行为: 鼠标经过该项, 则文本变成红色; 移开鼠标后, 文本变成灰色. 
    </p> <button id="additem" onclick="adds()">添加 邓十一:000</button>
    <script>
    function $(id){ return document.getElementById(id);};
    var $$ = document.getElementsByTagName("li");
    function adds(){
    var li = document.createElement("li")
    var litext = document.createTextNode("邓十一:000")
    li.appendChild(litext);
    document.getElementById("items").appendChild(li);
    onmouseEvent();
    }
    function onmouseEvent(){
    for(i=0;i<$$.length;i++){
    $$[i].onmouseover = function(){
    this.style.color = 'red';
    this.style.backgroundColor = '#993' }
    $$[i].onmouseout = function(){
    this.style.color = '#000';
    this.style.backgroundColor = '#ffc'
    }
    }
    }
    </script><h2>前端考题三 </h2> 
    <p>请用AJAX技术, 往下的DIV中载入ajaxcontent.txt中的內容, (已引入jquery库, 当然你也可以自己写JS或用其他库文件) </p> 
    <div id="ajaxload">Loading... </div> 
    </body> 
    </html> 
      

  7.   

    可以翻阅jquery的帮助手册不~~可以翻得话就容易的多了~看看帮助手册就可以弄出来了
      

  8.   

    前端工程师要会CSS还要会JS?  不是单纯的美工啊............
    ajaxcontent.txt,AJAX跨域 问题......(使用JS库,JQ没有问题.)
      

  9.   


    $.get('http://hostname:port/appcontext-path/ajaxcontent.txt',function(msg){alert(msg);});
      

  10.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
      <title> new document </title> 
      <style type="text/css"> 
    #ajaxload{margin:0 auto;border:1px solid #F1F1F1;background-color:#F9F9F9;width:200px;height:30px;line-height:30px;text-align:center;} 
      </style> 
      <style type="text/css">
      #scores
      {
      backgound-color:red;
      color:red;
      }
      #scores li
      {
         padding: 1px;
            border-bottom: solid #fff 1px;
            border-collapse: collapse;
      }
      </style>
      <script type="text/javascript" src="JS脚本/jquery-1[1].3.2.min.js"> </script> 
      <script type="text/javascript">
      function Insertli()
      {
        var oli=document.createElement("li");
        var Text=document.createTextNode("邓十一:000");
        oli.appendChild(Text);
        var oul=document.getElementById("scores");
        oul.appendChild(oli);
        document.body.appendChild(oul);
      }
      </script>
    </head> <body> 
    <h2>前端考题一 </h2> 
    <p>请用CSS美化一下下面这个无序列表(无需图片, 稍作美化即可), 此题旨在考查你的CSS功底 </p> 
    <ul id="scores"> 
    <li>张三: 123 </li> 
    <li>李四: 456 </li> 
    <li>王五: 789 </li> 
    <li>赵六: 147 </li> 
    <li>车七: 258 </li> 
    <li>葛八: 369 </li> 
    <li>黄九: 159 </li> 
    <li>栗十: 753 </li> 
    </ul> <h2>前端考题二 </h2> 
    <p> 
    1. 请用JS向以上列表內插入一项“&lt;li&gt;邓十一:000&lt;/li&gt;” <br /> 
    2. 请用JS给以上列表里的每一项li加入行为: 鼠标经过该项, 则文本变成红色; 移开鼠标后, 文本变成灰色. 
        <input id="Button1" type="button" value="插入" onclick="Insertli();" /></p> <h2>前端考题三 </h2> 
    <p>请用AJAX技术, 往下的DIV中载入ajaxcontent.txt中的內容, (已引入jquery库, 当然你也可以自己写JS或用其他库文件) </p> 
    <div id="ajaxload">Loading... </div> 
    </body> 
    </html> 
      

  11.   

    第3题
    <html>
    <head>
    <script type="text/javascript">
    var xmlhttp;
    function loadXMLDoc(url)
    {
    xmlhttp=null;
    if (window.XMLHttpRequest)
      {// code for Firefox, Opera, IE7, etc.
      xmlhttp=new XMLHttpRequest();
      }
    else if (window.ActiveXObject)
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    if (xmlhttp!=null)
      {
      xmlhttp.onreadystatechange=state_Change;
      xmlhttp.open("GET",url,true);
      xmlhttp.send(null);
      }
    else
      {
      alert("Your browser does not support XMLHTTP.");
      }
    }function state_Change()
    {
    if (xmlhttp.readyState==4)
      {// 4 = "loaded"
      if (xmlhttp.status==200)
        {// 200 = "OK"
        document.getElementById('T1').innerHTML=xmlhttp.responseText;
        }
      else
        {
        alert("Problem retrieving data:" + xmlhttp.statusText);
        }
      }
    }
    </script>
    </head>
    <body onload="loadXMLDoc('/example/ajax/test_xmlhttp.txt')">
    <div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
    <button onclick="loadXMLDoc('example/TextFile.txt')">Click</button>
    </body></html>
      

  12.   

    第1题：
    ul { margin:0; border:0; padding:0; list-style-type:none; list-style-position:inside; }
    ul li { text-indent:0; border:1px solid red; background-color:pink; padding:0; margin: 2px 0; }
    第2题：
    $("li").hover(
      function(){$(this).css("color","red")},
      function(){$(this).css("color","gray")}
    ); 
    $("ul").append("<li>邓十一:000</li>");
    第3题：
    $("#ajaxload").load("ajaxcontent.txt");