AAAAAAAAA

原生js的appendChild()和removeChild()方法

//appendChild() 方法可向父节点的子节点列表的末尾添加新的子节点。
首先创建一个节点，
然后创建一个文本节点，
然后将文本节点添加到LI节点上。
最后将节点添加到列表中。
  var node=document.createElement("LI");
	var textnode=document.createTextNode("Water");
	node.appendChild(textnode);
	document.getElementById("myList").appendChild(node);
1
2
3
4
5
6
7
8
9

//removeChild() 方法可从子节点列表中删除某个节点。
//如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
1
2
3
4

jq的append()和remove() 方法：

1、append()，可在所选元素的末尾处追加子元素，语法 "$(父元素).append(子元素)"
   $("#love").append("你");
2、appendTo()，可将子元素追加到指定元素的末尾，语法"$(子元素).appendTo(父元素)”
	$("你").appendTo("#you");
1
2
3
4

remove() 方法移除被选元素，包括所有的文本和子节点。该方法也会移除被选元素的数据和事件。
提示：如需移除元素，但保留数据和事件，请使用 detach() 方法代替。
提示：如只需从被选元素移除内容，请使用 empty() 方法
  $("p").remove();
1
2
3
4

原生js的insertBefore()，原生js的DOM没有提供insertAfter()方法（jq中都有）：

语法：insertBefore(新元素,要添加位置的元素节点);
首先创建一个li节点,
然后创建一个文本节点,
然后添加文本节点的在li节点。
然后获取ul列表元素
最后在ul的第一个子节点前插入li节点。
  <ul id="myList" class="my"> 
      <li>ddd</li>
      <li>sss</li>
    </ul>
  var newItem=document.createElement("LI")
  var textnode=document.createTextNode("Water")
  newItem.appendChild(textnode)
  var list2=document.getElementsByClassName("my")  //
  console.log(list2); //HTMLCollection [0：ul#myList.my, myList: ul#myList.my]
  list2[0].insertBefore(newItem,list2[0].childNodes[0]); //用 getElementsByClassName得到的对象是类数组，另外querySelectorAll和querySelector都可以的
  list2.myList.insertBefore(newItem,list2.myList.childNodes[0]); 
  
   var list=document.getElementById("myList")
   console.log(list);  //
…
   list.insertBefore(newItem,list.childNodes[0]); //list.childNodes是个数组，可以插在任意节点前，这边插入必须精确到某个节点前，不能直接用list
	（原生js的insertBefore只能父元素对子元素操作，不能在同级前添加，但jq的insertBefore可以）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

jq的insertBefore()和insertAfter()：

//insertBefore() 方法在被选元素前插入 HTML 元素。
 $("Hello world!").insertBefore("p"); //把span插入在p之前
 //insertAfter() 方法在被选元素后插入 HTML 元素。
  $("Hello world!").insertAfter("p");
1
2
3
4

原生js的获取元素的属性、设置元素的属性、删除元素的属性

  <img src="../1.jpg" id="imgs" class="imgss" alt="加载失败" title="aa" sum="sxc" name="imgsss">

    <script>
   
 var a=document.getElementById("imgs")
 console.log(a.src);  //http://127.0.0.1:5500/1.png
 console.log(a.title); //aa
 console.log(a.sum); //undefined 自定义属性不能这样获取
 console.log(a.getAttribute("sum")); //sxc 获取元素自定义的属性
 
 a.setAttribute("del","delet") //设置自定义属性
 console.log(a.getAttribute("del")) //delet

a.removeAttribute("title")  //删除元素的属性，包括自定义
console.log(a.title); //非自定义打印出来是空 
a.removeAttribute("sum")  //删除元素的属性，包括自定义
console.log(a.sum); //自定义打印出来是undefined

 var b=document.getElementsByName("imgsss") //对应name
 console.log(b[0].src); //http://127.0.0.1:5500/1.png
 console.log(b[0].sum); //undefined

 var c=document.getElementsByClassName("imgss")
 console.log(c[0].src); //http://127.0.0.1:5500/1.png

var d=document.querySelector(".imgss")
console.log(d.alt); //加载失败

var e=document.querySelectorAll("#imgs")
console.log(e.alt); //undefined 数组也是对象没这个alt属性就没定义，但不会报错
console.log(e[0].alt); //加载失败


    </script>
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

jq的获取元素的属性、设置元素的属性、删除元素的属性

var temp = $('.test1').attr('src');//获取属性
ar temp2= $('.test2').attr('src','./2.png');//设置属性
var temp = $('.test1').removeAttr('src'); //删除属性
1
2
3

总结：父节点中添加子节点的方法：
1.利用原生js的innerHTML
2.原生js的appendChild()
3.原生js的insertBefore()

img种常用的三个图片格式：png、jpg、gif、jpeg、bmp，想要展示色彩丰富的高品质图片，可以使用jpg格式，但是体积较大；一般使用png格式，体积较小且支持保存透明背景；如果需要展示动画图片，可以使用gif图片格式。png、jpg、gif、jpeg是可以相互切换的，切换后都可以正常显示（动图也是图所以可以切换成其他格式），但还是要按每个人对图片的质量要求以及规定。
（bmp格式支持上百万种颜色，但是不支持无损压缩（很少用））

RGBA与RGB和区别:
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。(颜色的透明度)

RGBA色彩模式与RGB基本相同,RGB定义了颜色的红绿蓝值,RGBA在RGB模式上新增了Alpha透明度.

RGB、RGBA、CMYK、HSL、HSV又称HSB 都是色彩空间，描绘颜色