Javascript 如何显示网页中使用的超链接列表？_Javascript_Jquery_Html_Css

Javascript 如何显示网页中使用的超链接列表？

javascript jquery html css

Javascript 如何显示网页中使用的超链接列表？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在我的课堂上，我制作了3份甜点下拉菜单和制作甜点的食谱。所有的食谱都是超链接。我需要使用JavaScript来显示我在页面中使用的所有实际链接的列表这里有一个链接，指向页面应该是什么样子（我试图在底部写上“本文档中引用的网站”）这是我到目前为止所做的代码：简易甜点食谱氢{ 背景：url（images/open.png）不重复0 11px；填充：10px 0 25px；光标：指针； } h2.close{ 背景图片：url（images/close.png）； } .菜单{ 边界

在我的课堂上，我制作了3份甜点下拉菜单和制作甜点的食谱。所有的食谱都是超链接。我需要使用JavaScript来显示我在页面中使用的所有实际链接的列表

这里有一个链接，指向页面应该是什么样子（我试图在底部写上“本文档中引用的网站”）

这是我到目前为止所做的代码：


简易甜点食谱
氢{
背景：url（images/open.png）不重复0 11px；
填充：10px 0 25px；
光标：指针；
}
h2.close{
背景图片：url（images/close.png）；
}
.菜单{
边界半径：10px；
背景色：rgba（0,0,0,05）；
填充：10px；
边缘底部：10px；
}
.食谱{
左边距：25px；
}
$（document）.ready（function（）{//此函数使菜单成为下拉菜单
$（'.recipes'）.hide（）；
$（'.main h2'）。单击（函数（）{
var$recipes=$（this.next（'.recipes'）；
如果（$recipes.is（':hidden'））{
$recipes.slideDown（）；
$（this.addClass（'close'）；
}否则{
$recipes.fadeOut（）；
$（this.removeClass（'close'）；
}
})；//结束单击
//-------------------------------------缩放功能-------------------
$（“#ex1”）.zoom（）；//由于zoom jquery文件，当您将鼠标悬停在图像上方时，这些行会使图像缩放
$（“#ex2”）.zoom（）；
$（“#ex3”）.zoom（）；
//-----------------------------------鼠标悬停功能------------------
$（'img'）.mouseover（函数（）{
$（“#弹出”）。宽度（200）。高度（200）；
})；//结束鼠标悬停
$（“img”）.mouseout（函数（）{
//$（“#弹出”）。宽度（200）。高度（200）；
$（'弹出'）.remove（）；
})；//结束鼠标输出
//------------------------------------------参考文献-----------------------------------
//获取指向站点外部点的所有链接
//---------------------------------------结束准备就绪-------------------
}); // 准备就绪
第五章实验室
派对动物

软迷你巧克力曲奇–没有人能抗拒软而耐嚼的曲奇，尤其是当它是迷你型的时候！			      

饼干派

只有一件事比饼干和那个巨大的饼干更好。尤其是像馅饼那么大的！

花生酱果冻棒

你们。我甚至不知道该说什么，除非你做了这些酒吧，你会想吃所有的面包屑！

制造者

这就是我问题的答案：

在JavaScript代码末尾，但正好在end ready}之前）；我补充说：

    $('a[href^="http://"]').each(function() {
    var extLink = $(this).attr('href');
    $('#RecipeList').append('<li>' + extLink + '</li>');
    });

