Webフロントエンドの知識共有-jsチュートリアル-php.cn

Webフロントエンドの知識共有

零下一度

リリース： 2017-06-30 11:22:09

オリジナル

1497 人が閲覧しました

1. If 条件ステートメント関連

if ステートメントのかっこ内の式について、ECMAScript は自動的に Boolean() 変換関数を呼び出し、この式の結果をブール値に変換します。値が true の場合は次のステートメントが実行され、それ以外の場合は実行されません。

2.arguments 関連

arguments オブジェクトの長さ属性を使用して、パラメーターの数をインテリジェントに決定し、パラメーターを合理的に適用します。

たとえば、渡されたすべての数値を累積する加算演算を実装したいと考えていますが、数値の数は不確かです。

function box() {var sum = 0;if (arguments.length == 0) return sum; //如果没有参数，退出for(var i = 0;i < arguments.length; i++) { //如果有，就累加sum = sum + arguments[i];
        }return sum; //返回累加结果    }
    alert(box(5,9,12));

ログイン後にコピー

3.関数の内部プロパティ

関数内には、arguments と this という 2 つの特別なオブジェクトがあります。 argument は、関数に渡されるすべてのパラメータを含む配列のようなオブジェクトです。その主な目的は、関数パラメータを保存することです。ただし、このオブジェクトには callee と呼ばれるプロパティもあり、これは引数オブジェクトを所有する関数へのポインタです。

再帰アルゴリズムは通常、階乗関数に使用されるため、関数名が変更されない場合は、関数が内部で自身を呼び出すことは間違いありませんが、関数名が変更されると、内部の自己呼び出しを行う必要があります。一つ一つ修正しました。この問題を解決するには、代わりに arguments.callee を使用します。

function box(num) {if (num <= 1) {return 1;
        } else {return num * arguments.callee(num-1);//使用 callee 来执行自身        }
    }

ログイン後にコピー

4。event オブジェクト

は、W3C のアプローチではサポートされていないため、イベントオブジェクトを直接取得できます。 window.event から。

input.onclick = function (evt) {var e = evt || window.event; //实现跨浏览器兼容获取 event 对象    alert(e);
};

ログイン後にコピー

5. イベントのターゲット W3C の

target と IE の srcElement は両方ともイベントのターゲットを表します。

function getTarget(evt) {var e = evt || window.event;return e.target || e.srcElement; //兼容得到事件目标 DOM 对象}
document.onclick = function (evt) {var target = getTarget(evt);
    alert(target);
};

ログイン後にコピー

6.イベントのバブリングを防ぐ

バブリングを防ぐプロセスでは、W3C と IE では異なる方法が使用されるため、互換性を持たせる必要があります。

function stopPro(evt) {var e = evt || window.event;
    window.event ? e.cancelBubble = true : e.stopPropagation();
}

ログイン後にコピー

7. ブロックイベントのデフォルト動作

function preDef(evt) {var e = evt || window.event;if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

ログイン後にコピー

8. Web ページを右クリックすると、Windows に付属のメニューが自動的に表示されます。。その後、contextmenu イベントを使用して指定したメニューを変更できますが、これは右クリックのデフォルト動作がキャンセルされた場合に限ります。

function addEvent(obj, type, fn) { //添加事件兼容if (obj.addEventListener) {
        obj.addEventListener(type, fn);
    } else if (obj.attachEvent) {
        obj.attachEvent('on' + type, fn);
    }
}function removeEvent(obj, type, fn) { //移除事件兼容if (obj.removeEventListener) {
    ob    j.removeEventListener(type, fn);
    } else if (obj.detachEvent) {
        obj.detachEvent('on' + type, fn);
    }
}


addEvent(window, 'load', function () {var text = document.getElementById('text');
    addEvent(text, 'contextmenu', function (evt) {var e = evt || window.event;
        preDef(e);var menu = document.getElementById('menu');
        menu.style.left = e.clientX + 'px';
        menu.style.top = e.clientY + 'px';
        menu.style.visibility = 'visible';
        addEvent(document, 'click', function () {
            document.getElementById('myMenu').style.visibility = 'hidden';
        });
    });
});

ログイン後にコピー

9.js のドキュメントモード - document.compatMode

ドキュメントモードは、開発ではほとんど使用されないようです (ドキュメントの幅と高さなど)。可視領域の幅や高さなど

IE のボックスモデルのレンダリングは、標準モードと互換モードでは大きく異なります。標準モードでのボックスモデルの解釈は他の標準ブラウザの解釈と同じですが、互換モードには大きな違いがあります。 Doctype が宣言されていない場合、IE はデフォルトで Quirks モードになるということです。したがって、互換性の理由から、現在のドキュメントのレンダリング方法を取得する必要がある場合があります。

document.compatMode は便利で、戻り値として

BackCompat と CSS1Compat

の 2 つがあります。

BackCompat: 標準互換モードはオフになっています。ブラウザのクライアント領域の幅は document.body.clientWidth です。 CSS1Compat: 標準互換モードがオンになります。ブラウザのクライアント領域の幅は document.documentElement.clientWidth です。

例:

function getViewport(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

ログイン後にコピー

10. ブラウザ間でスタイルを取得

function getStyle(element, attr) {if (typeof window.getComputedStyle != 'undefined') {//W3Creturn window.getComputedStyle(element, null)[attr];
    } else if (typeof element.currentStyle != 'undeinfed') {//IEreturn element.currentStyle[attr];
    }
}

ログイン後にコピー

11.

jsはCSS関連のスタイルシート、insertRule、addRuleを動的に挿入し、スタイルを削除します: deleteRule、removeRule

スタンダードブラウザは insertRule をサポートし、IE の以前のバージョンは addRule をサポートします。

12.ページの幅と高さを取得します

window.innerWidth、window.innerHeight、documentElement.clientWidth、documentElement.clientHeight

注: jquery を使用してページの幅ページにはスクロールバーの幅は含まれません

window.innerWidth および window.innerHeight (IE9 以降、Google、Firefox によって認識され、幅と高さにはスクロールバーの幅が含まれます)

document.documentElement.clientWidth および document.documentElement.clientHeight (すべて IE、Firefox、Google で認識されます。幅と高さにはスクロールバーの幅は含まれません)

ページにスクロールバーがない場合:

window.innerWidth==document.documentElement.clientWidth、

window.innerHeight==document.documentElement.clientHeight (IE8 以下では window.innerHeight と window.innerWidth を認識しません)

//跨浏览器获取视口大小function getInner() {if (typeof window.innerWidth != 'undefined') { //IE8及以下undefinedreturn {
            width : window.innerWidth,
            height : window.innerHeight
        }
    } else {return {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        }
    }
}

ログイン後にコピー

以上がWebフロントエンドの知識共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。