Correction status:qualified
Teacher's comments:
<!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认识还挺模糊!