一、功能和使用

公司有功能需求,还要一条代码引入的控件,网上找完全符合的控件比较难,寻找所花的时间还不如自己写一个,所以找个空闲时间自己写了一个
 
控件功能:1、可手动输入查询,也可点击下拉框查询,
2、输入时实时定位到下拉框,enter补全
3、可多级查询(目前是写到二级)
4、localStorage存储历史记录
 
控件使用:引入相应的js和css文件,需要控件的html中加一个div
<div id="multiple_select" class="multiple-select-container"></div>

js里引入控件

$("#multiple_select").multiSelect({
type:'2',//可选择几级数据
data:data.list,      
      noneSelectedText: '请选择',
         field:['provence','city','name']  //option字段,【一级字段,二级字段,显示字段】
}); 

二、代码

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>树形控件</title>
<link rel="stylesheet" type="text/css" href="./multiSelect.css" />
</head>
<body style="padding:100px;">
<div id="multiple_select" class="multiple-select-container"></div>
<script src="plugins/jquery-1.10.2.js"></script>
<script src="./multiSelect.js"></script>
<script>
$(function(){
//测试用的数据
var data = {
list:[{
provence:"湖北",
city:[{name:"武汉",code:}, {name:"仙桃",code:},{name:"天门",code:}]
},
{
provence:"河北",
city:[{name:"石家庄",code:}, {name:"邯郸",code:},{name:"唐山",code:}]
},{
provence:"湖南",
city:[{name:"郴州",code:}, {name:"岳阳",code:},{name:"长沙",code:}]
}]
}
//控件引用
$("#multiple_select").multiSelect({
type:'',//可选择几级数据
data:data.list,
field:['provence','city','name'] , //option字段,第一个是1级展示数据的字段,第二个是二级数据字段,第三个是显示字段
   record: true, //是否需要历史记录功能,只展示最近使用的前三条数据
noneSelectedText : '', //未选择时展示数据
});
});
</script>
</body>
</html>

CSS

