jQuery 添加和刪除HTML元素

節我們學習如何使用 jQuery 中的方法來添加和刪除 HTML 元素。

jQuery 中用于添加 HTML 元素的方法有如下幾種：

方法	描述
append()	在所選元素的末尾插入內容
prepend()	在選定元素的開頭插入內容
after()	在選定元素后插入內容
before()	在選定元素之前插入內容

而用于刪除元素的方法有：

方法	描述
remove()	刪除被選元素容，包括子元素
empty()	刪除被選元素的所有子節點和內容

append()方法

append() 方法可以在指定元素的末尾插入內容。

語法如下：

$(selector).append(content,function(index,html))

content：規定要插入的內容，可以包含 HTML 元素、jQuery 對象、DOM 元素。
function(index,html)：規定返回待插入內容的函數，index 為集合中元素的索引位置，html 為被選元素的當前 HTML。

示例：

我們來看下面這個例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").append("俠課島");
    });
  });
</script>
</head>
<body>
  <p>你好，我的名字叫做：</p>
  <button>點擊追加文本</button>
</body>
</html>

點擊按鈕，在指定的 <p> 標簽末尾添加文本內容 “俠課島”，我們可以在瀏覽器中看一下演示結果：

除了文本內容，我們還可以在元素中添加 HTML ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("ul").append("<li>strawberry</li>");
    });
  });
</script>
</head>
<body>
  <ul>
    <li>apple</li>
    <li>pear</li>
    <li>peach</li>
    <li>watermelon</li>
  </ul>
  <button>點擊追加文本</button>
</body>
</html>

在瀏覽器中的演示結果：

prepend()方法

prepend() 方法其實和 append() 方法類似，語法也差不多。但是 prepend() 方法主要用于在被選元素的開頭插入指定內容。

語法如下：

$(selector).prepend(content,function(index,html))

示例：

我們將上述示例中的 append() 方法改成 prepend() 方法：

$(function(){
    $("button").click(function(){
      $("ul").prepend("<li>strawberry</li>");
    });
});

然后看一下在瀏覽器中的演示結果：

after()方法

after() 方法用于在被選元素后插入指定的內容?？雌饋?after() 方法和 append() 方法的作用好像差不多，但是其實兩個方法還是有區別的。 append() 方法是在被選元素的結尾插入內容，插入的內容仍然在元素內部。而 after() 插入的內容會重新起一行，與被選擇的元素并沒有什么邏輯上的聯系。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").after("<p>俠課島</p>");
    });
  });
</script>
</head>
<body>
  <p>你好，我的名字叫做：</p>
  <button>點擊追加文本</button>
</body>
</html>

在瀏覽器中的演示效果：

before()方法

before() 方法用于在被選元素之前插入指定的內容。它和 prepend() 方法的區別在于一個在被選元素內插入內容，一個在被選元素外。

注意 before() 方法和 after() 方法都是在被選元素外插入內容。append() 和 prepend() 方法都是在被選元素內插入內容。

示例：

例如將上述示例中的方法改為 before：

$(function(){
    $("button").click(function(){
      $("p").before("<p>俠課島</p>");
    });
});

在瀏覽器中的演示效果：

remove()方法

remove() 方法用于刪除被選元素及其子元素。該方法也會刪除被選元素的數據和事件。

示例：

例如下面這個例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").remove();
    });
  });
</script>
</head>
<body>
  <p>你好，歡迎來到俠課島！</p>
  <button>點擊刪除</button>
</body>
</html>

在瀏覽器中的演示效果：

從上圖中可以看到，remove() 方法將指定的 p 元素連標簽帶元素全部刪除。

empty()方法

empty() 方法用于刪除被選元素的所有子節點和內容。該方法不會移除元素本身，或它的屬性。

示例：

我們講上述示例中的 remove() 方法改為empty() 方法，看看有什么不同：

$(function(){
    $("button").click(function(){
      $("p").empty();
    });
});

在瀏覽器中的演示效果：

可以看到 empty() 方法只會刪除指定元素中的內容，不會刪除元素本身，當然如果元素上有屬性，屬性也不會被刪除，大家可以自己試一下。

面的表格列出了所有用于處理 HTML 和 CSS 的 jQuery 方法。

