ホームページ > 記事 > ウェブフロントエンド > jQuery_jqueryの基礎知識まとめ
1、基础
jquery对象集:
$():jquery对象集合
获取jquery对象集中的元素:
使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0]
使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0)
使用jquery的eq方法获取jquery对象集中的jquery对象元素:
$('img[alt]').eq(0)
$('img[alt]').first()
$('img[alt]').last()
jquery对象集转换成javascript数组:
var arr = $('label+button').toArray()label后面所有同级button元素,转换成javascript数组
jquery对象集的索引:
var n = $('img').index($('img#id')[0])注意:index()参数是javascript元素
var n = $('img').index('img#id') 等同于上一行 找不到返回-1
var n = $('img').index()img在同级元素中的索引
向jquery对象集中添加更多的jquery对象集:
使用逗号:$('img[alt],img[title]')
使用add方法:$('img[alt]').add('img[title]')
对不同的jquery对象集中采取不同的方法:
$('img[alt]').addClass('thickBorder').add('img[title]').addClass('');
向jquery对象集中添加新创建的元素:
$('p').add('
jquery オブジェクト セットから要素を削除します:
$('img[title]').not('[title*=pu]')
$('img').not(function(){return !$(this).hasClass('someClassname')})
フィルター jquery オブジェクト セット:
$('td').filter(function(){return this.innerHTML.match(^d $)}) 数値を含む td
をフィルターします
jquery オブジェクト セットのサブセットを取得します
$('*').slice(0,4) 最初の 4 つの要素を含む新しい jquery オブジェクト セット
$('*').slice(4) 最初の 4 つの要素を含む新しい jquery オブジェクト セット
$('div').has('img[alt]')
jquery オブジェクト セット内の要素を変換します
var allIds = $('div').map(function(){
戻り値 (this.id==未定義) ? null : this.id;
}).get();get メソッド
を通じて JavaScript 配列に変換します
jquery オブジェクト セット内の要素を走査します
$('img').each(function(n){
This.alt = 'これは [' n '] 番目の写真です、写真の ID は ' this.id;
})
$([1,2,3]).each(function(){alert(this);})
要素間の関係を使用して jquery オブジェクト セットを取得します
$(this).closest('div') たとえば、どの div 内でトリガーされたボタンが発生します
$(this).siblings('button[title="Close"]')それ自体を除くすべての兄弟要素
$(this).children('.someclassname')重複した子ノードを除くすべての子ノード要素
$(this).closest('') は祖先要素
に隣接しています
$(this).contents() は、要素コンテンツで構成される一連の jquery オブジェクトです。たとえば、
jquery オブジェクトセットを取得するその他の方法
$(this).find(p スパン)
jquery オブジェクト セットであるかどうかを判断します
var hasImg = $('*').is('img');
jQuery メソッド:
$().hide()
$().addClass('')
$().html('')
$('a').size()要素数
jQuery セレクター:
$('p:even')
$('tr:nth-child(1)')
$('body > div') 直接の子要素
$('a[href=$='pdf']')属性に基づいて
を選択
$(div:has(a)) フィルター
jQuery 関数:
$.trim()
jQuery 実行時間:
$(document).ready(function(){});
$(function(){});
DOM 要素を作成します:
$('
jquery は要素が存在するかどうかをテストします:
if(item)(){}else{} 緩いテスト
If(item != null) 推奨テスト、null と未定義を区別できます
2. 操作対象の要素を選択します
タグ名によると: $('a')
ID に基づく: $('#id')
クラス名によると: $('.someclassname')
複数の条件を満たす: $('a#id.someclassname') または $('div,span')
要素のすべての子ノード: $(pa.someclassname)
要素の直接の子ノード: $(ul.myList > li)
属性名による:
$(a[href^='http://']) は...
で始まります
$(href$='.pdf') は...
で終わります
$(form[method]) form
にはメソッド属性が含まれます
$(input[type='text'])
$(input[name!=''])
$(href*='some') には
が含まれます
特定の要素の後の最初の要素: $(E F) は F に一致し、F は E の後の最初の要素です
特定の要素の後の要素: $(E~F) は F に一致し、F は E の後の要素です
通過位置:
$(li:first)最初の li
$(li:last)last li
$(li:even)偶数行 li
$(li:odd)奇数行 li
$(li:eq(n))n 番目の要素、インデックスは 0 から始まります
$(li:gt(n))n 番目の要素以降の要素、インデックスは 0 から始まります
$(li:lt(n))n番目の要素の前の要素、インデックスは0から始まります
$(ul:first-child)リストの最初の li
$(ul:last-child)リストの最後の li
$(ul:nth-child(n))リスト内の n 番目の li
$(ul:only-child)ul 兄弟 li なし
$(ul:nth-child(even))リスト内の偶数行 li、奇数はカウント行 li
リスト内の $(ul:nth-child(5n 1))li
を 5 で割った余りが 1
フィルター別:
$(input:not(:checkbox))
$(':not(img[src*="犬"])')
$('img:not([src*="犬"])')
$(div:has(span))
$('tr:has(img[src$="pu.png"])')
$(tr:animated)tr
アニメーション状態
$(input:button) には、ボタン、リセット、送信タイプの入力
が含まれます
$(input:checkbox) は $(input[type=checkbox])
と同等です
$(span:contains(food))span
テキストの食べ物が含まれています
$(input:disabled)無効化
$(input:enabled)有効化
$(input:file) は $(input[type=file])
と同等です
$(:header)h1 ~ h6
$(入力:非表示)
$(input:image) は $(input[type=image])
と同等です
$(:input) には、input、select、textarea、button 要素が含まれます
$(tr:parent)
$(input:password) は $(input[type=password])
と同等です
$(input:radio) は $(input[type=radio])
と同等です
$(input:reset) は $(input[type=reset]) または $(button[type=reset])
と同等です
$('.clssname:selected')
$(input:submit) は、$(input[type=submit]) または $(button[type=submit])
と同等です。
$(input:text) は $(input[type=text])
と同等です
$(div:visible)
3. DOM 要素の処理
要素の属性を操作します:
$('*').each(function(n){
this.id = this.tagName n;
})
属性値の取得: $('').attr('');
属性値を設定します:
$('*').attr('title', function(index,PreviousValue){
ReturnPreviousValue ' 私は要素 'index' で、名前は 'this.id;
です
}) 属性の値を設定します
$('input').attr({
値: '',
タイトル: ''
}); 複数の属性の値を設定します
属性の削除:
$('p').removeAttr('value');
すべてのリンクを新しいウィンドウで開くようにします:
$('a[href^="http://"]').attr('target',"_blank");
フォームを複数回送信しないでください:
$("フォーム").submit(function(){
$(":submit", this).attr("無効","無効");
})
クラス名を追加します: $('#id').addClass('')
クラス名を削除します: $('#id').removeClass('')
クラス名の切り替え: $('#id').toggleClass('') クラス名が存在する場合は削除し、存在しない場合はクラス名を追加します
クラス名が含まれているかどうかを確認します: $('p:first').hasClass('') $('p:first').is('')
クラス名のリストを配列形式で返します。
$.fn.getClassNames = function(){
var name = this.attr('someclsssname');
if(name != null){
name.split(" ");
を返します
}
それ以外
{
[] を返します;
}
}
スタイルを設定:
$('div.someclassname').css(function(index, currentWidth){
currentWidth 20 を返します;
});
$('div').css({
カーソル: 'ポインター'、
枠線: '1px 単色黒'、
パディング: '12px 12px 20px 20x',
背景色: '白'
});
サイズについて:
$(div).width(500)
$('div').height()
$('div').innerHeight()
$('div').innerWidth()
$('div').outerHeight(true)
$('div').outerWidth(false)
配置について:
$('p').offset() ドキュメントに対する相対的な参照位置
$('p').position() は親要素
の相対位置をオフセットします。
$('p').scrollLeft() 水平スクロールバーのオフセット値
$('p').scrollLeft(値)
$('p').scrollTop()
$('p').scrollTop(value)
関連要素のコンテンツ:
$('p').html()
$('p').html('')
$('p').text()
$('p').text('')
追加コンテンツ
要素の最後に HTML を追加します: $('p').append('some text');
要素の末尾にある dom 内の既存の要素: $('p').append($(a.someclassname))
要素の先頭に追加します: $("p").prepend()
要素の前に追加します: $("span").before()
要素の後に追加: $("span")after()
コンテンツを最後に追加します: appendTo(targets)
コンテンツを先頭に追加します: prependTo(targets)
要素の先頭にコンテンツを追加します: insertBefore(targets)
要素の末尾にコンテンツを追加します: $('
ラップ要素:
$('a.someclassname').wrap("
要素の削除:
$('.classname').remove() は要素を削除し、要素にバインドされているイベントとデータも削除されます
$('.classname').detach() は要素を削除しますが、イベントとデータは保持します
$('.classname').empty() は要素を削除しませんが、要素の内容をクリアします
要素のコピー:
$('img').clone().appendTo('p.someclassname')
$('ul').clone().insertBefore('#id')
置換要素:
$('img[alt]').each(function(){
$(this).replaceWith('' $(this).attr('alt') '');
})
$("p").replaceAll("")
form要素の値について:
$('[name="radioGroup"]:checked').val() は、ラジオ ボタンの値を取得します。ラジオ ボタンが選択されていない場合は、未定義
を返します。
var checkboxValues = $('[name="checkboxGroup"]:checked').map(function(){
$(this).val();
を返す
}).toArray(); 複数選択ボックスの値を取得します