Html主文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="jquery-3.4.1.min.js"></script> </head> <body> <div name="msg" class="layui-btn msg-class">msg</div> <div name="contents">contents</div> <div name="msg1"> <div>first<span>firstspan</span></div> <p name="second">p1</p> <p>p2<span tag="mytag">span2</span></p> </div> <p>p3</p> <div>div4</div> <button onclick="insert_contents()">插入内容</button> </body>
练习：
一、append 在对应元素文末插入数据
$('div[name="contents"]').append('<span style="color:red">php中文网</span>');二、小实战，添加弹窗
var back = '<div id="__myalert__" style="position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.3;"></div>'
var html = '<div id="__myalert1__" style="position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-50px;width:200px;height:100px;background:#fff;border:1px solid #f1f1f1;z-index:99;border-radius:15px;"><button onclick="$(\'#__myalert__\').remove();$(\'#__myalert1__\').remove();">关闭</button></div>'
$('div[name="contents"]').append(back + html);三、把B元素插入到A元素里面 A .appendTo B
$('div[name="msg"]').appendTo($('div[name = "contents"]'));四、prepend，在文档前面追加内容
$('div[name="msg"]').append('<span style="color:red">php中文网</span>');五、after、before
//after：在指定元素后面插入内容，作为兄弟节点
//before：在指定元素前面插入内容，作为兄弟节点
$('div[name="msg"]').before('<span style="color:red">php中文网</span>');六、replaceWith，用提供的内容 B 替换匹配所有元素 A ；语法：B replaceAll A
$('div[name="msg"]').replaceWith('<span style="color:red">php中文网</span>');七、replaceAll，用提供的内容 B 替换匹配所有元素 A ；语法：B replaceAll A
$('<span style="color:red">php中文网</span>').replaceAll('div');八、eq，获取第N个元素
$('div').eq(0).remove();
$('div:eq(0)').remove();
//结果一样九、first、last 选择 第一个/最后一个 元素；
$('div').first().remove();
$('div').last().remove();
$('div:first').remove();
$('div:last').remove();十、hasClass，查找是否有此class，返回结果是布尔值；只要class中有此类，就返回true
$('div[name="msg"]').hasClass('msg-class');十一、is： 判断 A 元素 是否为 B 一个选择器Dom元素
$('.msg-class').is('div');十二、children：获取子元素： children(可加指定条件)；
var res = $('.msg-class1').children('p');
$.each(res, function(i, v) {
console.log(v);
})十三、find：查找指定条件的元素
var res = $('div[name="msg1"]').find('span').first().text();
console.log(res);十四：parent，查找父级元素
var res = $('p[name="second"]').parent().hasClass('msg-class1');
console.log(res);十五、parents，查找所有父级元素，一层层往上找
var res = $('span[tag="mytag"]').parents();
$.each(res, function(i, v) {
console.log(v);
})十六、siblings，查找有多少个兄弟节点
var res = $('div[name="contents"]').siblings();
$.each(res, function(i, v) {
console.log($(v).text());
})
console.log(res.length);小结：
本次学习的都是相对简单的内容，但是比较分散且多，需要多反复练习操作，其中一些也具体相同功能
如：eq :eq first :first last :last
记好方法，灵活运用。