Maison > Article > interface Web > Le chemin de Xiaoqiang vers le développement mobile HTML5 (30) - Revue JavaScript 5
Le chemin de Xiaoqiang vers le développement mobile HTML5 (30) - Revue JavaScript 5
- 黄舟original
- 2017-02-04 14:25:031712parcourir
1. Rechercher
La première méthode : recherche basée sur l'identifiant
var obj = document.getElementById(id); //document est une instance de 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> La deuxième voie
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>La troisième voie
Utiliser la méthode de traversée (mauvaise compatibilité avec les navigateurs)
parentNode
previousSibling frère précédent
nextSibling prochain frère
childNodes Tous les nœuds enfants
firstChild Le nœud enfant précédent
lastChild Le nœud enfant suivant
En raison de problèmes de compatibilité du navigateur, la méthode de traversée doit être aussi minimale que possible Utiliser
2. Créer
document.createElement(tagName); node.appendChild(obj); //Ajouter comme dernier enfant
node.insertBefore(obj, refNode) ; //Ajouter au début de refNode
node.removeChild( obj);
5. Style
<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>Par exemple : var obj = document.getElementById ('id1'); obj.className = 's1'; //Utiliser le style s1 ****Voir exemple : Vérification du formulaire****
Comment désactiver les deux comportements par défaut du navigateur :
Cliquez sur la connexion, le navigateur enverra une requête à l'adresse indiquée par le href attribut
<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>Cliquez sur le bouton d'envoi du formulaire, le navigateur soumettra le formulaireMéthode interdite
Ce qui précède est le contenu de la route de développement mobile HTML5 de Xiaoqiang (30) - Révision JavaScript 5. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !
<a href="" onclick="return false;"></a> <from onsubmint="return false;"></form>