jQuery Mobileデザイン思想について話します.

4188 ワード

51 CTO技術コミュニティから:http://mobile.51cto.com/others-288591.htm
jQuery Mobileデザイン思想は本文で紹介する内容で、主にjQuery Mobileの使い方技法の学習を理解しに来ました.具体的な内容は本文を見て詳しく説明します.
一、ウェブページの要素を選択する
jQueryの基本的な設計思想と主な使い方は、「あるページの要素を選択し、それを操作する」ということです.これは他のJavascriptライブラリと区別する根本的な特徴です.
jQueryを使う第一歩は、選択式を構成関数jQuery()に入れて、選択された要素を得ることが多いです.
式を選択するとCSS選択ができます.
$(document) //          
$('#myId') //  ID myId       
$('divmyClass') //   class myClass div    
$('input[name=first]') //   name    first input   
jQuery特有の表現であっても良いです.
$('a:first') //        a    
$('tr:odd') //          
$('#myForm :input') //       input    
$('div:visible') //     div    
$('div:gt(2)') //      div  ,       
$('div:animated') //            div   
二、変更結果集
jQueryは思想の2つを設計して、各種の強大なフィルタを提供して、結果集に対してふるい分けを行って、選択結果を縮小します.
$('div')has('p'); //     p   div    
$('div')not('myClass'); //  class   myClass div    
$('div')filter('myClass'); //  class  myClass div    
$('div')first(); //   1 div    
$('div')eq(5); //   6 div   
時々、結果集から近くの関連要素に移動する必要があります.jQueryもDOMツリーの移動方法を提供します.
$('div')next('p'); //  div        p    
$('div')parent(); //  div        
$('div')closest('form'); //   div     form     
$('div')children(); //  div        
$('div')siblings(); //  div      
三、チェーン操作
jQueryデザイン思想の3つは、最終的にウェブページの要素を選択してから、一連の操作ができます.そして、すべての操作はリンクで書いてもいいです.
$('div')find('h3')eq(2)html('Hello');
分解すると、次のようになります.
$('div') //  div    
find('h3') //     h3    
eq(2) //   3 h3    
html('Hello'); //       Hello 
これはjQueryの最も人に称賛され、最も便利な特徴です.ステップ毎のjQuery操作で、戻るのは全部jQueryオブジェクトですので、違う操作は繋がっています.
jQueryはend()の方法も提供しています.結果セットを一歩後退させることができます.
$('div')   
find('h3')  
eq(2)  
html('Hello')  
end() //        h3        
eq(0) //     h3    
html('World'); //       World 
四、元素の操作:値を取ると賦課
ウェブページの要素を操作して、最も一般的な需要はそれらの値を取るか、またはそれらを賦課することです.
jQueryデザイン思想の4つは、同じ関数を使って、値を取ることと、値を作ることです.すなわち、「値を取る器」と「分配器」は一つになります.値を取るかそれとも賦課するかは、関数のパラメータによって決まります.
$('h1')html(); //html()    ,    h1    
$('h1')html('Hello'); //html()   Hello,   h1     
一般的な値と割り当て関数は以下の通りです.
html()      html    
text()      text    
attr()              
width()               
height()               
val()            
注意したいのは、結果セットに複数の要素が含まれている場合、値を割り当てた場合、その中のすべての要素に値を割り当てます.値を取るときは、最初の要素の値(text()だけを取り出して、すべての要素のtext内容を取り出します.
結び:jQuery Mobile設計思想についての簡単な話を紹介しました.本文の勉強を通じて、あなたの役に立ちたいです.
【編集おすすめ】
jQuery MobileのAPIデフォルト設定 jQuery MobileのAPIイベント 8つの優秀なjQuery Mobile教程 jQuery Mobile開発方法と実用ツール jQuery Mobileの応答レイアウト jQuery Mobileマニュアル