Xiaoqiang の HTML5 モバイル開発ロード (30) - JavaScript レビュー 5-htmlチュートリアル-php.cn

Xiaoqiang の HTML5 モバイル開発ロード (30) - JavaScript レビュー 5

黄舟

リリース： 2017-02-04 14:25:03

オリジナル

1743 人が閲覧しました

1. 検索

最初の方法: id に基づいて検索

var obj = document.getElementById(id); //Document は HTMLDocument のインスタンスです

<html>  
    <head>  
        <script>  
            function f1(){  
                var obj = document.getElementById(&#39;a1&#39;); //双引号，单引号都可以  
                //innerHTML属性：可以访问或者设置节点的html的属性值  
                //alert(obj.innerHTML);   
                obj.innerHTML = "为什么点我"; //双引号单引号都可以  
            }  
            function f2(){  
                var obj = document.getElementById(&#39;d1&#39;);  
                alert(obj.innerHTML);  
            }  
            function f3(){  
                var obj = document.getElementById(&#39;username&#39;);  
                //value属性：可以获取文本输入框的值和改变值  
                alert(obj.value); //获得值  
                obj.value = &#39;abc&#39;;//改变值  
            }  
              
        </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>

ログイン後にコピー

2 つ目の方法

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 = $(&#39;u1&#39;).getElementsByTagName(&#39;li&#39;);  
                for(i=0; i<arr.length; i++){  
                    arr[i].className = &#39;&#39;;  
                }  
                var obj = $(&#39;l&#39;+index);  
                obj.className = &#39;selected&#39;;  
            }  
        </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>

ログイン後にコピー

3番目の方法

トラバーサルを使用する(ブラウザの互換性が低い)

parentNode

previous前の兄弟

next兄弟次の兄弟

childNodesすべての子ノード

firstChild 前の子ノード

lastChild 次の子ノード

ブラウザの互換性の問題のため、できるだけ使用しないようにします

document.createElement(tagName) を作成しますタグ名

3. .appendChild(obj); //最後の子として追加します

node.insertBefore(obj, refNode) //refNode の前に追加します

node.replaceChild(obj, refNode); //refNode

Four を置き換えます. 削除

node.removeChild(obj);

<html>  
    <head>  
        <script src="myjs.js"></script>  
        <script>  
            function f1(){  
                var obj = document.createElement(&#39;div&#39;);      
                obj.innerHTML = &#39;兴趣最重要...&#39;;  
                obj.className = &#39;s1&#39;;  
            //  $(&#39;d1&#39;).appendChild(obj);     
            //  $(&#39;d1&#39;).insertBefore(obj, $(&#39;a1&#39;));   
            //  $(&#39;d1&#39;).replaceChild(obj, $(&#39;a1&#39;));  
                $(&#39;d1&#39;).removeChild($(&#39;a1&#39;));  
            }  
        </script>  
        <style>  
            .s1{  
                width:200px;  
                height:100px;  
                background-color:red;  
            }  
        </style>  
    </head>  
          
    <body style="font-size:30px;" id="d1">  
<!--         <a href="javascript:alert(&#39;hello&#39;);">如何学好java</a>  -->  
        <a id="a1" href="javascript:;" onclick="f1();">如何学好java</a>  
    </body>  
</html>

ログイン後にコピー

5. スタイル

例: var obj = document. .className = 's1'; // s1 スタイルを使用します ****例を参照: フォーム検証****

2 番目の方法: ノードのスタイル属性を変更します

1 これはインラインスタイルです

2。変更するスタイル属性名に「-」が含まれている場合 (background-color など)、node.style.backgroundColor = 'red';

<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($(&#39;d1&#39;).style.left);  
                $(&#39;d1&#39;).style.left = v1 + 50 + &#39;px&#39;;  
            }  
        </script>  
    </head>  
    <body>  
        <div id="d1" style="left:10px;"></div>  
        <input type="button" value="click me"  
        onclick="f1();"/>  
    </body>  
</html>

ログイン後にコピー

ブラウザの 2 つのデフォルト動作を禁止する方法:

接続すると、ブラウザは href 属性で指定されたアドレスにリクエストを送信します

フォーム送信ボタンをクリックすると、ブラウザはフォームを送信します

禁止された方法

<a href="" onclick="return false;"></a>
<from onsubmint="return false;"></form>

ログイン後にコピー

上記は Xiaoqiang の HTML5 モバイル開発パス (30)— —JavaScript レビュー 5 のコンテンツ。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。