注意すべきJSの8つの基礎知識-jsチュートリアル-php.cn

注意すべきJSの8つの基礎知識

php中世界最好的语言

リリース： 2018-03-13 13:16:11

オリジナル

1567 人が閲覧しました

今回は注意すべきJSの8つの基礎知識とは?注意点は何ですか?実際の事例を見てみましょう。

1 JS 内の要素のクラス名を変更します: className を通じて変更できますが、class は使用できません

       function toRed() {            var tobox = document.getElementById(&#39;box1&#39;);
            tobox.className = &#39;tmpBox&#39;;
        }

ログイン後にコピー

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(&#39;div1&#39;);
            oDiv.style.backgroundColor = color;
        }    </script></head><body><input type="button" value="变绿" onclick="setColor(&#39;green&#39;)"><input type="button" value="变黄" onclick="setColor(&#39;yellow&#39;)"><input type="button" value="变黑" onclick="setColor(&#39;black&#39;)"><div id="div1"></div></body></html>

ログイン後にコピー

3 属性を変更する 2 番目のメソッド: (< ;a> 変更された属性が固定されていない場合は ) を使用します

oDiv.style[属性名] = value;

//括号里放的是变量
       function setStyle(propertyName,value) { 
          var oDiv = document.getElementById(&#39;div1&#39;);
          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(&#39;div1&#39;);
            oDiv.style[propertyName] = value;
        }    </script></head><body><input type="button" value="变高" onclick="setStyle(&#39;height&#39;,&#39;200px&#39;)"><input type="button" value="变宽" onclick="setStyle(&#39;width&#39;,&#39;200px&#39;)"><input type="button" value="变红" onclick="setStyle(&#39;background&#39;,&#39;red&#39;)"><div id="div1"></div></body></html>

ログイン後にコピー

4 の違いstyle と className

Element.style.Attribute = 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(&#39;btn1&#39;);            //给元素添加事件
            oBtn.onclick = function () {  //匿名函数
                alert(&#39;我是打酱油的&#39;);
            };
        }    </script></head><body><input id="btn1" type="button" value="按钮"></body></html>

ログイン後にコピー

6.JSは親要素から子要素を取得します

次のコードから入力

<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(&#39;box1&#39;); //现获取父元素div
   var inputs = oDiv.getElementsByTagName(&#39;input&#39;); //再通过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(&#39;textField&#39;);            var oBtn = document.getElementById(&#39;button&#39;);            var oContent = document.getElementById(&#39;div-content&#39;);
            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 = &#39;我叫小明&#39;+12+&#39;岁&#39;+168+&#39;2017&#39;; >>>  结果:我叫小明12岁1682017var num = &#39;9+6等于&#39;+(9+6); >>>  结果: 9 + 6 等于 15

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

HTMLとCSSの背景関連属性

HTMLとCSSの2D変換モジュール

以上が注意すべきJSの8つの基礎知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。