jQuer __Ajax DOM

链接：在线jQueryhttp://www.bootcdn.cn

 

一、each（遍历）

 

 $("ul li").each(function(index,value){
           alert(index+":"+$("value").html());
 })             
 
      
 
  $.each($("ul li"),function(index,value){
          alert(index + ":"+$(value).html());
  })

二、Ajax

 

一、load()
 
        1.获取信息（只关心内容，不限制格式）        
         $("#btn").click(function(){
             $("#box").load("abc.txt");    //url 必写
         })
 
        2.获取其他页面的内容及样式                       
         $("#btn").click(function(){
             $("#box").load("info.html",function(){
                  $(".zzl").click(function(){
                      alert($(this).html())
                  })
             })
         })
 
二、$ajax    ---- 获取php
           
         $("#btn").click(function(){
              $.ajax({
                  type:"get",
                  url:"demo.php",
                  async:true,
                  data:"user=狗子&pwd=123",
                  success:function(data){
                       alert(data);
                  },
                  dataType:"html"
              });
         })

三、GET

1.获取页面                                                    
           
         $("#btn").click(function(){
             $.get("memo.html",function(responese){
                  $("#box").html(responese);
             })
         })                  //获取页面中的内容
 
2.获取php                                                          
         
         $("#btn").click(function(){
             $.get("demo.php?name=张志林&pwd=zzl123",function(responese){
                  alert(responese);
                  $("#box").html(responese);
             })
         })                  //PHP所有内容
 
3.map格式                                                           
        
       $("#btn").click(function(){
             $.get("demo.php",{
                  name:"张志林",
                  pwd:"zzl123"
             },function(response){
                  alert(response);
                  $("#box").html(response)
             })
          })                   //PHP所有内容
 
4.string                                                          
         $("#btn").click(function(){
             $.get("demo.php","name=张志林&pwd=zzl123",function(response){
                  alert(response);     //php所有内容
                  $("#box").html(response);
             })
         })
 
5.访问xml文件                                               
          $("#btn").click(function(){
             $.get("demo.xml",function(responese){
                  alert(responese);     //[object XMLDocument]
                  var data =$(responese).find("root").find("user").html();
                 alert(typeof data);      //string
                  var arr = data.split(":");
                  alert(arr[0]+"----"+arr[1])   //获得下标0-1中间的内容
             })
         })

四、get json

 

     $("#btn").click(function(){
         $.get("demo.json",function(response){
              //alert(response)          //json 所有内容
              $("#box").append($("<h2>"+response[0].user+":"+response[0].pwd+"</h2>"))        //json内容部分
         })
     })  

状态码

      

 

 

DOM

 

（一）、创建元素节点:$(html):创建节点  【例 $(“<div title = ‘盒子’>dom</div>”)】

（二）、创建文本

　　var $div = $(“<div>是DOM</div>”)
　　  $(“body”).append($div)          

（三）、设置属性

   var $div = $("<div title=‘div盒子’>我是DOM</div>")
              $("body").append($div); 

（四）、插入

            --A--内部插入（子集）

                     1）.  append():向元素内部增加内容（末尾）

                    2）.   appendTo()  : 将要增加的内容增加到元素中

                    3）.   prepend():向元素内部增加内容（前置）

                    4）.   prependTo() : 将要增加的内容增加到元素中

           

            --B--外部插入（同级）

                   

                     1）.  after():在元素后面插入内容

 

                     2）.  insertAfter(): 将内容插入元素后面

                     

                     3）.  before():在元素前面插入内容

 

                     4）.  insertBefore() : 将内容插入元素前面

 

（五）、删除

                remove():删除匹配元素（彻底删除）

                empty():清空子节点内容

                

（六）、克隆 ----->创建指定节点的副本

                clone() 

                true:表示复制属性、样式和事件

                

（七）、替换

                

               1. replaceWith():将指定元素替换成匹配元素

                

               2. replaceAll():用匹配元素替换成指定元素