jQuery 添加和刪除HTML元素

節(jié)我們學(xué)習(xí)如何使用 jQuery 中的方法來添加和刪除 HTML 元素。

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

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

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

方法	描述
remove()	刪除被選元素容，包括子元素
empty()	刪除被選元素的所有子節(jié)點(diǎn)和內(nèi)容

append()方法

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

語法如下：

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

content：規(guī)定要插入的內(nèi)容，可以包含 HTML 元素、jQuery 對(duì)象、DOM 元素。
function(index,html)：規(guī)定返回待插入內(nèi)容的函數(shù)，index 為集合中元素的索引位置，html 為被選元素的當(dāng)前 HTML。

示例：

我們來看下面這個(gè)例子：

<!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>點(diǎn)擊追加文本</button>
</body>
</html>

點(diǎn)擊按鈕，在指定的 <p> 標(biāo)簽?zāi)┪蔡砑游谋緝?nèi)容 “俠課島”，我們可以在瀏覽器中看一下演示結(jié)果：

除了文本內(nèi)容，我們還可以在元素中添加 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>點(diǎn)擊追加文本</button>
</body>
</html>

在瀏覽器中的演示結(jié)果：

prepend()方法

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

語法如下：

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

示例：

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

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

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

after()方法

after() 方法用于在被選元素后插入指定的內(nèi)容。看起來 after() 方法和 append() 方法的作用好像差不多，但是其實(shí)兩個(gè)方法還是有區(qū)別的。 append() 方法是在被選元素的結(jié)尾插入內(nèi)容，插入的內(nèi)容仍然在元素內(nèi)部。而 after() 插入的內(nèi)容會(huì)重新起一行，與被選擇的元素并沒有什么邏輯上的聯(lián)系。

示例：

<!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>點(diǎn)擊追加文本</button>
</body>
</html>

在瀏覽器中的演示效果：

before()方法

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

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

示例：

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

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

在瀏覽器中的演示效果：

remove()方法

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

示例：

例如下面這個(gè)例子：

<!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>點(diǎn)擊刪除</button>
</body>
</html>

在瀏覽器中的演示效果：

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

empty()方法

empty() 方法用于刪除被選元素的所有子節(jié)點(diǎn)和內(nèi)容。該方法不會(huì)移除元素本身，或它的屬性。

示例：

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

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

在瀏覽器中的演示效果：

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

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

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

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

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

習(xí)大綱

一、Jquery-DOM操作（二）

1.什么是DOM

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

2.屬性操作

1.1JS高級(jí)知識(shí)操作屬性

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

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

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

1.2JQ動(dòng)態(tài)操作屬性

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

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

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

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

【優(yōu)點(diǎn)】

?更加智能，一個(gè)參數(shù)代表獲取，兩個(gè)參數(shù)代表設(shè)置

?一次可以增加多個(gè)屬性

<!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'>批量增加多個(gè)屬性</div>
   <input type="button" value="點(diǎn)我" 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.樣式操作

第一天我們學(xué)習(xí)了一個(gè)樣式操作，$().css 類似于JS中的對(duì)象.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>動(dòng)態(tài)增加樣式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>

應(yīng)用場(chǎng)景：一般在做隱藏顯示切換使用

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'>設(shè)置寬度為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

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

說明:相對(duì)于body的距離

?Position();

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

作用:獲取相對(duì)于上級(jí)元素的像素距離

說明:相當(dāng)于父級(jí)元素。

scrollTop()/scrollLeft()

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

作用：獲取元素中滾動(dòng)條的垂直便宜距離

案例：回到頂部

<!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'>主題內(nèi)容</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中文本操作

對(duì)象.innerHtml 獲取元素內(nèi)容（包含html內(nèi)容）

對(duì)象.innerText 獲取元素內(nèi)容（只包含文本）

對(duì)象.value 獲取表單元素的值

?JQ中文本操作

$().html() 加參數(shù)設(shè)置內(nèi)容，不加參數(shù)獲取內(nèi)容

$().text() 加參數(shù)設(shè)置內(nèi)容，不加參數(shù)獲取內(nèi)容

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

6文檔操作

通過Jquery可以實(shí)現(xiàn)節(jié)點(diǎn)的追加、刪除、修改、復(fù)制等操作

1.1節(jié)點(diǎn)追加

?父子關(guān)系追加

Append() 和 prepend()

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

作用：向父節(jié)點(diǎn)最后增加內(nèi)容最后一個(gè)子元素

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

作用:向父節(jié)點(diǎn)最前面增加內(nèi)容第一個(gè)子元素

?兄弟關(guān)系追加

After()和before()

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

作用：增加內(nèi)容到父級(jí)后面

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

作用:增加內(nèi)容到父級(jí)的前面

1.2節(jié)點(diǎn)刪除

語法:$(‘選擇器到節(jié)點(diǎn)’).remove();

作用:從文檔中刪除該節(jié)點(diǎn)

1.3節(jié)點(diǎn)替換

