美文网首页
HTML/JQ/CSS

HTML/JQ/CSS

作者: 一颗北上广的心 | 来源:发表于2019-10-08 09:44 被阅读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

    相关文章

      网友评论

          本文标题:HTML/JQ/CSS

          本文链接:https://www.haomeiwen.com/subject/hofwdqtx.html