今日学习总结
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>