首页

# 查找节点

# 找自身

  1. JS：JS 选择器（6 个不同的选择器）

  2. JQ：$(“css 选择器”)

# 父节点 (往上面找)

  1. JS：节点.parentNode;// 上一级

  2. JQ

    1
    2
    3
    4
    5
    6

    1. 对象.parent()  直接上级
    2. 对象.parents(参数) 不加参数默认是到HTML，加参数可到参数父级结束
       $("div").parents();//所有的祖先节点都找到
       $("div").parents("body");//找到对应的那个祖先元素

# 子节点（往下面找）

  1. JS

    ​

    1
    2
    3
    4
    5

    1. 节点.children;//数组，直接子元素
    2. 节点.firstElementChild   找第一个         
    3. 节点.lastElementChild  找最后一个

    ​

  2. JQ

    1
    2
    3
    4
    5
    6
    7
    8

    1.  对象.children(选择器)  
       直接子级的集合，可设置参数过滤
    2.  对象.find("选择器")  在对象内查找选择器匹配的节点
       特点：找任意后辈节点
    3.  对象.children(":first");
    4.  对象.children(":last");

# 兄弟节点

  1. JS

    1
    2
    3
    4

    1. 节点.previousElementSibling;//上一个兄弟
    2. 节点.nextElementSibling;//下一个

  2. JQ

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    1. 上一个 
       对象.prev()  只返回前一个   
       对象.prevAll(选择器)  返回所有的哥哥辈元素
    2. 下一个
        对象.next()  只返回后一个 
        对象.nextAll(选择器)  返回后面的所有的兄弟元素
    3. 所有的兄弟节点（除自己外） 
           对象.siblings(选择器)

# 创建节点

  1. JS

    1
    2
    3
    4
    5

    var odiv=document.createElement("div");
            odiv.innerText="内容";
            odiv.title="属性";

  2. JQ

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    1. 创建元素节点
        语法：$("<标签名>")
        如：var $li_0=$("<li></li>");
        var $li_1=$("<li></li>");
    2. 创建带文本的元素节点
    	如：var $li_0=$("<li>橘子</li>");
    3. 创建带文本+属性的节点
    	如：var $li_0=$("<li class='red'>橘子</li>");
    4. 创建带文本+属性+子节点：
    	如：var $li_0=$("<li class='red'><span>橘子</span></li>");

# 插入节点 (重点)

  1. JS

    1
    2
    3
    4
    5
    6

    1. JS-在某父节点内（前后）  
       父节点.apppendChild(新的子节点);
    2. JS-在兄弟节点前后
       父节点.insertBefore(新,旧);

  2. JQ

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    1. JQ-在某父节点内（前后） 
       1. JQ后面：
          a.$(父节点).append(子节点);
          b.$(子节点).appendTo(父节点);//可以不记，快速记忆：to，到的意思，将子节点追加到父节点内部
       2. JQ前面：
          a.$(父节点).prepend(子节点);
          b.$(子节点).prependTo(父节点);
    2. JQ-在兄弟节点前后
       1. JQ前面：
          a.$(旧兄弟节点).before(新的兄弟节点); //在兄弟节点前插入新的兄弟节点
          b.$(新的兄弟节点).insertBefore(旧兄弟节点);//将新兄弟节点插入到旧节点前
       2. JQ后面：
          a.$(旧兄弟节点).after(新的兄弟节点); //在兄弟节点后插入新的兄弟节点
          b.$(新的兄弟节点).insertAfter(旧兄弟节点);//将新兄弟节点插入到旧节点后

# 删除节点

  1. jS：父节点.removeChild (子节点);

  2. JQ

    1
    2
    3
    4
    5
    6

    1. 删除节点
    	$(要删除的节点).remove(); //彻底删除，包括它自己
    2. 清空节点
    	$(要清空的节点).empty(); //将该节点内容清空，保留它自己

# 复制节点

  1. JS：节点.cloneNode (true);// 添加 true 为深度复制，默认为浅复制

  2. JQ：$(“要复制的节点”).clone (boolean); true 复制事件，默认为 false

# 替换节点

  1. $(旧节点).replaceWith (新节点); // 旧节点被新节点替换

  2. $(新节点).replaceAll (旧节点); // 新节点替换旧节点

# 包裹节点

  1. 将某个节点用其他元素包裹起来（单独包裹）。

    1
    2
    3
    4

    $(子节点).wrap("父节点标签");
    例子：$("p").wrap("<div></div>");  //用父节点把子节点包起来

  2. 将所有匹配的元素用另一个元素包裹起来（打包包裹）。

    1
    2
    3
    4

    $(子节点).wrapAll("父节点标签");
    例子：$("p").wrapAll("<div></div>"); //所有的p都会被div个打包

  3. 将每一个匹配的子内容用其他标记包裹起来。相当于是对 wrap 取相反。

    1
    2
    3

    $("父节点标签").wrapInner(子节点);

