jquery小结jquery
<script type="text/javascript">
$(document).ready(function()
{
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
}
)
</script>
js
<script language="javascript">
function screenInfo(){
var s = "";
s += "rn网页可见区域宽："+ document.body.clientWidth;
s += "rn网页可见区域高："+ document.body.clientHeight;
s += "rn网页可见区域宽："+ document.body.offsetWidth +" (包括边线的宽)";
s += "rn网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "rn网页正文全文宽："+ document.body.scrollWidth;
s += "rn网页正文全文高："+ document.body.scrollHeight;
s += "rn网页被卷去的高："+ document.body.scrollTop;
s += "rn网页被卷去的左："+ document.body.scrollLeft;
s += "rn网页正文部分上："+ window.screenTop;
s += "rn网页正文部分左："+ window.screenLeft;
s += "rn屏幕分辨率的高："+ window.screen.height;
s += "rn屏幕分辨率的宽："+ window.screen.width;
s += "rn屏幕可用工作区高度："+ window.screen.availHeight;
s += "rn屏幕可用工作区宽度："+ window.screen.availWidth;
alert(s);
}
</script>
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
实例
//js获取当前窗口的宽度高度。获取窗口尺寸
WE.getWndSize = function() {
var w = 0, h = 0;
if (window.innerWidth && window.innerHeight) {
w = window.innerWidth;
h = window.innerHeight;
} else if (document.documentElement) {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
} else if (document.body.clientWidth && document.body.clientHeight) {
w = document.body.clientWidth;
h = document.body.clientHeight;
}
return { width: w, height: h };
}
var isMobile=/^(?:13\d|15\d)\d{5}(\d{3}|\*{3})$/;
var isPhone=/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
if(！isMobile.test(需要验证的值) && !isPhone.test(需要验证的值)){
alert("请正确填写电话号码，例如:13415764179或0321-4816048");
return false;
}
jquery 失去焦点事件
$('#txtname').live("blur", function() {
if ($('#txtname').val() == "") {
alert('请输入姓名！');
$('#txtname').focus();
return;
}
});
juqery 验证日期
function date(str) {
//验证时间格式
var reg = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/;
if (reg.test(str)) {
alert("成功");
}
else
{ alert("失败"); }
}
只能输入汉字：^[\u4e00-\u9fa5]{0,}$
不能输入汉字：^[^\u4e00-\u9fa5]{0,}$
//验证
$("#txt_Tel").keypress(function(event) {
if (event.keyCode < 48 || event.keyCode > 57) {
alert("请输入数字!"); event.preventDefault();
}
});
//姓名只能输入汉字
$('#txt_Name').keypress(function(event) {
var txtname = /^[\u4e00-\u9fa5]$/;
if (!txtname.test($('#txt_Name').val())) {
alert('请输入汉字');
event.preventDefault();
}
});
//Email不能输入汉字
$('#txt_Email').keypress(function(event) {
var txtemail = /^[^\u4e00-\u9fa5]{0,}$/;
if (!txtemail.test($('#txt_Email').val())) {
alert('请输入正确邮箱');
//取消事件的默认操作
event.preventDefault();
}
});
//QQ只能输入数字
$("#txt_QQ").keypress(function(event) {
if (event.keyCode < 48 || event.keyCode > 57) {
alert("请输入数字!"); event.preventDefault();
}
});
function request(paras) {
var url = location.href;
var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
var paraObj = {}
for (i = 0; j = paraString[i]; i++) {
paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
}
var returnValue = paraObj[paras.toLowerCase()];
if (typeof (returnValue) == "undefined") {
return "";
} else {
return returnValue;
}
}
//引用
alert(request("参数名"));
$.browser.['浏览器关键字']
$(function() {
if($.browser.msie) {
alert("this is msie");
}
else if($.browser.safari)
{
alert("this is safari!");
}
else if($.browser.mozilla)
{
alert("this is mozilla!");
}
else if($.browser.opera) {
alert("this is opera");
}
else {
alert("i don't konw!");
}
我们看下jQuery的源码:
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
jQuery 使用的是通过正则来匹配userAgent判断浏览器的种类和版本.
如果我们要来判断当前浏览器是否是IE6应该如何来判断？
$.browser.msie&&($.browser.version == "6.0")&&!$.support.style
同样jQuery判断浏览器是否为IE7
$.browser.msie&&($.browser.version == "7.0")
如果不考虑向后兼容性，又不想为了判断各浏览器类型而导入jQuery
判断IE最简单的方法是
if(document.all){
alert("IE6")
}
$.browser是通过正则表达式来匹配userAgent来判断浏览器版本和种类的.jquery1.3.2版本的文档中已经声明jquery.browser及jquery.browser.version建议弃用，可以使用jquery.support来代替
但是目前的情况来看,jquery.support并不好用,而且是非常的难用,我们还是老老实实的用$.browser来判断浏览器类型吧
如果是为了判断IE的版本我还是推荐用IE的条件表达式来书写JS
<!--[if IE]>
<script type="text/javascript">
alert("ie")
</script>
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript">
alert("ie6")
</script>
<![endif]-->
<!--[if IE 7]>
<script type="text/javascript">
alert("ie7")
</script>
<![endif]-->
这个比我们手动通过$.browser来判断IE版本更精准,也不用去记jquery的browser的使用方法了
我要评论