48日目まとめ

jQueryのサプリメント

各

jQuery.each（コレクション、コールバック（indexInArray、valueOfElement））：

説明：シームレスに使用することができる一般的な反復機能、およびオブジェクトの反復配列。アレイおよびアレイ状プロパティの長さによってインデックス付け反復回数にオブジェクト（例えば、パラメータオブジェクトの機能）、0から長さ - 1。他の目的には、プロパティ名を反復処理します。

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

輸出

010
120
230
340

.each（funcion（インデックス、エレメント））：

説明：各要素の機能を実行するために、jQueryオブジェクトを横切ります

.each（）メソッドは、各反復要素jQueryのDOMオブジェクトのために使用されます。コールバックが実行されるたびに、現在のパラメータとして渡されたサイクル数（0から数えて）。コールバックは、コンテキストとして現在のDOMエレメントのコンテキストでトリガーされるので、キーがあるのでthis、常にこの要素を指しています。

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注：一連のjQueryの要素を介してjQueryのメソッドの戻りjQueryオブジェクトは、 -暗黙呼ば反復手順を。これが起こるとき、それは通常、明示的に循環する必要はありません.each()方法：

換言すれば、上記の例では、直接その上に書かれたこのような、それぞれ（）メソッドを使用する必要はありません。

$("li").addClass("c1");  // 对所有标签做统一操作

注意：

これは、トラバーサル中に使用することができますreturn false途中で、各サイクルを終了しました

各サイクルの終了

return false;

。データ（）

マッチした要素または要素のセットのすべての要素に格納された任意の関連データは、指定された名前に格納されたデータの値に設定で最初に一致した要素を返します。

.dataの（キー、値）：

説明：マッチした要素の任意のデータを格納します。

$("div").data("k",100);     //给所有div标签都保存一个名为x,值为1000

.DATA（キー）
説明：データの値が格納されている保留中の名前は、要素を通るの返されたセットの最初の要素と一致する.data(name,value)か、HTML5 data-*プロパティを

$("div").data("k");     //返回第一个div标签中保存的"k"的值

.removeData（キー）
説明：記憶素子上のデータは、すべて保存されたデータを削除するために重要なパラメータを示すことなく

$("div").removeData("k");   //移除元素上存放的k对应的数据

プラグイン（理解）

jQuery.extend（オブジェクト）
のjQuery名前空間の下に新しい機能を追加します。マルチユースのプラグイン開発者がでjQueryのに新しい機能を追加するため。

<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;},
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

jQuery.fn.extend（オブジェクト）
のインスタンスのための新しい方法を提供することに組み込まれたオブジェクトのプロトタイプのjQueryの内容のjQuery