下面的方法適用于 HTML 和 XML 文檔。除了：html() 方法。

方法	描述
addClass()	向被選元素添加一個或多個類名
after()	在被選元素后插入內容
append()	在被選元素的結尾插入內容
appendTo()	在被選元素的結尾插入 HTML 元素
attr()	設置或返回被選元素的屬性/值
before()	在被選元素前插入內容
clone()	生成被選元素的副本
css()	為被選元素設置或返回一個或多個樣式屬性
detach()	移除被選元素（保留數據和事件）
empty()	從被選元素移除所有子節點和內容
hasClass()	檢查被選元素是否包含指定的 class 名稱
height()	設置或返回被選元素的高度
html()	設置或返回被選元素的內容
innerHeight()	返回元素的高度（包含 padding，不包含 border）
innerWidth()	返回元素的寬度（包含 padding，不包含 border）
insertAfter()	在被選元素后插入 HTML 元素
insertBefore()	在被選元素前插入 HTML 元素
offset()	設置或返回被選元素的偏移坐標（相對于文檔）
offsetParent()	返回第一個定位的祖先元素
outerHeight()	返回元素的高度（包含 padding 和 border）
outerWidth()	返回元素的寬度（包含 padding 和 border）
position()	返回元素的位置（相對于父元素）
prepend()	在被選元素的開頭插入內容
prependTo()	在被選元素的開頭插入 HTML 元素
prop()	設置或返回被選元素的屬性/值
remove()	移除被選元素（包含數據和事件）
removeAttr()	從被選元素移除一個或多個屬性
removeClass()	從被選元素移除一個或多個類
removeProp()	移除通過 prop() 方法設置的屬性
replaceAll()	把被選元素替換為新的 HTML 元素
replaceWith()	把被選元素替換為新的內容
scrollLeft()	設置或返回被選元素的水平滾動條位置
scrollTop()	設置或返回被選元素的垂直滾動條位置
text()	設置或返回被選元素的文本內容
toggleClass()	在被選元素中添加/移除一個或多個類之間切換
unwrap()	移除被選元素的父元素
val()	設置或返回被選元素的屬性值（針對表單元素）
width()	設置或返回被選元素的寬度
wrap()	在每個被選元素的周圍用 HTML 元素包裹起來
wrapAll()	在所有被選元素的周圍用 HTML 元素包裹起來
wrapInner()	在每個被選元素的內容周圍用 HTML 元素包裹起來
$.escapeSelector()	轉義CSS選擇器中有特殊意義的字符或字符串
$.cssHooks	提供了一種方法通過定義函數來獲取和設置特定的CSS值

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

習大綱

一、Jquery-DOM操作（二）

1.什么是DOM

DOM 全稱 document object model (文檔對象模型)，我們可以通過操作DOM來改變HTML頁面的呈現效果。

2.屬性操作

1.1JS高級知識操作屬性

獲取指定屬性的值對象.getAttribute(屬性名)

設置指定屬性的值對象.setAttribute(屬性名,屬性值);

移除指定屬性對象.removeAttribute(屬性名);

1.2JQ動態操作屬性

獲取指定屬性的值 $().attr(‘屬性名’);

設置指定屬性的值 $().attr(‘屬性名’,’屬性值’);

移除指定的屬性 $().removeAttr(‘屬性名’);

批量設置屬性 $().attr(‘json對象’)

【優點】

?更加智能，一個參數代表獲取，兩個參數代表設置

?一次可以增加多個屬性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Jquery-DOM操作之屬性操作</title>
</head>
<body>
   <iframe src="http://www.baidu.com" width="500px" height="500px;" frameborder="0"></iframe>
   <div  id='div1'>批量增加多個屬性</div>
   <input type="button" value="點我" id="btn1">
</body>
<script src="../jquery-1.8.2.js"></script>
<script>
   obj = document.getElementById('btn1');
   obj.onclick=function(){
       //獲取連接
        alert($('iframe').attr('src'));
       //修改鏈接
       $('iframe').attr('src','http://www.taobao.com');
       //刪除屬性
       $('iframe').removeAttr('height');
   }
   $('#div1').attr({'data-id':'1','php9':'真是好'});
   
 
</script>
</html>

