Javascript簡單特效及摘要
1.js中的Element對象
** var input1=docuemnt.getElementById("input1");
//alert(input1.value);
//alert(input1.getAttribute("屬性名"));
//alert(input1.setAttribute("屬性名","屬性值"));
//input1.removeAttribute("屬性名"); 此方法不能用於刪除value值。
2.node對象
<span id="spanid">哈哈哈</span>
var span1=document.getElementById("spanid");
alert(span1.innerHTML); //獲取標簽文本內容，也可以設置內容。
alert(span1.value);
alert(span1.nodeType); //1
alert(span1.nodeName); //SPAN
alert(span1.nodeValue); //null
var id1=span1.getAttributeNode("id");
alert(id1.nodeType); //2
alert(id1.nodeName); //id
alert(id1.nodeValue); //spanid
var text1=span1.firstChild;
alert(text1.nodeType); //3
alert(text1.nodeName); //#text
alert(text1.nodeValue); //哈哈哈
3.得到父輩節點，子節點，兄弟節點的方法
<ul id=ulid>
<li id=li1>hahgagh</li>
<li id=li2>dasaadad</li>
<li id=li3>cxzzcccxcv</li>
</ul>
var li1=document.getElementById("li1");
//得到ul結點
var ul1=li1.parentNode;
alert(ul1.id); //ul
li1.nextSibling; //獲取它的下一個兄弟節點
li1.previousSibling; //獲取他的前一個兄弟
var ul1=document.getElementById("ulid");
alert(ul1.firstChild); //li
alert(ul1.lastChild);
appendChild(""); //類似於剪切黏貼的效果
父節點 . insertBefore("新節點"，"舊節點"); //在某個舊節點之前插入一個新節點
插入新節點，新節點不存在，所以要先創建節點。
父節點 . removeChild("子節點"); //刪除子節點
父節點 . replaceChild("新節點"，"舊節點"); //以新節點替換舊節點
某個節點 . cloneNode(true); //復制某個節點
//案例：實現全選和全不選
<script type="text/javascript">
function selAll(){
var boxArray=document.getElementsByName("hobbey");
for(var i=0;i<=boxArray.length;i++){
boxArray[i].checked=true;
}
}
function selNo(){
var boxArray=document.getElementsByName("hobbey");
for(var i=0;i<=boxArray.length;i++){
boxArray[i].checked=false;
}
}
function selSome(){
var boxArray=document.getElementsByName("hobbey");
for(var i=0;i<=boxArray.length;i++){
if(boxArray[i].checked==true){
boxArray[i].checked=false;
}else if(boxArray[i].checked==false){
boxArray[i].checked=true;
}
}
}
function selAllNo(){
var box=document.getElementById("boxid");
if(box.checked==true){
selAll();
}else{
selNo();
}
}
</script>
<input type="checkbox"id="boxid" onclick="selAllNo()"/>全選/全不選<br/>
<input type="checkbox"name="hobbey"/>西瓜<br/>
<input type="checkbox"name="hobbey"/>草莓<br/>
<input type="checkbox"name="hobbey"/>蘋果<br/>
<input type="checkbox"name="hobbey"/>荔枝<br/>
<input type="button"name="button"value="全選"onclick="selAll()"/>
<input type="button"name="hobbey"value="全不選"onclick="selNo()"/>
<input type="button"name="hobbey"value="反選"onclick="selSome()"/>
**表單輸入框的聚焦與失去焦點的效果
<input type="text"id="text"value="請輸入........"onfocus="focus1();"onblur="blur1();"/>
<script type="text/javascript">
function focus1(){
var inputid=document.getElementById("text");
inputid.value=" ";
}
function blur1(){
var inputid=document.getElementById("text");
inputid.value="請輸入...... ";
}
</script>
此動態效果類似於電腦c盤下的搜索效果。可自行實驗效果。
** 鼠標懸停事件代碼
<html>
<head>
<meta http-equiv="content-type"content="text/html charset=utf-8"/>
<style type="text/css">
.span{background:white;}
</style>
<script type="text/javascript">
function over(){
var span=document.getElementById("span");
span.style.background="#ccffff";
}
function out(){
var span=document.getElementById("span");
span.style.background="white";
}
function down(){
var span=document.getElementById("span");
span.style.background="grey";
}
</script>
</head>
<span id="span"class="span"onmouseover="over();"onmousedown="down();"onmouseout="out();">蘇寶娟</span>
</html>
Javascript簡單特效及摘要