<script>
  jQuery.fn.extend({
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

ファイルの拡張子で別々に書きます

(function(jq){
  jq.extend({
    funcName:function(){
    ...
    },
  });
})(jQuery);

ブートストラップフロントエンドフレーム

ブートストラップのプロフィール

ダウンロード：https://v3.bootcss.com/

CDN住所：https://www.bootcdn.cn/

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstraptheme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

あなたはときに最初のインポートはJQueryその動的効果を保証しなければならないので、ブートストラップ、フロントエンドのフレームワークは、フレームワークはJQueryに基づいて
最初のインポートjQueryの前にブートストラップ付き

あなたは3つの文書をガイドする必要があります：
最初のものはjQueryのある
二CSSファイルである
と第三は、JSファイルです

ページレイアウト

レイアウトコンテナ
のすべてのフロントエンドフレームの使用後は、クラスのラベル全体のスタイル属性値によって調整されます

<div class="container"></div>        左右两边留白
<div class="container-fluid"></div>  全屏显示

グリッドシステム

デフォルトでは、
行が行され
、各行のは、デフォルトでは12個の部分に分かれている、
あなたはCOL-MD-ヌムで複数のアカウントをしたいものを選択することができます
注：あなたは、いくつかの左のいくつかを考慮していません。 12の以上のコピーを、それ以外の余分なレイアウトを破壊します

例如:
<div class="container-fluid">
    <div class="row">
        <div class='col-md-6'>
            ...
        </div>
        <div class='col-md-6'>
            ...
        </div>
    </div>
</div>

グリッドパラメータ

	超小型の携帯電話の画面（<768px）	小さな薄型（≥768px）	ミディアム画面デスクトップモニタ（≥992px）	大画面の大きなデスクトップモニタ（≥1200px）
グリッド・システムの挙動	常には、水平に配置され	最初に複数の閾値Cよりも水平配置になったときに、積層
.container 最大幅	なし（自動）	750px	970px	1170px
クラス接頭辞	.col-xs-	.col-sm-	.col-md-	.col-lg-
カラム（列）数	12
最大カラム（列）幅	オートマチック	〜62px	〜81px	〜97px
溝（樋）ワイド	30px（各列は15ピクセルの周りにあります）
ネスト可能	それはあります
オフセット（オフセット）	それはあります
列の並べ替え	それはあります

異なる設定の画面幅

<div class="row">
 <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
 <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 <!-- Optional: clear the XS cols if their content doesn't match in height -->
 <div class="clearfix visible-xs-block"></div>
 <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

列の位置

使用する.col-md-push-*と.col-md-pull-*、クラスを簡単にカラム（列）の順序を変更することができます

<div class="row">
    <div class="col-md-9 col-md-push-3"></div>
    <div class="col-md-3 col-md-pull-9"></div>
</div>

組版

HTMLのタイトルタグは、使用も提供することが可能にテキストのクラスはインラインスタイル（インライン）にあることはtitle属性を与えます<h1><h6>.h1.h6

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6><h1>

ヘッダはさらに、<small>ラベルまたは付与.small型要素を、マーク字幕に使用することができます

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

ハイライト

追加することで.lead、段落がクラスをハイライト表示することができます

<p class="lead">
    突出显示
</p>

合わせ

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p

大文字と小文字の変更

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

引用文

パッケージ内の任意のHTML要素中即可表现为引用样式。对于直接引用，我们建议用のラベル

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

マルチスタイル参照

名前の由来は、
追加<footer>の基準源を示すために。<cite>名前の起源は、タグにラップすることができます。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

与えることによって、.blockquote-reverseクラスは、コンテンツ参照が右揃え効果が現れることができます

<blockquote class="blockquote-reverse">
  ...
</blockquote>

リスト

順序なしリスト

<ul>
  <li>...</li>
</ul>

順序付きリスト

<ol>
  <li>...</li>
</ol>

スタイルの一覧ません

<ul class="list-unstyled">
  <li>...</li>
</ul>

インラインリスト

設定することにより、display: inline-block;補体（パディング）を少量添加すると、すべての要素が同じ列に配置されています

<ul class="list-inline">
  <li>...</li>
</ul>

水平に配置され

.dl-horizontalましょ内的短语及其描述排在一行。开始是像展開ナビゲーションバーと一緒にスタックのデフォルトのスタイルは、一列に配置されています。

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

テーブル

任意の<table>ラベルを加え.table基本的なスタイルを付与するためのクラス-補体の量（パディング）と水平デバイダ。

<table class="table">
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

縞模様のテーブル

.table-stripedクラス与える<tbody>ゼブラパターンの増加の各行のを

<table class="table table-striped">
  ...
</table>

ボーダーと表

追加の.table-borderedクラスは、テーブルとその中の各セルに境界線を追加します。

<table class="table table-bordered">
  ...
</table>

ホバー

添加することにより、.table-hoverクラスを可能にする<tbody>マウスホバー状態に各行応答に。

<table class="table table-hover">
  ...
</table>

緊縮テーブル

添加することにより、.table-condensed細胞内の充填（詰め物）で、よりコンパクトなフォームクラスを可能に半減されます。

<table class="table table-condensed">
  ...
</table>

ステータスバー

色は、これらのクラスを介して行または細胞状態に設けられていてもよいです。

クラス	説明
.active	ホバー色セル行または上位セット
.success	成功や積極的な行動を特定
.info	一般的なメッセージやアクションを特定
.warning	または警告ノートを識別することをユーザに要求
.danger	行動の危険または潜在的にマイナスの影響を特定

パッケージ

Glyphiconsフォントアイコン

そして、他のコンポーネントが混ざりません

Iconクラスは、直接、他のコンポーネントと組み合わせて使用することはできません。彼らは、同じ要素の他のクラスと共存することはできません。あなたは、ネストされた作成すべき<span>タグをして、このクラスのアイコンに適用される<span>ラベルに。

要素の内容が役割を果たして空にするためだけに

Iconクラスだけで、任意のテキストまたは子要素が含まれていない要素に適用することができます。

アイコンフォントファイルの位置を変更します

ブートストラップは、フォントファイルがすべて設置されているすべてのアイコンと仮定し../fonts/たディレクトリ内では、CSSファイルの相対ディレクトリコンパイル済みのバージョンを。アイコンフォントファイルの場所を変更する場合は、次のいずれかの方法で記載されているCSSファイルを更新する必要があります。

• 以下のソースコードファイル、変更@icon-font-pathおよび/または@icon-font-name変数を。
• コンパイラの少ない使用が提供して相対URLアドレスオプションを。
• 変更は、CSSファイルのプリコンパイルurl()アドレスを。

方法を選択するために、独自の状況に応じて、

終了

詳細については、下記をご覧くださいブートストラップを