jQueryの一般的な方法の応用
7158 ワード
jQueryはJavaScript関数ライブラリであり、jQueryの利点は書くことが少ないことであり、jQueryの機能にはHTMLの要素選択と操作、cssの操作、バインドイベント関数、JavaScript特効とアニメーション、html domの遍歴と修正、ajax方法などが含まれている.
jQueryを使用するプロセスでは、まずjQueryファイルをダウンロードします.jQueryには圧縮版と非圧縮版が含まれています.非圧縮版は開発に使用でき、読み取り可能なコードです.jQueryはJavascriptファイルで、scriptタグで彼を参照する必要があります.
jQueryはチェーン操作が可能であり,メソッドチェーンとも呼ばれる.例えば$("#p 1").css("color","red").slideUp(2000).slideDown(2000);
jQueryオブジェクトはjQuery関数のインスタンスであり、クラス配列オブジェクトであり、配列にはDOMオブジェクトが格納され、DOMオブジェクトはNodeのインスタンスである.jQueryオブジェクトに対する操作は,実際にはjQuery配列におけるDOMオブジェクトに対する操作である.jQueryオブジェクトとDOMオブジェクトは互いに変換できます.jQueryオブジェクトの取得は、通常、セレクタを使用して取得されます.たとえば、すべてのclssをone要素として取得します:$(".one");
基礎的によく使われる方法の応用
1.セレクタ.$(selector)
使い方の多くはJavaScriptと同じで、書き方が違います
ラベルセレクタ:$(「p」)すべてのpラベル要素を選択
idセレクタ:$("#id")id名の要素を選択
$(".classname")クラスセレクタ$([href])要素セレクタなど.
ブログjQueryの知識点を参考に思考ガイドを整理します.
2.jqueryバインドイベントの一般的な方法$(「p」)click(funciton(){関数体})
3.効果:
非表示を表示:関数と線形モーションを設定する
$("p").hide();非表示
$("p").show();表示
$("p").toggle(); 非表示の場合は表示、表示の場合は非表示
フェードアウト
fadeIn()非表示要素へのフェード
fadeout()可視要素をフェードアウト
fade Toggle()メソッドフェードアウトフェードインフェードアウト
fadeTo()グラデーションは設定不透明度$("#div 1").fadeTo("slow",0.15);
スライド
slideDown();slideUp()を下にスライドします.スライドアップslideToggle();逆スライド
アニメーション(Animation)
animate()アニメーションを作成複数のプロパティheight opacityなどを操作したり、相対値「+=」を使用したりできます.
アニメーションストップ()
4.HTMLメソッド
コードのように
text()選択した要素のテキスト内容を設定または返す
html()選択した要素の要素内容を設定または返す
val()inputのvalue値の取得または設定
attr()属性値の取得
append()選択された要素の最後に内容を挿入する(選択された要素の後ろにある)
prepend()選択された要素の先頭に内容を挿入する(選択された要素の奥の前)
after()選択された要素の後にコンテンツを挿入(選択された要素の外の後ろ)
before()選択された要素の前に内容を挿入(選択された要素の外の前)
remove()要素と選択された内容を削除
Empty()選択した要素のすべてのサブ要素を削除
addClass()class nameを追加
removeClass()選択した要素から1つ以上のクラスを削除
css()cssスタイルを設定中にcssスタイルを設定する
width()height()選択した要素のサイズを設定
5.検索
parent(); 要素のすべての親要素を返します.
$("span").parentsUntil("div");エレメントとの間にあるすべての祖先エレメントを返します.
children()は、その要素のすべての直接サブ要素を返します.
find(「span」)は、すべての子孫のすべてのspan要素を返します.
siblings();選択した要素のすべての同胞要素を返します.
next();選択した要素の次の同胞要素を返します.
nextAll(); 選択した要素の下にあるすべての兄弟要素を返します.
nextuntil()は、2つの要素の間のすべての兄弟要素$(「h 2」)を返す.nextUntil("h6");エレメントとの間のすべての同胞エレメントを返します.
first()は最初の要素を返します
Last()は逆数の最初の要素を返します
eq()は、対応する要素$(「p」)を返す.eq(1);インデックス番号1を返す要素は2番目(0から始まるため)です.
console.log($('div').eq(1).get(0));
filter()は、この基準を満たさない要素が削除され、一致する要素が返される基準を作成します.
var $result = $('div').filter(function(index,item){ return index == 2; });
not()は、基準に合致しない要素を返します.
6.一般的なツール方法
$.browser.バージョン現在のブラウザのバージョン番号を表示
$.each()例パス配列
$('div').each(function(index,item){ console.log(index,'--',item); });
$.inArray(val,arr,[from])は、対応する要素の位置を0からカウントします(見つからない場合は-1を返します.
$.toArray()は、jQueryオブジェクト結合を含むすべてのDOM要素配列を返します.
console.log($('div').toArray());
$.Unique(array)配列内の重複要素の削除
$.type()検出データ型
$.trim(str)文字列の先頭と末尾のスペースを削除
$.get();//DOMノードを配列として返します.console.log($('div').get());
eqはjqueryオブジェクトを返し、getはhtmlオブジェクト配列を返します.jQueryオブジェクトを返すと、他のメソッドを呼び出し続けることができ、html配列ではjQueryの他のメソッドを呼び出すことができません.
$extend():
1)使用法1:パラメータ(オブジェクト)をマージします.extend()内がパラメータの場合、arg 1,arg 2がマージされて戻ります.
注意すべき点は、$を使用することです.extend()でパラメータ名が競合し、後の値が前の値に置き換えられます.
2)用法2:extendのclone
$.extend(boolean,arg,arg1,arg2……);
booleanがtrueの場合、深cloneです.
Boolean値がfalseの場合(デフォルト)、深さclone
3)メソッドを追加します.
転載先:https://www.cnblogs.com/wangzheng98/p/11242853.html
jQueryを使用するプロセスでは、まずjQueryファイルをダウンロードします.jQueryには圧縮版と非圧縮版が含まれています.非圧縮版は開発に使用でき、読み取り可能なコードです.jQueryはJavascriptファイルで、scriptタグで彼を参照する必要があります.
jQueryはチェーン操作が可能であり,メソッドチェーンとも呼ばれる.例えば$("#p 1").css("color","red").slideUp(2000).slideDown(2000);
jQueryオブジェクトはjQuery関数のインスタンスであり、クラス配列オブジェクトであり、配列にはDOMオブジェクトが格納され、DOMオブジェクトはNodeのインスタンスである.jQueryオブジェクトに対する操作は,実際にはjQuery配列におけるDOMオブジェクトに対する操作である.jQueryオブジェクトとDOMオブジェクトは互いに変換できます.jQueryオブジェクトの取得は、通常、セレクタを使用して取得されます.たとえば、すべてのclssをone要素として取得します:$(".one");
基礎的によく使われる方法の応用
1.セレクタ.$(selector)
使い方の多くはJavaScriptと同じで、書き方が違います
ラベルセレクタ:$(「p」)すべてのpラベル要素を選択
idセレクタ:$("#id")id名の要素を選択
$(".classname")クラスセレクタ$([href])要素セレクタなど.
ブログjQueryの知識点を参考に思考ガイドを整理します.
2.jqueryバインドイベントの一般的な方法$(「p」)click(funciton(){関数体})
3.効果:
非表示を表示:関数と線形モーションを設定する
$("p").hide();非表示
$("p").show();表示
$("p").toggle(); 非表示の場合は表示、表示の場合は非表示
$("p").click(function(){
$(this).hide();
}); // ， p フェードアウト
fadeIn()非表示要素へのフェード
fadeout()可視要素をフェードアウト
fade Toggle()メソッドフェードアウトフェードインフェードアウト
fadeTo()グラデーションは設定不透明度$("#div 1").fadeTo("slow",0.15);
スライド
slideDown();slideUp()を下にスライドします.スライドアップslideToggle();逆スライド
アニメーション(Animation)
animate()アニメーションを作成複数のプロパティheight opacityなどを操作したり、相対値「+=」を使用したりできます.
$("#ID").click(function(){
$("#div").animate({
width: 100px,
height: "100px,
border: 10px,
}, 1000 );
});アニメーションストップ()
4.HTMLメソッド
コードのように
text()選択した要素のテキスト内容を設定または返す
html()選択した要素の要素内容を設定または返す
val()inputのvalue値の取得または設定
attr()属性値の取得
append()選択された要素の最後に内容を挿入する(選択された要素の後ろにある)
prepend()選択された要素の先頭に内容を挿入する(選択された要素の奥の前)
after()選択された要素の後にコンテンツを挿入(選択された要素の外の後ろ)
before()選択された要素の前に内容を挿入(選択された要素の外の前)
remove()要素と選択された内容を削除
Empty()選択した要素のすべてのサブ要素を削除
addClass()class nameを追加
removeClass()選択した要素から1つ以上のクラスを削除
css()cssスタイルを設定中にcssスタイルを設定する
width()height()選択した要素のサイズを設定
5.検索
parent(); 要素のすべての親要素を返します.
$("span").parentsUntil("div");エレメントとの間にあるすべての祖先エレメントを返します.
children()は、その要素のすべての直接サブ要素を返します.
find(「span」)は、すべての子孫のすべてのspan要素を返します.
siblings();選択した要素のすべての同胞要素を返します.
next();選択した要素の次の同胞要素を返します.
nextAll(); 選択した要素の下にあるすべての兄弟要素を返します.
nextuntil()は、2つの要素の間のすべての兄弟要素$(「h 2」)を返す.nextUntil("h6");エレメントとの間のすべての同胞エレメントを返します.
first()は最初の要素を返します
Last()は逆数の最初の要素を返します
eq()は、対応する要素$(「p」)を返す.eq(1);インデックス番号1を返す要素は2番目(0から始まるため)です.
console.log($('div').eq(1).get(0));
filter()は、この基準を満たさない要素が削除され、一致する要素が返される基準を作成します.
var $result = $('div').filter(function(index,item){ return index == 2; });
not()は、基準に合致しない要素を返します.
6.一般的なツール方法
$.browser.バージョン現在のブラウザのバージョン番号を表示
$.each()例パス配列
$('div').each(function(index,item){ console.log(index,'--',item); });
$.inArray(val,arr,[from])は、対応する要素の位置を0からカウントします(見つからない場合は-1を返します.
$.toArray()は、jQueryオブジェクト結合を含むすべてのDOM要素配列を返します.
console.log($('div').toArray());
$.Unique(array)配列内の重複要素の削除
$.type()検出データ型
$.trim(str)文字列の先頭と末尾のスペースを削除
$.get();//DOMノードを配列として返します.console.log($('div').get());
eqはjqueryオブジェクトを返し、getはhtmlオブジェクト配列を返します.jQueryオブジェクトを返すと、他のメソッドを呼び出し続けることができ、html配列ではjQueryの他のメソッドを呼び出すことができません.
$extend():
1)使用法1:パラメータ(オブジェクト)をマージします.extend()内がパラメータの場合、arg 1,arg 2がマージされて戻ります.
var results=$.extend({name:'nick'},{sex:'handsome'});
results={name:'nick',sex:'handsome'};注意すべき点は、$を使用することです.extend()でパラメータ名が競合し、後の値が前の値に置き換えられます.
var results=$.extend({},{name:'nick',sex:'male'},{sex:'handsome'});
results={name:'nick',sex:'handsome'};2)用法2:extendのclone
$.extend(boolean,arg,arg1,arg2……);
booleanがtrueの場合、深cloneです.
ar results=$.extend(true,{},{user:{name:'nick',love:'money'},age:25},{user:{name:'summer',like:'car'},sex:'handsome'});
//
results={"user":{"name":"summer","like":"car"},"age":25,"sex":"handsome"};Boolean値がfalseの場合(デフォルト)、深さclone
var results=$.extend(false,{},{user:{name:'nick',love:'money'},age:25},{user:{name:'summer',like:'car'},sex:'handsome'});// results={"user":{"name":"summer","like":"car"},"age":25,"sex":"handsome"};3)メソッドを追加します.
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転載先:https://www.cnblogs.com/wangzheng98/p/11242853.html