(5)JavaScript DOM練習題
阿新 • • 發佈：2018-11-27
題目1：點選每個 li節 點 都彈出其文字值
程式碼注意：1 . 為什麼要寫成 liNodes[i].onclick = funciton（）{xxxx}
liNodes[i].onclick =XXXX;
function hello()
{
alert(“hello”);
}
- 如果我們是 liNodes[i].onclick = hello;
實際上是用的引用 相當於liNodes[i].onclick = function (){alert(“hello”);};
2.如果我們是 liNodes[i].onclick = hello(); 代表的是 這個函式被執行了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 練習1 點選每個li節點 都彈出其文字值
window.onload = function()
{
//1.獲取所有的 li 節點
var liNodes = document.getElementsByTagName("li") 題目2 ：點選每個li節點 若li節點的文字值沒有^^開頭 加上 如果有 ^^， 則去除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 點選每個li節點 若li節點的文字值沒有^^開頭 加上
// 有 ， 則去除
window.onload = function()
{
var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i ++)
{
liNodes[i].onclick = function(){
var val = this.firstChild.nodeValue;
var reg = /^\^{2}/g;
if(reg.test(val)){
val = val.replace(reg,"");
}
else{
val = "^^" + val;
}
this.firstChild.nodeValue = val;
}
}
// //1. 使用正則表示式判斷是否已^^開始
// //2. 呼叫字串的replace（reg，str） 方法除去指定的字串
// var str = "^^abc";
// var reg = /^\^{2}/g; //正則表示式
// alert(reg.test(str));
// str = str.replace(reg,"");
// alert(str);
//
// var str2 = "abc";
// alert(reg.test(str2));
}
</script>
</head>
<body>
<p>你喜歡哪個城市？</p>
<ul id = "city"><li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
<br><br>
<p>你喜歡哪款單機遊戲？</p>
<ul id = "game">
<li id="rl">紅警</li>
<li>實況</li>
<li>極品飛車</li>
<li>魔獸</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>