页面中先导入jquery.js,再倒入自己的js文件:
<script type="text/javascript" src="jslib/jquery.js"></script>
<SCRIPT type="text/javascript" src="jslib/verify.js"></SCRIPT>
淡入淡出:
$("p").fadeIn("slow"); 用600毫秒缓慢的将段落淡入
$("p").fadeOut("slow"); 用600毫秒缓慢的将段落淡出
$("p").fadeIn("fase",function(){ 用200毫秒快速将段落淡入,之后弹出一个对话框
alert("A");
})
$("p").fadeOut("fase",function(){ 用200毫秒快速将段落淡出,之后弹出一个对话框
alert("A");
})
attr("..."):返回元素的属性值
$("img").attr("src") <img标签中的src属性值
val(): 返回元素的value值
例:<input type="text" value="some text"/>
$("input").val() 获得<input标签的vaue值
text():返回由所有匹配元素包含起来的内容合集
例:
<p>
<b>Test</b> Paragraph.
</p>
<p>
Paraparagraph
</p>
$("p").text() 的内容为:TestParagraph.Paraparagraph
text("..."):将有所有元素包含的内容合集替换
例:
<p>Test Paragraph.</p>
$("p").text("<b>Some</b>") 的结果为:<p><b>Some</b></p>
html():区的第一个匹配元素的html内容(到底第一个指的是元素还是html内容 ?????????????????????????)
例:<div><p>Hello</p></div>
$("div").html();的结果是:<p>Hello</p>
html("..."):设置每一个匹配元素的html内容
例:<div></div>
$("div").html("<p>Hello Again</p>");的结果是:<div><p>Hello Again</p></div>
一、最最简单的jquery方法:
将静态内容载入到对象中
$('#ajax-div').load('data.html');
页面载入
$(document).ready(function(){...方法...})
二、简单的jquery方法。如:get、post
$.post(jsPath+'/business/facilities/addSort.do', {mallId : mallId},
function(data){
var tv = eval(data);
for(var i=0;i<tv.length;i++){
$("#sortId").append('<option value="'+tv[i].id+'">'+tv[i].name+'</option>');
$("#sortId").render();
}
});
三、稍微复杂点的jquery方法:
$.getJSON(jsPath+'/business/shop/adding1.do', {'areaId':obj.val()}, function(data){
if(data != null ){
if(data.length > 0){
var htmlData = "";
htmlData += "<option value=''>--请选择--</option>";
$.each(data, function(i, v){
htmlData += "<option value='" + v.id + "'>" + v.name + "</option>";
});
$("#mall_id").html(htmlData).render(); //页面渲染,可以忽略页面样式的影响而不能用jquery
}else{
$("#mall_id").html("<option value=''>--请选择--</option>").render();
}
}
});
四、更为复杂点的jquery方法:
$.ajax({
url : jsPath+"/business/facilities/add.do",
type : "POST",
dataType : "text",
data : {
name : $('#name').val(),
sortId : $('#sortId').val(),
mallId : $('#mallId').val(),
floor : $('#mallFloor').val(),
position : $('#posx').val()+','+$('#posy').val(),
status : $('#status_yes').attr('checked') == 'checked' ? 1 : 0
},
success : function(data, textStatus) {
var rs = jQuery.parseJSON(data);
top.Dialog.alert(rs.msg, function(){
if(rs.success == 'true'){
top.frmright.window.location.reload();
top.Dialog.close();
}
});
}
});
jquery上传图片的方法:
$.ajaxFileUpload({
url:jsPath+'/business/shop/upload_small.do',
secureuri:false,
fileElementId:'smallFile',
dataType: 'json',
data:{},
success: function (data,status){
if(data.mgs != null){
$("#valSmall").html(data.path).render();
$("#smallName").val(data.mgs).render();
$("#smallTruePath").val(data.path).render();
}else{
//$("#valSmall").html(data.error).render();
}
}
});
五、jquery其他方法:
getScript方法:可以载入js文件,减少页面第一次初始化时的代码
$.getScript('ajaxEvent.js'function(){
alert("");
})
ajaxStart方法:ajax请求处理时候开始执行
$("#bading").ajaxStart(function(){
$(this).show();
})
还有beforeSend、ajaxSuccess、ajaxError等方法