day 55 jQuery-part2
这里有一个DOM对象转换成jQuery对象的方法,在jQuery对象后面加上索引值0即可得到效果如图所示:
$("#btn")[0] 这里我们这里的索引值为0 只是一种写法而已,只是长得像这样而已,有的时候我们会看到得出的结果只有一条但是依然会有所以值为0出现的写法,它是为了转换成DOM对象,并不是真的在求索引,转换成DOM对象之后就可以使用DOM的方法
关于互相转换的时候使用var定义变量名字的时候,需要注意一点是我们的DOM对象转换成jQuery对象的时候在定义变量名是需要在定义的变量名前面加上一个$符号用以区分DOM和jQuery
接着昨天的内容:
筛选器
1. :first
2. :last
3. :eq(index)
4. :gt(index)
5. :lt(index)
6. :even 偶数
7. :odd 基数
基数和偶数的应用场景举例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>change-color</title> </head>
<body> <table border="1">
<thead>
<tr>
<th>#</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>egon</td>
<td>街舞</td>
</tr>
<tr>
<td>2</td>
<td>alex</td>
<td>烫头</td>
</tr>
<tr>
<td>1</td>
<td>egon</td>
<td>街舞</td>
</tr>
<tr>
<td>2</td>
<td>alex</td>
<td>烫头</td>
</tr>
<tr>
<td>1</td>
<td>egon</td>
<td>街舞</td>
</tr>
<tr>
<td>2</td>
<td>alex</td>
<td>烫头</td>
</tr>
<tr>
<td>1</td>
<td>egon</td>
<td>街舞</td>
</tr>
<tr>
<td>2</td>
<td>alex</td>
<td>烫头</td>
</tr>
</tbody>
</table>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>
8.:not(元素选择器)// 这里是移除所有满足not条件的标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
9.:has(元素选择器)//从后代元素中查找,选取所有包含一个或者多个标签在其内的标签
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签=====>我们可以用另一种方式写出来$("div .c1")这样写更加简洁
注:一般使用的时候我们都是用.not()和.has()方法来直接替代,更加便捷
属性选择器:
attr是获取属性值,attr(name),attr(class),attr(id)这些都是获取属性值,获取标签里面的该属性的值,
[定义和用法
attr() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值，则返回第一个匹配元素的值。
当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。]
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
属性操作的示例:
$("[egon]") //这里是自定义属性
$("[type]") //非自定义属性
$("[type=submit]") //属性以及属性值以key-value形式查找 我们还可以写作------>$(":submit")
$("[type=password]") //同理写作--->$(":password")
$("[type=text]") //同上 ---->$(":text") 这样更简洁
同上,跟上面的方法一样
表单常用筛选：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例子：
$(":checkbox") // 找到所有的checkbox
表单对象属性:
:enabled
:disabled
:checked
:selected
举例:
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select> $(":selected") // 找到所有被选中的option
一般常用的就是找到被选中的标签:
$(":checked")
$("selected")
筛选器方法
1. 下一个（同级的标签/弟弟标签）
- next()
- nextAll()
- nextUntil(“终止条件”) (不包含终止条件)
举例:
$("#id").next() //这里是找到指定id值后面的标签
$("#id").nextAll() //指定id值后面的所有标签
$("#id").nextUntil("#i2") //指定id值后面的标签一直找到id值为i2就不找了,不包含i2的
2. 上一个（同级的标签/姐姐标签）
- prev()
- prevAll()
- prevUntil(“终止条件”) (不包含终止条件)
举例:
$("#id").prev() //同上,找到指定id值的前面一个标签
$("#id").prevAll() //找到指定id值的前面所有标签
$("#id").prevUntil("#i2") //找到指定id值的前的标签一直到id值为i2就不找了,不包含i2
3. 父标签系列
- parent()
-parents()
-parentsUntil()
$("#id").parent() //找到当前元素的父标签
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子标签------->$("#id").children(); //儿子们
兄弟标签-------->$("#id").siblings(); //兄弟们
简单粗暴的查找方法:
$("#id").find() //所有所有与指定表达式匹配的元素
还有一些其他的方法:
.first() //获取匹配的第一个元素
.last() //获取匹配的最后一个元素
.not() //从匹配的元素的集合中删除与指定表达式匹配的元素
.has() //保留包含特定后代的元素,去掉那些不含有指定后代的元素.
左侧菜单示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>jQuery-left_menu</title>
<style>
.left{
position:fixed;
left:0;
top:0;
width:20%;
background-color:darkgrey;
height:100%;
}
.right{
width:80%;
}
.title{
text-align:center;
padding:10px 15px;
border-bottom:1px solid red;
}
.content{
background-color:#336699; }
.content>div {
padding:10px;
color:white;
border-bottom:1px solid black;
}
.hide{
display:none;
}
</style>
</head>
<body> <div class="left">
<div class="item">
<div class="title">menu-one</div>
<div class="content hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
<div class="item">
<div class="title" >menu-tow</div>
<div class="content hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
<div class="item">
<div class="title" >menu-three</div>
<div class="content hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
</div>
<div class="right"></div> <script src="jquery-3.2.1.min.js"></script> <script>
var $titleEles = $(".title");
$titleEles.on("click", function(){
$(this).next().toggleClass("hide").parent().
siblings(".item").children(".content").
addClass("hide");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<haed>
<meta charset="UTF-8">
<title>menu-list</title>
<!--<link href="4菜单.css" type="text/css" rel="stylesheet">-->
<!--<script src="4菜单.js"></script>-->
<style>
.left{
position:fixed;
left:0;
top:0;
width:20%;
background-color:darkgrey;
height:100%;
}
.right{
width:80%;
}
.title{
text-align:center;
padding:10px 15px;
border-bottom:1px solid red;
}
.content{
background-color:#336699; }
.content>div {
padding:10px;
color:white;
border-bottom:1px solid black;
}
.hide{
display:none;
} </style>
<!---->
<!--$("ths")[0].onclick=function(){$(".content").addClass("hide");这句话要和下面的那句话联合起来写作一句话才能达到效果-->
<!--用一个函数来包裹起来-->
<!--var $titleEles=$(".title"); 这里声明一个变量-->
<!--$titleEles.on("click",function(){ //用得到的那个变量去绑定一个事件,-->
<!--那个事件再跟一个函数连接起来,在连接之前用到的动作是click点击的动作,还会有其他的动作,-->
<!--到时候会有不同的专属名词,所触发的动作需要用引号引起来,然后放到括号里面,-->
<!--$("ths").next(到这里这一步是找到所点击的this标签的同级的所有的下一个弟弟标签,-->
<!--因为我们的文档结构是"菜单栏"是可以点击,然后菜单栏里面所展示的的内容是另一个-->
<!--与之同级的div标签下面的内容,所以这里是需要用到同级的next方法,找到菜单栏所要-->
<!--展示的弟弟标签里面所包含的内容).toggleClass("hide"然后对那个标签进行操作,-->
<!--如果弟弟标签里面有hide就移除,否则就添加,就可以达到点击一次即展开,-->
<!--点击第二次即收起内容的效果).parent(继续接着寻找,所展示的内容的标签的父级标签,)-->
<!--.siblings(".item"然后在找父级标签的兄弟标签).children(".content"然后再接着去-->
<!--找父亲兄弟标签的孩子们标签,因为有两个孩子,所以需要做一下标记,找到有内容需要展示出来的那个标签,-->
<!--用类来作为限制).addClass("hide"然后找到之后就给他加上了hide这个属性,-->
<!--把里面的内容隐藏起来,因为我们只需要展示我们所选中的那个标签即可,-->
<!--没有被点击的则都隐藏起来);})–>-->
<!--// $(".content")[2].css("background-color","red")-->
<!--</script>--> </haed>
<body> <div class="left">
<div class="item">
<div class="title" >menu1</div>
<div class="content hide">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div class="item">
<div class="title" >menu2</div>
<div class="content hide">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div class="item">
<div class="title" >menu3</div>
<div class="content hide">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div> </div>
<div class="right"></div> <script src="jquery-3.2.1.min.js"></script>
<script>
var $titleEles=$(".title");
$titleEles.on("click",function(){
$(this).next().toggleClass("hide").parent().siblings(".item")
.children(".content").addClass("hide");
})
</script>
</body>
</html>
操作标签:
样式操作:
样式类=======>
addClass(); //添加指定的样式类名.注:都要写成驼峰体
removeClass(); //移除指定的CSS类名.
hasClass(); //判断样式类是否存在 这里是返回的bool值
toggleClass(); //切换CSS类名,如果有就移除,没有则添加.
CSS操作:(很简单,就跟之前的css操作无异)
css("border","1px dashed red") //DOM操作:tag.style.border="1px dashed red"
示例:
$("p").css("border","1px dashed red"); //将所有的p标签边框都设置为1像素的红色虚线
位置:
offset() //获取当前窗口的偏移 {top:xx,left:xx} ----向左侧移动了多少,向右侧移动了多少
position() // 获取匹配元素相对父元素的偏移 {top:xx,left:xxx} ----->根据已经定位的父级标签向上偏移多少,向左偏移多少
scrollTop() //获取匹配元素相对滚动条顶部的偏移
scrollLeft() //获取匹配元素相对滚动条左侧的偏移
.offset() 方法允许检索一个元素相对于文档(document)的当前位置.和.position()的差别在于.position()是相对于父级元素的位移
返回顶部示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置相关示例之返回顶部</title>
<style>
.c1 {
width: 100px;
height: 200px;
background-color: red;
} .c2 {
height: 50px;
width: 50px; position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
}
.hide {
display: none;
}
.c3 {
height: 100px;
}
</style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div> <button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#b1").on("click", function () {
$(".c1").offset({left: 200, top:200});
}); $(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
$("#b2").on("click", function () {
$(window).scrollTop(0);
})
</script>
</body>
</html> 返回顶部示例
在上面的例子里面我们用到了window,它是作为终极父级存在的,在DOM里面,或者在jQuery里面我们
向上查找父级,最终都是得到window这个结果..它就是所有我们可见的网页的最外层的那个父级标签.
尺寸:
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文本操作:
HTML代码:
html() //获取第一个匹配元素的html内容
html(val) //设置所有匹配元素的html内容
文本值:
text() //取得所有匹配元素的内容
text(val) //设置所有匹配元素的值
示例:
document.getElementById("d1").innerHTML
"欲笺心事,独语斜阑.角声寒,夜阑珊"
$("#d1").html()
"欲笺心事,独语斜阑.角声寒,夜阑珊"
document.getElementById("d1").innerText
"欲笺心事,独语斜阑.角声寒,夜阑珊"
$("#d1").text()
"欲笺心事,独语斜阑.角声寒,夜阑珊"
值:
val() //取得第一个匹配元素的当前值 在输入框里面这样写$("#i1").val() 这里就是得到id值为i1的那个标签的输入框里面的值, 如果这样写$("#i1").val("egon"),这样就是把id值为i1的标签的输入框的值改成了egon,
val(val) //所有匹配元素的值
val(val1,val2) //设置checkbox,select的值
jQuery val赋值示例
<labelfor="s1">城市</label>
<selectid="s1">
<optionvalue="beijing">北京市</option>
<optionvalue="shanghai">上海市</option>
<optionselectedvalue="guangzhou">广州市</option>
<optionvalue="shenzhen">深圳市</option>
</select>
<hr>
<labelfor="s2">爱好</label>
<selectid="s2"multiple="multiple">
<optionvalue="basketball"selected>篮球</option>
<optionvalue="football">足球</option>
<optionvalue="doublecolorball"selected>双色球</option>
</select>
<hr>
<p>爱好</p>
<label>
<inputtype="checkbox"name="hobby"value="basketball"/> 篮球
<inputtype="checkbox"name="hobby"value="football"/> 足球
<inputtype="checkbox"name="hobby"value="doublecolorball"/> 双色球
</label>
<p>性别</p>
<labelfor="radio1">女</label>
<inputid="radio1"type="radio"name="gender"value="female"/>
<labelfor="radio2">男</label>
<inputid="radio2"type="radio"name="gender"value="male"/>
<scriptsrc="jquery-3.2.1.min.js"></script>
<script>
// 单选下拉框
$("#s1").val("shanghai");
// 多选下拉框
$("#s2").val(["basketball","football"]);
// checkbox
$("input[name='hobby']").val(["basketball","football"]);
// 单选框
$("input[name='gender']").val(["female"]);
</script> val赋值示例
自定义登录示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文本操作之登录验证</title>
<style>
.error {
color: red;
}
</style>
</head>
<body> <form action="">
<div>
<label for="input-name">用户名</label>
<input type="text" id="input-name" name="name">
<span class="error"></span>
</div>
<div>
<label for="input-password">密码</label>
<input type="password" id="input-password" name="password">
<span class="error"></span>
</div>
<div>
<input type="button" id="btn" value="提交">
</div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#btn").click(function () {
var username = $("#input-name").val();
var password = $("#input-password").val(); if (username.length === 0) {
$("#input-name").siblings(".error").text("用户名不能为空");
}
if (password.length === 0) {
$("#input-password").siblings(".error").text("密码不能为空");
}
})
</script>
</body>
</html> 自定义登录校验示例
属性操作:
attr(attrName) //返回第一个匹配元素的属性值
attr(attrName,attrValue) //为所有匹配元素设置一个属性值
attr({k1:v1,k2:v2}) //为所有匹配元素设置多个属性值
removeAttr() //从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() ///获取属性
removeProp() //移除属性
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>
day 55 jQuery-part2的更多相关文章
- day 55 jQuery 之事件 绑定等
属性选择器: [attribute] [attribute=value]// 属性等于 列入 $("input[value='male']").prop('chekced') 注意 ...
- 第四篇 前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
- 前端 angular 和 bootstrap 的安装步骤
1.安装bower模块: npm install -g bower --registry=http://registry.npm.taobao.org 2.创建.bowerrc 文件存放 前端相关的模 ...
- Nginx+uwsgi+Django 的web应用环境部署-完整记录
Python作为当前最火爆最热门,也是最主要的Web开发语言之一,在其二十多年的历史中出现了数十种Web框架,比如Django.Tornado.Flask.Twisted.Bottle和Web.py等 ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
- ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）
一.背景: 我们这行做web开发的,很多时候都需要做数据统计报表,现在我所使用的是来自百度团队的ECharts.官方网址:http://echarts.baidu.com/ 我们知 ...
- Jquery学习笔记 --ajax删除用户，使用了js原生ajax
主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
- [转]jQuery操作radio、checkbox、select 集合.
1.radio:单选框 html代码 <input type="radio" name="radio" id="radio1" val ...
- 又一枚精彩的弹幕效果jQuery实现
精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下 简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random ...
随机推荐
- Java红黑树详谈
定义 红黑树的主要是想对2-3查找树进行编码,尤其是对2-3查找树中的3-nodes节点添加额外的信息.红黑树中将节点之间的链接分为两种不同类型,红色链接,他用来链接两个2-nodes节点来表示一个3 ...
- 树·二叉查找树ADT（二叉搜索树/排序树）
1.定义 对于每个节点X,它的左子树中所有的项的值小于X的值,右子树所有项的值大于X的值. 如图:任意一个节点,都满足定义,其左子树的所有值小于它,右子树的所有值大于它. 2.平均深度 在大O模型中, ...
- js---数组排序法（冒泡排序；快速排序）
1.冒泡排序 原理:将数组的相邻两个元素进行比较,大的就往后移,小的往前,依次比较并且进行递减迭代. var arr =[54,36,89,1,3,5,2]; function sortArr(arr ...
- 金9银10，分享几个重要的Android面试题
说一下java多态的理解,以及接继承,和接口的理解 于哥在这里只讲多态,其他自己上网体会 对于多态的定义不同类的对象对统一函数做出不同对的响应或者动作.作用主要是消除类之间的耦合性,灵活性比较强,利于 ...
- MVVM 简介
转:https://objccn.io/issue-13-1/ 所以,MVVM 到底是什么?与其专注于说明 MVVM 的来历,不如让我们看一个典型的 iOS 是如何构建的,并从那里了解 MVVM: 我 ...
- 使用Eclipse进行Makefile项目
最近在MCU on Eclipse网站上看到Erich Styger所写的一篇有关在Eclipse中使用Makefile创建项目的文章,文章讲解清晰明了非常不错,所以呢没人将其翻译过来供各位同仁参考. ...
- linux_OEL5.4_安装Oracle11g中文教程图解
一.安装ORACLE10g 软件(11.2.0.0) 参考pdf:链接:http://pan.baidu.com/s/1pLHU94J 密码:keo8 (一)安装前的包支持 1. 虚拟机yum 环境搭 ...
- Confluence 6 新 Confluence 安装配置一个数据源连接
如果在你的 Tomcat 中配置了数据源,并且Confluence 设置指南在安装的时候检测到这个配置的时候,配置数据源的选项将会提供给你进行配置.入股你希望使用数据源,请参考下面的配置. 1. 停止 ...
- 从认识面向对象到构造函数的标准写法(构造函数的继承、多态、ECMA6中新代替语法class) - 下
笔记一个包含:认识面向对象.构造函数的封装.继承.多态.ECMA6中新代替语法class 下:包括构造函数的继承.多态.ECMA6中新代替语法class 构造函数的继承 从父一级延续下来的属性和功能( ...
- extjs5(项目中文件的加载过程）
现在来看看js类加载过程.如下图所示: 1､首先:浏览器中输入 localhost:1841 ,调用 index.html; <!DOCTYPE HTML> <html> &l ...