語法:$(‘要替換的節(jié)點(diǎn)’)replaceWith(‘內(nèi)容’)

作用：指定替換節(jié)點(diǎn)里面的內(nèi)容

1.4節(jié)點(diǎn)復(fù)制

語法:$(‘要復(fù)制的節(jié)點(diǎn)’).clone()

作用：復(fù)制選中的節(jié)點(diǎn)

說明clone(true/false)

默認(rèn)值是false，只是復(fù)制節(jié)點(diǎn)，不復(fù)制事件，

True 事件也復(fù)制

二、Jquery-事件

1.什么是事件

用戶通過鼠標(biāo)、鍵盤所做的動(dòng)作就是事件

事件一單發(fā)生就要有事件處理這些動(dòng)作，這里的事件處理稱之為“事件驅(qū)動(dòng)”，事件驅(qū)動(dòng)通常是由函數(shù)來擔(dān)任，常見的函數(shù)

Click/dbclick/mousedown/mouseup/mouseover/

Onkeyup

Onfocus

Onblur

Onsubmit 等

2.設(shè)置事件

?原生JS設(shè)置事件

Dom1級(jí)事件

對(duì)象.onclick=function(){}

Dom2級(jí)事件設(shè)置

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

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

IE8瀏覽器以下使用：

對(duì)象.attachEvent()

對(duì)象.detachEvent()

?Jquery設(shè)置事件

不需要考慮瀏覽器兼容性

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

說明：事件類型：

3.事件綁定

語法:

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

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

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

4.加載事件

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

因?yàn)閖s程序的運(yùn)行需要HTML和CSS代碼的支持，但是程序是從上往下執(zhí)行的，在加載html之前就執(zhí)行了JS所以不會(huì)生效，那么這個(gè)時(shí)候應(yīng)該怎么解決？

就要用到事件加載

【JS】中事件加載

Window.load=function(){}

【JQ】事件加載

$(document).ready(function(){

})

簡(jiǎn)化寫法

$(function(){

})

5.案例-圖片切換效果

?需求分析

鳳凰網(wǎng)圖片特效

圖片切換效果，當(dāng)鼠標(biāo)移到相應(yīng)的欄目顯示該欄目下的圖片

?實(shí)現(xiàn)步驟

1.欄目增加鼠標(biāo)經(jīng)過事件

首先引入jquery 核心庫文件

獲取li 標(biāo)簽下的index屬性即可

2.根據(jù)欄目替換相應(yīng)的欄目圖片

?代碼

<script src="../jquery-1.8.2.js"></script>
               <script>
                   $(function(){
                       $('.lb ul li').mouseover(function(){
                           //獲取唯一標(biāo)示
//                            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(數(shù)組/對(duì)象,function(){}) 遍歷數(shù)組或者對(duì)象

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

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

案例1：遍歷數(shù)組和對(duì)象

案例2：標(biāo)簽元素遍歷

?parent和 parents

語法：

$(‘選擇器’).parent() //匹配當(dāng)前對(duì)象的父級(jí)元素（上一級(jí)）

$(‘選擇器’).parents() //匹配當(dāng)前對(duì)象的祖先元素（上N級(jí)）

通過對(duì)比可以發(fā)現(xiàn)，parents()是便利當(dāng)前元素的所有父級(jí)一直往上找，找到頂為止，parent(),最近的父級(jí)元素

?next()和prev()

語法：

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

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

四、案例-購物車

1.【全選和全不選】

?需求：

點(diǎn)擊全選->勾選中所有商品

再次點(diǎn)擊取消所有商品的選中

?分析需求：

1.給全選增加點(diǎn)擊事件，并且點(diǎn)擊時(shí)的狀態(tài)【全選/全部選】

2.獲取所有商品的input框當(dāng)前的狀態(tài)

3.將所有商品的input的狀態(tài)修改成點(diǎn)擊事件的那個(gè)input的狀態(tài)

?代碼：

<script type="text/javascript" src='../jquery-1.8.2.js'></script>
   <script>
   //綁定點(diǎn)擊事件
   $('#allselect').click(function(){
       //獲取當(dāng)前是否被選中的狀態(tài)
       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.【反選】

?需求：

點(diǎn)擊復(fù)選框反選->沒有勾選的商品勾選，已經(jīng)勾選的商品取消勾選

?分析需求：

1.給反選增加點(diǎn)擊事件（不需要獲取狀態(tài)）

2.獲取所有商品的當(dāng)前狀態(tài)（勾選或未勾選）

3.修改每個(gè)商品的狀態(tài)（循環(huán)修改）

?代碼：

//反選,增加點(diǎn)擊事件

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

//獲取所有的商品checkbox的對(duì)象集合

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

//獲取一個(gè)商品的checkbox的選中狀態(tài)

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

//獲取有多少個(gè)checkbox

length = obj.length;

//循環(huán)改變

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

//判斷當(dāng)前狀態(tài)，如果是勾選改為不勾選，如果是不勾選改為勾選

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

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

}else{

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

}

})

?優(yōu)化版：

//反選,增加點(diǎn)擊事件

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

//使用遍歷方式

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

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

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

}else{

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

}

})