* {
padding: 0;
margin: 0;
} ul li {
list-style: none;
} /*fontclass*/ @font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1537237853618');
/* IE9*/
src: url('iconfont.eot?t=1537237853618#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAVYAAsAAAAACCQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8hUioY21hcAAAAYAAAABoAAABquZlt9xnbHlmAAAB6AAAAV8AAAG8iReSsmhlYWQAAANIAAAALAAAADYSq0zoaGhlYQAAA3QAAAAcAAAAJAfeA4ZobXR4AAADkAAAAA4AAAAUFAAAAGxvY2EAAAOgAAAADAAAAAwA2AFKbWF4cAAAA6wAAAAfAAAAIAESADtuYW1lAAADzAAAAUUAAAJtPlT+fXBvc3QAAAUUAAAAQgAAAFf+vnWeeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye8T/bxtzwv4EhhrmBoQEozAiSAwDr4gyoeJztkcENgCAMRV8FjTEmhj0cwKPDeHI/GalrYFscw08e+f1pORRgBJKxGxnkRnBdlkrkiSXyzGH1bGcA3bRobe1zj7uQRMccr4nNWq9M/FrjPr8q+9464UvHN65Px39Fa4fhBcRnF9R4nE2QP0/CQBiH732vtrRXwcT+wRBabWKLS4lt02646IgTwbBRZhkYlX4BExNC4uTiqFE+BHwL+DBePFoTveF+l8tzz+/yEiRi0RHuCCMBIVAHxQG7B1kIx5Yhe11QZM9PriDwkzRyIUsjy2gASssNpZvlci1Ja4dZbX1eMMfUikIzHVbM9bbFCtxK64oQO4+ZuJvPBcuK4t9ZlJZ/eMUJMQjJVLCi1A9EYeDLCsgORNknDGCku01o8JfaAbITxhcqNF19BXf8i9muDvc1CpKk8oXA9D/neO9U0fdkywbbsq00gzQET6FDvuLvpVO8LZ0wK5044B8w3EtFWSmFWSmlpXNGL8kROSMhIedeiEkPIweNOlKvjoaDUQ+TEEHuQjUwMUR4u3nMoyh/fKriOpv0O53+ZFoFPByynWa22FYznuOKisf7iHHcuc1/sWnev/g+BbZlLVPbsZbxAzYBVaMAeJxjYGRgYADikyacs+P5bb4ycLMwgMD1Yy2xyDQLA7MhkOJgYALxAArgCJB4nGNgZGBgbvjfwBDDwgACQJKRARWwAgBHCwJueJxjYWBgYEHDAAEEABUAAAAAAAAAQgBsAJYA3nicY2BkYGBgZdBnYGYAASYg5gJCBob/YD4DAA2tAU4AeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAlZGJkZmRhZGVkY2BJzknvzhVNzmzKDknlSOxqCi/XLe0gAvCSMkvz2MrTk0sSs5gYAAATLsOxwAA') format('woff'), url('iconfont.ttf?t=1537237853618') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1537237853618#iconfont') format('svg');
/* iOS 4.1- */
} .iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .icon-close-circle:before {
content: "\e611";
} .icon-arrow-up:before {
content: "\e6b6";
} .icon-arrow-down:before {
content: "\e6b5";
} .icon-search:before {
content: "\e60f";
} /*fontclass end*/ .multiple-select-container {
width: 166px;
height: 34px;
line-height: 34px;
position: relative;
display: inline-block;
vertical-align: middle;
} .multiple-select-container .select-inputbox {
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 9px;
position: relative;
box-sizing: border-box;
} .multiple-select-container .select-input,
.multiple-select-container .select-button {
width: 100%;
height: 100%;
outline: none;
box-sizing: border-box;
background: #FFF;
} .multiple-select-container .select-input {
padding: 5px 22px;
border-radius: 2px;
border: 1px solid #CFCFCF;
height: 28px;
} .multiple-select-container .select-button {
padding: 5px 25px 5px 12px;
border: 1px solid #CFCFCF;
border-radius: 4px;
text-align: left;
display: flex;
justify-content: space-between;
} .multiple-select-container .select-button span {
display: inline-block;
height: 100%;
line-height: 22px;
} .multiple-select-container .selected-data {
width: 80%;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} .multiple-select-container .input-isfold {
float: right;
cursor: pointer;
margin-right: -16px;
font-size: 12px;
} .multiple-select-container .input-search,
.multiple-select-container .input-close {
position: absolute;
cursor: pointer;
top: 50%;
transform: translateY(-50%);
display: inline-block;
height: 16px;
line-height: 16px;
font-size: 18px;
} .multiple-select-container .input-close {
left: calc(95% - 22px);
width: 12px;
color: #7B7B7B;
display: none;
} .multiple-select-container .input-search {
color: #ADADAD;
left: 12px;
width: 16px;
} .multiple-select-container .select-options-box {
width: 100%;
display: none;
position: absolute;
border: 1px solid #c2cad8;
z-index: 999999;
background: #fff;
height: 300px;
overflow-y: auto;
} .multiple-select-container .options-container {
width: 100%;
height: auto;
} .multiple-select-container .options-record,
.multiple-select-container .optionslist {
font-size: 14px;
width: 100%;
box-sizing: border-box;
padding: 0 9px;
text-align: left;
} .multiple-select-container .options-record {
color: #999;
height: 34px;
line-height: 34px;
} .multiple-select-container .optionslist {
cursor: pointer;
height: 26px;
line-height: 26px;
} .multiple-select-container .optionslist:hover {
background: #DEEDFF;
} .multiple-select-container .options-one {
font-size: 16px;
} .multiple-select-container .options-two {
width: 100%;
font-size: 14px;
} .multiple-select-container .options-two li {
padding-left: 15px;
} .multiple-select-container .options-isfold {
float: right;
display: inline-block;
width: 16px;
} .multiple-select-container .active-border {
border: 1px solid #009BE1;
} .multiple-select-container .background-color {
background: #ECECEC!important;
} .multiple-select-container .border-bottom {
border-bottom: 2px solid #D4D4D4;
} ::-webkit-scrollbar {
width: 5px;
height: 5px;
} ::-webkit-scrollbar-thumb {
background: #DCDCDC;
border-radius: 8px;
}

  JS 

 ;
