前端系列
一、HTML5
二、CSS
三、JavaScript
四、jQuery
五、BootStrap
六、Element
七、Ajax
八、JSON
九、VUE3
第一章、jQuery的基础
一、jQuery的概述
1、jQuery的概念
jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less , Do More”，即倡导写更少的代码，做更多的事情。
j就是JavaScript ;Query查询;意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。
2、jQuery 的优点
轻量级。核心文件才几十kb，不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件，例妆︰树形菜单、日期控件、轮播图等
二、jQuery 基本使用
1、jQuery 下载
- 下载地址：https://jquery.com/（将代码复制）
- 在vs中新建
jquery.min.js文件 - 在html 文件进行引入即可
2、基本使用
$('div').hide();
1.等着页面DOM加载完毕再去执行js代码
$(document).ready(function( ) {
$('div').hide();
})
2.等着页面DOM加载完毕再去执行js代码（推荐）
$(function(){
$('div').show();
})
3、jQuery的顶级对象$
1. 是 j Q u e r y 的别称，在代码中可以使用 j Q u e r y 代替 是jQuery的别称，在代码中可以使用jQuery代替 是jQuery的别称，在代码中可以使用jQuery代替，但一般为了方便，通常都直接使用$。
2.$同时也是jQuery的顶级对象，相当于原生 JavaScript 中的 window。
3.把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
$(function() {
alert(11)
});
jQuery(function() {
Query('div').hide();
});
4、DOM对象和jQuery对象
1.DOM对象：用原生js获取过来的对象就是DOM对象
2.jQuery对象：用jquery方式获取过来的对象是jQuery对象。本质:通过$把DOM元素进行了包装(伪数组形式存储)。
3.jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript的属性和方法
//1. DOM对象: 用原生js获取过来的对象就是DOM对象
var myDiv = document.querySelector('div'); // myDiv 是DOM对象
//2. jQuery对象: 用jquery方式获取过来的对象是jQuery对象。（本质:通过$把DOM元素进行了包装）
$('div'); // $('div')是一个jQuery 对象
//3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
myDiv.hide(); //myDiv是一个dom对象不能使用 jquery里面的hide方法
$('div').style.display = 'none'; //这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
5、jQuery对象和DOM对象转化
1.因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装。要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
1）DOM 对象转换为 jQuery 对象
语法：$(DOM对象)
$('div')
2）jQuery 对象转换为 DOM 对象
语法：
// 第一种方法
$('div')[index] //index是索引号
// 第二种方法
$('div').get(index) //index是索引号
$('video')[0].play() //video是DOM对象
$('video').get(0).play()
第二章、jQuery常用API
一、jQuery选择器
1、jQuery基础选择器（和CSS选择器一样）
语法：$("选择器")
选择器类型
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“#id”) | 获取指定ID的元素 |
| 全选选择器 | $(‘*’) | 匹配所有元素 |
| 类选择器 | $(“.class”) | 获取同一类class的元素 |
| 标签选择器 | $(“.div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”) | 选取多个元素 |
| 交集选择器 | $(“li.current”) | 交集元素 |
2、jQuery层级选择器
语法：$("ul li");
选择器类型
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $("ul>li") | 使用>号，获取亲儿子层级的选择器；注意，并不会获取孙子层级的元素 |
| 后代选择器 | $("ul li") | 使用空格，代表后代选择器，获取 ul 下的所有 li 元素，包括孙子等 |
3、jQuery 设置样式
$('div').css('属性','值')
4、jQuery隐式迭代
- 遍历内部DOM元素(伪数组形式存储)的过程就叫做 隐式迭代
- 简单理解: 给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用
<body>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
// 1. 获取四个div元素
console.log($("div"));
// 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
$("div").css("background", "pink");
// 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
$("ul li").css("color", "red");
</script>
</body>
5、jQuery筛选选择器
// 选取 ul 里面的 第一个 li
$("ul li: first").css("color","red");
类型
| 语法 | 用法 | 描述 |
|---|---|---|
| : first | $('li:first') | 获取第一个li元素 |
| : last | $('li:last') | 获取最后一个li元素 |
| : eq(index) | $("li:eq(2)") | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 |
| : odd | $("li:odd") | 获取到的li元素中，选择索引号为奇数的元素 |
| : even | $("li:even") | 获取到的li元素中，选择索引号为偶数的元素 |
6、jQuery筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $("li").parent(); | 查找父级，最近一级的父元素 |
| children(selector) | $("ul").children("li") | 相当于$("ul>li"),最近一级(亲儿子) |
| find(selector) | $("ul").find("li") | 相当于$("ul li") 后代选择器 |
| siblings(selector) | $(".first").siblings("li") | 查找兄弟节点，不包括自己本身 |
| nextAll([expr]) | $(".first").nextAll() | 查找当前元素之后所有的同辈元素 |
| prevtAll([expr]) | $(".last").prevAll() | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $('div').hasClass("protected") | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
| eq(index) | $("li").eq(2); | 相当于$("li:eq(2),index")index从0开始 |
7、 jQuery排他思想
- 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", "");
});
})
</script>
</body>
8、 jQuerty链式编程
$(this).css("color","red").siblings().css("color","");
实例
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 让当前元素颜色变为红色(点击哪个哪个就变为红色)
// $(this).css("color", "red");
// 3. 让其余的兄弟元素不变色
// $(this).siblings().css("color", "");
// 链式编程完成上述功能
$(this).css("color", "red").siblings().css("color", "");
});
})
</script>
</body>
二、jQuery样式操作
1、jQuery修改样式css方法
1.参数只写属性名,则返回属性值
$(this).css("color");
2.参数是属性名,属性值,逗号分隔,是设定一组样式。属性需要加引号,值是数字可不加单位和引号
$(this).css("color",300);
3.参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号
$(this).css({
"color":"red",
"width": 400,
"height": 400,
// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
backgroundColor: "red"
})
2、jQuery设置类样式方法
作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
- 原生 JS 中的 className 会覆盖元素原先里面的类名
- jQuery里面类操作只是对指定类进行操作，不影响原先的类名
// 1.添加类,相当于追加类名 不影响以前的类名
$("div").addCless("current");
// 2.移除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");
三、jQuery动画效果
1、jQuery显示与隐藏效果
// 1.显示效果
//语法：show([speed,[easing],[fn]])
$("div").show();
参数：（参数都可以省略， 无动画直接显示。）
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
// 2.隐藏效果
//语法：hide([speed,[easing],[fn]])
$("div").hide();
参数：（参数都可以省略， 无动画直接显示。）
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
// 3.切换效果
//语法：toggle([speed,[easing],[fn]])
$("div").toggle();
参数：（参数都可以省略， 无动画直接显示。）
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2、jQuery滑动效果与事件切换
滑动效果
// 1.下滑动
//语法：slideDown([speed,[easing],[fn]])
$("div").slideDown();
// 2.上滑动
//语法：slideUp([speed,[easing],[fn]])
$("div").slideUp();
// 3.滑动切换
//语法：slideToggle([speed,[easing],[fn]])
$("div").slideToggle();
事件切换
//语法：hover([over,]out)
over: 鼠标移到元素上要触发的函数(相当于mouseenter)
out: 鼠标移出元素要触发的函数(相当于mouseleave)
如果只写一个函数，则鼠标经过和离开都会触发它
3、jQuery动画队列及其停止排队方法
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
// 1.停止排队，stop()方法用于停止动画或者效果
//语法：stop()
$(".nav>li").hover(function(){
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
})
4、jQuery淡入淡出以及突出效果
// 1.淡入
//语法：fadeIn([speed,[easing],[fn]])
$("div").fadeIn();
// 2.淡出
//语法：fadeOut([speed,[easing],[fn]])
$("div").fadeOut;
// 3.淡入淡出切换
//语法：fadeToggle([speed,[easing],[fn]])
$("div").fadToggle;
修改透明度
//语法：fadeTo(speed,opacity,[easing],[fn])
$("div").fadeTo(1000,0.5)
opacity ：透明度必须写，取值 0~1 之间
speed：动画速度必须写，三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
5、jQuery自定义动画animate方法
//语法：animate(params,[speed],[easing],[fn])
参数：
params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。
speed: 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing: 要使用的擦除效果的名称(需要插件支持). 默认jQuery提供 “linear” 和 “swing”.
fn: 在动画完成时执行的函数，每个元素执行一次。
四、jQuery属性操作
1、获取设置元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。
// 1.获取元素固有属性值
//语法：prop("属性")
$("a").prop("href");
// 2.设置元素固有属性值
//语法：prop("属性","属性值")
$("a").prop("title","我们都挺好~");
2、获取设置元素自定义属性值
用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
// 1.获取元素自定义属性值
// 语法：attr("属性")
$("div").attr("index");
// 2.设置元素自定义属性值
//语法：attr("属性","属性值")
$("div").attr("index",4);
3、数据缓存data()
data() 方法可以在指定的元素上存取数据,并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。
// 1.附加数据语法
// 语法：data("name","value") 向被选元素附加数据
$("span").data("uname","andy");
// 2.获取数据语法
// 语法：date("name") 向被选元素获取数据
$("span").data("uname");
// 这个方法获取data-index h5自定义属性，不用写 data- 返回的是数字型(2)
$("div").data("index");
五、jQuery文本属性值
主要针对元素的内容还有表单的值操作
1、普通元素内容 html()
相当于原生 innerHTML
// 1.获取元素的内容（会连标签一起获取）
// 语法：html()
$("div").html();
// 2.设置元素的内容
// 语法：html("内容")
$("div").html("123");
2、普通元素文本内容 text()
相当于原生 innerText
// 1.获取元素的文本内容（不带标签）
//语法：text()
$("div").text();
// 2.设置元素的文本内容
//语法：text("文本内容")
$("div").text("123");
3、获取设置表单值 val()
// 1.获取表单的的值
//语法：val()
$("input").val();
// 2.设置表单的值
//语法：val("内容")
$("input").val("请输入内容~~~");
六、返回指定的祖先元素
返回父级元素
$(".four").parent().parent().parent();
返回最源头的祖先元素
$(".four").parents();
返回指定类的祖先元素
$(".four").parents(".one");
七、jQuery元素操作
主要是遍历，创建，添加，删除元素操作
1、遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用到遍历
语法一
$("div").each(function(index, domEle){ xxx;})
- each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
- 里面的回调函数有2个参数: index是每个元素的索引号,demEle是每个DOM元素，不是jQuery对象
- 所以想要使用jQuery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法二
$.each(Object,function(index,element){xxx;})
- $.each() 方法可用于遍历任何对象，主要用于数据处理,比如数组,对象
- 里面的函数有2个参数: index 是每个元素的索引号,element遍历内容
2、创建元素
// 动态创建一个li标签
//语法：$("<li></li>");
var li = $("<li>我是后来创建的li</li>");
3、添加元素
// 1.内部添加
把内容放入匹配元素内部最后面：element.append("内容")
把内容放入匹配元素内部最前面：element.prepend("内容")
element.append("内容") // 把内容放入匹配元素内部最后面，类似原生appendChild
element.prepend("内容") // 把内容放入匹配元素内部最前面
$("ul").append(li);
$("ul").prepend(li);
// 2.外部添加
外部添加把内容放到目标元素后面：element.after("内容")
外部添加把内容放到目标元素前面：element.before("内容")
element.after("内容");
element.before("内容");// 把内容放入目标元素前面
$(".test").after(div); // 把内容放入目标元素后面
内部添加元素，生成之后，它们是父子关系
外部添加元素，生成之后，它们是兄弟关系
4、删除元素
// 1.删除匹配的元素(本身)
//语法：element.remove()
$("ul").remove();
// 2.删除匹配的元素集合中所有的子节点
//语法：element.empty()
$("ul").empty();
// 3.清空匹配的元素内容
//语法：element.html("")
element.html("")
remove 删除元素本身
empt() 和 html("") 作用等价，都可以删除元素的内容，只不过 html 还可以设置内容。
八、jQuery尺寸和位置操作
1、jQuery的尺寸操作
| 语法 | 用法 |
|---|---|
| width() / height() | 取得匹配元素宽度和高度值，只算 width / height |
| innerWidth() / innerHeight() | 取得匹配元素宽度和高度值，包含padding |
| outerWidth() / outerHeight() | 取得匹配元素宽度和高度值，包含padding、border |
| outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值，包含padding、border、margin |
- 以上参数为空，则是获取相应值，返回的是数字型。
- 如果参数为数字，则是修改相应值。
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
2、jQuery位置
位置主要有三个： offset()、position()、scrollTop()/scrollLeft()
1.设置或获取元素偏移 offset()
// offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
$(".son").offset();
$(".son").offset().top;
$(".son").offset({
top: 200,
left: 200
});
该方法有两个属性 left、top.
offset().top用于获取距离文档顶部的距离，
offset().left 用于获取距离文档左侧的距离
2.position()获取元素偏移
// position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
// 这个方法只能获取偏移，不能设置偏移
$(".son").position();
$(".son").position({
top: 200,
left: 200
});
该方法有2个属性 left、top。
position().top 用于获取距离定位父级顶部的距离，
position().left 用于获取距离定位父级左侧的距离。
3.scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
scrollTop()方法设置或返回被选元素被卷去的头部。
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
// 页面滚动事件
$(window).scroll(function(){
$(document).scrollTop();
})
第三章、jQuery事件
一、jQuery事件注册
1、单个事件注册
//语法：element.事件(function(){})
$("div").click(function(){事件处理程序})
二、事件处理
1、事件处理 on()绑定事件
on()：方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：element.on(events,[selector],fn)
参数：
events ：一个或多个空格分隔的事件类型，如 “click” 或 “keydown”
selector：元素的子元素选择器
fn：回调函数，即绑定在元素身上的侦听函数
$("div").on({
mouseenter: function(){
$(this).css("background","skyblue");
},
click: function(){
$(this).css("background","purple");
}
})
on() 方法优势一：可以绑定多个事件，多个处理事件处理程序。
$("div").on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
})
on()方法优势二：
可以事件委派操作.事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$("ul").on("click","li",function(){
alert("hello world!");
});
//事件是绑定在ul身上，只有一个ul 添加了点击事件，但是触发对象是li，会发生事件冒泡，冒泡到父亲身上，父亲就会执行这个函数
on()方法优势三：
动态创建的元素，click()没有办法绑定事件，on() 可以给未来动态生成的元素绑定事件
// on可以给未来动态创建的元素绑定事件
$("ol").on("click","li",function(){
alert(11);
})
var li = $("<li>我是后来创建的</li>")
$("ol").append(li);
2、事件处理 off()解绑事件
off() 方法，可以移除通过on()方法添加的事件处理程序。
$("div").off(); // 这个是接除了div身上的所有事件
$("div").off("click"); //这个是解除了div身上的点击事件
$("ul").off("click","li"); //这个是解绑事件委
one()方法，如果有些事件只想执行一次就不再执行，可以使用one() 方法
$("p").one("click",function(){
alert(11);
})
3、自动触发事件trigger()
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
// 1.元素.事件()
$("div").click();
// 2.元素.trigger("事件")
$("div").trigger("click");
// 3.元素.triggerHandler("事件") 不会触发元素的默认行为
$("div").triggerHandler("click");
triggerHandler 模式不会触发元素的默认行为，这是和前面两种的区别。
<script>
$(function() {
$("div").on("click", function() {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus", function() {
$(this).val("你好吗");
});
// $("input").triggerHandler("focus");
});
</script>
三、jQuery事件对象
事件被触发，就会有事件对象的产生
element.on(events,[selector],function(event){})
- 阻止默认行为:
event.preventDefault()或者return false - 阻止冒泡 :
event.stopPropagation()
第四章、jQuery其他方法
一、jQuery对象拷贝
如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用$.extend()方法
$.extend([deep],target,object1,[objectN])
deep:如果设为true为深拷贝，默认为false 浅拷贝
target: 要拷贝的目标对象
object1:待拷贝到第一个对象的对象
objectN:待拷贝的第N个对象的对象
- 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
- 深拷贝，前面加true，完全克隆(拷贝的对象，而不是地址),修改目标对象不会影响被拷贝对象
- 深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起
$(function(){
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target,obj);
$.extend(targetObj,obj); // 会覆盖targetObj里面原来的数据
// 把 obj 拷贝给 targetObj
})
二、jQuery多库共存
问题：
- jQuery使用
$作为标示符，随着jQuery的流行,其他 js 库也会用这$作为标识符， 这样一起使用会引起冲突 - 需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
解决方案：
- 把里面的 $ 符号统一改为 jQuery。 比如 jQuery(’‘div’’)
- jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();
$(function() {
function $(ele) {
return document.querySelector(ele);
}
console.log($("div"));
// 1. 如果$ 符号冲突 我们就使用 jQuery
jQuery.each();
// 2. 让jquery 释放对$ 控制权 让用自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
suibian.each();
})
第五章、jQuery插件
下载插件：http://www.htmleaf.com/
一、jQuery插件的测试
1、jQuery插件使用步骤
- 引入相关文件(jQuery文件和插件文件)
- 复制相关 html，css，js(调用插件)
2、瀑布流插件测试
1）载瀑布流插件，
- 打开 index.html，右击检查网页源代码
- 我们发现此插件引入了 css ，js。我们将解压好的文件夹中的css、js拷贝到我们自己所需的文件夹中
- 我们接着看我们刚才打开的 index.html ，此插件引入了 css ，js，我们将其引用部分复制粘贴进我们自己的网页中
- 接下来我们只需修改 HTML 部分即可。我们在下载插件的页面 下滑查看插件的 HTML结构，在打开的 index.html 中复制展示的段落代码，粘贴进我们自己的 HTML 网页中，并进行图片的更换
1427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
