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实现跨域

您的项目需求