今日学习总结

1.css中list-style用法：

list-style 简写属性在一个声明中设置所有的列表属性。该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。

可以按顺序设置如下属性：

    list-style-type
    list-style-position
    list-style-image

可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的，也可以值设置其中的一个值或者两个值。未设置的属性会使用其默认值。
<html>
<head>
<style type="text/css">
ul 
{
list-style: square inside url('/i/eg_arrow.gif')
}
</style>
</head>

2.ul下li的点击事件，获取li里面的value值和li的文本值

<ul>
    <li value="111" id="test">aaa</li>
    <li value="222">webbb</li>
    <li value="333">ccc</li>
    <li value="444">ddd</li>
</ul>
js实现获取li里面的文本值：用innerHTML

<ul id="parent">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

function ons(){
var ul = document.getElementById('parent');//先用id获取ul，然后再获取li，缩小getElementsByTagName的范围
var lis = ul.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
    lis[i].onclick = function(){
        alert(this.innerHTML);
    }
}

3.createElement介绍

appendChild() 方法和insertBefore() 方法的描述和区别

<html>
<head>
<style type="text/css">
p{
    color: red ;
}
</style>
</head>
<body>

<div id="div1">
<p id="p1">1.基本操作:添加一个段落</p>
<p id="p2">2.添加select标签</p><br>
<p id="p3">3.添加input,使用setAttribute给属性赋值</p><br>
<div id="div2">
<p>test insertBefore</p>
<p id="p4">4.appendChild() 方法和insertBefore() 方法的不同
appendChild() 方法在节点的子节点列表末添加新的子节点。
insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
replaceChild  第一个参数是要插入的节点，第二个参数要替换的节点.
</p>
<p id="p5">深入理解insertBefore的任意位置插入
  var oTest = document.getElementById("test");<br>
  var refChild = document.getElementById("x1");<br>
  var newNode = document.createElement("p");<br>
  newNode.innerHTML = "This is a test";<br>
  (1)oTest.insertBefore(newNode,refChild);在refChild前插入<br>
  (2)oTest.insertBefore(newNode,refChild.nextSibling);在refChild的下一个节点前插入<br>
  (3)oTest.insertBefore(newNode,oTest.childNodes[0]); 在第一个子节点前面插入节点，改变数字，改变位置。<br>

</p>
</div>
</div>

<script>
var para=document.createElement("p");
para.style.color = "black";
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var elementp1=document.getElementById("p1");
elementp1.appendChild(para);

var elementp2=document.getElementById("p2");
var selectjs = document.createElement("select");
selectjs.options[0]= new Option("select one","");
selectjs.options[1]= new Option("select two","");
selectjs.size = "2" ;
selectjs.style.width = "200px";
elementp2.appendChild(selectjs);

var elementp3=document.getElementById("p3");
var inputjs = document.createElement("input");
inputjs.setAttribute("type", "text");
inputjs.setAttribute("name", "q");
inputjs.setAttribute("value", "  请点击");
inputjs.setAttribute("onclick", "javascript:alert('This is a test!');");  
elementp3.appendChild(inputjs);

var elementdiv2=document.getElementById("div2");
var elementp4=document.getElementById("p4");
var newNode = document.createElement("p");
newNode.style.color = "black";
newNode.innerHTML = "I am before 4 ,add by insertBefore";
elementdiv2.insertBefore(newNode,elementp4);
var newNode2 = document.createElement("p");
newNode2.style.color = "black";
newNode2.innerHTML = "I am add to the end  ,add by appendChild";
elementdiv2.appendChild(newNode2);
</script>


</body>
</html>

 

posted @ 2023-03-09 21:29  哈哈哈老先生  阅读(18)  评论(0)    收藏  举报