溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
DM是(Document Object Model)的簡稱。
一.找元素
二.獲取內容
三.操作屬性
四.設置樣式
var a = document.getElementsByClassName("a");
a[o].style.background-color="red"; //(只能取鉗在body里邊的)
五.相關元素操作
五.元素的創建、添加、刪除
var obj = document.createElement('標簽名');
a.appendChild(); 向a中添加一個子元素。
a.removeChild();從a中刪除一個子元素。
a.selectedIndex 選中的是第幾個； a.options[a.selectedIndex] //取出第幾個option對象；
六. 字符串操作
var s = "hello world";
alert(s.toLowerCase()); 轉小寫 toUpperCase();轉大寫
alert(s.substring(3,8)) 從第三個位置截取到第八個位置
alert(s.substr(3,8)); 從第三個位置截取，截取八個字符長度。不寫后面數字是截到最后。
s.split('') 將字符串按照指定字符拆開。
七.事件
例題解析：1.復選框按鈕，下一步可用
<html>
<head>
<title>無標題文檔</title>
</head>
<body>
<input id="tong" type="checkbox" name="ch" ckecked="checked" value="1" onclick="ck_yes()")/>
<label for="tong">同意</label><br />
<input type="button" value="下一步" id="btn" disabled="disabled"/>
</body>
</html>
<script>
function ck_yes(){
var btn = document.getElementById('btn');
if(btn.disabled){
document.getElementById('btn').removeAttribute('disabled');
}else
document.getElementById('btn').setAttribute('disabled','disabled');
}
</script>
2.兩個下拉框互傳內容
<html>
<head>
<title>無標題文檔</title>
</head>
<body>
<select multiple="multiple" size="7" id="slt" >
<option>abc</option>
<option>123</option>
<option>asd</option>
<option>bcd</option>
<option>def</option>
</select>
<input type="button" value="左移" onclick="left()"/>
<input type="button" value="右移" onclick="right()"/>
<select multiple="multiple" size="7" id="slt_r" >
<option value="時間">時間</option>
<option value="日期">日期</option>
<option value="年月">年月</option>
<option value="東西">東西</option>
<option value="南北">南北</option>
</select>
</body>
</html>
<script>
function left(){
var slt = document.getElementById('slt');
var slt_r = document.getElementById('slt_r');
var opt1 = slt_r.options[slt_r.selectedIndex];
slt.appendChild(opt1);
}
function right(){
var slt=document.getElementById('slt');
var slt_r=document.getElementById('slt_r');
var opt = slt.options[slt.selectedIndex];
slt_r.appendChild(opt);
}
</script>
3.三個下拉框日期選擇
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id='year' onchange="addDay()"></select>
<select id="month" onchange="addDay()"></select>
<select id="date"></select>
</body>
</html>
<script>
var year_slt = document.getElementById('year');
var month_slt = document.getElementById('month');
var day_slt = document.getElementById('date');
var now = new Date();
now_year = now.getFullYear();
for(var i = now_year; i >= now_year - 70; i--) {
var opt_year = document.createElement('option');
opt_year.value = i;
opt_year.innerText = i;
year_slt.appendChild(opt_year);
}
for(var i = 1; i <= 12; i++) {
var opt_month = document.createElement('option');
opt_month.value = i;
opt_month.innerText = i;
month_slt.appendChild(opt_month);
}
function isRun(year) {
if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
return 29;
} else {
return 28
}
}
function addDay() {
day_slt.innerHTML = '';
if(month_slt.value == 1 || month_slt.value == 3 || month_slt.value == 5 || month_slt.value == 7 || month_slt.value == 8 || month_slt.value == 10 || month_slt.value == 12) {
for(var i = 1; i <= 31; i++) {
var day = document.createElement('option');
day.value = i;
day.innerText = i;
day_slt.appendChild(day);
}
} else if(month_slt.value == 4 || month_slt.value == 6 || month_slt.value == 9 || month_slt.value == 11) {
for(var i = 1; i <= 30; i++) {
var day = document.createElement('option');
day.value = i;
day.innerText = i;
day_slt.appendChild(day);
}
} else {
for(var i = 1; i <= isRun(year_slt.value); i++) {
var day = document.createElement('option');
day.value = i;
day.innerText = i;
day_slt.appendChild(day);
}
}
}
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
