jquery工作常见问题

1.最简单的数据获取

     text() - 设置或返回所选元素的文本内容

     html() - 设置或返回所选元素的内容（包括 HTML 标记）

     val() - 设置或返回表单字段的值

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
   $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>

2.数据设置

　　$("#test").text(‘设置文字~’));

　　$("#test").html(‘设置文字~’));

　　$("#test").val(‘设置表单文字~’));

　　$("#test").attr("href","http://www.w3school.com.cn/jquery");/$("#img_litpic").attr('src',tmp.data.litpic);

　　*数据循环设置

 for(var i = 0 ; i<listdata.length  ;i++){
                     var tr = $("#tb tr").eq(1).clone();
                    tr.appendTo("#tb");
                    
                    $(".td_id").eq(i+1).html(listdata[i].id);
                    $(".txt_id").eq(i+1).val(listdata[i].id);

                    $(".txt_pic").eq(i+1).val(listdata[i].litpic);
                    $(".txt_pic").eq(i+1).attr('id','litpic_'+listdata[i].id);
                    
                    
                     $(".activeclass").eq(i+1).attr('id','activeid_'+listdata[i].id);
                     
                    $(".fpic").eq(i+1).attr('id','frmpic_'+listdata[i].id);
                    $(".upimg").eq(i+1).attr('lay-data',"{number:"+listdata[i].id+",ey_inputId:'"+"litpic_"+listdata[i].id+"',ey_savepath:'allimg'}");
                    
                    $(".img_pic").eq(i+1).attr("src",listdata[i].litpic);
                    $(".frm").eq(i+1).attr('id','formid'+listdata[i].id)
                    
                    $(".save").eq(i+1).attr("onclick","save('"+listdata[i].id+"')");
                    $(".del").eq(i+1).attr("onclick","del('"+listdata[i].id+"')");
                     $(".aclist").eq(i+1).attr("onclick","aclist('"+listdata[i].id+"')");
                    
                    
                    $(".status_id").eq(i+1).attr('id','status_id'+listdata[i].id)
                      
                    $(".txt_index").eq(i+1).val(listdata[i].index);
                    $(".txt_index").eq(i+1).attr("onblur","index("+listdata[i].id+","+(i+1)+")");
                    $(".txt_index").eq(i+1).attr("onkeyup","index("+listdata[i].id+","+(i+1)+")");
                    
                    $(".txt_myname").eq(i+1).val(listdata[i].myname);
                //首页显示
                   if(listdata[i].status === 0){
                        $(".txt_swich").eq(i+1).addClass("layui-form-offswitch");
                        $(".txt_swichtxt").eq(i+1).html("否");
                   }else{
                        $(".txt_swich").eq(i+1).addClass("layui-form-onswitch"); 
                        $(".txt_swichtxt").eq(i+1).html("是"); 
                   }
}

 

 

 

3.元素显示/隐藏

　　$("#test").hide();

　　$("#test").show();

4.调用接口

　　

 $.ajax({
                    type : 'post',
                    url : "/login.php?m=admin&c=Gift&a=upd&id="+getQueryVariable("id"),
                    data : data.field,
                    dataType : 'json',
                    success : function(res){
                      
                    },
                    error: function(e){
                        layer.close(load); //关闭loading
                    }
                });

 

5.获取上个页面跳转时传入的参数

function getQueryVariable(variable)
        {
               var query = window.location.search.substring(1);
               var vars = query.split("&");
               for (var i=0;i<vars.length;i++) {
                       var pair = vars[i].split("=");
                       if(pair[0] == variable){return pair[1];}
               }
               return(false);
        }
        console.log(getQueryVariable("id"))

6.页面初始调用数据

 $(document).ready(function(){
    $.post(" /login.php?m=admin&c=Gift&a=read&id="+getQueryVariable("id"),{},function(result){
                            $("#status_id"+id).removeClass("layui-form-onswitch");
               　　　　　　 $("#status_id"+id).addClass("layui-form-offswitch");
               　　　　　　 $("#status_idtext"+id).html("否");  
    })
})

7.表单提交监听

$(document).ready(function(){
  $("form").submit(function(e){
　　　　alert($('form').serialize());//打印提交数据
　　　　// 终止默认事件的传递
       event.preventDefault()
  });
});

 

posted @ 2020-09-09 17:28  微凉徒眸意  阅读(169)  评论(0)    收藏  举报