获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容 ----不能识别标签
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值----- 即登陆框输入的内容
$("#id").next() ------匹配之后紧挨的同辈元素
$("#id").nextAll() ------匹配之后所有的同辈元素
$("#id").children();// 所有儿子们
$("#id").siblings();// 所有兄弟们
jquery过滤选择器前加空格与不加空格的区别
/加空格表示 选择class为test的元素当中的隐藏后代元素，由前往后读
alert($(".test :hidden").length);
//不加空格表示 选择隐藏的class为test的元素，由后往前读
alert($('.test:hidden').length);
$('div p')
w.fn.init [p.c1, prevObject: w.fn.init(1)]
$('div').find('p') -------等同上面
w.fn.init [p.c1, prevObject: w.fn.init(2)]
$('div.c1')
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('div').filter('.c1') ----等同上面
w.fn.init [div.c1, prevObject: w.fn.init(2)]
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
$(window).scrollTop() -----滚动条距离窗口顶部的距离
通过判断可以配合if 可以制作返回顶部模态框的动态显示
innerHeight() -----content+padding
innerWidth()
outerHeight() ------content+padding+border
outerWidth()
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值,注意是字典的形式
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
//可以用于制作反选，取消，全选
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。（可用于删除表格特定行）
empty()// 删除匹配的元素集合中所有的子节点。
replaceWith() --------$(selector).replaceWith(content)
replaceAll() --------$(content).replaceAll(selector)
replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。
clone() ------生成被选元素的副本，包含子节点、文本和属性
$(selector).clone(includeEvents)
注意：克隆需要注意如果本体不存了，后面进行的克隆操作不会在生产克隆体
练习作业：表格的增删改以及模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单增删改查</title>
<style>
/*盖板样式*/
.cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 999;
}
/*模态框样式*/
.modal {
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -100px;
background-color: white;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="b1">增加</button>
<div class="cover hide"></div>
<div class="modal hide">
<p>
<label for="username">姓名</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="hobby">爱好</label>
<input type="text" name="hobby" id="hobby">
</p>
<p>
<button id="submit">确认</button>
<button id="cancel">取消</button>
</p>
</div>
<table border="1px">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>喊麦</td>
<td id="clone">
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>足球</td>
<td>
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>游泳</td>
<td>
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.min.js"></script>
<script>
//点击’增加‘按钮弹出模态框
$('#b1,.edit').click(function () {
$('.cover,.modal').removeClass('hide');
});
//增加内容
$('#submit').on('click', function () {
//判断是编辑还是增加
if (typeof($('tr').data('nowtr')) == 'undefined') {
let trEle = document.createElement('tr');
$(trEle).appendTo('tbody');
//创建3列
for (let i = 0; i < 3; i++) {
let tdEle = document.createElement('td');
trEle.appendChild(tdEle); //创建3个空单元格
$('#clone').clone(true).insertAfter($(trEle.children)[2]); //克隆操作
$($(trEle.children)[0]).text($('tr').length - 1); //第一列内容
$($(trEle.children)[1]).text($('#username').val()); //第二列内容
$($(trEle.children)[2]).text($('#hobby').val()); //第三列内容
}
}
else {
$($('tr').data('nowtr').children()[1]).text($('#username').val())
$($('tr').data('nowtr').children()[2]).text($('#hobby').val())
$('tr').removeData('nowtr') //编辑完成之后将.data的数据清空，不然编辑之后无法进行增加操作
}
}
);
//点击’取消，确认‘按钮隐藏模态框并取消输入的内容
$('#cancel,#submit').click(function () {
$('.cover,.modal').addClass('hide');
$('#username,#hobby').val('')
});
//删除操作
$('.delete').click(function () {
$(this).parent().parent().remove();
//删除之后动态调整序号
let len = $('table tr').length;
for (let i = 1; i < len; i++) {
$('table tr:eq(' + i + ') td:first').text(i);
}
})
//编辑
$("table").on("click", ".edit", function () {
// 弹出模态框
// 取到 点击的编辑按钮 那一行的值 填充到模态框的input中
// this --> 当前点击的编辑按钮
$('tr').data('nowtr',$(this).parent().parent());
console.log($('tr').data('nowtr'));
$('#username').val($('tr').data('nowtr').children()[1].innerText)
$('#hobby').val($('tr').data('nowtr').children()[2].innerText)
})
</script>
</body>
</html>