3.樣式操作

第一天我們學習了一個樣式操作，$().css 類似于JS中的對象.style.樣式屬性=樣式值

1.1樣式增加

語法:$(‘選擇器’).addClass(‘樣式名’)

作用:給選中的元素增加class樣式屬性

1.2樣式刪除

語法:$(‘選擇器’).removeClass(‘樣式名’);

作用:將選中的元素的class屬性刪除

1.3是否存在樣式

語法：$(‘選擇器’).hasClass(‘樣式名稱’);

作用:判斷選中的元素中是否存在指定的樣式

1.4樣式切換

語法:$(‘選擇器’).toggleClass();

作用:選中元素類屬性的切換（就是在刪除和增加直接切換）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Jquery-DOM樣式操作</title>
</head>
<style>
   .red{
       background: red;
   }
   .width{
       width: 100px;
   }
   .display{
       
       display: none;
   }
   </style>
<body>
   <div>動態增加樣式red樣式</div>
   <input type='button' id='btn1' value='增加'/>
     <input type='button' id='btn2' value='刪除'/>
      <input type='button' id='btn3' value='判斷red是否存在'/>
      <input type='button' id='btn4' value='切換樣式'/>
</body>
<script src="../jquery-1.8.2.js"></script>
<script>
    obj = document.getElementById('btn1');
    obj2 = document.getElementById('btn2');
     obj3 = document.getElementById('btn3');
   obj4 = document.getElementById('btn4');
   obj.onclick=function(){
        $('div').addClass('red');
       $('div').addClass('width');
     
   }
    obj2.onclick=function(){
        $('div').removeClass('width');
     
   }
     obj3.onclick=function(){
        alert($('div').hasClass('red'));
     
   }
   obj4.onclick=function(){
       $('div').toggleClass('display');
     
   }
 
</script>
</html>

應用場景：一般在做隱藏顯示切換使用

1.5樣式-尺寸

?Width 和 height

語法:$(‘選擇器’).width() ；$(‘選擇器’).height();

作用: 獲取選定元素樣式中的width/height值

?innerWidth 和 innerHeight

語法:$(‘選擇器’).innerWidth(); $(‘選擇器’).innerHeight()

作用：獲取指定元素的總寬度/高度

說明：innerWidth=width+appding

由于元素是盒模型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Jquery-DOM尺寸操作</title>
</head>
<style>
   .div1{
       background: red;
       width: 200px;
       height: 50px;
       padding-left: 10px;
       padding-bottom:
   }    
</style>
<body>
   <div id='div1' class='div1'>設置寬度為200px高度為50px</div>
</body>
<script src="../jquery-1.8.2.js"></script>
<script>
   console.log($('#div1').width());
   console.log($('.div1').width());
   console.log($('.div1').height());
   console.log($('#div1').innerWidth());
   console.log($('#div1').innerHeight());
 
</script>
</html>

outerWidth和outerHeight

語法:$(‘選擇器’).outerWidth()/$(‘選擇器’).outerHeight()

作用：獲取的元素的寬度包含邊框的值

說明：width = width+panding+margin+border*2

1.6樣式-位置

?Offset();

語法:$(‘選擇器’).offset().top/left

作用:獲取當前選中的元素距離頂部/左邊的像素距離

說明:相對于body的距離

?Position();

語法:$(‘選擇器’).position().top/left

作用:獲取相對于上級元素的像素距離

說明:相當于父級元素。

scrollTop()/scrollLeft()

語法:$(‘選擇器’).scrollTop();/$(‘選擇器’).scrollLeft();

作用：獲取元素中滾動條的垂直便宜距離

案例：回到頂部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Jquery-位置操作</title>
</head>
<style>
   #box{
       width: 1000px;
       height: 2000px;
       margin: 50px auto;
       border: 1px solid #ccc;
       position: relative;
   }
   #main{
       width: 200px;
       height: 200px;
       background: #0ff;
       position: absolute;
       top:30px;
       left: 30px;
   }
   
</style>
<body>
<!--
  <h1>定位元素位置</h1>
   <hr/>
-->
   <div id='box'>
       <div id='main'>主題內容</div>
   </div>
   <div id='goTop'><a href="javascript：void(0);"> 返回到頂部</a></div>
   