(function($, window, document) { var pluginName = 'multiSelect',
defaults = {
type: '1', //select层级onetwo
data: [], //数据
field: [], //数据字段名
record: false, //是否记录最近使用的三条数据
chooselast: true, //是否在初始化后自动选择最近使用的选项,record必须为true
noneSelectedText: '', //未选择时显示文字
isfoldFirst: false, //是否默认展开二级目录
disabled: '', //是否禁用
hasinput: true, //是否显示搜索框
id: '', //id字段名
allselect: '', //全选或者不选择
queryFun: function() {}, //搜索方法 }; function MultiSelect(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
this.init();
} MultiSelect.prototype = { //初始化弹出框
init: function() {
var that = this,
element = this.element; that.create(element);
that.triggerlist(element);
}, //创建select框
create: function(element) {
var that = this,
$this = $(element),
noneSelectedText = that.settings.noneSelectedText,
selectElement = '<button name="selectinput" class="select-button">' +
'<span id="selected_data" class="selected-data">' + noneSelectedText + '</span><span class="input-isfold iconfont icon-arrow-down"></span></button>' +
'<div class="select-options-box" id="select_options_box"></div>';
$this.append(selectElement);
var $options_box = $this.find('#select_options_box');
$this.on({
'hideoptions': function(e) {
$options_box.fadeOut();
$this.find('.input-isfold').toggleClass('icon-arrow-down icon-arrow-up');
},
'showoptions': function(e) {
$options_box.fadeIn();
$this.find('.input-isfold').toggleClass('icon-arrow-down icon-arrow-up');
} });
that.initOption(element);
},
//初始化列表
initOption: function(element) {
var that = this,
$this = $(element),
$options_box = $this.find('#select_options_box');
var $options = that.parseOptions();
$options_box.html($options);
},
//解析并处理options数据
parseOptions: function() {
var that = this,
type = that.settings.type,
field = that.settings.field,
one = field[0],
two = field[1],
data = that.settings.data,
allselect = that.settings.allselect,
hasinput = that.settings.hasinput,
disabled = that.settings.disabled,
twolist = '',
optionsTwo = [],
record = that.settings.record,
noneSelectedText = that.settings.noneSelectedText,
options = '';
var recordColumn = JSON.parse(window.localStorage.getItem("recordInfo")) ? JSON.parse(window.localStorage.getItem("recordInfo")) : [];
console.log("recordColumn" + recordColumn);
options += '<div class="options-container">';
if (record && recordColumn.length > 0) {
options += '<div class="options-record"><span class="options-data">最近使用</span>' +
'</div>';
for (var i = 0; i < recordColumn.length; i++) {
if (recordColumn[i] != undefined && JSON.stringify(data).indexOf(JSON.stringify(recordColumn[i].id)) >= 0) {
options += '<div class="optionslist" disabled="' + disabled + '" id="' + recordColumn[i].id + '" data-index=' + recordColumn[i].dataIndex + '">' +
'<span class="options-data">' + recordColumn[i][one] + '</span></div>';
} else {
recordColumn.splice(i, 1);
window.localStorage.setItem("recordInfo", JSON.stringify(recordColumn));
}
}
}
if (noneSelectedText) {
options += '<div class="options-record optionslist" id="none_selected_all"><span class="options-data">' + noneSelectedText + '</span></div>';
}
if (hasinput) {
options += '<div class="select-inputbox"><input type="text" name="selectinput" id="select_input" class="select-input" placeholder="" />' +
'<i class="input-search iconfont icon-search"></i>' +
'<i class="input-close iconfont icon-close-circle"></i></div>';
}
switch (type) {
case '1':
for (var i in data) {
options += '<div class="optionslist" disabled="' + disabled + '" id="' + data[i].id + '" data-index="' + i + '"><span class="options-data">' + data[i][one] + '</span></div>';
}
break;
case '2':
for (var i in data) {
twolist = '', optionsTwo = [];
var optionsTwo = data[i][two]; for (var j in optionsTwo) {
twolist += '<li class="options-container optionslist" disabled="' + disabled + '" id="' + data[i].id + '" data-index="' + i + '" data-twoindex="' + j + '">' +
'-- ' + '<span class="options-data">' + optionsTwo[j][field[2]] + '</span></li>';
}
options += '<div class="options-one optionslist" disabled="' + disabled + '" id="' + data[i].id + '" data-index="' + i + '">' +
'<span class="options-data">' + data[i][one] + '</span><span class="iconfont icon-arrow-up options-isfold"></span>' +
'</div>' +
'<ul class="options-two">' + twolist + '</ul>';
}
break;
}
options += '</div>';
return options;
}, //系列事件
triggerlist: function(element, event) {
var that = this,
$this = $(element),
data = that.settings.data,
field = that.settings.field,
one = field[0],
two = field[1],
isfoldFirst = that.settings.isfoldFirst,
noneSelectedText = that.settings.noneSelectedText,
$options_box = $this.find('#select_options_box'),
$isfold = $this.find('.options-isfold'),
record = that.settings.record,
chooselast = that.settings.chooselast,
disabled = that.settings.disabled,
$input = $this.find('#select_input'),
$selected = $this.find('#selected_data'),
$button = $this.find('.select-button');
var recordColumn = JSON.parse(window.localStorage.getItem("recordInfo")) ? JSON.parse(window.localStorage.getItem("recordInfo")) : [];
$input.on({
'input propertychange': function() {
that.selectFun(false, false, element);
},
'click': function() {
$options_box.show();
return false;
}
});
$this.find('.input-search').on('click', function(event) {
$this.trigger('showoptions', e);
that.selectFun(false, false, element);
return false;
});
$this.find('.input-close').on('click', function(event) {
$options_box.show();
$input.val('');
$(this).hide();
return false;
});
$button.on('click', function(event) {
$(this).addClass('active-border');
$options_box.toggle();
that.selectFun(false, true, element);
$this.find('.input-isfold').toggleClass('icon-arrow-down icon-arrow-up');
event.stopPropagation();
})
$isfold.on('click', function(event) {
// that.selectFun(false, true, element);
$(this).parent().next().toggle();
$(this).toggleClass('icon-arrow-down icon-arrow-up');
$options_box.show();
// $this.trigger('showoptions');
event.stopPropagation();
})
//选择事件
$this.find('.optionslist').on({
'click': function(event) {
if (disabled) return;
$button.removeClass('active-border');
$(this).addClass('background-color');
$this.find('.optionslist').removeAttr("selected");
$(this).attr("selected", "selected");
$selected.html($(this).find('.options-data').html());
if ($.isFunction(that.settings.queryFun)) {
that.settings.queryFun();
}
if ($(this).attr("id") === "none_selected_all") {
$button.data("data", null)
$selected.html(noneSelectedText);
} else {
var recordIndex = parseInt($(this).attr("data-index")),
twoIndex = parseInt($(this).attr("data-twoindex")),
a = {},
b = { dataIndex: recordIndex };
if ($(this).attr("data-twoindex")) {
a = data[recordIndex][two][twoIndex];
} else {
a = data[recordIndex];
}
recordCol = $.extend(a, b);
$button.attr("data-index", recordIndex);
$button.data("data", a)
if (record) {
// console.log("recordCol:" + recordCol + " recordColumn:" + JSON.stringify(recordColumn));
var len = recordColumn.length,
existIndex = -1;
// if (JSON.stringify(recordColumn).indexOf(JSON.stringify(recordCol)) > -1) {
for (var i = 0; i < len; i++) {
if (recordColumn[i].dataIndex == recordIndex) {
existIndex = i;
}
};
if (existIndex > -1) {
recordColumn.splice(existIndex, 1);
}
// };
recordColumn.unshift(recordCol);
len = recordColumn.length;
if (len > 3) {
recordColumn.splice(3, len - 3);
}
window.localStorage.setItem("recordInfo", JSON.stringify(recordColumn));
}
}
// $button.attr("data", a) $this.trigger('hideoptions');
event.stopPropagation();
},
'mouseover': function() {
$(this).css({ 'background': '#DEEDFF' });
},
'mouseout': function() {
$(this).css({ 'background': '#fff' });
}
}); $(document).keyup(function(event) {
if (event.keyCode === 13&&$input.is(':focus')) {
                     that.selectFun(true, false, element);
if ($.isFunction(that.settings.queryFun)) {
that.settings.queryFun();
}
}
event.stopPropagation();
});
/* $(document).on('click', function(event) {
$options_box.hide();
}); */
$(document).on('click', function(event) {
var _tar = $button.children();
if (!_tar.is(event.target) && _tar.has(event.target).length === 0) { // Mark 1
$options_box.fadeOut();
$button.removeClass('active-border');
}
});
if (chooselast && record && recordColumn.length > 0) {
$this.find('.optionslist').first().trigger("click");
}
if (!isfoldFirst) {
$isfold.trigger("click");
}
}, // input与select同步
selectFun: function(enter, button, element) { //enter为true代表是键盘enter键,button为true代表是select,为false代表是input搜索框
var that = this,
$this = $(element),
data = that.settings.data,
$options_box = $this.find('#select_options_box'),
$input = $this.find('#select_input'),
options = $this.find('.optionslist'),
$selected = $this.find('#selected_data'),
optionTop = 0,
selectHTML = '';
var optiondata = button ? $selected.html() : $input.val();
if ($input.val()) {
$this.find('.input-close').show();
} else {
$this.find('.input-close').hide();
}
$.each(options, function(i, item) {
selectHTML = $(item).find('.options-data').html();
// console.log(selected);
if (selectHTML.indexOf(optiondata) >= 0) {
// $(item).trigger('hover');
options.removeClass('background-color');
$(item).addClass('background-color');
/*if ($(item).hasClass('options-one')) {
optionTop = $(item).position().top;
}else{
optionTop = $(item).parent().position().top;
}*/
optionTop = $(item).position().top;
// console.log(optionTop);
$options_box.scrollTop(optionTop);
if (enter) {
$(item).trigger('click');
}
}
}); if (optiondata === '') {
options.removeClass('background-color');
$options_box.scrollTop(0);
}
} }; $.fn[pluginName] = function(options) {
this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new MultiSelect(this, options));
}
});
return this;
}; //外部获取选中数据
$.fn.extend({
optionSelected: function() {
if ($(this).find("button").data("data")) {
return $(this).find("button").data("data");
} else {
return "";
}
},
setOption: function(id) {
if (id && id != "" && id.length > 0) {
$(this).find("#" + id).trigger('click');
}
},
setDisabled: function() {
$(this).find("button").css("background-color", "#ccc");
$(this).css("pointer-events", "none");
$(this).parent().css("cursor", "no-drop");
},
}); })(jQuery, window, document)

  

 

  

