jquery项目中一些常用方法

易管家 提交于 2019-12-03 09:52:47

1、获取url中的参数

function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数以及解析中文乱码问题
    if (r != null) return decodeURI(r[2]); return null; //返回参数值
}

调用:getUrlParam(参数名称)    注意:参数名称是一个字符串

2、封装ajax加移动端当数据没出现出现加载图标

//封装ajax请求、
function ajax_datatypeByXml(type, url, Xml_data, func) {//data数据可以为空  
    $.ajax({
        type: type,
        url: url,
        async: false,
        dataType: "json",
        timeout: 30000, //超时时间:30秒
        data: Xml_data,
        beforeSend: function () {
            mui.showLoading("正在加载..", "div"); //加载文字和类型,plus环境中类型为div时强制以div方式显示
        },
        complete: function () {
            mui.hideLoading(function () {
            });//隐藏后的回调函数
        },
        success: function (data) {
            if (data) {
                func(data);
            } else {
                mui.alert("数据加载失败");
            }
             
        },
        error: function() {
            mui.alert('服务器连接超时,请稍后再试');
            }
    });
}
//扩展mui.showLoading
(function ($, window) {
    //显示加载框
    $.showLoading = function (message, type) {
        if ($.os.plus && type !== 'div') {
            $.plusReady(function () {
                plus.nativeUI.showWaiting(message);
            });
        } else {
            var html = '';
            html += '<i class="mui-spinner mui-spinner-white"></i>';
            html += '<p class="text">' + (message || "数据加载中") + '</p>';

            //遮罩层
            var mask = document.getElementsByClassName("mui-show-loading-mask");
            if (mask.length == 0) {
                mask = document.createElement('div');
                mask.classList.add("mui-show-loading-mask");
                document.body.appendChild(mask);
                mask.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });
            } else {
                mask[0].classList.remove("mui-show-loading-mask-hidden");
            }
            //加载框
            var toast = document.getElementsByClassName("mui-show-loading");
            if (toast.length == 0) {
                toast = document.createElement('div');
                toast.classList.add("mui-show-loading");
                toast.classList.add('loading-visible');
                document.body.appendChild(toast);
                toast.innerHTML = html;
                toast.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });
            } else {
                toast[0].innerHTML = html;
                toast[0].classList.add("loading-visible");
            }
        }
    };

    //隐藏加载框
    $.hideLoading = function (callback) {
        if ($.os.plus) {
            $.plusReady(function () {
                plus.nativeUI.closeWaiting();
            });
        }
        var mask = document.getElementsByClassName("mui-show-loading-mask");
        var toast = document.getElementsByClassName("mui-show-loading");
        if (mask.length > 0) {
            mask[0].classList.add("mui-show-loading-mask-hidden");
        }
        if (toast.length > 0) {
            toast[0].classList.remove("loading-visible");
            callback && callback();
        }
    }
})(mui, window);

3、初始化移动端根节点字体大小用作rem值

window.addEventListener("resize", setSize, false);
window.addEventListener("orientationchange", setSize, false);
function setSize() {
    var oHtml = document.getElementsByTagName("html")[0];
    var iWidth = oHtml.getBoundingClientRect().width;
    $("html").css("fontSize", iWidth / 15)
}

4、根据年月获得当月天数的实现代码

function getDaysInMonth(year, month) {
    month = parseInt(month, 10);
    var temp = new Date(year, month, 0);
    return temp.getDate();
}

5、屏蔽打印console

console.log=function(){}

6、当动态生成li时点击事件有时可能会触发两次解决办法

$('body').off('click').on('click','selector',function(){});

使用之前要清理掉body上绑定的click事件,利用了jQuery里面off()方法

7、选择input框的选中状态操作

<div class="desc">
   <input type="checkbox" id="selectAll" onclick="checkAll()">全选
</div>
<script>
  function checkAll()
{
var checkedOfAll=$("#selectAll").prop("checked");
$("input[name='procheck']").prop("checked", checkedOfAll);
alert(checkedOfAll);
}
</script>

8、鼠标移入移出事件并在移入时操作

  $(".contactus-wrap").mouseover( function () {
                   clearTimeout(time);
                    $(".contactus").css({
                        "opacity": 1,
                        "left":"12px"
                    })
                });
            $(".contactus-wrap").mouseout(
                function () {
                    time = setTimeout(function () {
                        $(".contactus").css({
                            "opacity": 0,
                            "left": "-206px"
                        })
                    }, 500)
                });
            $(".contactus").mouseover(function () {
                clearTimeout(time); $(".contactus").css({
                    "opacity": 1,
                    "left": "12px"
                })
            });
            $(".contactus").mouseout(function () {
                time = setTimeout(function () {
                    $(".contactus").css({
                        "opacity": 0,
                        "left": "-206px"
                    })
                }, 500);
            });

 9、jquery中获取父级iframe中的dom元素

$(parent.window.document).find("iframe").contents().find("#F_HTNO");

原文:https://www.cnblogs.com/zhouxiaobai/p/9235362.html

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!