-
<!DOCTYPE HTML>
<html>
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
? ?<title>nextSibling | previousSibling</title>
</head>
<body>
<ul id="u1">
? ?<li id="a">javascript</li>
? ?<li id="b">jquery</li>
? ?<li id="c">html</li>
</ul>
<ul id="u2">
? ?<li id="d">css3</li>
? ?<li id="e">php</li>
? ?<li id="f">java</li>
</ul>
<script type="text/javascript">
? ?function get_nextSibling(n) {
? ? ? ?var x = n.nextSibling;
? ? ? ?while (x && x.nodeType != 1) {
? ? ? ? ? ?x = x.nextSibling;
? ? ? ?}
? ? ? ?return x;
? ?}
? ?function get_previousSibling(n) {
? ? ? ?var x = n.previousSibling;
? ? ? ?while (x && x.nodeType != 1) {
? ? ? ? ? ?x = x.previousSibling;
? ? ? ?}
? ? ? ?return x;
? ?}
? ?var x = document.getElementsByTagName("li")[0];
? ?document.write(x.nodeName);
? ?document.write(" = ");
? ?document.write(x.innerHTML);
? ?var y = get_nextSibling(x);
? ?if (y != null) {
? ? ? ?document.write("<br />nextSibling: ");
? ? ? ?document.write(y.nodeName);
? ? ? ?document.write(" = ");
? ? ? ?document.write(y.innerHTML);
? ?} else {
? ? ? ?document.write("<br>已經(jīng)是最后一個節(jié)點");
? ?}
? ?var z = get_previousSibling(x);
? ?if (z != null) {
? ? ? ?document.write("<br />previousSibling: ");
? ? ? ?document.write(z.nodeName);
? ? ? ?document.write(" = ");
? ? ? ?document.write(z.innerHTML);
? ?} else {
? ? ? ?document.write("<br>已經(jīng)是最前面一個節(jié)點");
? ?}
</script>
</body>
</html>查看全部 -
<!DOCTYPE HTML>
<html>
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
? ?<title>無標(biāo)題文檔</title>
</head>
<body>
<ul id="con">
? ?<li id="lesson1">javascript
? ? ? ?<ul>
? ? ? ? ? ?<li id="tcon"> 基礎(chǔ)語法</li>
? ? ? ? ? ?<li>流程控制語句</li>
? ? ? ? ? ?<li>函數(shù)</li>
? ? ? ? ? ?<li>事件</li>
? ? ? ? ? ?<li>DOM</li>
? ? ? ?</ul>
? ?</li>
? ?<li id="lesson2">das</li>
? ?<li id="lesson3">dadf</li>
? ?<li id="lesson4">HTML/CSS
? ? ? ?<ul>
? ? ? ? ? ?<li>文字</li>
? ? ? ? ? ?<li>段落</li>
? ? ? ? ? ?<li>表單</li>
? ? ? ? ? ?<li>表格</li>
? ? ? ?</ul>
? ?</li></ul>
<script ?type="text/javascript">
? ?var mylist = document.getElementById("tcon");
? ?document.write("<br>=========<br>" + mylist.parentNode.parentNode.parentNode.lastChild.textContent);
</script>
</body>
</html>查看全部 -
數(shù)組排序sort()
①document.write(對象.sort());
//這個我不知道是怎么排的
②
function sortNum(a,b) {
? ? return a-b;
? ?}
document.write(對象.sort(sortNum));
//這個是按順序排的
查看全部 -
選定元素slice()
語法:document.write(對象.slice(start的位置數(shù)字,到你想截至的位置的后一位))
//因為開始是從0開始,結(jié)束的那一個數(shù)字不算,所以要取到你想取得那一個位置的后一位
查看全部 -
顛倒數(shù)組元素順序reverse()
document.write(對象.reverse())
會讓你的語句倒著來,但不會添加新的語句
例:
var myarr1= ["我","愛","你"];
? ?document.write(myarr1.reverse())
結(jié)果:你愛我
查看全部 -
指定分隔符連接數(shù)組元素join()
?document.write(對象.join(里面填入你想填的符號,也可以不填));
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
<div id="con">
? <p>javascript</p>
? <div>jQuery</div>
? <h5>PHP</h5>
</div>
<script type="text/javascript">
? var x=document.getElementById("con");
? ? document.write("firstChild : " + x.firstChild + "<br>");
? ? document.write("lastChild : " + x.lastChild + "<br>");
? ? document.write("firstChild.nodeValue : " + x.firstChild.nodeValue + "<br>");
? ? document.write("lastChild.nodeValue : " + x.lastChild.nodeValue + "<br>");
</script>
</body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
? ?<title>childNodes</title>
</head>
<body>
<div>
? ?javascript
? ?<p>javascript</p>
? ?<div>jQuery</div>
? ?<h5>PHP</h5>
</div>
<script type="text/javascript">
? ?document.write("-----------<br>");
? ?var chs = document.getElementsByTagName("div");
? ?for (var i = 0; i < chs.length; i++) {
? ? ? ?document.write((i + 1) + ", nodeType : " + chs[i].nodeType + "<br>");
? ? ? ?document.write((i + 1) + ", nodeName : " + chs[i].nodeName + "<br>");
? ? ? ?document.write((i + 1) + ", nodeValue : " + chs[i].nodeValue + "<br>");
? ? ? ?document.write((i + 1) + ", childNodes : " + chs[i].childNodes + "<br>");
? ?}
</script>
</body>
</html>查看全部 -
<!DOCTYPE HTML>
<html>
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
? ?<title>節(jié)點屬性</title>
</head>
<body>
<ul>
? ?<li>javascript</li>
? ?<li>HTML/CSS</li>
? ?<li>jQuery</li>
</ul>
<script type="text/javascript">
? ?var lis = document.getElementsByTagName("li");
? ?for (var i = 0; i < lis.length; i++) {
? ? ? ?document.write((i + 1) + ', innerHTML : ' + lis[i].innerHTML + "<br>");
? ? ? ?document.write((i + 1) + ", ?nodeName : " + lis[i].nodeName + "<br>");
? ? ? ?document.write((i + 1) + ", ?nodeType : " + lis[i].nodeType + "<br>");
? ? ? ?document.write((i + 1) + ', nodeValue : ' + lis[i].nodeValue + "<br>");
? ?}
</script>
</body>
</html>查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
? <p id="intro">我的課程</p> ?
? <ul> ?
? ? <li title="JS">JavaScript</li> ?
? ? <li title="JQ">JQuery</li> ?
? ? <li title="">HTML/CSS</li> ?
? ? <li title="JAVA">JAVA</li> ?
? ? <li title="">PHP</li> ?
? </ul> ?
? <h1>以下為li列表title的值,當(dāng)title為空時,新設(shè)置值為"WEB前端技術(shù)":</h1>
<script type="text/javascript">
? var Lists=document.getElementsByTagName("li");
? for (var i=0; i<Lists.length;i++)
? {
? ? var text = Lists[i].getAttribute("title");
? ? document.write(text +"<br>");
? ? if(text=="")
? ? {
? ? Lists[i].setAttribute("title", "WEB前端技術(shù)"+i);
? ? document.write(Lists[i].getAttribute("title")+"<br>");
? ? }
? }
</script>
</body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
? ?<title>getAttribute()</title>
</head>
<body>
<p id="intro">課程列表</p>
<ul>
? ?<li title="第1個li">HTML</li>
? ?<li>CSS</li>
? ?<li title="第3個li">JavaScript</li>
? ?<li title="第4個li">Jquery</li>
? ?<li>Html5</li>
</ul>
<p>以下為獲取的不為空的li標(biāo)簽title值:</p>
<script type="text/javascript">
? ?var con=document.getElementsByTagName("li");
? ?for (var i=0; i< con.length;i++){
? ? ? ?var text = con.item(i).getAttribute("title");
? ? ? ?if(text!=null)
? ? ? ?{
? ? ? ? ? ?document.write(text+"<br>");
? ? ? ?}
? ?}
? ?var p = document.getElementById("intro");
? ?document.write(".getAttribute() : " + p.getAttribute("id"));
</script>
</body>
</html>查看全部 -
<!DOCTYPE HTML>
<html>
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
? ?<title>無標(biāo)題文檔</title>
</head>
<body>
<form>
? ?請選擇你愛好:<br>
? ?<input type="checkbox" name="hobby" id="hobby1"> 音樂
? ?<input type="checkbox" name="hobby" id="hobby2"> 登山
? ?<input type="checkbox" name="hobby" id="hobby3"> 游泳
? ?<input type="checkbox" name="hobby" id="hobby4"> 閱讀
? ?<input type="checkbox" name="hobby" id="hobby5"> 打球
? ?<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
? ?<input type="button" value="全選" onclick="checkall();">
? ?<input type="button" value="全不選" onclick="clearall();">
? ?<p>請輸入您要選擇愛好的序號,序號為1-6:</p>
? ?<input id="wb" name="wb" type="text">
? ?<input name="ok" type="button" value="確定" onclick="checkone();">
</form>
<script type="text/javascript">
? ?function checkall() {
? ? ? ?var hobby = document.getElementsByTagName("input");
? ? ? ?// document.write("check-hobby.length = " + hobby.length);
? ? ? ?// 任務(wù)1
? ? ? ?for (var i = 0; i < hobby.length; i++) {
? ? ? ? ? ?if (hobby.item(i).type == "checkbox") {
? ? ? ? ? ? ? ?hobby.item(i).checked = true;
? ? ? ? ? ?}
? ? ? ?}
? ?}
? ?function clearall() {
? ? ? ?var hobby = document.getElementsByName("hobby");
? ? ? ?// document.write("clear-hobby.length = " + hobby.length);
? ? ? ?// 任務(wù)2
? ? ? ?for (var i = 0; i < hobby.length; i++) {
? ? ? ? ? ?hobby.item(i).checked = false;
? ? ? ?}
? ?}
? ?function checkone() {
? ? ? ?var j = document.getElementById("wb").value;
? ? ? ?j = (parseInt(j) - 1) % 6;
? ? ? ?// 任務(wù)3
? ? ? ?var hobby = document.getElementsByName("hobby");
? ? ? ?// document.write(j + " - hobby.length = " + hobby.length);
? ? ? ?// 任務(wù)2
? ? ? ?for (var i = 0; i < hobby.length; i++) {
? ? ? ? ? ?if (j == i) {
? ? ? ? ? ? ? ?hobby.item(i).checked = !hobby.item(i).checked;
? ? ? ? ? ? ? ?break;
? ? ? ? ? ?}
? ? ? ?}
? ?}
</script>
</body>
</html>查看全部 -
<!DOCTYPE HTML>
<html>
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
? ?<title>JavaScript</title>
</head>
<body>
<form name="Input">
? ?<table align="center" width="500px" height="50%" border="1">
? ? ? ?<tr>
? ? ? ? ? ?<td align="center" width="100px">
? ? ? ? ? ? ? ?學(xué)號:
? ? ? ? ? ?</td>
? ? ? ? ? ?<td align="center" width="300px">
? ? ? ? ? ? ? ?<input type="text" id=userid name="user" onblur="validate();">
? ? ? ? ? ? ? ?<div id=usermsg></div>
? ? ? ? ? ?</td>
? ? ? ?</tr>
? ? ? ?<tr>
? ? ? ? ? ?<td align="center" width="100px">
? ? ? ? ? ? ? ?姓名:
? ? ? ? ? ?</td>
? ? ? ? ? ?<td align="center">
? ? ? ? ? ? ? ?<input type="text" name="name">
? ? ? ? ? ?</td>
? ? ? ?</tr>
? ? ? ?<tr>
? ? ? ? ? ?<td align="center" width="%45">
? ? ? ? ? ? ? ?性別:
? ? ? ? ? ?</td>
? ? ? ? ? ?<td align="center">
? ? ? ? ? ? ? ?<input type="radio" name="sex" value="男">
? ? ? ? ? ? ? ?男
? ? ? ? ? ? ? ?<input type="radio" name="sex" value="女">
? ? ? ? ? ? ? ?女
? ? ? ? ? ?</td>
? ? ? ?</tr>
? ? ? ?<tr>
? ? ? ? ? ?<td align="center" width="30%">
? ? ? ? ? ? ? ?年齡:
? ? ? ? ? ?</td>
? ? ? ? ? ?<td align="center" width="300px">
? ? ? ? ? ? ? ?<input type="text" name="age">
? ? ? ? ? ?</td>
? ? ? ?</tr>
? ? ? ?<tr>
? ? ? ? ? ?<td align="center" width="100px">
? ? ? ? ? ? ? ?地址:
? ? ? ? ? ?</td>
? ? ? ? ? ?<td align="center" width="300px">
? ? ? ? ? ? ? ?<input type="text" name="addr">
? ? ? ? ? ?</td>
? ? ? ?</tr>
? ?</table>
</form>
<h1 id="myHead" onclick="getValue()">
? ?看看三種獲取節(jié)點的方法?
</h1>
<p>
? ?點擊標(biāo)題彈出它的值。
</p>
<input type="button" onclick="getElements()"
? ? ? value="看看name為sex的節(jié)點有幾個?" />
<Br>
<input type="button" onclick="getTagElements()"
? ? ? value="看看標(biāo)簽名為input的節(jié)點有幾個?" />
<script type="text/javascript">
? ?function getValue()
? ?{
? ? ? ?var myH = document.getElementById("myHead");
? ? ? ?alert(myH.innerHTML)
? ?}
? ?function getElements()
? ?{
? ? ? ?var myS = document.getElementsByName("sex")
? ? ? ?alert(myS.length);
? ?}
? ?function getTagElements()
? ?{
? ? ? ?var myI = document.getElementsByTagName("input");
? ? ? ?alert(myI.length);
? ?}
</script>
</body>
</html>查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
//?document.getElementsByName() 返回帶有指定名稱的節(jié)點對象的集合。
//?與getElementById() 方法不同的是,通過元素的 name 屬性查詢元素,而不是通過?id 屬性。
? var mynode= document.getElementsByName("myt") ? ? ? ?; ?
? alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">
<br />
<input type="button" onclick="getnum()" value="看看有幾項?" />
</body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
? ?<title>screen</title>
</head>
<script type="text/javascript">
? ?/*
.screen.height ?屏幕分辨率的高度,單位像素
.screen.width ?屏幕分辨率的寬度,單位像素
.screen.availHeight ?窗口可以使用的屏幕高度,減去界面特性,比如任務(wù)欄,單位像素
.screen.availWidth ?窗口可以使用的屏幕寬度,減去界面特性,比如任務(wù)欄,單位像素
.screen.colorDepth ?用戶瀏覽器表示的顏色位數(shù),通常為32位
.screen.pixelDepth ?用戶瀏覽器表示的顏色位數(shù),通常為32位(IE瀏覽器不支持此屬性)
? ?*/
? ?document.write("height ?屏幕分辨率的高度 : " + window.screen.height + "<br>");
? ?document.write("width ? 屏幕分辨率的寬度 : " + window.screen.width + "<br>");
? ?document.write("availHeight ?屏幕可以使用的屏幕高度 : " + window.screen.availHeight + "<br>");
? ?document.write("availWidth ? 屏幕可以使用的屏幕寬度 : " + window.screen.availWidth + "<br>");
? ?document.write("colorDepth ?用戶瀏覽器表示的顏色位數(shù) : " + window.screen.colorDepth + "<br>");
? ?document.write("pixelDepth ?用戶瀏覽器表示的顏色位數(shù) : " + window.screen.pixelDepth + "<br>");
</script>
<body>
</body>
</html>查看全部
舉報