基于jquery的可查询多级select控件(可记录历史选择)的更多相关文章

  1. jquery去重复 如何去除select控件重复的option

    #1.去除select控件重复的option <select id="companyId" onchange="getContract()" name=& ...

  2. jQuery:实现两个<select>控件的互移操作

    一.直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  3. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  4. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

  5. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

    在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...

  6. 基于vue.js实现远程请求json的select控件

    基本思路 前端把需要的参数类型编码传到后台,后台返回相应的参数列表json,前端利用vue渲染select控件 具体实现 前端代码 <select v-model="template. ...

  7. jquery仿jquery mobile的select控件效果

    不说废话.直接上代码 //仿jQuery mobile Select控件 //使用方法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值 function Sele ...

  8. Jquery+json绑定带层次下拉框(select控件)

    一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...

  9. html select控件的jq操作

    html select控件的jq操作 1.判断select选项中 是否存在Value="paraValue"的Item $("#selectid option[@valu ...

随机推荐

  1. python学习笔记(字典乱码)

    博主总结下 python中字典中包含中文时,使用过程中出现乱码 json.dumps(params, encoding="UTF-8", ensure_ascii=False) p ...

  2. 1-27 awk 基本使用

    大纲: 色彩: awk基本使用 ##################################################### 一.色彩:shell中,设置输出文本色彩(前景色,背景色) ...

  3. 1-15-1 RAID磁盘阵列的原理和搭建

    大纲: 1.1-1-企业级RAID磁盘阵列 RAID磁盘阵列的原理 RAID0,1,5,10的搭建 硬件RAID卡 1.2-1-使用廉价的磁盘搭建RAID磁盘阵列 实战-配置RAID0带区卷 ==== ...

  4. opencv颜色提取color filting

    # -*- coding: utf-8 -* import numpy as np import cv2 cap = cv2.VideoCapture(0) while True: _ , frame ...

  5. JavaScript中的call、apply、bind是怎么回事?

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...

  6. js中字符串与数组的相互转换

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. JS中call和apply区别有哪些 记录

    一.call和apply区别 传递参数的方式.用法上不同,主要是参数不完全同 (1).B.Function.call(A,arg,arg) 这个例子是讲A对象“调用”B对象的Function(某个具体 ...

  8. 【移动互联网开发】Zepto 使用中的一些注意点 【转】

    前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库. 为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大 ...

  9. Linux网络编程IPv4和IPv6的inet_addr、inet_aton、inet_pton等函数小结

    知识背景: 210.25.132.181属于IP地址的ASCII表示法,也就是字符串形式.英语叫做IPv4 numbers-and-dots notation. 如果把210.25.132.181转换 ...

  10. Eclipse快捷键详细解析

    android开发中常用的Eclipse快捷键详细解析 1.查看快捷键定义的地方 Window->Preferences->General->Keys. 2.更改启动页 在Andro ...