jQuery的基本使用
一、jQuery简介
jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
在HTML中使用jQuery时，只需像导入其他JavaScript文件一样，导入一下它就行。
# 在HTML中导入导入jQuery
<script src="jquery-1.12.4.js"></script>
注：本篇文章只介绍jQuery的常用方法，若需详细了解，请参阅jQuery中文文档。
二、使用jQuery查找HTML元素
同使用JavaScript操作HTML文档一样，使用jQuery操作HTML文档也需找到某个具体元素，然后再对其操作。但是使用jQuery查找HTML中的某个元素，便比使用DOM简单了许多，如果你之前熟悉CSS，那么使用jQuery对你而言，将更加容易。
jQuery的选择机制构建于CSS的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
# 基本选择器
$('#id'); ---- 使用id选择HTML元素
$('.c1'); ---- 使用class选择HTML元素
$('div'); ---- 使用标签名选择HTML元素
$('#id,span,.c1'); ---- 使用组合选择器，选择多个HTML元素
# 层级选择器
$("form input"); ---- 找到form下所有的input标签
$("form > input"); ---- 找到form下的所有的子级input标签
$('label + input'); --- 匹配跟在所有 label 后面的 input 元素（同级标签）
$("form ~ input"); ---- 所有与form同级的input标签
注： 使用上面的选择器，常常会选中多个HTML元素，所以我们需要筛选器帮我们过滤出我们需要做操作的某一个具体元素。
# 基本筛选器
:first
$('div:first'); --- 获取匹配的第一个div标签
:last
$('li:last'); --- 获取匹配的最后一个li标签
:eq(index)
$('input:eq(3)'); --- 获取匹配的第3个input标签（从0开始）
# 根据属性筛选 <input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/> $('input[type="text"]'); ---- 匹配含有type="text"属性的input标签
$(':text'); ---- 匹配所有的单行文本框
# jQuery常用筛选器
$('span').next(); --- 当前标签的下一个标签（同级）
$('span').nextAll(); --- 查找当前元素之后所有的同辈元素
$('span').nextUntil(); --- 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止 $('div').prev(); --- 当前标签的上一个标签（同级）
$('div').prevAll(); --- 查找当前元素之前所有的同辈元素
$('div').prevUntil(); --- 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止 $('a').parent(); --- 当前标签的父标签（一个）
$('a').parents(); --- 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
$('a').parentUnstil(); --- 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止 $('p').children(); --- 当前标签的子标签（多个）
$('p').siblings(); --- 当前标签的兄弟标签（多个）
$('p').find('#i1'); --- 在当前标签的子子孙孙标签中id=i1的标签 # 可以使用下面的.eq(), .first(), .last()代替上面的三个基本筛选器
$("p:eq(1)"); --- 第一个p元素
$('p').eq(0); --- 第0个p元素
$('p').first(); --- 第一个p元素
$('p').last(); --- 最后一个p元素
$('div').hasClass("c1"); --- 检查当前元素是否含有类c1 有true， 无false
三、使用jQuery操作HTML元素
使用jQuery方法查找的元素，返回的结果都是jQuery对象，对于jQuery对象的操作，jQuery有自己的方法。当然，我们可以将jQuery对象转换成为DOM对象来使用DOM中的方法，同样也可以将DOM对象转换为jQuery对象来使用jQuery中的方法。
#DOM对象==>jQuery对象
tag = document.getElementById('i1');
$(tag);
# jQuery对象==>DOM对象 # jQuery匹配到一个元素
object = $('#i1');
mytag = object[0]; # jQuery匹配到多个元素
object = $('div');
tag_0 = object[0];
tag_1 = object[1];
tag_2 = object[2];
关于DOM的使用，请参阅：http://www.cnblogs.com/God-Li/p/8535677.html
HTML元素文本内容的操作：
$(this).text(); --- 获取当前标签的文本内容，将标签过滤掉
$(this).text("hello"); --- 设置文本内容，如果写"<a>123</a>"对标签不解析，会将a标签当做普通文本 $(this).html(); --- 获取当前标签的HTML
$(this).html('<a>1</a>'); ---- 内容含有标签时，应用此方法设置 $(this).val(); ---- 获取标签的val值，主要用于input类标签
$(this).val("string"); ----- 设置标签的val值
HTML元素属性操作：
$(this).attr('n') --- 获取属性n的值
$(this).attr('n', 'v') --- 自定义属性n，为其设置值v
$(this).removeAttr('n') --- 将属性n移除
<input type="checkbox" id="i1" />
# 专门用于checkbox, radio
$(this).prop('checked')
$(this).prop('checked', true)
HTML元素样式操作：
# 整体样式操作
$('#i1').addClass('c1') --- 为id=i1的标签加上c1中的样式
$('#i1').removeClass('c2') --- 为id=i1的标签移除c2中的样式
$('#i1').toggleClass('c3') --- 检查id为i1的标签是否具有样式c3，没有为其添加，有将其移除 # CSS属性具体操作
$('#i2').css('color', 'white');
$('#i2').css(''opacity'', 0.6');
$(tag).css('fontSize', '30px');
HTML文档处理：
append
$("div").append("<span>Hello</span>"); --- 向所有div标签追加一个尾部的子标签<span>Hello</span>
prepend
$("p").prepend("<a>Hello</a>"); --- 向所有p标签插入一个头部的子标签<a>Hello</a>
after
$("div").after("<a>Hello</a>"); ----- 在所有div标签后面添加一个<a>Hello</a>(同级)
befor
$("p").after("<a>Hello</a>"); ----- 在所有p标签前面添加一个<a>Hello</a>(同级) remove
$("p").remove(); --- 移除整个文档中的p标签
empty
$("p").empty(); --- 把所有p便签的子元素（包括文本节点）删除
clone
$("#i1").clone(); ---- 复制id=i1的标签
使用jQuery对标签绑定事件
# 第一种绑定方式
$('c1').click(function() {
console.log('123')
}) # 第二种绑定方式与解绑
$('.c1').bind('click', function(){ })
$('.c1').unbind('click', function(){ }) # 第三种方式
$('.c1').delegate('click', function(){ })
$('.c1').undelegate('click', function(){ }) # 第四种方式
$('.c1').on('click', function(){ })
$('.c1').off('click', function(){ }) #组织事件发生,在函数末尾加上
- return false;
jQuery的插件扩展：使用jQuery的插件扩展，可以为jQuery提供一些原本没有的方法，这是jQuery的核心机制。
# 第一种扩展方式
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
}); #调用：
$.min(1, 2);
$.max(3, 4);
# 第二种扩展方式
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
}); #调用：
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
jQuery部分代码的自动执行
# 等待页面加载完成下面的对':sbumit'事件的绑定才能完成
$(':submit').click(function () {
alert("hello");
}); # 页面框架加载完毕下面的代码就立即执行
$(function () {
$(':submit').click(function () {
alert("hello");
});
}); #第二种方式主要用于一些对标签事件的绑定，有时当页面存在大量的图片，一时很难加载完毕，如果使用的是第一种方式，图片没加载完成前，绑定事件的这些标签不可用
HTML元素位置的操作
$("div.demo").scrollTop(); ---- 获取匹配元素相对滚动条顶部的偏移
$("div.demo").scrollTop(300); ----- ---- 设置匹配元素相对滚动条顶部的偏移
$(window).scrollTop() ----- 获取当前位置到顶部的位置
$(window).scrollTop(0) ------ 设置当前位置到顶部的位置，传0即回到顶部
$(this).scrolleft([val]) ----- 左部，应用同上
$(this).offset() ---- 获取匹配元素在当前视口的相对偏移
$(this).offset({ top: 10, left: 30 }); ---- 单位为px
$(this).position() ---- 获取匹配元素相对父元素的偏移。
$("p").height(); ---- 获取第一段的高
$("p").height(20); ---- 把所有段落的高设为 20:
$("p").width(); ---- 获取第一段的宽
$("p").width(20); ---- 把所有段落的宽度设为 20:
jQuery对多个元素的循环：当我们要使用jQuery操作多个元素时，比如实现复选框的全选功能，就需要对多个同一类型的元素进行操作。
$('#t1 :checkbox').each(function (k) {
//k是当前元素的索引
// this代指当前循环的元素，是DOM对象
alert(123);
};
四、使用jQuery完成一些常用示例
例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();"/>
<input type="button" value="反选" onclick="reverseAll()"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<table id="t1" border="1">
<thead>
<tr>
<th>选项</th>
<th>host</th>
<th>port</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>22</td>
</tr>
</tbody> <script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#t1 :checkbox').prop('checked', true);
} function cancelAll() {
$('#t1 :checkbox').prop('checked', false);
} function reverseAll() {
$('#t1 :checkbox').each(function () {
// this代指当前循环的元素，是DOM对象
// 第一种方式
// if (this.checked) {
// this.checked = false;
// } else {
// this.checked = true;
// } // 第二种方式
// if ($(this).prop('checked')) {
// $(this).prop('checked', false);
// } else {
// $(this).prop('checked', true);
// } // 三元运算: var v = 条件 ? v1 : v2
// var v = $(this).prop('checked') ? false : true;
// $(this).prop('checked' , v); $(this).prop('checked', $(this).prop('checked') ? false : true);
}) }
</script>
</table>
</body>
</html>
复选框全选反选取消功能实现
例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item {
margin-bottom: 15px;
} .menu {
background-color: blueviolet;
height: 30px;
line-height: 30px;
font-weight: bolder;
} .hide {
display: none;
} .content {
background-color: lightseagreen;
}
</style>
</head>
<body>
<div style="height: 150px;"></div>
<div style="width: 350px; border: 1px solid red;">
<div class="item">
<div id="i1" class="menu">菜单1</div>
<div class="content">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class='item'>
<div id="i2" class="menu">菜单2</div>
<div class="content hide">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class='item'>
<div id="i3" class="menu">菜单3</div>
<div class="content hide">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div>
<div class='item'>
<div id="i4" class="menu">菜单4</div>
<div class="content hide">
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(".menu").click(function () {
// $(this).next().removeClass("hide");
// $(this).parent().siblings().find(".content").addClass("hide");
$(this).next().removeClass("hide").parent().siblings().find(".content").addClass("hide");
})
</script>
</body>
</html>
后台管理左侧菜单栏实现
例三：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.active{
background-color: brown;
}
.content{
min-height: 150px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body>
<div style="height: 150px; width: 500px; margin: 0 auto">
<div class="menu">
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div> <div class="content">
<div b="1">内容一</div>
<div b="2" class="hide">内容二</div>
<div b="3" class="hide">内容三</div>
</div> <script src="jquery-1.12.4.js"></script>
<script>
$(".menu .menu-item").click(function () {
$(this).addClass("active").siblings().removeClass("active");
var target = $(this).attr("a");
$(".content").children("[b='" + target + "']").removeClass("hide").siblings().addClass("hide");
})
</script>
</div>
</body>
</html>
标签菜单栏的实现
例四：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.modle{
position: fixed;
background: #dddddd;
height: 100px;
width: 400px;
text-align: center;
margin: 15% 50%;
left: -200px;
z-index: 6;
}
.shadow{
position: fixed;
background: black;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
z-index: 5;
} .hidden{
display: none;
}
</style>
</head>
<body>
<p><input type="button" value="添加" onclick="addElement();"></p> <div class="modle hidden">
<label for="host">host:</label>
<input id="host" type="text" name="host"/>
<label for="host">host:</label>
<input id="port" type="type" name="port"/>
<p>
<input type="button" value="confirm">
<input type="button" value="cancel" onclick="cancelModel();">
</p>
</div> <div class="shadow hidden"></div> <table id="t1" border="1" style="margin-top: 10px;">
<thead>
<tr>
<th>host</th>
<th>port</th>
<th>operate</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.11</td>
<td>80</td>
<td><a class="edit">编辑</a> | <a class="delet">删除</a></td>
</tr>
<tr>
<td>1.1.1.12</td>
<td>80</td>
<td><a class="edit">编辑</a> | <a class="delet">删除</a></td>
</tr>
<tr>
<td>1.1.1.13</td>
<td>80</td>
<td><a class="edit">编辑</a> | <a class="delet">删除</a></td>
</tr>
<tr>
<td>1.1.1.14</td>
<td>80</td>
<td><a class="edit">编辑</a> | <a class="delet">删除</a></td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function addElement() {
$("div[class='modle hidden'], div[class='shadow hidden']").removeClass('hidden');
}
function cancelModel() {
$("div[class='modle'] input[name='host'],input[name='port']").val("");
$("div[class='modle'], div[class='shadow']").addClass('hidden');
} $('#t1 tbody').delegate('a[class="edit"]', 'click', function () {
addElement();
var tags = $(this).parent().prevAll();
var port = $(tags[0]).text();
var host = $(tags[1]).text();
$('div[class="modle"] input[name="host"]').val(host);
$('div[class="modle"] input[name="port"]').val(port);
}); $('.modle input[value=confirm]').click(function () { var host = $('.modle input[name="host"]').val();
var port = $('.modle input[name="port"]').val();
var temp_tr = $('#t1 tbody tr').first().clone();
temp_tr.children().first().text(host).next().text(port);
$('#t1 tbody').append(temp_tr[0]);
$("div[class='modle'], div[class='shadow']").addClass('hidden');
}); $('#t1 tbody').delegate('a[class="delet"]', 'click', function () {
$(this).parent().parent().remove();
});
</script>
</body>
</html>
实现对页面表格的增改删
例五：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #eeeeee;
}
.container .item{
position: relative;
width: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div> <script src="jquery-1.12.4.js"></script>
<script>
$(".item").click(function () {
addFavor(this);
}); function addFavor(self) {
var fontSize = 20;
var top = 0;
var right = 0;
var opacity = 1; var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color', 'green');
$(tag).css('position', 'absolute');
$(tag).css('fontSize', fontSize + "px");
$(tag).css('top', top + "px");
$(tag).css('right', right + "px");
$(tag).css('opacity', opacity);
$(self).append(tag); obj = setInterval(function () {
fontSize = fontSize + 10;
top = top - 10;
right = right - 10;
opacity = opacity - 0.1; $(tag).css('fontSize', fontSize + "px");
$(tag).css('top', top + "px");
$(tag).css('right', right + "px");
$(tag).css('opacity', opacity);
if (opacity < 0) {
clearInterval(obj);
$(tag).remove();
}
}, 40);
}
</script>
</body>
</html>
新闻类网站点赞效果的实现
例六：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.error{
color: red;
}
</style>
</head>
<body>
<div></div>
<form id="f1" action="s5.html" method="post">
<div><input name='n1' tex="用户名" type="text" placeholder="用户名"/></div>
<div><input name='n2' tex="密码" type="password" placeholder="密码"/></div>
<div><input name='n3' tex="邮箱" type="email" placeholder="邮箱"/></div>
<div><input name='n1' tex="端口" type="number" placeholder="端口"/></div>
<div><input name='n1' tex="IP" type="text" placeholder="IP"/></div> <input type="submit" />
</form> <script src="jquery-1.12.4.js"></script>
<script> // 页面框架加载完毕执行
$(function () {
// 页面完全加载完毕自动执行 $(':submit').click(function () {
$('.error').remove();
var falg = true;
$('#f1').find('input[type="text"],input[type="password"],input[type="email"],input[type="number"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
if (v.length <=0) {
flag = false;
var tag = document.createElement('span');
tag.className = 'error';
tag.innerHTML = n + '必填';
$(this).after(tag);
}
});
return false;
}); }); </script>
</body>
</html>
登录界面在客户端的基本验证
jQuery的基本使用的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- 浅谈 jQuery 核心架构设计
jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...
随机推荐
- 使用Charles进行移动APP抓包分析
一.简介 Charles是目前最强大最流行的http抓包调试工具,Mac.Unix.Windows各个平台都支持.特别是做APP开发,调试与服务端的通信,Charles是必备工具. 目前Charles ...
- Ext4文件系统架构分析(二)
接着上一篇博文,继续分析Ext4磁盘布局中的元数据. 1.7 超级块 超级块记录整个文件系统的大量信息,如数据块个数.inode个数.支持的特性.管理信息,等待. 如果设置sparse_super特性 ...
- CPP/类/成员函数访问权限2
// main.cpp // OOL // Created by mac on 2019/4/4. // Copyright © 2019年 mac. All rights reserved. // ...
- Hexo+Github博客搭建
一.准备 1.安装git 点击下载:链接:https://pan.baidu.com/s/1eToStns 密码:r93r 安装参考之前随笔:http://www.cnblogs.com/jiangb ...
- 解读Web应用程序安全性问题的本质
转自 http://blog.csdn.net/iwebsecurity/article/details/1688304 相信大家都或多或少的听过关于各种Web应用安全漏洞,诸如:跨site脚本攻击( ...
- python并发编程之多进程理论知识
一 什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 举例(单核+多道,实现多个进程的并发执行): egon在一个时间段内有很多任务要做:python备课的任务,写书的任 ...
- Assert.notNull(sessionUser);
rg.springframework.util.Assert Assert翻译为中文为"断言".就是断定某一个实际的值就为自己预期想得到的,如果不一样就抛出异常.
- 详解华为云基因容器服务GCS
基因测序,作为“下一个能够改变世界”的技术,已经由实验室研究演变到临床使用,为人类预测罹患多种疾病的可能性,提前预防和治疗疾病提供了一套可靠的方法和手段.而基于基因测序在预防和治疗疾病方面的准确和可靠 ...
- Unity依赖注入(笔记)
一.介绍 控制反转(Inversion of Control,简称IoC):整洁架构思想,不允许内部获知外部的存在,这就导致了我们必须在内层定义与外层交互的接口,通过依赖注入的方式将外层实现注入到内部 ...
- redmine on centos
一 前言 前前后后搭建redmine,花费了很多时间.期间会遇到各种坑,因此总结下自己的方法,分享给各位童鞋. 二 操作系统 centos release 6.9 详细信息如下图: 三 安装步骤 ...