jQuery関数

Dom操作の一般的な方法
.append()/.prepend() .append()関数は、各マッチング要素内部の末尾位置に指定されたコンテンツを追加するための.prepend()関数であり、各マッチング要素内部の先頭位置に指定されたコンテンツを追加するための関数である.指定した内容は、html文字列、DOM要素(または配列)、jQueryオブジェクト、関数(戻り値)です.

  $("p").append( '
    
' )  //   DOM  
  $('p').append($('strong')) //   jQuery  ，                  ，              。
//    ，          ，       。
  $('p').append(function(index){  //   function，        ：      //              ，
               html  (innerHTML)
    return '    ' + index
  })

.before()/.after() .before()関数は、各一致要素の前に指定されたコンテンツを挿入するために使用され、.after()関数は、各一致要素の後に指定されたコンテンツを挿入するために使用される.指定した内容は、html文字列、DOM要素(または配列)、jQueryオブジェクト、関数(戻り値)です.

$('p').before('somthing')
$('p').after('$('#id')') //                ，              。
  //    ，          ，       。

.remove()/.empty() .remove()選択された要素(およびそのサブ要素)を削除.empty()選択された要素内のすべてのサブ要素をクリア

$('p').remove()
$('p').empty()
$('p').remove('.class') //       ，        

.html()/.text() .html()関数現在のjQueryオブジェクトが一致するDOM要素内innerHTML .text()関数を設定または戻す現在のjQueryオブジェクトが一致するDOM要素内innerTextを設定または戻す

  
  1
  
  2

$('div').html() 
 //     ：
 "
  
  1
  
  2
"

$('div').text() 
//     ：
"
    1
    2
"

プロパティ操作の一般的な方法
.val()
関数は、現在のjQueryオブジェクトが一致するDOM要素のvalue値を設定または返すために使用されます.この関数は、フォーム要素のvalue属性値を設定または取得するためによく使用されます.例:、、、、など.

$('input').val('somthing') //       input value somthing。

.attr()/.prop() .attr()および.prop()の関数は、現在のjQueryオブジェクトが一致する要素ノードの属性値を設定または戻すために使用されます.両者の使用上の違いは,HTML要素自体が持つ固有の属性について,処理時にpropメソッドを推奨することである.HTML要素独自にカスタマイズしたDOM属性については、処理時にattrメソッドを使用することをお勧めします.

// .prop()         DOM  (   JS  ，Element  )    (property)
$("#chk1").prop("action") // undefined
document.querySelector('#chk1').action  // undefined
// .attr()         DOM              (attribute)
$('#chk1').attr('action') // '123'
document.querySelector('#chk1').getAttribute('action')  // "123"

$("#chk1").prop("checked")  // false
$("#chk1").attr("checked") // undefined
document.querySelector('#chk1').checked //false
document.querySelector('#chk1').getAttribute('checked') //null

//  checkbox  .attr()      
$("#chk1").prop("checked")  //true
$("#chk1").attr("checked")  //undefined
document.querySelector('#chk1').checked //true
document.querySelector('#chk1').getAttribute('checked')  //null

.removeAttr()
関数は、現在のjQueryオブジェクトに一致する各要素ノードで指定された属性を除去するために使用されます.

$('img').removeAttr('alt') //    img    alt  

.css()
関数は、現在のjQueryオブジェクトに一致する要素のcssスタイル属性値を設定または返すために使用します.

$('div').css('fontSize', '20px') //  
$('div').css('fontSize') //  

.addClass()/.removeClass()/.toggleClass() .addClass()関数は、現在のjQueryオブジェクトに一致する各要素に指定されたcssクラス名を追加するために使用されます..removeClass()現在のjQueryオブジェクトが一致する各要素に指定されたcssクラス名を除去します..toggleClass()現在のjQueryオブジェクトが一致する各要素に指定されたcssクラス名を切り替えます.

$('div').addClass('clearfix') //  clearfix 
$('div').removeClass('clearfix')  //  clearfix 
$('div').toggleClass('clearfix') //  clearfix 

.hasClass()
現在のjQueryオブジェクトに一致する要素に、指定したcssクラス名が含まれているかどうかを示します.戻り値はBooleanタイプです

$('div').hasClass("bar")

その他の一般的な関数
.each()
関数は、現在のjQueryオブジェクトが一致する各要素をコンテキストとして指定した関数を巡回するために使用されます.コンテキストとは、関数内部のthisポインタが要素を参照していることを意味します.

$("ul li").each(function(index, element){
    // this === element
    $(element).html( "  " + (index + 1) );  
});

$.extend()
関数を使用して、1つ以上のオブジェクトの内容をターゲットオブジェクトにマージします.

var x = { name:"CodePlayer" };
var y = { age: 18 };
var z = { site: "www.365mini.com"  };

// y z            x 
var obj = $.extend( x, y, z );

.clone()
関数は、現在の一致する要素のセットのコピーをクローンし、jQueryオブジェクトとして返します.

$('div').clone()

.index()
関数を使用して、現在のjQueryオブジェクトで指定されているDOM要素のインデックス値を取得します.

$('li').index($('li.active'))

.ready()
関数は、現在のドキュメント構造の読み込みが完了した直後に指定した関数を実行するために使用します.

$(document).ready( function(){
  alert('hello world')
});