jquery知识点2
jQuery 实现Ajax应用
使用load()方法异步请求数据
load(url,[data],[callback])
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最爱吃的水果</span>
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$("ul")
.html("<img src='Images/Loading.gif' alt=''/>")
.load("http://www.imooc.com/data/fruit_part.html",function() {
$this.attr("disabled", "true");
});
})
});
</script>
</body>
使用getJSON()方法异步加载JSON格式数据
getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数
<div id="divtest">
<div class="title">
<span class="fl">我最喜欢的一项运动</span>
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
})
});
</script>
使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜欢的运动</span>
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getScript("http://www.imooc.com/data/sport_f.js",function(){
$this.attr("disabled", "true");
});
})
});
</script>
</body>
使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，
$.get(url,[callback])
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.get("http://www.imooc.com/data/info_f.php",function(data){
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>男朋友对我说：" + data.say + "</li>");
}, "json");
})
});
</script>
与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面
$.post(url,[data],[callback])
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.post("http://www.imooc.com/data/check_f.php",{
num:$("#txtNumber").val()
},
function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
});
})
});
</script>
使用serialize()方法序列化表单元素值
$(selector).serialize()
<body>
<div id="divtest">
<div class="title">
<span class="fl">我的个人资料</span>
<span class="fr">
<input id="btnAction" type="button" value="序列化" />
</span>
</div>
<form action="">
<ul>
<li>姓名：<input name="Text1" type="text" size="12" /></li>
<li>
<select name="Select1">
<option value="0">男</option>
<option value="1">女</option>
</select>
</li>
<li><input name="Checkbox1" type="checkbox" />资料是否可见 </li>
<li id="litest"></li>
</ul>
</form>
</div>
<script type="text/javascript">
$(function () {
$("#btnAction").bind("click", function () {
$("#litest").html($("form").serialize());
})
})
</script>
</body>
使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值
jQuery.ajax([settings])或$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。
不会
？？？？？？？？
jquery常用插件
表单验证插件——validate
该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，
$(form).validate({options})
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表单验证插件</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script>
<script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>
</head>
<body>
<form id="frmV" method="get" action="#">
<div id="divtest">
<div class="title">
<span class="fl">表单验证插件</span>
<span class="fr">
<input id="btnSubmit" type="submit" value="提交" />
</span>
</div>
<div class="content">
<span class="fl">邮箱：</span><br />
<input id="email" name="email" type="text" /><br />
<span class="tip"></span>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
$("#frmV").validate(
{
/*自定义验证规则*/
rules: {
email: {
required:true,
email:true
}
},
/*错误提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
});
</script>
</body>
</html>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color: blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
#divtest .content
{
padding: 8px 0px;
background-color: #fff;
font-size: 13px;
}
#divtest .content .tip
{
color: Red;
font-size: 12px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据
$(form). ajaxForm ({options})
其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。
<body>
<form id="frmV" method="post" action="#">
<div id="divtest">
<div class="title">
<span class="fl">个人信息页</span>
<span class="fr">
<input id="btnSubmit" type="submit" value="提交" />
</span>
</div>
<div class="content">
<span class="fl">用户名：</span><br />
<input id="user" name="user" type="text" /><br />
<span class="fl">昵称：</span><br />
<input id="nick" name="nick" type="text" />
<div class="tip"></div>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
var options = {
url: "http://www.imooc.com/data/form_f.php",
target: ".tip"
}
$("#frmV").ajaxForm(options);
});
</script>
</body>
图片灯箱插件——lightBox
<script type="text/javascript">
$(function () {
$('.divPics').lightbox({
overlayBgColor: "#666", //图片浏览时的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //图片切换时的速度
})
});
</script>
图片放大镜插件——jqzoom
在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果
$(linkimage).jqzoom({options})
其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。
<body>
<div id="divtest">
<div class="title">
<span class="fl">图片放大镜</span>
</div>
<div class="content">
<a href="http://img.mukewang.com/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖">
<img src="http://img.mukewang.com/52e4aee700012df702130212.jpg" alt=""/>
</a>
</div>
</div>
<script type="text/javascript">
$(function () {
$("jqzoom").jqzoom({
zoomWidth: 123, //小图片所选区域的宽
zoomHeight: 123, //小图片所选区域的高
zoomType: 'reverse' //设置放大镜的类型
});
});
</script>
</body>
cookie插件——cookie
使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录
保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)
其中参数key为保存cookie对象的名称，value为名称对应的cookie值。
搜索插件——autocomplete
搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，
$(textbox).autocomplete(urlData,[options]);
右键菜单插件——contextmenu
右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，
$(selector).contextMenu(menuId,{options});
自定义对象级插件——lifocuscolor插件
自定义的lifocuscolor插件可以在<ul>元素中，鼠标在表项<li>元素移动时，自定义其获取焦点时的背景色，即定义<li>元素选中时的背景色
$(Id).focusColor(color)
自定义类级别插件—— twoaddresult
通过调用自定义插件twoaddresult中的不同方法，可以实现对两个数值进行相加和相减的运算，导入插件后，调用格式分别为：
$.addNum(p1,p2) 和 $.subNum(p1,p2)
上述调用格式分别为计算两数值相加和相减的结果，p1和p2为任意数值。
jquery ui型插件
拖曳插件——draggable
放置插件——droppable
拖曳排序插件——sortable
面板折叠插件——accordion
选项卡插件——tabs
对话框插件——dialog
菜单工具插件——menu
微调按钮插件——spinner
工具提示插件——tooltip
jquery工具类函数
获取浏览器的名称与版本信息
在jQuery中，通过$.browser对象可以获取浏览器的名称和版本信息，如$.browser.chrome为true，表示当前为Chrome浏览器，$.browser.mozilla为true，表示当前为火狐浏览器，还可以通过$.browser.version方式获取浏览器版本信息。
<!DOCTYPE html>
<html>
<head>
<title>获取浏览器名称和版本号</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://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>
检测浏览器是否属于W3C盒子模型
浏览器的盒子模型分为两类，一类为标准的w3c盒子模型，另一类为IE盒子模型，两者区别为在Width和Height这两个属性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型则包含，而在jQuery 中，可以通过$.support.boxModel对象返回的值，检测浏览器是否属于标准的w3c盒子模型
<script type="text/javascript">
$(function () {
var strTmp = "您打开的页面是：";
if ($.support.boxMode) { //是W3C盒子模型
strTmp += "W3C盒子模型";
}
else { //是IE盒子模型
strTmp += "IE盒子模型";
}
$(".content").html(strTmp);
});
</script>
检测对象是否为空
$.isEmptyObject(obj);
检测对象是否为原始对象
$.isPlainObject (obj);
检测两个节点的包含关系
$.contains (container, contained);
字符串操作函数
调用名为$.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格，调用格式为：
$.trim (str);
URL操作函数
调用名为$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求，调用格式为：
$. param (obj);
使用$.extend()扩展工具函数
调用名为$. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件，调用格式为：
$. extend ({options});
使用$.extend()扩展Object对象
除使用$.extend扩展工具函数外，还可以扩展原有的Object对象，在扩展对象时，两个对象将进行合并，当存在相同属性名时，后者将覆盖前者，调用格式为：
$. extend (obj1,obj2,…objN);
浙公网安备 33010602011771号