3.【增加商品】

?需求：

點(diǎn)擊增加商品->然后增加商品到購物車列表

?分析需求：

1.給商品按鈕增加點(diǎn)擊事件

2.組合html字符串

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

?代碼：

//增加商品動(dòng)態(tài)事件

$('#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="#">產(chǎn)品標(biāo)題</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.【刪除商品】

?需求：

點(diǎn)擊刪除按鈕，刪除購物車商品信息

?分析需求：

1.給刪除綁定點(diǎn)擊事件

問題：綁定節(jié)點(diǎn)使用什么選擇器？

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

2.刪除當(dāng)前操作的節(jié)點(diǎn)

由于刪除在td節(jié)點(diǎn)中，我們直接使用remove能不能刪除整行呢？

不可以，我們要?jiǎng)h除td的父節(jié)點(diǎn)

?代碼：

//刪除商品節(jié)點(diǎn)

function delgoods(obj){

//使用parents();

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

}

五、Jquery-AJAX

1.什么是AJAX

所謂的ajax 就是（asynchronous javascript and xml）的簡(jiǎn)寫，即異步的js 和XML技術(shù)的應(yīng)用，瀏覽器端與服務(wù)器端通訊不需要刷新頁面的技術(shù)。

2.$.get

使用Jquery中的$.get可以向服務(wù)器發(fā)送get方式的ajax請(qǐng)求

?語法

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

說明：url請(qǐng)求地址、data請(qǐng)求時(shí)發(fā)送的數(shù)據(jù)【可以是字符串，可以是json對(duì)象】，fu：請(qǐng)求成功后的回調(diào)函數(shù)，dataType：數(shù)據(jù)類型json、xml、html、text 類型（預(yù)定服務(wù)器返回的數(shù)據(jù)類型）

?舉例

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

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

alert(data);

},'json');

})

3.$.post

使用Jquery $.post方法可以發(fā)送post方式的ajax請(qǐng)求

?語法：

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

說明：同上

4.$.ajax

?語法

$.ajax({//json,對(duì)象

Url://地址,

Data://傳遞給服務(wù)器的數(shù)據(jù)

Type:’get/post’ //發(fā)送類型

dataType:’json’,//返回的數(shù)據(jù)處理類型

Success:function(){}//ajax請(qǐng)求成功后的執(zhí)行的函數(shù)，

Error:function(e){}// ajax請(qǐng)求失敗后執(zhí)行的函數(shù)

Async:true/fals //true異步，同步false,默認(rèn)是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('服務(wù)器繁忙.........');
               }
           }
       })

【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'=>'用戶名必須是英文或者英文數(shù)子組合'));  
}
echo  json_encode(array('status'=>$username,'info'=>'注冊(cè)成功'));

5.$.get/$.post/$.ajax區(qū)別

$.ajax就是將原始的javascript ajax進(jìn)行了封裝，通過這個(gè)方法能實(shí)現(xiàn)所有的ajax操作

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

6.跨域【重點(diǎn)】

1.1什么是跨域

所謂的跨域就是從一個(gè)域名向另外的一個(gè)域名請(qǐng)求數(shù)據(jù)

1.2需求

Aa.com 向 bb.com 發(fā)送ajax請(qǐng)求

1.3通過JQ實(shí)現(xiàn)跨域

在線咨詢

上一篇：html調(diào)用攝像頭
下一篇：前端開發(fā)規(guī)范（二、CSS篇）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

jQuery 添加和刪除HTML元素

append()方法

示例：

prepend()方法

示例：

after()方法

示例：

before()方法

示例：

remove()方法

示例：

empty()方法

示例：

習(xí)大綱

一、Jquery-DOM操作（二）

1.什么是DOM

2.屬性操作

1.1JS高級(jí)知識(shí)操作屬性

1.2JQ動(dòng)態(tài)操作屬性

3.樣式操作

1.1樣式增加

1.2樣式刪除

1.3是否存在樣式

1.4樣式切換

1.5樣式-尺寸

1.6樣式-位置

案例：回到頂部

5.文本操作

6文檔操作

1.1節(jié)點(diǎn)追加

1.2節(jié)點(diǎn)刪除

1.3節(jié)點(diǎn)替換

1.4節(jié)點(diǎn)復(fù)制

二、Jquery-事件

1.什么是事件

2.設(shè)置事件

3.事件綁定

4.加載事件

5.案例-圖片切換效果

三、Jquery-遍歷操作

四、案例-購物車

1.【全選和全不選】

2.【反選】

3.【增加商品】

4.【刪除商品】

五、Jquery-AJAX

1.什么是AJAX

2.$.get

3.$.post

4.$.ajax

5.$.get/$.post/$.ajax區(qū)別

6.跨域【重點(diǎn)】

1.1什么是跨域

1.2需求

1.3通過JQ實(shí)現(xiàn)跨域

您的項(xiàng)目需求