hi

又是二日尚未做事情,后悔什么的只可以带来更加多的后悔吧,好好干活,忘了二日前协调作出来的偏执性精神障碍

1、jQuery

—–jQuery与AJAX—–(PS:ajax是怎么着请自行百度,或者看自己事先的博客,千万不要以为是阿贾克斯球队就好)

—-使用load()方法异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据,并把重回的数额放置到指定的元素中,它的调用格式为:

load(url,[data],[callback])

参数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>

瞩目,用load()其中元素对空格敏感,比如url先导结尾不要有空格,比如function()后边不要有空格

—-使用getJSON()方法异步加载JSON格式数据

使用getJSON()主意可以经过Ajax异步请求的办法,获取服务器中的数组,并对得到的数额举办剖析,显示在页面中,它的调用格式为:

jQuery.getJSON(url,[data],[callback])$.getJSON(url,[data],[callback])

其中,url参数为呼吁加载json格式文件的服务器地址,可选项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);
$.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>
</body>

—-使用getScript()方法异步加载并实施js文件

使用getScript()办法异步请求并履行服务器中的JavaScript格式的文本,它的调用格式如下所示:

jQuery.getScript(url,[callback])$.getScript(url,[callback])

参数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()主意时,选择GET方式向服务器请求数据,并因而艺术中回调函数的参数再次回到请求的多寡,它的调用格式如下:

$.get(url,[callback])

参数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);
$.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>
</body>

—-使用post()方法以POST格局从服务器发送数据

get()方式比较,post()办法多用来以POST形式向服务器发送数据,服务器收到到多少将来,举行处理,并将处理结果重临页面,调用格式如下:

$.post(url,[data],[callback])

参数url为服务器请求地址,可选项data为向服务器请求时发送的多寡,可选项callback参数为呼吁成功后进行的回调函数。

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>检测数字是或不是大于0</span>
<span class=”fr”><input id=”btnCheck” type=”button”
value=”检测” /></span>
</div>
<ul>
<li>请求输入一个数字 <input id=”txtNumber” type=”text”
size=”12″ /></li>
</ul>
</div>

<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>
    </body>

此地的val()是获取此前的selector的值,jQuery的函数

—-使用serialize()方法种类化表单元素值

使用serialize()措施可以将表单中有name属性的要素值举办系列化,生成标准URL编码文本字符串,直接可用以ajax请求,它的调用格式如下:

$(selector).serialize()

中间selector参数是一个或多少个表单中的元素或表单元素本身。

<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()方法加载服务器数据

使用ajax()主意是最尾部、作用最强劲的请求服务器数据的方式,它不但可以收获服务器重回的数目,还是可以向服务器发送请求并传递数值,它的调用格式如下:

jQuery.ajax([settings])$.ajax([settings])

个中参数settings为发送ajax请求时的配备对象,在该对象中,url代表服务器请求的路线,data为呼吁时传递的数码,dataType为服务器返回的数据类型,success为呼吁成功的执行的回调函数,type为发送数据请求的形式,默许为get。

 

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>检测数字的奇偶性</span>
<span class=”fr”>
<input id=”btnCheck” type=”button” value=”检测” />
</span>
</div>
<ul>
<li>请求输入一个数字
<input id=”txtNumber” type=”text” size=”12″ />
</li>
</ul>
</div>

<script type=”text/javascript”>
$(function () {
$(“#btnCheck”).bind(“click”, function () {
$.ajax({
url:”http://www.imooc.com/data/check.php“,
data: { num: $(“#txtNumber”).val() },
type:”post”,
success: function (data) {
$(“ul”).append(“<li>你输入的<b> ”

  • $(“#txtNumber”).val() + ” </b>是<b> ”
  • data + ” </b></li>”);
    }
    });
    })
    });
    </script>
    </body>

—-使用ajaxSetup()方法设置全局Ajax默许选项

使用ajaxSetup()格局可以安装Ajax请求的有的大局性选项值,设置完结后,前面的Ajax请求将不必要再添加这一个选项值,它的调用格式为:

jQuery.ajaxSetup([options])$.ajaxSetup([options])

可选项options参数为一个对象,通过该目标设置Ajax请求时的全局选项值。

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>奇偶性和是不是大于0</span>
<span class=”fr”>
<input id=”btnShow_1″ type=”button” value=”验证1″ />
<input id=”btnShow_2″ type=”button” value=”验证2″ />
</span>
</div>
<ul>
<li>请求输入一个数字
<input id=”txtNumber” type=”text” size=”12″ />
</li>
</ul>
</div>

<script type=”text/javascript”>
$(function () {
$.ajaxSetup({
url:”http://www.imooc.com/data/check.php“,
data: { num: $(“#txtNumber”).val() },
type:”post”,
success:function(data){$(“ul”).append(“<li>你输入的<b> ”

  • $(“#txtNumber”).val() + ” </b>是<b> ”
  • data + ” </b></li>”);
    }
    });
    $(“#btnShow_1”).bind(“click”, function () {
    $.ajax({
    data: { num: $(“#txtNumber”).val() },
    url: “http://www.imooc.com/data/check.php
    });
    })
    $(“#btnShow_2”).bind(“click”, function () {
    $.ajax({
    data: { num: $(“#txtNumber”).val() },
    url: “http://www.imooc.com/data/check\_f.php
    });
    })
    });
    </script>
    </body>

—-使用ajaxStart()和ajaxStop()方法

ajaxStart()ajaxStop()艺术是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完结后触发函数。它们的调用格式为:

$(selector).ajaxStart(function())$(selector).ajaxStop(function())

里头,五个办法中括号都是绑定的函数,当发送Ajax请求前举行ajaxStart()主意绑定的函数,请求成功后,执行ajaxStop
()方法绑定的函数。

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>加载一段文字</span>
<span class=”fr”>
<input id=”btnShow” type=”button” value=”加载” />
</span>
</div>
<ul>
<li id=”divload”></li>
</ul>
</div>

<script type=”text/javascript”>
$(function () {
$(“#divtest”).ajaxStart(function(){
$(this).html(“正在呼吁数据…”);
});
$(“#divtest”).ajaxStop(function(){
$(this).html(“数据请求完结!”);
});
$(“#btnShow”).bind(“click”, function () {
var $this = $(this);
$.ajax({
url: “http://www.imooc.com/data/info\_f.php“,
dataType: “json”,
success: function (data) {
$this.attr(“disabled”, “true”);
$(“ul”).append(“<li>我的名字叫:” + data.name + “</li>”);
$(“ul”).append(“<li>男朋友对本人说:” + data.say + “</li>”);
}
});
})
});
</script>
</body>

—–jQuery常用插件—–

 —-表单验证插件——validate

该插件自带包蕴必填、数字、URL在内容的求证规则,即时突显极度新闻,其余,还允许自定义表明规则,插件调用方法如下:

$(form).validate({options})

里头form参数表示表单元素名称,options参数表示调用方法时的配备对象,所有的认证规则和丰裕信息体现的职位都在该对象中举行安装。

 

<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>

 

 

 

相关文章

网站地图xml地图