鋭いjqueryノート

JqueryオブジェクトをDOMオブジェクトに変換する2つの方法

var $cr = $('#id');
var cr = $cr[0];
var cr2 = $cr.get(0);

DOM要素をJqueryオブジェクトに変換する方法

var cr = document.getElementById('cr');
var $cr = $(cr);

Jqueryオブジェクトはすべて$()メソッドで製造され、$()関数はJqueryオブジェクトの製造工場です.
Jqueryはチェックボックスが選択されているかどうかを判断します
HTML構造

原生js

var $check = $('#check');
var check = $check[0];
$check.click(function(){
    if (check.checked) {
        console.log('      !')
    } else {
        console.log('     !');
    }
})

jQueryメソッド

var $check = $('#check');
$check.click(function(){
    if ($check.is(':checked')) {
        console.log('      !')
    } else {
        console.log('     !');
    }
})

is(':checked')は、jQueryのメソッドで、jQueryオブジェクトが選択されているかどうかを判断し、Booleanに戻ります.
jQueryは要素が存在するか否かを判断する

var $cur = $(cur);
if ($cur.length > 0) {
  // do something
}
//      DOM  
var cur = $cur[0];
if (cur) {
  // do something
}

よく使われないセレクタ

:hidden非表示要素をすべて選択

:visibleすべての可視要素

を選択

:contains(text)選択テキストに「text」を含む要素

:emptyサブエレメントまたはテキストを含まない空のエレメント

を選択

:has(selector)セレクタが一致する要素の要素

を選択する.

:parentサブエレメントまたはテキストを含むエレメント

を選択

:enabled使用可能なすべての要素を選択

:disabled使用不可要素をすべて選択

:checked選択されたすべての要素(ラジオボックスとチェックボックスを含む)

:selected選択されたすべてのオプション要素

要素を挿入する方法

append()マッチング要素にコンテンツ

を追加する.

appendTo()パラメータ要素に内容を追加

prepend()整合要素に前置コンテンツ

を追加する.

prependTo()パラメータ要素の内部(前)

に内容を追加

after()マッチング要素にコンテンツ

を追加する.

insertAfter()パラメータコンテンツにコンテンツを追加した後

.

before()マッチング要素の前にコンテンツ

を追加

insertBefore()パラメータコンテンツの前の

にコンテンツを追加する.
要素の削除

$('ul li').remove('li[title!=  ]');
var $li = $('ul li:eq(0)').detach(); //    remove()
$li.appendTo($('ul'));

detach()削除された要素の前にバインドされたイベントは存在しますが、remove削除された要素は存在しません.
要素の移動

$('ul li:eq(0)').appendTo($('ul'));

ノードempty()をクリア

$('body').empty(); // body      

要素clone()のコピー

$('ul li').click(function () {
  $(this).clone().appendTo($('ul')); //            ul    
});

クローン(true)の場合、コピーされた要素は、上のクリックイベントなどの元のイベントを保存することもできます.
要素の置換
html構造

  
      !

方法1

$('p').replaceWith('      ');

方法2

$('      1').replaceAll('p');

置換が完了すると元の要素が追加されたイベントも存在せず、イベントを再追加する必要があります.
ラップノード
以下の元のHMTL構造はすべてこのようなものです

      !
  
      

wrap

$('p').wrap("
");

转换后的HTML

    
      !
    
  
    
      

wrapはマッチング要素の外に要素を包む(単独)

wrapAll

$('p').wrapAll("
");

转换后的 HTML

    
      !
      
    
  

wrapAll一致する要素を外側に追加(一緒に)中間間隔で他の要素がある場合、他の要素はラップ要素の後に配置されます.

wrapInner

$('p').wrapInner("");

変換後のHTML

    
      !
    
  
    
      

wrapInnerは一致するすべての要素の内容を1層追加します!
要素の遍歴

children()ダイレクトサブエレメントアセンブリ

next()に続く同世代要素

prev()その前の同世代要素

siblings()すべての同世代要素

closest()最近のマッチング要素

を取得

$('body').bind('click', function (e) {
    $(e.target).closest('p').css('color','red');
});
//             ，          ，         jquery  

parent()は、タイプに適合する直接親ノード

を返す.

parents()は、タイプに一致するすべての親ノード

を返します.
CSS-DOM

offset()

var offset = $('p').offset();
var top = offset.top;   // 6
var left = offset.left; // 8

現在のウィンドウでの現在の要素の相対オフセットを取得し、2つのプロパティを返します.top/left

position()

      !
  

js

var position = $('div').position();
var top = position.top;     // 300
var left = position.left; // 20

最近のスタイルがpositionスタイル属性に対してrelativeまたはabsoluteに設定された祖先ノードに対するオフセット値にtop/leftが含まれる

scrollTop() scrollLeft()

var $body = $('body');
var $bodyLeft = $body.scrollLeft(); //      
var $bodyTop = $body.scrollTop();   //      
//          
$('div').scrollLeft(300);
$('p').scrollTop(200);