JS的8個必須注意的基礎知識
- php中世界最好的语言原創
- 2018-03-13 13:16:111564瀏覽
這次帶給大家JS的8個必須注意的基礎知識，JS的8個必須注意的基礎知識注意事項有哪些，下面就是實戰案例，一起來看一下。
1 JS 中修改元素的類別名稱: 可以透過className修改,不能使用class
function toRed() { var tobox = document.getElementById('box1');
tobox.className = 'tmpBox';
}2 函數傳參
#<html lang="en"><head>
<meta charset="UTF-8">
<title>02-函数传参数</title>
<style>
#div1{width: 200px; height: 200px; border: 1px solid #000;} </style>
<script>
function setColor(color) { var oDiv = document.getElementById('div1');
oDiv.style.backgroundColor = color;
} </script></head><body><input type="button" value="变绿" onclick="setColor('green')"><input type="button" value="变黄" onclick="setColor('yellow')"><input type="button" value="变黑" onclick="setColor('black')"><div id="div1"></div></body></html>3修改屬性的第二個方法:(3499910bf9dac5ae3c52d5ede7383485要修改的屬性不固定時使用5db79b134e9f6b82c0b36e0489ee08ed)
可以透過oDiv. style[屬性名稱] = 值;來動態修改屬性和值
//括号里放的是变量
function setStyle(propertyName,value) {
var oDiv = document.getElementById('div1');
oDiv.style[propertyName] = value;
}<html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{ width: 100px;height: 100px;border: 1px solid #000;background-color: skyblue;
} </style>
<script>
function setStyle(propertyName,value) { var oDiv = document.getElementById('div1');
oDiv.style[propertyName] = value;
} </script></head><body><input type="button" value="变高" onclick="setStyle('height','200px')"><input type="button" value="变宽" onclick="setStyle('width','200px')"><input type="button" value="变红" onclick="setStyle('background','red')"><div id="div1"></div></body></html>#4.style和className的區別
元素.style.屬性= xxx;是修改的行間(行內)樣式,它的優先權比較高!!! 例如:oDiv.style.backgroundColor = ' red';
className : 可以透過指定的類別名稱,去找到對應的樣式;但是如果使用了style之後,再使用className指定樣式,就會沒有效果!!!!
注意:要嘛都是用style設定樣式,要嘛單獨使用className指定樣式,不可混合使用,會有未知的錯誤發生!5.提取行间事件
window.onload 頁面載入完成時才執行行為、樣式、結構三者分離: JS CSS HTML 分離
提取事件為元素新增事件
<html lang="en"><head>
<meta charset="UTF-8">
<title>05-提取行间事件</title>
<script>
//window.onload 页面加载完成时才执行
window.onload = function () { var oBtn = document.getElementById('btn1'); //给元素添加事件
oBtn.onclick = function () { //匿名函数
alert('我是打酱油的');
};
} </script></head><body><input id="btn1" type="button" value="按钮"></body></html>從下面程式碼中取得到input###<div id="box1">
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br></div>###放下如下:###window.onload =function (){ var oDiv = document.getElementById('box1'); //现获取父元素div
var inputs = oDiv.getElementsByTagName('input'); //再通过div获取到里面所有的input}######7. innerHTML#########用於設定容器標籤的內容,可以是文字,也可以是HTML(標籤)。 ###<html lang="en"><head>
<meta charset="UTF-8">
<title>08-innerHTML</title>
<style>
.content{ width: 200px; height: 200px; border: 1px solid #000;
} </style>
<script>
window.onload = function () { var oText = document.getElementById('textField'); var oBtn = document.getElementById('button'); var oContent = document.getElementById('div-content');
oBtn.onclick = function () {
oContent.innerHTML = oText.value;//可以往里放文字,标签等
}
} </script></head><body><input type="text" id="textField"><input type="button" value="点击" id="button"><div class="content" id="div-content"></div></body></html>###8.字串的拼接:###var str = '我叫小明'+12+'岁'+168+'2017'; >>> 结果:我叫小明12岁1682017var num = '9+6等于'+(9+6); >>> 结果: 9 + 6 等于 15###相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########HTML與CSS中背景相關屬性######################### ##HTML與CSS中2D轉換模組#########
以上是JS的8個必須注意的基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：關於正規表示式的幾個小練習下一篇：關於正規表示式的幾個小練習