每日记载内容总结13

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>

posted @ 2013-06-11 19:03 CalronLoveRonnie 阅读(173) 评论(0) 编辑收藏举报

刷新页面返回顶部

代码那些事

工作点点滴滴

每日记载内容总结13

公告