</body>
<script src="../jquery-1.8.2.js"></script>
<script>
   obj = document.getElementById('goTop');
   obj.onclick = function(){
       
       alert($('body').scrollTop(0));
   }
</script>
</html>

5.文本操作

?JS中文本操作

對象.innerHtml 獲取元素內容（包含html內容）

對象.innerText 獲取元素內容（只包含文本）

對象.value 獲取表單元素的值

?JQ中文本操作

$().html() 加參數設置內容，不加參數獲取內容

$().text() 加參數設置內容，不加參數獲取內容

$().val() 加參數設置值，不加參數獲取值

6文檔操作

通過Jquery可以實現節點的追加、刪除、修改、復制等操作

1.1節點追加

?父子關系追加

Append() 和 prepend()

語法:$(‘選擇器’).append(內容)

作用：向父節點最后增加內容最后一個子元素

語法；$(‘選擇器’).prepend(內容)

作用:向父節點最前面增加內容第一個子元素

?兄弟關系追加

After()和before()

語法：$(‘選擇器’).after(內容)

作用：增加內容到父級后面

語法:$(‘選擇器’).before(內容)

作用:增加內容到父級的前面

1.2節點刪除

語法:$(‘選擇器到節點’).remove();

作用:從文檔中刪除該節點

1.3節點替換

語法:$(‘要替換的節點’)replaceWith(‘內容’)

作用：指定替換節點里面的內容

1.4節點復制

語法:$(‘要復制的節點’).clone()

作用：復制選中的節點

說明clone(true/false)

默認值是false，只是復制節點，不復制事件，

True 事件也復制

二、Jquery-事件

1.什么是事件

用戶通過鼠標、鍵盤所做的動作就是事件

事件一單發生就要有事件處理這些動作，這里的事件處理稱之為“事件驅動”，事件驅動通常是由函數來擔任，常見的函數

Click/dbclick/mousedown/mouseup/mouseover/

Onkeyup

Onfocus

Onblur

Onsubmit 等

2.設置事件

?原生JS設置事件

Dom1級事件

對象.onclick=function(){}

Dom2級事件設置

對象.addEventListener(類型,處理,事件流)

對象.removeEventListener(‘類型’,’處理’,’事件流’);

IE8瀏覽器以下使用：

對象.attachEvent()

對象.detachEvent()

?Jquery設置事件

不需要考慮瀏覽器兼容性

語法：$(‘選擇器’).事件類型（事件處理函數fn）

說明：事件類型：

3.事件綁定

語法:

$(‘選擇器’).bind(‘事件類型’,事件函數fn) 綁定一種事件

$(‘選擇器’).bind(‘事件類型1 事件類型2 ..’,事件處理函數fn) 一個元素綁定多個事件同一個處理操作

$(‘選擇器’).bind(json對象) 一個元素綁定多個

4.加載事件

思考：為什么我將代碼放到html的前面所有的事件都不生效了？

因為js程序的運行需要HTML和CSS代碼的支持，但是程序是從上往下執行的，在加載html之前就執行了JS所以不會生效，那么這個時候應該怎么解決？

就要用到事件加載

【JS】中事件加載

Window.load=function(){}

【JQ】事件加載

$(document).ready(function(){

})

簡化寫法

$(function(){

})

5.案例-圖片切換效果

?需求分析

鳳凰網圖片特效

圖片切換效果，當鼠標移到相應的欄目顯示該欄目下的圖片

?實現步驟

1.欄目增加鼠標經過事件

首先引入jquery 核心庫文件

獲取li 標簽下的index屬性即可

2.根據欄目替換相應的欄目圖片

?代碼

<script src="../jquery-1.8.2.js"></script>
               <script>
                   $(function(){
                       $('.lb ul li').mouseover(function(){
                           //獲取唯一標示
//                            index = $(this).attr('index');
                           //替換圖片
//                            $('#changeimg').attr('src','style/img/lb'+index+'.jpg');
                           index = $('.lb ul li').index(this);
                           $('#changeimg').attr('src','style/img/lb'+index+'.jpg');
                           
                           
                       })
                   })
               </script>

三、Jquery-遍歷操作

?each 遍歷方法

語法:

