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():用匹配元素替换成指定元素