实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.liStyle{
float: left;
list-style: none;
}
</style>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>列表1
<ul>
<li>列表1-子项</li>
<li>列表1-子项</li>
<li>列表1-子项</li>
</ul>
</li>
<li>列表2
<ul>
<li id="item_two_one">列表2-子项</li>
<li>列表2-子项</li>
<li>列表2-子项</li>
</ul>
</li>
<li>列表3
<ul>
<li>列表3-子项</li>
<li>列表3-子项</li>
<li>列表3-子项</li>
</ul>
</li>
</ul>
</body>
<!-- 1、 导入本地js -->
<!-- <script type="text/javascript" src="js/jquery-3.3.1.js"></script> -->
<!-- 2、导入网络js 从cdn导入 例如导入百度搜索百度静态资源 里边搜索jquery复制地址如下： -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('h2').click(function(){
alert("鼠标滑过")
})
/**
* 完整写法
*/
// $(document).ready(function(){
// $('#list > li').addClass('liStyle');
// $('#item_two_one').html("测试");
// })
/**
* 简写
*/
$(function(){
$('#list > li').addClass('liStyle');
$('#item_two_one').html("测试");
})
/**
*用jquery注意页面渲染顺序，如果将 script放到head位置那么会出现不执行的情况至于为什么很显然是页面尚未渲染成功，如果一定要在
*head位置写script那么怎么写类似于window.onload方法 也就是 $(document).ready(){} 方法 这么方法的效率更高，简写方法是 $(funcution(){})因为用的比较多所以提供了简写方案
*如上：正因为页面执行顺序的不一致所以一般情况下推荐将script写到html底部这样不必考虑界面加载的问题，但是还是推荐使用$functio*n)对代码块进行包裹
*至于为什么说 $().ready()执行效率优于window.onload
*因为html生成页面分为两步第一步生成dom结构。第二部加载外部资源
*如果使用$().ready执行只要生成dom树结构界面就能显示出来然后慢慢加载图片替换默认图片 window.onload则不是 这东西直接 *html创建第一步 第二部执行完了 才会显示。这样在图片等类似资源出现多的时候等待的时间就长了。
*/
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