# 增删改查实例

# 简易微博

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
	<title>new Document</title>
	<style>
	.box{
		padding:20px;
		width:500px;
		border:1px solid #000;
	}
	textarea{
		width:480px;
		height:150px;
	}
	/*#blogs{
		margin-left:80px;
		width:400px;
	}*/
	.item{
		border-bottom:1px dashed #999;
	}
	.fl{ float: left; }
	.del,.fr{
		float:right;
	}
	.mt10{ overflow: hidden; margin-bottom: 10px }
	</style>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<!--rows 表示文本域的行高
		cols 表示文本域的列宽
		css样式 width/height可以设置宽高
	-->
	<!-- 
		作业要求：
		实现微博发布，删除留言操作
		发布内容不能为空或空格，且输入文字不能少于5个，多余140个字
	 -->
	<div class="box">
	微博发布：
	<div class="mt10">
		<textarea id="mytxt"></textarea>
	</div>
	<div class="mt10">
		<span class="fl">您还可以输入：<i class="count">140个字</i></span>
		<button class=" fr" type="button">发布</button>
	</div>
		<div id="blogs">
			<p class="item">哈哈	<a class="del" href="javascript:void(0);" onclick="del(this)">删除</a></p>
			<p class="item">哈哈2<a class="del" href="javascript:void(0);">删除</a></p>
			<!-- <p class="item">哈哈	<a class="del" href="javascript:void(0);">删除</a></p> -->
		</div>
	</div>
	<script>
	//字数减少
	$("#mytxt").keyup(function(){
		var len=$(this).val().length;
		// console.log()
		$("i.count").text(140-len);
		// 问题：如果到了0，就不能继续输入内容了，如何处理？？
	});
	// 发布
	$('button[type="button"]').click(function(event) {
		// 获取用户输入的内容
		var text=$("#mytxt").val();
		// 生成要插入的标签+内容
		var $p=$('<p class="item">'+text+'<a class="del" href="javascript:void(0);">删除</a></p>');
		// 将标签内容插入到父级内部的最前面（倒序）
		$("#blogs").prepend($p);
		// 清空输入框内容
		$("#mytxt").val("");

		//删除,将删除操作写在这里可以给未来的元素重新绑定事件
		$(".del").click(function(){
			var bool=confirm("确定要删除吗？");
			if(bool){
				$(this).parent().remove();
			}
		});
	});
	
	</script>
</body>
</html>

# 微博发布及评论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

<!DOCTYPE html>
<html>

<head>
	<meta charset='utf-8'>
	<title>作业1</title>
	<style>
		.item {
			border-bottom: 1px solid #000;
		}

		.content {
			width: 450px;
		}

		.touxiang {
			float: left;
			margin-right: 10px;
			width: 60px;
			height: 60px;
		}

		textarea {
			width: 300px;
		}

		.delBtn {
			float: right;
			font-weight: 400
		}
	</style>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
	<div id="comment" class="content">
		<div class="item">
			<img class="touxiang" src="img/star2.png">
			<h4>王小贱 <small>2018-04-26 10:54:11</small><a class="delBtn" href="javascript:;">[删除]</a>
			</h4>
			<div class="msg">今天天气很好，我们一起骑着单车去郊外游玩吧</div>
		</div>

	</div>
	<div class="publish">
		<h4>在此留言：</h4>
		<textarea id="mytxt" rows="8"></textarea><br>
		<button id="send" type="button">发表</button>
	</div>
	<script>
		//获取时间
		var time = new Date()
		var year = time.getFullYear();
		var month = add(time.getMonth() + 1);
		var date = add(time.getDate());
		var hour = add(time.getHours());
		var min = add(time.getMinutes());
		var sec = add(time.getSeconds());
		//补0函数
		function add(num) {
			if (num < 10)
				return num = '0' + num;
			else
				return num;
		}
		var istime = ' ' + year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec;
		//给发表按钮绑定单击函数
		$("#send").click(function () {
			var text = $("#mytxt").val();
			if (!text) {
				alert('您的评论不能为空！');
				return;
			}
			var $div = $('<div class="item">\n' +
				'\t\t<img class="touxiang" src="img/star.png">\n' +
				'\t\t<h4>李小沫 <small>' + istime + '</small><a class="delBtn" href="javascript:;">[删除]</a></h4>\n' +
				'\t\t<div class="msg">' + text + '</div>\t\n' +
				'\t</div>');
			$("#comment").append($div);
			$("#mytxt").val("");
		});
		//删除函数
		$(".content").on("click", ".delBtn", function () {
			if (confirm("确定要删除吗？")) {
				$(this).parents(".item").remove();
			}
		})
	</script>
</body>

</html>