因此，整个代码如下所示：

    <!DOCTYPE html>

    <html>
    <head>

      <meta charset="UTF-8">

      <title>Easy Dessert Recipes</title>

      <link href="css/style.css" rel="stylesheet">

      <script src="scripts/jquery.min.js"></script> 

        <script src="scripts/jquery.zoom.min.js"></script> 

        <style type="text/css">

        h2 {
        background: url(images/open.png) no-repeat 0 11px;
        padding: 10px 0 0 25px;
        cursor: pointer;
        }

      h2.close {
        background-image: url(images/close.png);
        }

      .menu  {
        border-radius: 10px;
        background-color:  rgba(0,0,0,.05);
        padding: 10px;
        margin-bottom: 10px;
        }

      .recipes {
        margin-left: 25px;  
        }

      #references   {
        border-radius: 10px;
        background-color:  rgba(0,0,0,.05);
        padding: 10px;
        margin-bottom: 10px;
          }
      </style>

      <script>  

       $(document).ready(function() {  // this function makes the menu become a drop down menu

        $('.recipes').hide();
        $('.main h2').click(function() {
        var $recipes = $(this).next('.recipes');
        if ($recipes.is(':hidden')) {
            $recipes.slideDown();
            $(this).addClass('close');
        } else {
            $recipes.fadeOut();
            $(this).removeClass('close');
        }

         }); // end click

      //-------------------------------------Zoom Function--------------------------------------   

        $("#ex1").zoom();  // these lines make the image zoom when you mouse           over because of the zoom jquery file
        $("#ex2").zoom();
        $("#ex3").zoom();

       //-----------------------------------MouseOver Function----------------------------------              

      $('img').mouseover(function() {
        $("#popup").width(200).height(200);
        }); // End mouseover

      $("img").mouseout(function() {
        //$("#popup").width(200).height(200);
        $('#popup').remove();
        }); // End mouseout

      //------------------------------------------Reference-----------------------------------


      // Get all links to point outside of the site
      $('a[href^="http://"]').each(function() {
      var extLink = $(this).attr('href');
      $('#RecipeList').append('<li>' + extLink + '</li>');
      });
      //---------------------------------------END READY--------------------------------------   

         }); // end ready


      </script>

      </head>
      <body>
        <div class="wrapper">

          <header>Chapter 5 Lab</header>

        <div class="content">
          <div class="main">

      <!--------------------------------------BEGIN Mini Cookies--------------------------> 

          <div class="menu">

          <h2>Mini Cookies</h2>

            <div class="recipes">  

                   <p>
                    Soft Mini Chocolate Chip Cookies – No one can resist a soft and chewy cookie, especially when it’s in mini form!                  
                      <a href="http://diethood.com/soft-mini-chocolate-chip-cookies/#QecOGKvhKY1KvAYG.99">Find Recipe Here</a>

                   </p>

                <span class='zoom' id='ex1'>
                  <img src='images/miniCookies.PNG' width='100' height='100' alt='bar'/>
                </span>

            </div>
          </div>
      <!--------------------------------------END Mini Cookies-------------------------->     

      <!--------------------------------------BEGIN Cookie Pie-------------------------->

          <div class="menu">

           <h2>Cookie Pie</h2>

               <div class="recipes">  

                   <p>
                    There's only one thing better then cookies and that GIGANTIC cookie.  Especially one's the size of pies!

                      <a href="http://pinchofyum.com/deep-dish-chocolate-chip-cookie-with-caramel-sea-salt">Find Recipe Here</a>

                   </p>

                <span class='zoom' id='ex2'>
                  <img src='images/cookie.PNG' width='100' height='100' alt='bar'/>
                </span>

             </div>
          </div>

      <!------------------------------------END Cookie Pie--------------------------------------->

      <!-------------------------------- BEGIN Peanut Butter & Jelly Bars ----------------------->  

          <div class="menu">

             <h2>Peanut Butter & Jelly Bars</h2>

               <div class="recipes">  

                   <p>
                    You guys. I don’t even know what to say, other than if you make these bars you’ll want to eat every last crumb!

                      <a href="http://www.foodnetwork.com/recipes/ina-garten/peanut-butter-and-jelly-bars-recipe.html">Find Recipe Here</a>

                   </p>

                <span class='zoom' id='ex3'>
                  <img src='images/bar.png' width='100' height='100' alt='bar'/>
                </span>


              </div>

           </div>

      <!-------------------------- END Peanut Butter & Jelly Bars ------------------------------->     

              <div id="references">

              <h3>Links for recipes</h3>
              <ul id="RecipeList">
              </ul>

              </div>


          </div>
        </div>
        </div>

        <footer>
            <p>Made by </p>
        </footer>

        </div>

      </body>
      </html>


简易甜点食谱
氢{
背景：url（images/open.png）不重复0 11px；
填充：10px 0 25px；
光标：指针；
}
h2.close{
背景图片：url（images/close.png）；
}
.菜单{
边界半径：10px；
背景色：rgba（0,0,0,05）；
填充：10px；
边缘底部：10px；
}
.食谱{
左边距：25px；
}
#参考资料{
边界半径：10px；
背景色：rgba（0,0,0,05）；
填充：10px；
边缘底部：10px；
}
$（document）.ready（function（）{//此函数使菜单成为下拉菜单
$（'.recipes'）.hide（）；
$（'.main h2'）。单击（函数（）{
var$recipes=$（this.next（'.recipes'）；
如果（$recipes.is（':hidden'））{
$recipes.slideDown（）；
$（this.addClass（'close'）；
}否则{
$recipes.fadeOut（）；
$（this.removeClass（'close'）；
}
})；//结束单击
//-------------------------------------缩放功能-------------------
$（“#ex1”）.zoom（）；//由于zoom jquery文件，当您将鼠标悬停在图像上方时，这些行会使图像缩放
$（“#ex2”）.zoom（）；
$（“#ex3”）.zoom（）；
//-----------------------------------鼠标悬停功能------------------
$（'img'）.mouseover（函数（）{
$（“#弹出”）。宽度（200）。高度（200）；
})；//结束鼠标悬停
$（“img”）.mouseout（函数（）{
//$（“#弹出”）。宽度（200）。高度（200）；
$（'弹出'）.remove（）；
})；//结束鼠标输出
//------------------------------------------参考文献-----------------------------------
//获取指向站点外部点的所有链接
$（'a[href^=“http://”）。每个（函数（）{
var extLink=$（this.attr（'href'）；
$（“#RecipeList”）.append（“”+extLink+””）；
});
//---------------------------------------结束准备就绪-------------------
}); // 准备就绪
第五章实验室
派对动物

