[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
隔行变色功能，不用js，直接用css伪类就可以做，这个实例可以作为js插件开发很好的入门级实例。本文实现的隔行变色包括以下功能：
1，支持2种常用结构共存( div元素 和 表格类型 )
2，一个页面内支持不同模块隔行变色，分别管理
3，可以定制的配置有：
奇/偶数行的背景颜色
特定的模块加上隔行变色
当前激活行的颜色
隔行变色的元素类型定制
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隔行变色插件开发 - by ghostwu</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 10px 30px;
border: 1px solid #ccc;
}
.even-color {
background: #ccc;
}
.odd-color {
background: #eee;
}
.even-color2 {
background: #000;
}
.odd-color2 {
background: #666;
}
.current {
background: yellow;
}
.active {
background: #09f;
}
#box div,
#box2 div {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</style>
<script>
(function () {
/*
隔行变色
选项卡
全选不选反选
*/
var ghostwu = {};
/***************隔行变色开始***************/
ghostwu.BgColor = {
Bg: function (option) {
return new ghostwu.BgColor.init(option);
}
};
ghostwu.BgColor.init = function (option) {
this.oldColor = null;
this.opt = {
'activeClass': 'active',
'evenClass': 'even-color',
'oddClass': 'odd-color',
'ele': 'div',
'context': document
}; //存储默认配置
for (var key in option) {
this.opt[key] = option[key];
}
if (this.opt.ele == 'div') {
var curCxt = this.opt.context;
if (typeof this.opt['context'] === 'string') {
curCxt = document.querySelector(this.opt['context']);
}
this.elements = curCxt.querySelectorAll(this.opt.ele);
} else {
this.elements = this.opt.context.querySelectorAll(this.opt.ele + ' tr');
for (var i = 0; i < this.elements.length; i++) {
if (this.elements[i].children[0].nodeName.toLowerCase() == 'th') {
this.elements = [].slice.call(this.elements);
this.elements.splice(i, 1);
}
}
}
}
ghostwu.BgColor.init.prototype.setBgColor = function () {
for (var i = 0; i < this.elements.length; i++) {
if (i % 2 == 0) {
this.elements[i].className = this.opt['evenClass'];
} else {
this.elements[i].className = this.opt['oddClass'];
}
}
}
ghostwu.BgColor.init.prototype.hover = function () {
var that = this;
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].onmouseover = function () {
that.addBg(this);
};
this.elements[i].onmouseout = function () {
that.removeBg(this);
}
}
}
ghostwu.BgColor.init.prototype.addBg = function (curObj) {
this.oldColor = curObj.className;
curObj.className = this.opt['activeClass'];
}
ghostwu.BgColor.init.prototype.removeBg = function (curObj) {
curObj.className = this.oldColor;
}
/***************隔行变色结束***************/
window.g = ghostwu;
})();
</script>
<script>
window.onload = function () {
var oBg = g.BgColor.Bg({
'activeClass': 'current',
'ele': 'table'
});
oBg.setBgColor();
oBg.hover();
var oBg2 = g.BgColor.Bg({
'activeClass': 'active',
'ele': 'div',
'context': '#box'
});
oBg2.setBgColor();
oBg2.hover();
var oBg3 = g.BgColor.Bg({
'activeClass': 'current',
'ele': 'div',
'evenClass': 'even-color2',
'oddClass': 'odd-color2',
'context': '#box2'
});
oBg3.setBgColor();
oBg3.hover();
}
</script>
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="box2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
</table>
</body>
</html>
run code
(function(){
/*
隔行变色
选项卡
全选不选反选
*/
var ghostwu = {};
/***************隔行变色开始***************/
ghostwu.BgColor = {
};
ghostwu.BgColor.init = function(){
}
ghostwu.BgColor.setBgColor = function(){
}
ghostwu.BgColor.hover = function(){
}
ghostwu.BgColor.addBg = function(){
}
ghostwu.BgColor.removeBg = function(){
}
/***************隔行变色结束***************/
/***************选项卡开始***************/
ghostwu.Tab = {
};
ghostwu.Tab.init = function(){
}
ghostwu.Tab.bindEvent = function(){
}
ghostwu.BgColor.switchTab = function(){
}
/***************选项卡结束***************/
window.g = ghostwu;
})();
一、首先定义一个一级的命名空间 ghostwu = {}，然后通过window对象 暴露这个对象 给外部使用
接下来开发的插件，只要加在我的一级命名空间中即可，如：
ghostwu.BgColor
ghostwu.Tab
ghostwu.Page
ghostwu.Module
........等等
插件的具体方法，在二级命名空间继续增加，如：
ghostwu.BgColor.init
为隔行变色插件( BgColor ) 添加一个初始化方法( init )
二、实现一个不能定制配置的隔行变色功能
demo.js代码
var ghostwu = {};
/***************隔行变色开始***************/
ghostwu.BgColor = {
oldColor : null
};
ghostwu.BgColor.init = function(){
this.aDiv = document.querySelectorAll( "div" );
}
ghostwu.BgColor.setBgColor = function(){
for( var i = 0; i < this.aDiv.length; i++ ){
if ( i % 2 == 0 ){
this.aDiv[i].className = 'even-color';
}else {
this.aDiv[i].className = 'odd-color';
}
}
}
ghostwu.BgColor.hover = function(){
var that = this;
for( var i = 0 ; i < this.aDiv.length; i++ ){
this.aDiv[i].onmouseover = function(){
that.addBg( this );
}
this.aDiv[i].onmouseout = function(){
that.removeBg( this );
}
}
}
ghostwu.BgColor.addBg = function( curObj ){
this.oldColor = curObj.className;
curObj.className = 'active';
}
ghostwu.BgColor.removeBg = function( curObj ){
curObj.className = this.oldColor;
}
/***************隔行变色结束***************/
html页面布局代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隔行变色 - by ghostwu</title>
<style>
div{
margin:10px;
padding:20px;
border:1px solid #ccc;
}
.even-color {
background:#ccc;
}
.odd-color {
background: #eee;
}
.active {
background:yellow;
}
</style>
<script src="./lib/demo.js"></script>
<script>
window.onload = function(){
var oBg = g.BgColor;
oBg.init();
oBg.setBgColor();
oBg.hover();
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
至此，一个简单的隔行变色功能就完成了，但是不能称之为插件，因为这个功能现在是写死的
var ghostwu = {};
/***************隔行变色开始***************/
ghostwu.BgColor = {
oldColor : null,
opt : {
'activeClass' : 'active',
'oddClass' : 'odd-color',
'evenClass' : 'even-color',
'ele' : 'div'
}
};
ghostwu.BgColor.init = function(){
this.elements = document.querySelectorAll( this.opt['ele'] );
}
ghostwu.BgColor.setBgColor = function(){
for( var i = 0; i < this.elements.length; i++ ){
if ( i % 2 == 0 ){
this.elements[i].className = this.opt['evenClass'];
}else {
this.elements[i].className = this.opt['oddClass'];
}
}
}
ghostwu.BgColor.hover = function(){
var that = this;
for( var i = 0 ; i < this.elements.length; i++ ){
this.elements[i].onmouseover = function(){
that.addBg( this );
}
this.elements[i].onmouseout = function(){
that.removeBg( this );
}
}
}
ghostwu.BgColor.addBg = function( curObj ){
this.oldColor = curObj.className;
curObj.className = this.opt['activeClass'];
}
ghostwu.BgColor.removeBg = function( curObj ){
curObj.className = this.oldColor;
}
/***************隔行变色结束***************/
经过修改之后，我们就可以通过 opt这个json 配置样式和元素结构了， 接下来，我们就得增加参数配置了
四、参数配置
只需要在demo.js代码中，加入一个for循环，把参数的配置复制给opt即可
ghostwu.BgColor.init = function( option ){
for( var key in option ){
this.opt[key] = option[key];
}
this.elements = document.querySelectorAll( this.opt['ele'] );
}
html测试页面修改如下：
<style>
div{
margin:10px;
padding:20px;
border:1px solid #ccc;
}
.even-color2 {
background:#000;
}
.odd-color2 {
background: #666;
}
.current {
background:#08f;
}
</style>
<script src="./lib/demo.js"></script>
<script>
window.onload = function(){
var oBg = g.BgColor;
oBg.init({
'activeClass' : 'current',
'evenClass' : 'even-color2',
'oddClass' : 'odd-color2'
});
oBg.setBgColor();
oBg.hover();
}
</script>
五、完善元素的配置
在第四步中，class都可以定制了，但是ele还不能定制，这个ele就是控制隔行变色的结构
修改init函数如下：
ghostwu.BgColor.init = function( option ){
for( var key in option ){
this.opt[key] = option[key];
}
if ( this.opt['ele'] == 'div' ) {
this.elements = document.querySelectorAll( this.opt['ele'] );
}else{
this.elements = document.querySelectorAll( this.opt['ele'] + " tr" );
this.elements = [].slice.call( this.elements );
for( var i = 0 ; i < this.elements.length; i++ ){
if ( this.elements[i].children[0].nodeName.toLowerCase() == 'th' ) {
this.elements.splice( i, 1 );
}
}
}
}
测试页面的代码修改如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隔行变色 - by ghostwu</title>
<style>
table {
border-collapse: collapse;
width: 100%;
} th,
td {
padding: 10px 30px;
border: 1px solid #ccc;
}
div {
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
} .even-color2 {
background: #000;
} .odd-color2 {
background: #666;
} .current {
background: #08f;
}
</style>
<script src="./lib/demo.js"></script>
<script>
window.onload = function () {
var oBg = g.BgColor;
oBg.init({
'activeClass': 'current',
'evenClass': 'even-color2',
'oddClass': 'odd-color2'
});
oBg.setBgColor();
oBg.hover(); var oBg2 = g.BgColor;
oBg2.init({
'activeClass': 'current',
'evenClass': 'even-color2',
'oddClass': 'odd-color2',
'ele' : 'table'
});
oBg2.setBgColor();
oBg2.hover();
} </script>
</head> <body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
</table>
</body> </html>
至此，我们开发的功能，勉强算个插件了，但是，不能按区域控制，比如页面上有10个div, 分成2部分，一部分有5个div，另外一部分也是5个，我想其中一部分div加上隔行变色效果。另外一部分不加.
六、分块控制
ghostwu.BgColor = {
oldColor : null,
opt : {
'activeClass' : 'active',
'oddClass' : 'odd-color',
'evenClass' : 'even-color',
'ele' : 'div',
'context' : document
}
};
ghostwu.BgColor.init = function( option ){
for( var key in option ){
this.opt[key] = option[key];
}
var cxt = this.opt['context'];
if ( typeof cxt === 'string' ){
cxt = document.querySelector( this.opt['context'] );
}
if ( this.opt['ele'] == 'div' ) {
this.elements = cxt.querySelectorAll( this.opt['ele'] );
}else{
this.elements = cxt.querySelectorAll( this.opt['ele'] + " tr" );
this.elements = [].slice.call( this.elements );
for( var i = 0 ; i < this.elements.length; i++ ){
if ( this.elements[i].children[0].nodeName.toLowerCase() == 'th' ) {
this.elements.splice( i, 1 );
}
}
}
}
修改html页面代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隔行变色 - by ghostwu</title>
<style>
table {
border-collapse: collapse;
width: 100%;
} th,
td {
padding: 10px 30px;
border: 1px solid #ccc;
} .even-color {
background: #ccc;
} .odd-color {
background: #eee;
} .even-color2 {
background: #000;
} .odd-color2 {
background: #666;
} .current {
background: yellow;
} .active {
background: #09f;
} #box div,
#box2 div {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<script src="./lib/demo.js"></script>
<script>
window.onload = function () {
var oBg = g.BgColor;
oBg.init({
'activeClass': 'current',
'evenClass': 'even-color2',
'oddClass': 'odd-color2',
'context' : '#box'
});
oBg.setBgColor();
oBg.hover(); var oBg3 = g.BgColor;
oBg3.init({
'activeClass': 'active',
'evenClass': 'even-color',
'oddClass': 'odd-color',
'context' : '#box2'
});
oBg3.setBgColor();
oBg3.hover(); var oBg2 = g.BgColor;
oBg2.init({
'activeClass': 'current',
'evenClass': 'even-color2',
'oddClass': 'odd-color2',
'ele': 'table',
'context' : document
});
oBg2.setBgColor();
oBg2.hover();
}
</script>
</head> <body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="box2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
</table>
</body> </html>
这样我们就可以达到分块控制的目的，但是，如果你仔细一点，应该能发现一个问题，activeClass设置的样式产生了覆盖，3个区域不能定制activeClass。这个就是单例模式无法解决的问题，我们可以通过构造函数解决
七、构造函数解决属性配置覆盖的问题
(function(){
/*
隔行变色
选项卡
全选不选反选
*/
var ghostwu = {};
/***************隔行变色开始***************/
ghostwu.BgColor = {
Bg : function( option ){
return new ghostwu.BgColor.init( option );
}
};
ghostwu.BgColor.init = function( option ){
this.oldColor = null;
this.opt = {
'activeClass' : 'active',
'evenClass' : 'even-color',
'oddClass' : 'odd-color',
'ele' : 'div',
'context' : document
}; //存储默认配置
for( var key in option ){
this.opt[key] = option[key];
}
if ( this.opt.ele == 'div' ){
var curCxt = this.opt.context;
if ( typeof this.opt['context'] === 'string' ) {
curCxt = document.querySelector( this.opt['context'] );
}
this.elements = curCxt.querySelectorAll( this.opt.ele );
}else {
this.elements = this.opt.context.querySelectorAll( this.opt.ele + ' tr' );
for( var i = 0; i < this.elements.length; i++ ){
if( this.elements[i].children[0].nodeName.toLowerCase() == 'th'){
this.elements = [].slice.call( this.elements );
this.elements.splice( i, 1 );
}
}
}
}
ghostwu.BgColor.init.prototype.setBgColor = function(){
for( var i = 0 ; i < this.elements.length; i++ ){
if ( i % 2 == 0 ) {
this.elements[i].className = this.opt['evenClass'];
}else {
this.elements[i].className = this.opt['oddClass'];
}
}
}
ghostwu.BgColor.init.prototype.hover = function(){
var that = this;
for( var i = 0 ; i < this.elements.length; i++ ){
this.elements[i].onmouseover = function(){
that.addBg( this );
};
this.elements[i].onmouseout = function(){
that.removeBg( this );
}
}
}
ghostwu.BgColor.init.prototype.addBg = function( curObj ){
this.oldColor = curObj.className;
curObj.className = this.opt['activeClass'];
}
ghostwu.BgColor.init.prototype.removeBg = function( curObj ){
curObj.className = this.oldColor;
}
/***************隔行变色结束***************/
window.g = ghostwu;
})();
页面测试代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隔行变色插件开发 - by ghostwu</title>
<style>
table {
border-collapse: collapse;
width: 100%;
} th,
td {
padding: 10px 30px;
border: 1px solid #ccc;
} .even-color {
background: #ccc;
} .odd-color {
background: #eee;
} .even-color2 {
background: #000;
} .odd-color2 {
background: #666;
} .current {
background: yellow;
} .active {
background: #09f;
} #box div,
#box2 div {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<script src="./lib/common2.js"></script>
<script>
window.onload = function () {
var oBg = g.BgColor.Bg({
'activeClass': 'current',
'ele': 'table'
});
oBg.setBgColor();
oBg.hover(); var oBg2 = g.BgColor.Bg({
'activeClass': 'active',
'ele': 'div',
'context': '#box'
});
oBg2.setBgColor();
oBg2.hover(); var oBg3 = g.BgColor.Bg({
'activeClass': 'current',
'ele': 'div',
'evenClass': 'even-color2',
'oddClass': 'odd-color2',
'context': '#box2'
});
oBg3.setBgColor();
oBg3.hover();
}
</script>
</head> <body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="box2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
</table>
</body> </html>
[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件的更多相关文章
- [js插件开发教程]实现一个比较完整的开源级选项卡插件
在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>> [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...
- 动手开发一个名为“微天气”的微信小程序（上）
引言:在智能手机软件的装机量中,天气预报类的APP排在比較靠前的位置.说明用户对天气的关注度非常高.由于人们不管是工作还是度假旅游等各种活动都须要依据自然天气来安排.跟着本文开发一个"微天气 ...
- [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件
jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...
- [js插件开发教程]定制一个手风琴插件(accordion)
本文带来一个垂直方向的手风琴插件开发,可以定制的功能如下: contentClass : 'panel', //面板样式navClass : 'nav', //导航样式activeClass : 'a ...
- ASP.NET Aries 入门开发教程3：开发一个列表页面及操控查询区
前言: Aries框架毕竟是开发框架,所以重点还是要写代码的,这样开发人员才不会失业,哈. 步骤1:新建html 建一个Html,主要有三步: 1:引入Aries.Loader.js 2:弄一个tab ...
- 【JS新手教程】replace替换一个字符串中所有的某单词
JS中的replace方法可以替换一个字符串中的单词.语句的格式是: 需要改的字符串.replace(字符串或正则表达式,替换成的字符串) 如果第一个参数用字符串,默认是找到该字符串中的第一个匹配的字 ...
- 开发一个根据xml创建代理类的小框架
github地址 https://github.com/1367356/GradleTestUseSubModule/tree/master/CreateMyFrameWork 1:定义一些规则
- 学习写了一个点击按钮倒计时的jquery小插件
(function($) { $.fn.extend({ getSms: function(value) { value = $.extend({ wait: 60, //参数, 默认60秒 }, v ...
- bootstrap开发一个简单网页。
CSS代码: body{ padding-top: 50px; padding-bottom: 50px; overflow: auto!important; ...
随机推荐
- 算法学习：Pac-Man的简单对抗
Pacman项目是加州大学伯克利分校提供的一个可视化的AI学习平台.其主体利用python完成.该项目提供了丰富的说明文档,以及预先实现了一些简单的算法供参考各接口的使用. http://ai.ber ...
- angular指令笔记（一）：ng-options
1.ng-options指令用途: 在表达式中使用数组或对象来自动生成一个select中的option列表.ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng- ...
- [转载]Python实现浏览器自动化操作
原文地址:Python实现浏览器自动化操作作者:rayment 最近在研究网站自动登录的问题,涉及到需要实现浏览器自动化操作,网上有不少介绍,例如使用pamie,但是只是支持IE,而且项目也较久没 ...
- GUI(JMenuBar+JMenu+JMenuItem)
public class WindowMenu extends JFrame { JMenuBar menubar; JMenu menu,subMenu; JMenuItem item1,item2 ...
- 团队作业4——第一次项目冲刺（Alpha版本）2017.4.25
在下午的1,2节软件课程结束后,我们teamworkers全体队员在禹州楼302利用课间时间进行约15分钟的短暂会议,会议的内容为阐述昨天开发遇到的问题,大家都提出自己的看法,最后统一了意见,队员互相 ...
- 201521123002 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123026《Java程序设计》第2周学习总结
1. 本章学习收获 1.熟悉了码云的部分功能的使用 2.java编程基础的巩固以及延伸 3.解决了部分PTA编程时所遇到困难并明白了解决困难的方法的原理 4.了解了用package和import管理类 ...
- ubuntu下chromium浏览器flash插件安装
ubuntu下chromium浏览器默认是不支持flash的,在新立德软件包中搜索flash得到的“Adobe Flash Player plugin installer”也没有什么卵用,因为装完以后 ...
- sehll 小脚本的应用
1.模拟linnux登录shell #/bin/bash echo -n "login:" read name echo -n "password:" read ...
- Ajax【介绍、入门、解决Ajax中文、跨域、缓存】
什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...