HTML/JQ/CSS

• HTML 鼠标碰到div内元素、离开div内元素触发 mouseover mouseout事件

可用jquery的 mouseleave 和 mouseenter 事件避免这种情况

• 向数组中首项添加数据

unshift()

GPS坐标定义

WGS-84：是国际标准，GPS坐标（Google Earth使用、或者GPS模块）
GCJ-02：中国坐标偏移标准，Google Map、高德、腾讯使用
BD-09：百度坐标偏移标准，Baidu Map使用

拼接对象集合中的，某一项属性

var items = [{name:'abc'},{name:'123'},{name:'!@#'}]
items.map(function(item){return item.name}).join(',');
输出 "abc,123,!@#"

解决html中label 或 span 无法设置width

 {display:inline-block;}

select2宽度根据内容自适应

$("#select_demo").select2({width: "resolve"});

select2获取选中项的内容

$("#status").select2("data")[0].text;

解决vue渲染中，页面显示源码问题

1. 添加样式
[v-cloak]{
    display: none;
}

2.在vue元素上添加  v-cloak属性

或用template标签将需要渲染的html包起来

判断元素是否显示

$("#div").is(":hidden"); // 判断是否隐藏 
$("#div").is(":visible") //是否显示

带有表单的页面，防止按回车页面刷新

$('form').on('submit', function () {
  return false;
});

动态改变URL但是页面不跳转

var stateObject = {};  
var title = "Wow Title";  
var newUrl = "/my/awesome/url";  
history.pushState(stateObject,title,newUrl);  

模态窗口显示、隐藏 事件

$('#myModal').on('shown.bs.modal', function (e) {
  xxxxxx
  $('#myModal').off('shown.bs.modal');//执行完XXX后解绑，防止后面绑定其他方法还会执行XXX
})

$('#myModal').on('hidden.bs.modal', function (e) {
  xxxxxx
  $('#myModal').off('hidden.bs.modal');
})

清空jqgrid内容

jQuery("#table_passenger_list").jqGrid("clearGridData");

jqgrid取消选中

("#table_list").jqGrid('resetSelection');

jqgrid 选中某一行

$("#table_list").jqGrid('setSelection', rowId);

CSS设置属性选择器

# 带title属性的
[title]
{
  color:red;
}

# 带title属性且title = W3School的
[title=W3School]
{
  border:5px solid blue;
}

js post提交下载请求

function download() {
    var form = $('
');
    form.attr("style", "display:none");
    form.attr("target", "_blank");
    form.attr("method", "post");
    form.attr("action", window.location.href.substring(0,window.location.href.lastIndexOf("/"))+"/seatOccupancyExport.json");

    var starDate = $('');
    starDate.attr("type", "hidden");
    starDate.attr("name", "startDate");
    starDate.attr("value", $('#text_searchStartDate').val());

    var endDate = $('');
    endDate.attr("type", "hidden");
    endDate.attr("name", "endDate");
    endDate.attr("value", $('#text_searchEndDate').val());

    var routeParentIdList = $('');
    routeParentIdList.attr("type", "hidden");
    routeParentIdList.attr("name", "routeParentIdList");
    routeParentIdList.attr("value", $("#sel_route").val());

    var routeIdList = $('')
    routeIdList.attr("type", "hidden");
    routeIdList.attr("name", "routeIdList");
    routeIdList.attr("value", getMultiSelectedRouteTimes().routeTimesValues);

    $('body').append(form);
    form.append(starDate);
    form.append(endDate);
    form.append(routeParentIdList);
    form.append(routeIdList);

    form.submit();
    form.remove();
}

获取jquery元素自身html代码

 $(".test").prop("outerHTML")

替换字符串

'12123456'.replace(new RegExp('1'),'a')
"a2123456"

替换全部

'12123456'.replace(new RegExp('1','g'),'a')
"a2a23456"

div高度随着浏览器改变而改变

window.onresize = function () {
    $('#div_map').css('height', (document.body.clientHeight) + 'px');
}

JS集合 过滤符合条件的数据

colors = colors.filter(function(item) {
    return item != "red"
});
返回所有非red内容集合

Vue 点击事件中，获取当前控件

@change="checkChange($event)"

checkChange: function(e){ e.target}

image.png