软迷你巧克力曲奇–没有人能抗拒软而耐嚼的曲奇，尤其是当它是迷你型的时候！

饼干派

只有一件事比饼干和那个巨大的饼干更好。尤其是像馅饼那么大的！

皮亚努
    #references {
    border-radius: 10px;
    background-color:  rgba(0,0,0,.05);
    padding: 10px;
    margin-bottom: 10px;
    }

    <!DOCTYPE html>

    <html>
    <head>

      <meta charset="UTF-8">

      <title>Easy Dessert Recipes</title>

      <link href="css/style.css" rel="stylesheet">

      <script src="scripts/jquery.min.js"></script> 

        <script src="scripts/jquery.zoom.min.js"></script> 

        <style type="text/css">

        h2 {
        background: url(images/open.png) no-repeat 0 11px;
        padding: 10px 0 0 25px;
        cursor: pointer;
        }

      h2.close {
        background-image: url(images/close.png);
        }

      .menu  {
        border-radius: 10px;
        background-color:  rgba(0,0,0,.05);
        padding: 10px;
        margin-bottom: 10px;
        }

      .recipes {
        margin-left: 25px;  
        }

      #references   {
        border-radius: 10px;
        background-color:  rgba(0,0,0,.05);
        padding: 10px;
        margin-bottom: 10px;
          }
      </style>

      <script>  

       $(document).ready(function() {  // this function makes the menu become a drop down menu

        $('.recipes').hide();
        $('.main h2').click(function() {
        var $recipes = $(this).next('.recipes');
        if ($recipes.is(':hidden')) {
            $recipes.slideDown();
            $(this).addClass('close');
        } else {
            $recipes.fadeOut();
            $(this).removeClass('close');
        }

         }); // end click

      //-------------------------------------Zoom Function--------------------------------------   

        $("#ex1").zoom();  // these lines make the image zoom when you mouse           over because of the zoom jquery file
        $("#ex2").zoom();
        $("#ex3").zoom();

       //-----------------------------------MouseOver Function----------------------------------              

      $('img').mouseover(function() {
        $("#popup").width(200).height(200);
        }); // End mouseover

      $("img").mouseout(function() {
        //$("#popup").width(200).height(200);
        $('#popup').remove();
        }); // End mouseout

      //------------------------------------------Reference-----------------------------------


      // Get all links to point outside of the site
      $('a[href^="http://"]').each(function() {
      var extLink = $(this).attr('href');
      $('#RecipeList').append('<li>' + extLink + '</li>');
      });
      //---------------------------------------END READY--------------------------------------   

         }); // end ready


      </script>

      </head>
      <body>
        <div class="wrapper">

          <header>Chapter 5 Lab</header>

        <div class="content">
          <div class="main">

      <!--------------------------------------BEGIN Mini Cookies--------------------------> 

          <div class="menu">

          <h2>Mini Cookies</h2>

            <div class="recipes">  

                   <p>
                    Soft Mini Chocolate Chip Cookies – No one can resist a soft and chewy cookie, especially when it’s in mini form!                  
                      <a href="http://diethood.com/soft-mini-chocolate-chip-cookies/#QecOGKvhKY1KvAYG.99">Find Recipe Here</a>

                   </p>

                <span class='zoom' id='ex1'>
                  <img src='images/miniCookies.PNG' width='100' height='100' alt='bar'/>
                </span>

            </div>
          </div>
      <!--------------------------------------END Mini Cookies-------------------------->     

      <!--------------------------------------BEGIN Cookie Pie-------------------------->

          <div class="menu">

           <h2>Cookie Pie</h2>

               <div class="recipes">  

                   <p>
                    There's only one thing better then cookies and that GIGANTIC cookie.  Especially one's the size of pies!

                      <a href="http://pinchofyum.com/deep-dish-chocolate-chip-cookie-with-caramel-sea-salt">Find Recipe Here</a>

                   </p>

                <span class='zoom' id='ex2'>
                  <img src='images/cookie.PNG' width='100' height='100' alt='bar'/>
                </span>

             </div>
          </div>

      <!------------------------------------END Cookie Pie--------------------------------------->

      <!-------------------------------- BEGIN Peanut Butter & Jelly Bars ----------------------->  

          <div class="menu">

             <h2>Peanut Butter & Jelly Bars</h2>

               <div class="recipes">  

                   <p>
                    You guys. I don’t even know what to say, other than if you make these bars you’ll want to eat every last crumb!

                      <a href="http://www.foodnetwork.com/recipes/ina-garten/peanut-butter-and-jelly-bars-recipe.html">Find Recipe Here</a>

                   </p>

                <span class='zoom' id='ex3'>
                  <img src='images/bar.png' width='100' height='100' alt='bar'/>
                </span>


              </div>

           </div>

      <!-------------------------- END Peanut Butter & Jelly Bars ------------------------------->     

              <div id="references">

              <h3>Links for recipes</h3>
              <ul id="RecipeList">
              </ul>

              </div>


          </div>
        </div>
        </div>

        <footer>
            <p>Made by </p>
        </footer>

        </div>

      </body>
      </html>