基于jquery的可查询多级select控件（可记录历史选择）
一、功能和使用
公司有功能需求，还要一条代码引入的控件，网上找完全符合的控件比较难，寻找所花的时间还不如自己写一个，所以找个空闲时间自己写了一个
控件功能：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控件（可记录历史选择）的更多相关文章
- jquery去重复 如何去除select控件重复的option
#1.去除select控件重复的option <select id="companyId" onchange="getContract()" name=& ...
- jQuery：实现两个<select>控件的互移操作
一.直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- jquery 双向select控件bootstrap Dual listbox
http://www.cnblogs.com/hangwei/p/5040866.html -->jquery 双向select控件bootstrap Dual listboxhtt ...
- 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 ...
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件
在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...
- 基于vue.js实现远程请求json的select控件
基本思路 前端把需要的参数类型编码传到后台,后台返回相应的参数列表json,前端利用vue渲染select控件 具体实现 前端代码 <select v-model="template. ...
- jquery仿jquery mobile的select控件效果
不说废话.直接上代码 //仿jQuery mobile Select控件 //使用方法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值 function Sele ...
- Jquery+json绑定带层次下拉框（select控件）
一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...
- html select控件的jq操作
html select控件的jq操作 1.判断select选项中 是否存在Value="paraValue"的Item $("#selectid option[@valu ...
随机推荐
- form表单提交数据的数据格式
form表单提交的数据格式默认是 enctype="application/x-www-form-urlencoded"这样将input框的数据与input框的name属性以键值对 ...
- python爬虫之下载京东页面图片
import requests from bs4 import BeautifulSoup import time import re t = 0 #用于给图片命名 for i in range(10 ...
- gitflow工作流程基本命令使用
1 基础命令: 初始化: git flow init 开始新Feature: git flow feature start MYFEATURE Publish一个Feature(也就是push到远程) ...
- LabVIEW之安装队列工具包AMC安装问题解决
LabVIEW之安装队列工具包AMC安装问题解决--VIPM无法连接LabVIEW 彭会锋 参考资料: http://www.labviewpro.net/forum_post_detail.php? ...
- 明明白白AOP
引子: AOP(面向方面编程:Aspect Oriented Programing)和IoC一样是Spring容器的内核,声明式事务的功能在此基础上开花结果.但是AOP和OOP差别较大,要很好地理解这 ...
- Python不同版本切换
2016年6月8日更新: 这是我早前写的一篇小文章,其实,后来也没有采用这种方法切换.电脑上安装了多个Python 版本,保证自己经常用的版本加入环境变量外,使用非系统的版本时一般使用 IDE 编辑器 ...
- Python中字符串、列表、元组、集合、字典中的一些知识，有些不太常见
————————笔记——————————# 字符串1. 字符串是不可变的.2. 字符串切片输出:`[start:end:step]`.使用`a[::-1]`倒序输出字符串.3. `str.split( ...
- js自定义对象.属性 笔记
<一> js自定义对象 一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtabl ...
- 初识jQuery（1）
1.Jquery是对JavaScript对象和函数的封装(JavaScript框架) 2.怎么使用Jquery 第一步:把js文件放入项目中 第二步:在页面引用jquery <script ty ...
- [置顶]
AI大行其道，你准备好了吗？—谨送给徘徊于转行AI的程序员
前言 近年来,随着 Google 的 AlphaGo 打败韩国围棋棋手李世乭之后,机器学习尤其是深度学习的热潮席卷了整个IT界.所有的互联网公司,尤其是 Google 微软,百度,腾讯等巨头,无不在布 ...