jQuery问题集锦

【1】阻止提交表单

方法1：

        $(function () {
            $("input[type=submit]").click(function (event) {
                //如果不满足表单提交的条件，阻止提交表单
                if () {
                    event.preventDefault();
                } else {
                    location.href = '跳转到成功提交表单后的页面';
                }
            });
        })

方法2：

　　在 form 表单中设置 action 属性，然后将 input 的类型 type = "submit" 改为 type = "button"，然后在提交表单时执行以下jq代码。

        $(function () {
            $("#submitButton").click(function (event) {
                //如果不满足表单提交条件，返回false
                if () {
                    return false;
                } else {
                    return true; //满足提交表单的条件则返回true
                }
            });
        })

【2】解决主流浏览器播放音乐的兼容性问题

　　添加以下 jQuery 代码就能在主流浏览器上正常播放音乐，不过 IE6、7、8 播放音乐是最好隐藏播放器界面（因为显示的播放器比较简陋），loop 属性表示是否循环播放，autoplay 属性表示是否自动播放。

<script type="text/javascript">
    var path = $('#music-path').attr('data-path');
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/msie ([\d.]+)/)) {
        //如果是IE(6,7,8)
        $('#__alert_sound').html('<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" style="display:none"><param name="AutoStart" value="1" /><param name="Src" value="'.concat(path).concat('" /></object>'));
    }
    else if (ua.match(/chrome\/([\d.]+)/) || ua.match(/version\/([\d.]+).*safari/)) {
        //如果是Chrome、Edge等主流浏览器
        $('#__alert_sound').html('<audio controls="controls" autoplay="autoplay" loop="loop"><source src="'.concat(path).concat('" type="audio/mpeg" /></audio>'));
    }
    else {
        $('#__alert_sound').html('<embed src="'.concat(path).concat('" hidden="hidden"/>'));
    }
</script>

【3】jQuery 获取屏幕高度、宽度

alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin 

// 获取页面的高度、宽度
function getPageSize() {
    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {
        xScroll = window.innerWidth + window.scrollMaxX;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else {
        if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
    }
    var windowWidth, windowHeight;
    if (self.innerHeight) { // all except Explorer
        if (document.documentElement.clientWidth) {
            windowWidth = document.documentElement.clientWidth;
        } else {
            windowWidth = self.innerWidth;
        }
        windowHeight = self.innerHeight;
    } else {
        if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else {
            if (document.body) { // other Explorers
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }
        }
    }

    var pageHeight, pageWidth;
    // for small pages with total height less then height of the viewport
    if (yScroll < windowHeight) {
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }
    // for small pages with total width less then width of the viewport
    if (xScroll < windowWidth) {
        pageWidth = xScroll;
    } else {
        pageWidth = windowWidth;
    }
    var arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
    return arrayPageSize;
}

// 滚动条
document.body.scrollTop;
$(document).scrollTop();

当改变窗口或屏幕大小时触发事件

jQuery：

$(window).resize(function(){
   //process here
});

javascript：

window.onresize = function(){　
   //process here
}

【4】jquery判断元素是否隐藏的多种方法

第一种：使用CSS属性

var display =$('#id').css('display');

if(display == 'none'){

   alert("被你发现了，我是隐藏的啦！");

}

第二种：使用jquery内置选择器

第一种写法：

if(node.is(':hidden')){　　//如果node是隐藏的则显示node元素，否则隐藏

　　node.show();　

}else{

　　node.hide();

}

第二种写法：

if(node.is(':visible')){　　//如果node是显示的则隐藏node元素，否则显示

　　node.hide();

}else{

　　node.show();

}