ホームページ >ウェブフロントエンド >htmlチュートリアル >セルフコンパイルされた mjfn.js フロントエンド フレームワーク description_html/css_WEB-ITnose

セルフコンパイルされた mjfn.js フロントエンド フレームワーク description_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:52:101503ブラウズ

注: このドキュメントの所有権は、以下の Github 所有者に属します。質問も大歓迎です!

ユーザー注: セレクターはフロントエンドでのみ使用できます。このフレームワークはバックエンドで使用することはお勧めできません (node.js)。このフレームワークは jquery フレームワークを模倣していますが、jquery よりも軽量であり、継続的に更新されます。また、いくつかの共通モジュールが追加されており、フロントエンド エンジニアの作成が大幅に容易になります。まだ編集を始めたばかりですが、セレクターやいくつかの機能を追加しました。今後、機能はどんどん豊富になっていきます。自分自身の要件がある学生は、jquery よりもはるかに理解しやすいソース コードを学習することもできます (複雑さがまったく異なり、jquery をプログラミングする人は単なるマスターです!) このフレームワークはまだ IE8 には適していません。 ! ! !

このフレームワークはチェーン呼び出しを使用します。次のメソッドのみがサポートされていません。

remove/getClass/ele_W_H/body_W_H/click/pagination/Time、arrChan、strChan、obj、オブジェクト下のメソッド/エラースローメソッド

このフレームワークを紹介します使用されるグローバル変数は MjFn 変数の 1 つだけで、すべての操作メソッドは変数内のプロトタイプ メソッドにマウントされます。 newなしで作成されるので、使用したい場合は、3f1c4e4b6b16bbbd69b2ee476dc4f83aタグ内に次のコードを埋め込んでください:

MjFn('.className');       //example,括号内的内容是css选择器的格式

抽出された要素をフィルタリングできるようになりました:

MjFn('.className').first();         //内的第一个元素MjFn('.className').end();           //内的最后一个元素MjFn('.className').num(num);        //传入的参数为这些内容内的第几个

css メソッド: スタイルで渡す、2 つの形式

MjFn('.className').css('background-color','#ABC');      //传入两个参数MjFn('.className').css({    'background-color':'#ABC',    'border-radius':'10px',    'height':'50px',    });     //传入一个json对象

removeClass / addClass / replaceClass (ノードのクラスの追加、削除、置換)

MjFn('.className').addClass('className');MjFn('.className').removeClass('className');MjFn('.className').replaceClass('className');

getClass : 要素のクラス名を取得します

MjFn('.className').getClass();

HTML タグ内のすべての子ノードをクリアできます (clear)

MjFn('.className').clear();

このノード (子ノードを含む) をクリアします

MjFn('.className').remove();

表示される高さを返します: (2 つの要素と本体に分割) 呼び出しチェーンの終わり

MjFn('.className').ele_W_H();       //元素可见的宽和高,返回一个array,arr[0]是宽,arr[1]是高MjFn('.className').body_W_H();      //页面可见的宽和高,返回一个array,arr[0]是宽,arr[1]是高

addHTML: 要素に子ノードを追加します

MjFn('.className').addHTML('<a>我是子节点</a>');

コンテンツの置換と追加 (chanText、addText)

コンテンツを追加するには、addHTML の代わりにこれを使用することを強くお勧めします。これら 2 つのメソッドは、コンテンツを追加する前に HTML コードを変換します。 HTML処理は行われず、文字列として出力されます。

MjFn('.className').chanText(str);       //替换字符串MjFn('.className').addText(str);        //在原有的基础上添加内容

クリックメソッド: クリックイベント

MjFn('.className').click(function(e) {      //e为点击事件!        expression    });

時間オブジェクト: イベントを取得

MjFn().Time.DateFac();      //统一工厂方法:DateFac方法  [几年几月几号,几时几分几秒]

ページネーションメソッド: URL、このページ番号を渡す、総ページ数 (>7 ページは 7 ページを表示、

7 ページは合計を表示)
MjFn('#page').pagination('URL', 5, 12);     //下面附图,配合framework.css工作效果更佳!

CSS レンダリング付きフレーム

ダウンロードアドレス: https://github.com/merjiezo/mjzframework
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。