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>
jquery方法：
$("#test").click(function(){ alert($("#test").text()); 或者alert($(this).text()); //获取li的文本值 alert(this.value);//获取li的value值 });
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>
4.JS获取元素的一些属性(转)
clientWidth //获取元素的宽度 clientHeight //元素的高度 offsetLeft //元素相对于父元素的left offsetTop //元素相对于父元素的top offsetWidth //元素的宽度 offsetHeight //元素的高度 区别： clientWidth=width+padding clientHeight=height+padding offsetWidth=width+padding+border offsetHeight=width+padding+border scrollLeft //元素最左端到窗口最左端的距离 scrollTop //元素最顶端到窗口最顶端的距离 scrollWidth //元素的滚动宽度 scrollHeight //元素的滚动高度 //获取元素的纵坐标 function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; } //获取元素的横坐标 function getLeft(e){ var offset=e.offsetLeft; if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); return offset; }
关于e.offsetParent在table中的解释为下：
在td中的元素会把第一个绝对／相对定位的hierarchy parent当作offsetParent，如果没有找到需要分三种情况讨论
一，如果该元素没有绝对／相对定位，则会把td当作offsetParent
二，如果该元素绝对／相对定位并且table没有绝对／相对定位，则会把body当作offsetParent
三，如果该元素绝对／相对定位并且table绝对／相对定位，则会把table当作offsetParent
原文链接 ：http://www.cnblogs.com/Godblessyou/archive/2007/12/24/1012920.html
5.详细描述在js中创建select标签以及添加元素等操作：
<html> <head> <style type="text/css" > </style> <script type="text/javascript" src="jquery.min.js"></script> <script language="javascript"> function number(){ var obj = document.getElementById("mySelect"); //obj.options.length = 0 ;清空select标签中的option alert(obj.selectedIndex); //alert(obj.options[obj.selectedIndex].value);获取选中的option的value //alert(obj.options[obj.selectedIndex].text);获取选中的option的text //alert(obj.options[1].selected ) ; //obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变 //obj.options.add(new Option("我的吃吃","4"));再添加一个option //alert(obj.selectedIndex);//显示序号，option自己设置的 //obj.options[obj.selectedIndex].text = "我的吃吃";更改值 //obj.remove(obj.selectedIndex);删除功能 } </script> </head> <body> <select id="mySelect"> <option value="111">我的包包</option> <option value="222">我的本本</option> <option value="333">我的油油</option> <option value="444">我的担子</option> </select> <input type="button" name="button" value="查看结果" onclick="number();"> </body> </html>