jQuery篇之常用函数
2019-10-23 本文已影响0人
平安喜乐698
目录
1. 获取 浏览器的名称、版本 , 是否属于W3C盒子模型
2. 检测对象是否为空 , 是否为原始对象
3. 检测两个节点的包含关系
4. 删除字符串中左右两边的空格符
5. 使对象或数组按照key/value格式进行序列化编码
- 获取 浏览器的名称、版本 , 是否属于W3C盒子模型
$.browser （获取浏览器的名称、版本等）
浏览器版本号
$.browser.version
浏览器的名称
$.browser.chrome 为true，则为谷歌
$.browser.mozilla 为true，则为火狐
例
<!DOCTYPE html>
<html>
<head>
<title>获取浏览器名称和版本号</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">获取浏览器名称和版本号</span>
</div>
<div class="content"></div>
</div>
<script type="text/javascript">
$(function () {
var strTmp = "您的浏览器名称是：";
if ($.browser.chrome) { //谷歌浏览器
strTmp += "Chrome";
}
if ($.browser.mozilla) { //火狐相关浏览器
strTmp += "Mozilla FireFox";
}
strTmp += "<br /><br /> 版本号是：" //获取版本号
+$.browser.version;
$(".content").html(strTmp);
});
</script>
</body>
</html>
$.support.boxModel （检测浏览器是否属于W3C盒子模型）
浏览器的盒子模型分为两类，一类为标准的w3c盒子模型，另一类为IE盒子模型，两者区别为在Width和Height这两个属性值中是否包含padding和border的值。
w3c盒子模型不包含，IE盒子模型则包含。
$.support.boxModel 为true，则为w3c盒子模型
例
<html>
<head>
<title>检测是否是盒子模型</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">检测是否是盒子模型</span>
</div>
<div class="content"></div>
</div>
<script type="text/javascript">
$(function () {
var strTmp = "您打开的页面是：";
if ($.support.boxModel) { //是W3C盒子模型
strTmp += "W3C盒子模型";
}
else { //是IE盒子模型
strTmp += "IE盒子模型";
}
$(".content").html(strTmp);
});
</script>
</body>
</html>
- 检测对象是否为空 , 是否为原始对象
$.isEmptyObject(obj) （检测对象是否为空）
$.isEmptyObject(obj) 对象为空则为true
例
<html>
<head>
<title>检测对象是否为空</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">检测对象是否为空</span>
</div>
<div class="content"></div>
</div>
<script type="text/javascript">
$(function () {
var obj = { "姓名": "土豪一族" };
var strTmp = "您定义了一个：";
if ($.isEmptyObject(obj)) { //检测是否为空
strTmp += "空对象";
}
else {
strTmp += "非空对象";
}
$(".content").html(strTmp);
});
</script>
</body>
</html>
$.isPlainObject (obj) (检测对象是否为原始对象)
$.isPlainObject (obj) 为true,则是通过{}或new Object()关键字创建的原始对象
例
<html>
<head>
<title>检测对象是否为原始对象</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">检测对象是否为原始对象</span>
</div>
<div class="content"></div>
</div>
<script type="text/javascript">
$(function () {
var obj = "null";
var strTmp = "您定义了一个：";
if ($.isPlainObject (obj)) { //检测是否为原始对象
strTmp += "原始对象";
}
else {
strTmp += "非原始对象";
}
$(".content").html(strTmp);
});
</script>
</body>
</html>
- $.contains (container, contained) (检测两个节点的包含关系)
$.contains (container, contained) 为true则包含
例
<!DOCTYPE html>
<html>
<head>
<title>检测两个节点的包含关系</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">检测两个节点的包含关系</span>
</div>
<div class="content"></div>
</div>
<script type="text/javascript">
$(function () {
var node_a = document.body.firstChild;
var node_b = document.body;
var strTmp = "对象node_a";
if ($.contains (node_b, node_a)) { //检测是否包含节点
strTmp += " 包含 ";
}
else {
strTmp += " 不包含 ";
}
strTmp += "对象node_b";
$(".content").html(strTmp);
});
</script>
</body>
</html>
- $.trim (str) (删除字符串中左右两边的空格符)
$.trim (str)
能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格
<!DOCTYPE html>
<html>
<head>
<title>字符串操作函数</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">字符串操作函数</span>
<span class="fr">
<input id="btnShow" name="btnShow" type="button" value="计算" />
</span>
</div>
<div class="content">
<input id="txtName" name="txtName" type="text" />
<div class="tip"></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
$(".tip").html("");
var strTmp = "内容：";
var strOld = $("#txtName").val();
var strNew =$.trim(strOld);
strTmp += strOld;
strTmp += "<br/><br>除掉空格符前的长度："
strTmp += strOld.length;
strTmp += "<br/><br>除掉空格符后的长度："
strTmp += strNew.length;
$(".tip").show().append(strTmp);
});
});
</script>
</body>
</html>
- $.param (obj) （使对象或数组按照key/value格式进行序列化编码）
$.param (obj)
能使对象或数组按照key/value格式进行序列化编码，用于向服务端发送URL请求
.serialize仅能用于form提交的数据转换
例
<!DOCTYPE html>
<html>
<head>
<title>URL操作函数</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">URL操作函数</span>
</div>
<div class="content">
<div class="tip"></div>
</div>
</div>
<script type="text/javascript">
$(function () {
//基本信息对象
var objInfo = new Object();
objInfo.name = "白富美";
objInfo.sex = 1;
//序列化对象
var objNewInfo =$.param (objInfo);
//显示序列化后的对象
var strTmp = "<b>对象 白富美 序列化后</b>：<br/><br/>";
strTmp += objNewInfo;
//显示在页面中
$(".tip").show().append(strTmp);
});
</script>
</body>
</html>
