HTML/JQ/CSS
2019-10-08 本文已影响0人
一颗北上广的心
- 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>');
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 = $('<input>');
starDate.attr("type", "hidden");
starDate.attr("name", "startDate");
starDate.attr("value", $('#text_searchStartDate').val());
var endDate = $('<input>');
endDate.attr("type", "hidden");
endDate.attr("name", "endDate");
endDate.attr("value", $('#text_searchEndDate').val());
var routeParentIdList = $('<input>');
routeParentIdList.attr("type", "hidden");
routeParentIdList.attr("name", "routeParentIdList");
routeParentIdList.attr("value", $("#sel_route").val());
var routeIdList = $('<input>')
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