$.each(數組/對象,function(){}) 遍歷數組或者對象

$(‘選擇器’).each(function(){}); 遍歷選擇器選中的元素對象

說明：參數1代表要遍歷的數組或者是對象，參數二，匿名函數function(){}函數有兩個形參一個是i一個是item 分別代表的是下標和值

案例1：遍歷數組和對象

案例2：標簽元素遍歷

?parent和 parents

語法：

$(‘選擇器’).parent() //匹配當前對象的父級元素（上一級）

$(‘選擇器’).parents() //匹配當前對象的祖先元素（上N級）

通過對比可以發現，parents()是便利當前元素的所有父級一直往上找，找到頂為止，parent(),最近的父級元素

?next()和prev()

語法：

$(‘選擇器’).next(); //匹配的是當前選中元素的兄弟元素（下一個）

$(‘選擇器’).prev(); //匹配的是當前選中元素的兄弟元素（上一個）

四、案例-購物車

1.【全選和全不選】

?需求：

點擊全選->勾選中所有商品

再次點擊取消所有商品的選中

?分析需求：

1.給全選增加點擊事件，并且點擊時的狀態【全選/全部選】

2.獲取所有商品的input框當前的狀態

3.將所有商品的input的狀態修改成點擊事件的那個input的狀態

?代碼：

<script type="text/javascript" src='../jquery-1.8.2.js'></script>
   <script>
   //綁定點擊事件
   $('#allselect').click(function(){
       //獲取當前是否被選中的狀態
       statused = $(this).is(':checked');
       if(statused){
           //如果是全部選中則選中所有的商品
           //遍歷所有input type 是checkbox
           $('.gwc_tb2 :checkbox').attr('checked',true);
       }else{
           //如果是false則是全部取消
           $('.gwc_tb2 :checkbox').attr('checked',false);
       }
   })
   </script>

2.【反選】

?需求：

點擊復選框反選->沒有勾選的商品勾選，已經勾選的商品取消勾選

?分析需求：

1.給反選增加點擊事件（不需要獲取狀態）

2.獲取所有商品的當前狀態（勾選或未勾選）

3.修改每個商品的狀態（循環修改）

?代碼：

//反選,增加點擊事件

