Heim >Web-Frontend >HTML-Tutorial >Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (30) – JavaScript-Rezension 5
Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (30) – JavaScript-Rezension 5
- 黄舟Original
- 2017-02-04 14:25:031762Durchsuche
1. Suche
Der erste Weg: Suche nach ID
var obj = document.getElementById(id); //document ist eine Instanz von HTMLDocument
<html>
<head>
<script>
function f1(){
var obj = document.getElementById('a1'); //双引号，单引号都可以
//innerHTML属性：可以访问或者设置节点的html的属性值
//alert(obj.innerHTML);
obj.innerHTML = "为什么点我"; //双引号单引号都可以
}
function f2(){
var obj = document.getElementById('d1');
alert(obj.innerHTML);
}
function f3(){
var obj = document.getElementById('username');
//value属性：可以获取文本输入框的值和改变值
alert(obj.value); //获得值
obj.value = 'abc';//改变值
}
</script>
</head>
<body style="font-size:30px;font-style:italic;">
<!--javascript:; 表示是一个空白的js语句-->
<a href="javascript:;" id="a1" onclick="f1();">click me</a><br/>
<div id="d1" ><span>你好</span></div><br/>
<input type="text" id="username" name="username"/><br/>
<input type="button" value="点我吧" onclick="f3();"/>
</body>
</html>Der zweite Weg
var arr = node.getElementsByTagName('tagName');
<html>
<head>
<style>
ul{
list-style-type:none;
}
ul li{
float:left;
border:1px solid black;
margin-left:10px;
width:100px;
height:40px;
background-color:red;
cursor:pointer;
}
.selected{
background-color:#ff88ee;
}
</style>
<script src="myjs.js"></script>
<script>
function doAction(index){
var arr = $('u1').getElementsByTagName('li');
for(i=0; i<arr.length; i++){
arr[i].className = '';
}
var obj = $('l'+index);
obj.className = 'selected';
}
</script>
</head>
<body style="font-size:30px;">
<ul id="u1">
<li onmouseover="doAction(1);" id="l1">选项一</li>
<li onmouseover="doAction(2);" id="l2">选项二</li>
<li onmouseover="doAction(3);" id="l3">选项三</li>
</ul>
</body>
</html>Der dritte Weg
Traversal-Methode verwenden (schlechte Browserkompatibilität)
parentNode
previousSibling previous Brother
nextSibling next Brother
childNodes Alle Untergeordnete Knoten
firstChild Der vorherige untergeordnete Knoten
lastChild Der nächste untergeordnete Knoten
Aufgrund von Browserkompatibilitätsproblemen sollte die Traversal-Methode so minimal wie möglich sein. Verwenden Sie
2. Erstellen Sie
document.createElement(tagName); //Als letztes Kind hinzufügen
node.insertBefore(obj, refNode); //An den Anfang von refNode hinzufügen
node.removeChild(obj );
5. Stil
<html>
<head>
<script src="myjs.js"></script>
<script>
function f1(){
var obj = document.createElement('div');
obj.innerHTML = '兴趣最重要...';
obj.className = 's1';
// $('d1').appendChild(obj);
// $('d1').insertBefore(obj, $('a1'));
// $('d1').replaceChild(obj, $('a1'));
$('d1').removeChild($('a1'));
}
</script>
<style>
.s1{
width:200px;
height:100px;
background-color:red;
}
</style>
</head>
<body style="font-size:30px;" id="d1">
<!-- <a href="javascript:alert('hello');">如何学好java</a> -->
<a id="a1" href="javascript:;" onclick="f1();">如何学好java</a>
</body>
</html>Zum Beispiel: var obj = document.getElementById( 'id1'); obj.className = 's1'; //S1-Stil verwenden ****Siehe Beispiel: Formularüberprüfung****
1. Es muss ein Inline-Stil sein2. Wenn der Name „-“ enthält, z. B. „Hintergrundfarbe“, müssen Sie „node.style.backgroundColor“ ändern = 'red' wie folgt:
So deaktivieren Sie die beiden Standardverhaltensweisen des Browsers:
Klicken Sie auf die Verbindung. Der Browser sendet eine Anfrage an die Adresse, auf die das href-Attribut verweist
<html>
<head>
<style>
#d1{
width:80px;
height:80px;
background-color:blue;
position:relative;
}
</style>
<script src="myjs.js"></script>
<script>
function f1(){
var v1 = parseInt($('d1').style.left);
$('d1').style.left = v1 + 50 + 'px';
}
</script>
</head>
<body>
<div id="d1" style="left:10px;"></div>
<input type="button" value="click me"
onclick="f1();"/>
</body>
</html>Klicken Sie auf die Schaltfläche zum Senden des Formulars. Der Browser sendet das Formular.Verbotene Methode
Das Obige ist der Inhalt von Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (30) - JavaScript-Überprüfung 5. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!
<a href="" onclick="return false;"></a> <from onsubmint="return false;"></form>