（一）动态创建元素
语法：$('<li></li>');
返回一个新创建的jQuery对象
（二）动态追加元素
1.向父元素最后追加
语法1：新创建jQuery对象.appendTo('父元素选择器' 或 父元素jQuery对象);
代码举栗：
<body>
<button>点击追加li</button>
<ul class="ul1"></ul>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('button').click(function() {
//创建jQuery对象li。li中的内容可以.text()
// var newLi = $('<li>我是新li</li>');
var newLi = $('<li></li>').text(Math.random());
//追加到ul中。appendTo()中的内容可以放任何能表示ul的方法。
// newLi.appendTo( 'ul' );
// newLi.appendTo( $('.ul1') );
newLi.appendTo( $('.ul1')[0] );
});
</script>
</body>
语法2：父元素jQuery对象.apeend(新创建的jQuery对象);
代码举栗：
<body>
<button>点击追加li</button>
<ul class="ul1"></ul>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('button').click(function() {
var newLi = $('<li></li>').text(Math.random());
//追加到ul中。
// $('.ul1').append(newLi);
$('.ul1').append('<li>我是新li</li>');
});
</script>
</body>
2.向父元素最前面追加
语法1：新创建jQuery对象.prependTo('父元素选择器');
语法2：父元素jQuery对象.prepend(新创建的jQuery对象);
代码举栗：
<body>
<button>点击追加li</button>
<ul class="ul1"></ul>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('button').click(function() {
var newLi = $('<li></li>').text(Math.random());
//追加到ul中
// newLi.prependTo('.ul1');
$('.ul1').prepend(newLi);
});
</script>
</body>
（三）动态删除元素
语法：jQuery对象.remove();
删除谁就用谁调用。
（四）清空元素
语法1：jQuery对象.empty(); 推荐使用。
语法2：**jQuery对象.html(''); **
语法2虽然清空了标签内容，但内存中相关事件还在，占内存。
代码举栗：（操作英雄列表）
<body>
<button class="btn1">创建英雄列表</button>
<button class="btn2">清空</button>
<ul>
<!-- <li>
<span title="坦克">亚瑟</span>
<a href="javascript:">删除</a>
</li> -->
</ul>
<script src="lib/jquery-1.12.4.js"></script>
<script>
//后端数据
var heros = [
{ name: '亚瑟', type: '坦克' },
{ name: '后裔', type: '射手' },
{ name: '百里守约', type: '射手' },
{ name: '貂蝉', type: '法师' },
{ name: '鲁班', type: '射手' },
{ name: '李白', type: '刺客' },
];
//添加
$('.btn1').click(function () {
for (var i = 0; i < heros.length; i++) {
var obj = heros[i];
var newLi = $('<li></li>');
//定义内容
var htmlStr = `
<span title="${obj.type}">${obj.name}</span>
<a href="javascript:">删除</a>
`;
newLi.html(htmlStr); //设置li的内容
newLi.appendTo('ul'); //追加
//定义内容也可以用另一种语法：
// var htmlStr = `
// <li>
// <span title="${obj.type}">${obj.name}</span>
// <a href="javascript:">删除</a>
// </li>
// `;
// $('ul').append(htmlStr); //追加
}
//删除
$('a').click(function () {
$(this).parent().remove();
});
});
//清空
$('.btn2').click(function() {
// $('ul').html(''); //把ul内容设置为空。
$('ul').empty();
});
</script>
</body>
购物车案例
<script>
// 准备:动态生成表格
// 功能1:点击thead中的复选框，实现全选（控制thead中所有的复选框）
// 功能2:点击tbody中的复选框，控制thead中全选是否选中
// 功能3:封装实现计算总数量和总价格
// 功能4:点击加按钮实现商品数量增加
// 功能5:点击减按钮实现商品数量递减
// 功能6:点击删除按钮删除单种商品
// 功能7:删除所选商品
// 功能8:清理购物车
var datas = [
{ pName: '牛奶', src: './uploads/01.jpg', price: 10, count: 1 },
{ pName: '三只松鼠', src: './uploads/02.jpg', price: 30, count: 4 },
{ pName: '蓝牙播放器', src: './uploads/03.jpg', price: 100, count: 1 },
{ pName: '大米', src: './uploads/04.jpg', price: 50, count: 10 },
{ pName: '路由器', src: './uploads/05.jpg', price: 110, count: 1 },
{ pName: '罐头', src: './uploads/06.jpg', price: 20, count: 5 }
]
for (var i = 0; i < datas.length; i++) {
var obj = datas[i];
var $tr = $('<tr></tr>').appendTo('tbody');
var htmlStr = `
<td>
<input type="checkbox">
</td>
<td>
<img src="${obj.src}">
<p>${obj.pName}</p>
</td>
<td>
${obj.price}￥
</td>
<td>
<div class="count-c clearfix">
<a href="javascript:" class="reduce ${obj.count == 1 ? 'disabled' : ''}" >-</a>
<input type="text" readonly value="${obj.count}">
<a href="javascript:" class="add">+</a>
</div>
</td>
<td>
${obj.count * obj.price}￥
</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
`;
$tr.html(htmlStr);
}
$('thead input').click(function () {
$('tbody input[type=checkbox]').prop('checked', this.checked);
getTotalCountAndTotalPrice();
});
$('tbody input[type=checkbox]').click(function () {
if (this.checked == false) {
$('thead input').prop('checked', false);
}
getTotalCountAndTotalPrice();
});
function getTotalCountAndTotalPrice() {
var trs = $('tbody input[type=checkbox]:checked').parent().parent();
var totalCount = 0;
var totalPrice = 0;
for (var i = 0; i < trs.length; i++) {
var trCount = trs.eq(i).find('input[type=text]').val(); //获取当前行内的count数
var trPrice = trs.eq(i).find('td').eq(4).text(); //获取当前行内的price数
totalCount += parseInt(trCount);
totalPrice += parseFloat(trPrice);
}
$('#totalCount').text(totalCount);
$('#totalPrice').text(totalPrice + '¥');
}
$('.add').click(function () {
var $txt = $(this).prev();
var count = $txt.val();
count++;
if (count > 99) {
$(this).addClass('disabled');
count = 99;
alert('人家不要再多了啦～');
}
$txt.val(count);
var $tr = $(this).parent().parent().parent();
var price = count * parseFloat($tr.find('td:eq(2)').text());
$tr.find('td:eq(4)').text(price + '¥');
$tr.find('input[type=checkbox]').prop('checked', true);
getTotalCountAndTotalPrice();
$tr.find('.reduce').removeClass('disabled');
});
$('.reduce').click(function () {
var $txt = $(this).next();
var count = $txt.val();
count--;
if (count < 1) {
$(this).addClass('disabled');
count = 1;
alert('人家不能再少了啦～');
}
$txt.val(count);
var $tr = $(this).parent().parent().parent();
var price = count * parseFloat($tr.find('td:eq(2)').text());
$tr.find('td:eq(4)').text(price + '¥');
$tr.find('input[type=checkbox]').prop('checked', true);
getTotalCountAndTotalPrice();
});
$('.del').click(function () {
var isOk = confirm('真的不要人家了嘛？');
if (isOk) {
$(this).parent().parent().remove();
}
getTotalCountAndTotalPrice();
showOrHideInfo();
});
function showOrHideInfo() {
var len = $('tbody tr').length;
if (len == 0) {
$('.info').show(500);
$('.car').hide();
}
}
$('.del-all').click(function () {
var trs = $('tbody input[type=checkbox]:checked').parent().parent();
if (trs.length == 0) {
alert('你还没有选中人家啦！');
}
else {
var isOk = confirm('真的不要人家了嘛？');
if (isOk) {
trs.remove();
}
getTotalCountAndTotalPrice();
showOrHideInfo();
}
});
</script>
网友评论