jquery属性及方法

来源：互联网发布：一对一教学软件编辑：程序博客网时间：2024/05/22 14:30

页面中先导入jquery.js，再倒入自己的js文件:

淡入淡出：

$("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等方法