4月2号jquery入门作业 - 作业

首页 > 博客列表 > 4月2号jquery入门作业

博主信息

博文 24

粉丝 0

访问量 18777

专题推荐

更多>

实例

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8">

<title>jqery执行方式</title>

<style type="text/css">

    .horiz{

     float: left;

     list-style-type: none;

     margin: 10px;

    }

</style>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

   <script type="text/javascript"> 

     // window.onload=function(){

     //  $('#list>li').addClass('horiz')

     // }



     // window.onload:在页面元素全部加载完成后自动调用的事件！

      $(document).ready(function(){

      $('#list>li').addClass('horiz')

     })



      // $(document).ready()====window.onload()



        // 页面的渲染值

        

        

   

   </script>

</head>

<body>

  <h2>购物清单</h2>

  <ul id="list">

      <li>生活用品

      <ul>

        <li><a href="">天猫</a></li>

       <li>衣服</li>

       <li>裤子</li>

      <li>鞋子</li>

   </ul>

   </li>  



      <li>生鲜

      <ul>

        <li><a href="">盒马</a></li>

       <li>龙虾</li>

       <li>大闸蟹</li>

      <li>蔬菜</li>

   </ul>

   </li>



    <li>线下购物

      <ul>

        <li><a href="">大润发</a></li>

       <li>方便面</li>

       <li>玩具</li>

      <li>奶粉</li>

   </ul>

   </li>  

</body>

</html>

<!-- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 <script type="text/javascript"> 

   $('#list>li').addClass('horiz')

 

 </script> -->

运行实例 »

点击 "运行实例" 按钮查看在线实例

终结：对生成DOM结构有了一些模糊的理解，认识到了window.onload()必须加载完成才会触发，而 $(document).ready()只要生成DOM结构就会触发！不过对jquery认识还挺模糊！

批改状态：合格

老师批语：