先端知識体系
3323 ワード
最近は自分の先端の知識体系を補いたいと思っています.
基礎知識:
解析:ノード間の関係は、親子ではなく、兄弟です. document.documentElementは、文書のルートノード を返す. document.body
リレーションシップアクションリレーションシップアクション:現在のオブジェクトをnodeとする node.parentNode(parentElement)親要素 node.childNodes(children)サブエレメント node.firstChild第1サブエレメント node.LastChild最後のサブエレメント node.previousSibling前の兄弟要素 node.nextSibling次の兄弟要素 parentNodeはparentElement機能と同じで、childNodesとchildren機能は同じです.しかしparentNodeとchildNodesはW 3 C規格に準拠しており、比較的汎用的といえる.他の2つはIEサポートだけで、標準ではありません.Firefoxはサポートしません.
(1)新規ノードの作成 createDocumentFragment()Domフラグメント を作成 createElement()特定の要素 を作成 createTextNode()テキストノードを作成する(2) を追加、削除、置換、挿入する. appendChild() removeChild() replaceChild() insertBefore()(3)検索 getElementsByTagName()/ラベル名 getElementsByName()/要素のName属性の値 getElementById()/要素Idにより一意性
IEブラウザ自体はBubblingのみサポートされており、Capturingはサポートされていません.1、ブラウザのあるDOM要素のデフォルト動作を阻止する必要がある場合、W 3 Cでe.preventDefault()を呼び出し、IEでwindowを通過する.event.returnValue＝falseで実現します.2、私達が事件の泡が立つことを阻止する時、W 3 C標準の中でe.stopPropagation()を呼び出して、IEの下でwindowを設定します.event.cancelBubble=trueで実現します.変換元:http://blog.sina.com.cn/s/blog_62f573ad010131t0.html
XMLHttpRequestオブジェクトは、Webページのロード後にサーバと通信する方法を提供します.ajaxイベントの名前です.最大の利点は、ページ全体を更新する必要がなく、ローカル情報をリフレッシュすることです.実はよくわかりませんが、比較的完全なドキュメントを添付します.http://www.docin.com/p-560170056.html
違い:厳格なモードはブラウザが規範に基づいてページを表示し、ハイブリッドモードは後方互換性のある方法で表示されます.意味:ブラウザがどのようにウェブサイトをレンダリングするか、ブラウザがどの仕様を使用してウェブページを解析するかを決定します.トリガ:ブラウザはdoctypeが存在するかどうかとどのdtdを使用するかによって決定します.
content-box:offsetWidth=width+margin border-box:offsetWidth=margin+border+width+padding ie 8以下のボックスモデルで定義されている要素の幅には、内側余白と枠線は含まれません.
ブロックレベル要素:div,pが1行いっぱいです.display:inline-block行内要素:spanを設定し、aが占める領域はコンテンツが存在する領域のみです.ディスプレイの設定:block
css
Transformには次の方法があります. translate(x,y)変化位置、2つのパラメータ rotate()角度 scale(x,y)要素のサイズは 増加または減少する. skew(x,y)要素所定の角度 を反転する matrix()すべての2 d変換方法を組み合わせた
4つの属性 transition-property: width; 変動属性 transition-duration: 1s; 変更にかかる時間 transition-timing-function: linear; 変化する時間曲線 transition-delay: 2s; 遅延時間の略記:transition:width 1 s linear 2 s;
animation:myFirst 5s @keyframes myFirst { from {background:red;} to {background:yellow;} } @keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }
基礎知識:
1、DOM —— 。
解析:ノード間の関係は、親子ではなく、兄弟です.
リレーションシップアクションリレーションシップアクション:現在のオブジェクトをnodeとする
2、DOM —— 、 、 、 、 。
(1)新規ノードの作成
3、 —— ， IE DOM 。
IEブラウザ自体はBubblingのみサポートされており、Capturingはサポートされていません.1、ブラウザのあるDOM要素のデフォルト動作を阻止する必要がある場合、W 3 Cでe.preventDefault()を呼び出し、IEでwindowを通過する.event.returnValue＝falseで実現します.2、私達が事件の泡が立つことを阻止する時、W 3 C標準の中でe.stopPropagation()を呼び出して、IEの下でwindowを設定します.event.cancelBubble=trueで実現します.変換元:http://blog.sina.com.cn/s/blog_62f573ad010131t0.html
4、XMLHttpRequest —— 、 GET 、 。
XMLHttpRequestオブジェクトは、Webページのロード後にサーバと通信する方法を提供します.ajaxイベントの名前です.最大の利点は、ページ全体を更新する必要がなく、ローカル情報をリフレッシュすることです.実はよくわかりませんが、比較的完全なドキュメントを添付します.http://www.docin.com/p-560170056.html
5、 —— ， 。
違い:厳格なモードはブラウザが規範に基づいてページを表示し、ハイブリッドモードは後方互換性のある方法で表示されます.意味:ブラウザがどのようにウェブサイトをレンダリングするか、ブラウザがどの仕様を使用してウェブページを解析するかを決定します.トリガ:ブラウザはdoctypeが存在するかどうかとどのdtdを使用するかによって決定します.
6、 —— 、 ， IE8
content-box:offsetWidth=width+margin border-box:offsetWidth=margin+border+width+padding ie 8以下のボックスモデルで定義されている要素の幅には、内側余白と枠線は含まれません.
7、 —— CSS 、
ブロックレベル要素:div,pが1行いっぱいです.display:inline-block行内要素:spanを設定し、aが占める領域はコンテンツが存在する領域のみです.ディスプレイの設定:block
css
transform
Transformには次の方法があります.
transition
4つの属性
animation
animation:myFirst 5s @keyframes myFirst { from {background:red;} to {background:yellow;} } @keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }