jQueryフレームワークのStyle(一)

一、jQuery
jQueryはフロントエンド開発者を信じており、これ以上熟知していない.高速で簡潔なJavascriptフレームワークです.jQueryの趣旨:write Less,Do More!Html 5を勉強している私にとって、jQueryの勉強は必須の道です.次に、学んだいくつかの知識点をみんなと一緒に勉強します.
二、Selector(セレクタ)
jQueryでは、指定したノードをより早く見つけるために提供されるセレクタを使用します.どんなセレクタでも$(xx)1)idセレクタ
idは、要素を検索するための唯一のフラグ、すなわち要素のid属性です.idは一意で、各ページにはid値が1つしかありません.

$("#id")

実はこのセレクタの内部実装は、jsを呼び出したオリジナルコードdocument.getElementById()である.
2)classセレクタ
classセレクタはclassスタイルで要素ノードを取得します.idセレクタのようにclassセレクタは複数選択できるわけではないので、効率が第一になり、メリットとデメリットがあるでしょう.

$(".class")

実はそれは原生jsにおけるgetElementsByClassName()関数で実現されている.
3)elementセレクタ
エレメントセレクタは、Htmlタグ名に基づいてすべてのエレメントを取得します.

$("element")

指定した要素ラベル名の下のすべてのノードがクエリーされ、getElementsByTagName()もオリジナルjsメソッドで取得できます.
4)*セレクタ
*号の意味はプログラマーとして基本的に考えられるでしょう.すべての意味です.すべての要素です.

$(" * ")

実はjsの方法document.getElementsByTagName()で"*"を渡してももらえます.
5)階層セレクタ
階層セレクタ私が理解している意味は、実は親子、兄弟姉妹、祖先と孫の関係です.すなわち、サブエレメントの子孫エレメント兄弟エレメントの隣接エレメントです.

子孫セレクタ(スペース表示)

//               ：       （         ）
$("p  descendant") 

サブセレクタ(>)

//                       child  
$("parent > child")

隣接兄弟セレクタ(+)

//           pre             
$("pre + next")

一般兄弟セレクタ(~)

//      pre                        。
$("pre ~ sibling")

PS:(ここでは、いくつかの一般的なセレクタフィルタセレクタとcssの擬似要素の知り合いを列挙しました.:で始まります.jQueryの集約インデックスは0から始まります.)
6)フィルタセレクタ

最初の要素

を選択

//        
$(":first")

最後の要素

を選択

$(":last")

すべての要素を選択し、所与のセレクタ要素

と一致しないものを除去する.

//           input  
$("input:not(:checked)")

一致集合インデックスがindexの要素

を選択する

$("p:eq(index)")

所与のindexより大きいすべての要素

を選択する

$("p:gt(index)")

所与のindex未満のすべての要素

を選択する

$("p:lt(index)")

インデックスが偶数の要素indexが0から

$("p:even")

インデックスが奇数の要素はindexが0から

である.

$("p:odd")

すべてのタイトル要素h 1-h 2-h 3を選択...

$(":header")

アニメーションを実行するすべての要素

を選択

$(":animated")

7)コンテンツフィルタセレクタ

指定テキストを含むすべての要素

を選択する.

$(":contains(text)")

指定要素を少なくとも含む要素

を選択する.

$(":has(ele)")

サブエレメントまたはテキストを含むすべてのエレメントを選択

//             
$(":paraent")

サブ要素を含まないすべての要素(テキストノードを含む)

を選択

//                
$(":empty")

8)属性選択器

指定属性が所定値である要素

を選択する.

//    div ，  name=p1 div  
$("div[name = 'p1']")

指定属性が所定の文字列を含む要素を選択する(または、特定の値を含む要素を選択する)

.

//    div ，   name       test    div  
$("div[name *= "test"]")
$("div[name *= "xx-test-xx"]")

9)サブエレメントフィルタセレクタ

すべての親要素の下にある最初のサブ要素

を選択

//        :frist        :first-child                 。   :first       
$(":first-child")

すべての親要素の下にある最後のサブ要素

を選択

////        :last        :last-child                  。   :last       
$(":last-child")

一意サブエレメントセレクタ

//                   
$(":only-child")

親要素のn番目の子要素

を選択

//$(".last-div a:nth-child(2)")   class last-div         
$(":nth-child") 

親要素のすべてのn番目のサブ要素のカウントを選択し、最後のカウントから

をカウントします.

//$(".last-div a:nth-last-child(2)")   class last-div           
$(":nth-last-child") 

10)フォーム要素セレクタ

すべてのinput textarea select button要素

を選択

$(":input") 

すべてのテキストボックス

に一致する.

$(":text")

すべてのラジオボタン

に一致する

$(":radio")

は、すべてのチェックボックス

に一致する.

$(":checkBox")

は、すべてのボタン

に一致する.

$(":button")

6.使用可能なフォーム要素の選択