$('#fanselect').click(function(){

//獲取所有的商品checkbox的對象集合

obj = $('.gwc_tb2 :checkbox');

//獲取一個商品的checkbox的選中狀態

// console.log(obj.eq(0).is(':checked'));

//獲取有多少個checkbox

length = obj.length;

//循環改變

for(i=0;i<length;i++){

//判斷當前狀態，如果是勾選改為不勾選，如果是不勾選改為勾選

if(obj.eq(i).is(':checked')){

obj.eq(i).attr('checked',false);

}else{

obj.eq(i).attr('checked',true);

}

})

?優化版：

//反選,增加點擊事件

$('#fanselect').click(function(){

//使用遍歷方式

$('.gwc_tb2 :checkbox').each(function(){

if($(this).is(':checked')){

$(this).attr('checked',false);

}else{

$(this).attr('checked',true);

}

})

3.【增加商品】

?需求：

點擊增加商品->然后增加商品到購物車列表

?分析需求：

1.給商品按鈕增加點擊事件

2.組合html字符串

3.將字符串追加到表格中

?代碼：

//增加商品動態事件

$('#addGoods').click(function(){

//字符串拼接

Htmlstr = '<tr>';

Htmlstr +='<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td>';

Htmlstr+='<td class="tb2_td2"><a href="#"><img src="images/img2.jpg"/></a></td><td class="tb2_td3"><a href="#">產品標題</a></td><td class="tb1_td4">一件</td><td class="tb1_td5"><input id="min2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />';

Htmlstr+='<input id="text_box2" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" /><input id="add2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" /></td>';

Htmlstr+='<td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td><td class="tb1_td7"><a href="javascript：void(0);" onclick="delgoods(this)">刪除</a></td>';

Htmlstr+='</tr>'

$('.gwc_tb2 tbody').append(Htmlstr);

})

4.【刪除商品】

?需求：

點擊刪除按鈕，刪除購物車商品信息

?分析需求：

1.給刪除綁定點擊事件

問題：綁定節點使用什么選擇器？

答：使用類選擇器不能使用ID選擇器，ID只能選中一個元素

2.刪除當前操作的節點

由于刪除在td節點中，我們直接使用remove能不能刪除整行呢？

不可以，我們要刪除td的父節點

?代碼：

//刪除商品節點

function delgoods(obj){

//使用parents();

$(obj).parents('tr').remove();

}

五、Jquery-AJAX

1.什么是AJAX

所謂的ajax 就是（asynchronous javascript and xml）的簡寫，即異步的js 和XML技術的應用，瀏覽器端與服務器端通訊不需要刷新頁面的技術。

2.$.get

使用Jquery中的$.get可以向服務器發送get方式的ajax請求

?語法

$.get(‘url’,’data’,fn,dataType);

說明：url請求地址、data請求時發送的數據【可以是字符串，可以是json對象】，fu：請求成功后的回調函數，dataType：數據類型json、xml、html、text 類型（預定服務器返回的數據類型）

?舉例

$('#btn1').click(function(){

$.get('dom.php',{'name':'ss','age':'11'},function(data){

alert(data);

},'json');

})

3.$.post

使用Jquery $.post方法可以發送post方式的ajax請求

?語法：

$.post(‘url’,’data’,fn,’dataTpye’);

說明：同上

4.$.ajax

?語法

$.ajax({//json,對象

Url://地址,

Data://傳遞給服務器的數據

Type:’get/post’ //發送類型

dataType:’json’,//返回的數據處理類型

Success:function(){}//ajax請求成功后的執行的函數，

Error:function(e){}// ajax請求失敗后執行的函數

Async:true/fals //true異步，同步false,默認是true

})

?案例

$('#btn3').click(function(){
       $.ajax({
           url:'dom.php',
           data:{'username':'php9'},
           type:'post',
           dataType:'json',
           success:function(data){
               console.log(data);
           },
           error:function(e){
               console.log(e.status);
               if(e.status!=200){
                   alert('服務器繁忙.........');
               }
           }
       })

【PHP】

<?php
$username = $_POST['username'];
$preg = '/^[a-zA-Z][a-zA-Z0-9]+$/';
if(!preg_match($preg,$username)){
 echo json_encode(array('status'=>$username,'info'=>'用戶名必須是英文或者英文數子組合'));  
}
echo  json_encode(array('status'=>$username,'info'=>'注冊成功'));

5.$.get/$.post/$.ajax區別

$.ajax就是將原始的javascript ajax進行了封裝，通過這個方法能實現所有的ajax操作

$.get和$.post 就是封裝的$.ajax

6.跨域【重點】

1.1什么是跨域

所謂的跨域就是從一個域名向另外的一個域名請求數據

1.2需求

Aa.com 向 bb.com 發送ajax請求

1.3通過JQ實現跨域

在線咨詢

上一篇：html調用攝像頭
下一篇：前端開發規范（二、CSS篇）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jQuery 添加和刪除HTML元素

append()方法

示例：

prepend()方法

示例：

after()方法

示例：

before()方法

示例：

remove()方法

示例：

empty()方法

示例：

習大綱

一、Jquery-DOM操作（二）

1.什么是DOM

2.屬性操作

1.1JS高級知識操作屬性

1.2JQ動態操作屬性

3.樣式操作

1.1樣式增加

1.2樣式刪除

1.3是否存在樣式

1.4樣式切換

1.5樣式-尺寸

1.6樣式-位置

案例：回到頂部

5.文本操作

6文檔操作

1.1節點追加

1.2節點刪除

1.3節點替換

1.4節點復制

二、Jquery-事件

1.什么是事件

2.設置事件

3.事件綁定

4.加載事件

5.案例-圖片切換效果

三、Jquery-遍歷操作

四、案例-購物車

1.【全選和全不選】

2.【反選】

3.【增加商品】

4.【刪除商品】

五、Jquery-AJAX

1.什么是AJAX

2.$.get

3.$.post

4.$.ajax

5.$.get/$.post/$.ajax區別

6.跨域【重點】

1.1什么是跨域

1.2需求

1.3通過JQ實現跨域

您的項目需求

一、Jquery-DOM操作（二）

三、Jquery-遍歷操作

五、Jquery-AJAX