jquery属性及方法

页面中先导入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等方法


你可能感兴趣的:(jquery属性及方法)