Day-15 Jquery
零、上节回顾
BOM对象-window 对象方法
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：<br> setInterval(code,millisec)
其中，code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔，以毫秒计。
示例
<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var ID;
function begin(){
if (ID==undefined){
showTime();
ID=setInterval(showTime,1000);
}
}
function end(){
clearInterval(ID);
ID=undefined;
}
</script>
DOM
- DOM节点操作-改变CSS样式：
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
.style.fontSize=48px
- DOM-Event（事件）
事件类型
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
事件介绍
- onload事件：
onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
window.onload=function(){
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
};
*/
function fun() {
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
}
</script>
</head>
<body onload="fun()">
<p id="ppp">hello p</p>
</body>
</html>
- onsubmit事件：
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function(){
//阻止表单提交方式1().
//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.
var ele=document.getElementById("form");
ele.onsubmit=function(event) { //function可以加event对象，event是一个对象，它封装了操作气筒提供的所有事件的状态
// alert("验证失败 表单不会提交!");
// return false; //阻止默认的提交事件1
// 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
alert("验证失败 表单不会提交!");
event.preventDefault(); //阻止默认的提交事件2
}
};
</script>
</head>
<body>
<form id="form">
<input type="text"/>
<input type="submit" value="点我!" />
</form>
</body>
</html>
- 事件传播：
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert('111');
};
document.getElementById("abc_2").onclick=function(event){
alert('222');
event.stopPropagation(); //阻止事件向外层div传播.
}
</script>
- onkeydown事件：
Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.
<input type="text" id="t1"/>
<script type="text/javascript">
var ele=document.getElementById("t1");
ele.onkeydown=function(e){
e=e||window.event; //两种方式兼容所有浏览器
var keynum=e.keyCode; //keyCode不是所有浏览器都支持
var keychar=String.fromCharCode(keynum); //转换识别的askii码数字为字母
alert(keynum+'----->'+keychar);
};
</script>
- onselect事件：
下拉菜单，选中时触发，或input框
<input type="text">
<script>
var ele=document.getElementsByTagName("input")[0];
ele.onselect=function(){
alert(123);
}
</script>
- onchange事件：
三级联动，如省市县
<select name="" id="">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select>
<script>
var ele=document.getElementsByTagName("select")[0];
ele.onchange=function(){
alert(123);
}
</script>
- onfocus事件：
失去焦点
类似 input属性placeholder，输入框中预先有的浅色的字
<input type="text" placeholder="用户名">
<body>
<input type="text" value="user" id="search">
<script>
var ele=document.getElementById("search");
ele.onfocus=function () {
this.value=""; //点击后后输入框内容为空
};
ele.onblur=function () {
if (!this.value.trim()) //输入框没有值和输入的全为空格的时候，恢复为user字符
this.value="user";
}
</script>
</body>
- onmouseout与onmouseleave事件区别：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
width: 300px;
}
#title{
cursor: pointer;
background: #ccc;
}
#list{
display: none;
background:#fff;
}
#list div{
line-height: 50px;
}
#list .item1{
background-color: green;
}
#list .item2{
background-color: rebeccapurple;
}
#list .item3{
background-color: lemonchiffon;
}
</style>
</head>
<body>
<p>先看下使用mouseout的效果:</p>
<div id="container">
<div id="title">使用了mouseout事件↓</div>
<div id="list">
<div class="item1">第一行</div>
<div class="item2">第二行</div>
<div class="item3">第三行</div>
</div>
</div>
<script>
// 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
// 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
var container=document.getElementById("container");
var title=document.getElementById("title");
var list=document.getElementById("list");
title.onmouseover=function(){
list.style.display="block";
};
container.onmouseleave=function(){ // 改为mouseout试一下
list.style.display="none";
};
/*
因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list
上，所以鼠标移出每个子元素时也都会触发我们的list.style.display="none";
*/
/*
思考:
if:
list.onmouseout=function(){
list.style.display="none";
};
为什么移出第一行时,整个list会被隐藏?
其实是同样的道理,onmouseout事件被同时绑定到list和它的三个子元素item上,所以离开任何一个
子元素同样会触发list.style.display="none";
*/
</script>
</body>
</html>
object
JS里支持类似字典的数据类型,对象类型
{"":"","":""}
jQuery
- jquery下载：
https://jquery.com/ - 分为生产加密版本和非加密版
- 引用方式：
<script src="jquery-3.1.1.js"></script>
jquery对象
-
调用方式
调用方式1：
jquery.方法
调用方式2：
$.方法 -
命名
var $variable=jQuery对象 -
jquery和dom的转换
$("#msg").html();$("msg")[0].innerHTML
jquery基本语法
jquery选择器
jquery选择器和css规则及其相似
jquery选择器选到的是一个集合对象，后面的 操作会循环加载
-
基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div") -
层级选择器
$(".outer div")后代选择器 $(".outer>div")子代选择器 $(".outer+div")毗邻选择器 $(".outer~div")选第选择器 -
基本筛选器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)") -
属性选择器
$('[id="div1"]') $([aaa]) $('["alex="sb"][id]') -
表单选择器
$("[type='text']")----->简洁写法$(":text") 注意只适用于input标签 : $("input:checked")
表单属性选择器
:enabled
:disabled
:checked
:selected
<body>
<form>
<input type="checkbox" value="123" checked>
<input type="checkbox" value="456" checked>
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3" selected="selected">Trees</option>
<option value="3" selected="selected">Trees</option>
</select>
</form>
<script src="jquery.min.js"></script>
<script>
// console.log($("input:checked").length); // 2
// console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1
$("input:checked").each(function() {
console.log($(this).val());
})
</script>
</body>
jquery筛选器
- 过滤筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="item">111</li>
<li class="item">222</li>
<li class="item">333</li>
<li class="item">444</li>
<li class="item">555</li>
<li class="item">666</li>
<li class="item">777</li>
<li class="item">888</li>
<li class="item">999</li>
<li class="item">000</li>
</ul>
<script src="jquery-3.1.1.js"></script>
<script>
// $("ul li").eq(4).css("color","red"); //推荐使用
// $("ul li").first().css("color","red");
// $("ul li").last().css("color","red");
// $("ul li:eq(4)").css("color","red"); //同第一种方式
// $("ul li:lt(4)").css("color","red");
// $("ul li:gt(4)").css("color","red");
// $("ul li:even").css("color","red"); //奇数
$("ul li:odd").css("color","red"); //偶数
</script>
</body>
</html>
- 查找筛选器（导航查找）
查找子标签： $("div").children(".test") $("div").find(".test")
向下查找兄弟标签： $(".test").next() $(".test").nextAll()
$(".test").nextUntil()
向上查找兄弟标签： $("div").prev() $("div").prevAll()
$("div").prevUntil()
查找所有兄弟标签： $("div").siblings()
查找父标签： $(".test").parent() $(".test").parents()
$(".test").parentUntil()
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="item1">111</div>
<div class="item2">222</div>
<div class="item3">333</div>
<div class="item4">444</div>
<div class="item5">555</div>
<div class="outer">
<div class="inner">
<p class="p1">P1</p>
</div>
<p>P2</p>
</div>
<p>P3</p>
<script src="jquery-3.1.1.js"></script>
<script>
//向下查找
// $(".item1").next().css("color","red");
// $(".item1").nextAll().css("color","red");
// $(".item1").nextUntil(".item5").css("color","red"); //item1至item5
//查找兄弟标签
// $(".item3").siblings().css("color","red"); //找到除自己外的所有兄弟标签
//查找子标签
// $(".outer").children("p").css("color","red"); //标签下的所有子标签，或指定子标签操作
// $(".outer").find("p").css("color","red"); //标签下的所有后代标签，或指定后代标签操作
//查找父标签
// $("#p1").parent().css("color","red"); //查找父标签
// $("#p1").parentsUntil("body").css("color","red"); //查找父标签，并设置范围
</script>
</body>
</html>
jquery元素操作(属性，css，文档处理)
jquery事件
如果不放在操作对象下操作使用
ready(fn) // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> 简化效果：$(function(){})
jquery事件绑定
//语法: 标签对象.事件(函数)
eg: $("p").click(function(){})
示例：
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<script src="jquery-3.1.1.js"></script>
<script>
// $("ul li").click(function () {
// alert(123);
// });
//on方法实现事件绑定,较为推荐使用
$("ul li").on("click",function () {
alert(456);
});
</script>
</body>
jquery事件委派
找到父标签将事件委派，后委派给指定子标签
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<button>add</button>
<script src="jquery-3.1.1.js"></script>
<script>
$("button").click(function () {
$("ul").append("<li>666</li>");
});
$("ul").on("click","li",function () {
alert(456);
});
</script>
</body>
jquery属性操作
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------属性
$("").attr(); //自定义属性操作
$("").removeAttr();
$("").prop(); //固有属性操作，input type=“checked”和select=selected常用
$("").removeProp();
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------CSS加载
$("#c1").css({"color":"red","fontSize":"35px"}) //如果多组使用object键值对
- 左侧菜单示例
addClass
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left_menu{
width: 20%;
height: 500px;
background-color: wheat;
float: left;
}
.content_menu{
width: 80%;
height: 500px;
background-color: darkgray;
float: left;
}
.title{
text-align: center;
background-color: brown;
line-height: 30px;
color: white;
}
.item{
margin: 20px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="left_menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<p>11111</p>
<p>11111</p>
<p>11111</p>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<p>22222</p>
<p>22222</p>
<p>22222</p>
</div>
</div>
<div class="item">
<div class="title ">菜单三</div>
<div class="con hide">
<p>33333</p>
<p>33333</p>
<p>33333</p>
</div>
</div>
</div>
<div class="content_menu"></div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
$(".title").click(function () {
// $(this).next().removeClass(".hide"); //鼠标点击的标签的下一个标签删除hide属性
// $(this).parent().siblings().children(".con").addClass("hide") //鼠标点击的标签的父标签的兄弟标签的所有兄弟标签的子标签包含con类属性的添加hide类属性，以隐藏
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); //简写，链式操作方式
})
</script>
</body>
</html>
- 属性操作之表单到做
prop,适用于checked表单，和select操作
<body>
<button>全选</button>
<button>反选</button>
<button>取消</button>
<hr>
<table border="1">
<tr>
<th> </th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
</table>
<script src="jquery-3.1.1.js"></script>
<script>
$("button").click(function () {
// console.log($(this).text()) //获取标签下纯文本
// console.log($(this).html()) //获取整个标
if ($(this).text()=="全选") {
$("input").prop("checked",true);
}
else if ($(this).text()=="取消") {
$("input").prop(("checked",false));
}
else {
$("input").each(function () { //each循环遍历input标签对象
// console.log($(this));
// console.log("ok");
//取反方式一：
// if ($(this).prop("checked")){
// $(this).prop("checked",false);
// }
// else {
// $(this).prop("checked",true);
// }
//取反方式二：
$(this).prop("checked",!$(this).prop("checked")) //checked选中状态的加！反选
})
}
})
</script>
</body>
</html>
- add
常用于自定义属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.outer{
width: 60%;
height: 300px;
background-color: wheat;
margin: 100px auto;
}
ul.title{
background-color: grey;
padding: 10px;
}
ul.title li{
list-style: none;
display: inline-block;
padding: 5px;
}
.hide{
display: none;
}
.outer .content{
padding: 15px;
}
.active{
background-color: red;
color: white;
}
</style>
</head>
<div class="outer">
<ul class="title">
<li class="active" egon="c1">商品介绍</li>
<li class="" egon="c2">规格与包装</li>
<li class="" egon="c3">售后保障</li>
</ul>
<div class="content">
<div class="item" id="c1">商品介绍商品介绍商品介绍</div>
<div class="item hide" id="c2">规格与包装规格与包装规格与包装</div>
<div class="item hide" id="c3">售后保障售后保障售后保障</div>
</div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
$(".title li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
var $id_value=$(this).attr("egon"); //点击的li标签获取egon属性的值
var $sel="#"+$id_value; //拼接#和变量，得到'#c1'字符串
$($sel).removeClass("hide").siblings().addClass("hide"); //id=#c1的删除hide属性，兄弟标签添加hide
})
</script>
</body>
</html>
- val()
操作input中的value的值
其他的标签没有自带value，所以val没有意义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<P>DIV</P>
</div>
<input type="text" id="inp" value="123">
<script src="jquery-3.1.1.js"></script>
<script>
// console.log($(".c1").html());
console.log($(".c1").text());
// $(".c1").html("<b>YYY</b>");
// $(".c1").text("<b>YYY</b>");
console.log($("#inp").val());
$("#inp").val(456);
</script>
</body>
</html>
each循环
$("p").css("color","red")
是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦
循环方式
- $.each(obj,fn)实例
<script src="jquery-3.1.1.js"></script>
<script>
// var arr=[111,222,333]
// $.each(arr,function (i,j) { //如只有一个参数，为只得到索引，如果两个参数得到索引和值
// console.log(i);
// console.log(j);
// })
var info = {"name":"egon","age":"35"};
$.each(info,function (i,j) {
console.log(i);
console.log(j);
})
</script>
</body>
</html>
- $("").each(fn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p class="">P1</p>
<p class="">P2</p>
<p class="">P3</p>
<p class="">P4</p>
<script src="jquery-3.1.1.js"></script>
<script>
$(".item").each(function () {
if($(this).text()=="p3"){
$(this).css("color","red")
}
})
</script>
</body>
</html>
jquery动画效果
动画效果所有方法中都适用加时间，如hide(1000)
- 显示隐藏
<body>
<p>hello egon</p>
<button class="h1">隐藏</button>
<button class="h2">显示</button>
<button class="h3">toggle</button>
<script src="jquery-3.1.1.js"></script>
<script>
$(".h1").click(function () {
$("p").hide(1000); //点击隐藏，1000毫秒
});
$(".h2").click(function () {
$("p").show(1000); //点击显示
});
$(".h3").click(function () {
$("p").toggle(1000); //一键控制隐藏，显示
});
</script>
</body>
- 滑动滑出
<body>
<div style="background-color: wheat;color: brown;line-height: 100px;text-align: center">hello world</div> //图片同样适用
<button class="slide_down">滑出</button>
<button class="slide_up">滑入</button>
<button class="slide_toggle">切换</button>
<script src="jquery-3.1.1.js"></script>
<script>
$(".slide_down").click(function () {
$("div").slideDown(1000);
});
$(".slide_up").click(function () {
$("div").slideUp(1000);
});
$(".slide_toggle").click(function () {
$("div").slideToggle(1000);
});
</script>
- 淡入淡出
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
width: 200px;
height: 200px;
background-color: red;
}
.ding{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="ding">
<div class="item"></div>
</div>
<button class="fade_in">淡入</button>
<button class="fade_out">淡出</button>
<button class="fade_toggle">切换</button>
<script src="jquery-3.1.1.js"></script>
<script>
$(".fade_in").click(function () {
$(".item").fadeIn(5000,function () {
alert(123); //回掉函数，fadein事件执行完毕，触发alert
});
});
$(".fade_out").click(function () {
$(".item").fadeOut(1000);
});
$(".fade_toggle").click(function () {
$(".item").fadeToggle(1000);
});
</script>
</body>
节点处理
//创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty() //清空盒子
$("").remove([expr]) //移除盒子
//复制
$("").clone([Even[,deepEven]])
- 内部插入示例(添加子标签)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 400px;
height: 400px;
background-color: wheat;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="outer">
<h4>HELLO NODE</h4>
</div>
<button class="add">ADD</button>
<button class="removes">REMOVE</button>
<script src="jquery-3.1.1.js"></script>
<script>
$(".add").click(function () {
// var $ele_p=$("<p></p>"); //创建p标签
var $ele_p=$("<p>"); //同上
$ele_p.text("HELLO EGON");
// $(".outer").append($ele_p); //添加节点，父级标签添加子标签
$ele_p.appendTo(".outer") //添加节点，子标签添加到父标签中
})
</script>
</body>
- 外部插入示例（添加兄弟标签）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 400px;
height: 400px;
background-color: wheat;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="outer">
<h4>HELLO NODE</h4>
</div>
<button class="add">ADD</button>
<button class="removes">REMOVE</button>
<script src="jquery-3.1.1.js"></script>
<script>
$(".add").click(function () {
var $ele_p=$("<p>");
$ele_p.text("hello world")
$(".outer").after($ele_p);
})
</script>
</body>
- 删除
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 400px;
height: 400px;
background-color: wheat;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="outer">
<h4>HELLO NODE</h4>
</div>
<button class="add">ADD</button>
<button class="removes">REMOVE</button>
<div class="box">
<p>PPP</p>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
$(".add").click(function () {
var $ele_p=$("<p>")
$ele_p.text("hello egon")
$(".box").empty()
})
</script>
</body>
- 复制
<body>
<div class="outer">
<div class="item">
<button class="add">+</button>
<input type="text">
</div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
$(".add").click(function () {
var $item_obj=$(this).parent().clone();
$item_obj.children("button").html("-").attr("class","removed");
$(".outer").append($item_obj);
});
$(".outer").on("click","removed",function () {
var $p=$(this).parent();
$p.remove();
})
</script>
</body>
袁老师jQuery：https://www.cnblogs.com/yuanchenqi/articles/6936986.html
jquery中文文档：http://jquery.cuishifeng.cn/