$(":enabled")

7.使用できないフォーム要素の選択

$(":disabled")

選択された要素

$(":checked")

選択された要素

$(":selected")

三、属性、スタイル
1)attr設定属性
jQueryではattr()で要素属性を設定できます.

attr(proName):属性の値を取得する.attr(proName,vlaue):属性の値3を設定.attr(proName, ):属性の関数値4を設定.attr(attributes):複数のプロパティを設定:{name:vlaue,name 2:vlaue}

2)removeAttr属性の除去

$("p").removeAttr(attName) //   p      

3)要素のhtml構造またはテキストhtml()/text()を変更する

html() 1. html()はパラメータを伝達しない:すなわち、最初の一致要素のhtmlドキュメント構造を得る.html(htmlstring):各一致要素のhtml内容を設定する.html(function(index,oldHtml)):htmlコンテンツを設定する関数

を返します.

  $("p").html(function(index,text){
            return '    ' + text
        })

text()は、各マッチング要素のテキストコンテンツを取得し、彼の子孫を含め、マッチング要素のテキストコンテンツを設定することもできる.その結果、一致するすべての要素のマージテキストを含む文字列が返されます.1.text():一致する要素のセット内の各要素の連結テキストを取得する.text(string):一致する要素を設定するテキスト3.text(function(index,text))

html()はtext()と異同する.html()は要素の内容を処理するが、text()はテキストの内容を処理する.html()はhtmlドキュメントでのみ使用できますtext()はxmlおよびhtmlで

使用できます.
4) val()
この方法は主にフォーム要素の値:input、textarea、select 1を取得するために用いる.val()パラメータなし:一致する要素のセットの最初の要素の現在の値2を取得する.val(v):一致する要素の各要素の値を設定します.val(function):selectに複数のグループがある場合に設定値を返す関数.val()は、選択項目の値を含む配列を返します.val() .html() .text()の3つの方法はいずれも指定要素の内容を読み取るために用いることができ、html()はhtml内容またはhtmlラベルを読み取る.text()は、その子孫を含む純粋なテキストを取得するだけである.val()はフォーム要素の値を取得するだけで、フォームにのみ使用できます.html()が複数の要素で使用する場合、最初の要素の値のみが取得される.val()もそうです.でもtext()複数の要素で使用される場合に取得されるすべての要素テキストの内容
5)追加スタイルaddClass()削除スタイルremoveClass()

addClass()html内の複数のclassスタイルは、addClassをスペースで区切ることで動的にclassの名前を追加することができ、スタイル名を置き換えることはなく、要素に簡単にスタイルを追加するだけです.addClass(className):一致する要素ごとに1つまたは複数のスタイル名を追加します.addClass(function(indecx,currentClass)):

        //  className(fucntion)  
        //                        。
        //  index                   html            HTML   
 $("div").addClass(function(index,className) {

            //        name   
            if(-1 !== className.indexOf('name')){
                //this              
                $(this).addClass('xxClass')
            }
        });

removeClass()要素のclassスタイル1を削除します.removeClass(className):スペースで区切られた1つまたは複数のスタイル名を削除します.removeClass(function(index,class):削除するスタイル名

を1つ以上返します.
6)スタイルtoggleClass()の切り替え
すなわちaddClassとremoveClassとの切り替えが存在する場合は削除し、存在しない場合は1を追加する.toggleClass(className):一致する要素セット内の各要素に1つ以上のスタイルクラス名を切り替えます.toggleClass(className,switch):3を追加または削除するかどうかを判断するswitchブール値.toggleClass(function(index,class,switch)[switch]):一致する要素セット内の各要素で切り替えるスタイルクラス名を返す関数.エレメントのインデックス位置とエレメントの古いスタイルクラスをパラメータとして受信
7)切替操作css()
.css()要素スタイル属性を取得するか、要素css属性を設定する

取得1.css(proName):一致する要素の属性を取得します.css(propertyName):配列を渡す

設定

css(proName,vlaue) 2.css(propertyName,function):コールバック関数を入力し、対応する値に戻って処理することができます.css(properties):複数のスタイルcss({ 'font-size' :"15px", "background-color" :"#40E0D0", "border" :"1px solid red" })

を同時に設定するオブジェクトを渡すことができます.
四、まとめ
jQueryにはいろいろな方法がありますが、ここではjQueryの操作スタイルの方法をまとめてみました.その後、jQueryイベント、jQueryアニメーションなどをまとめます.最近学前端学の感じは多く入門して、もしあなたが新しい言語を学びたいならば、それを理解して実践すべきで、あなたが見て学ぶことができるのではありません.前の文章の中で、私が推薦したJavaScriptの本は、よく書けています.私は基本的に毎日昼寝の前に何ページも読んでいます.私が読んだ後、心得を書いて、その時になったら一緒に勉強します.私の文章が上手だと思ったら、小さくしてください.❤️でしょう.