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();

}