More than 5 years have passed since last update.

jqualy よく使うやつ

作業ログ

Posted at 2018-10-21

　.clone()

<button>Clone Me!</button>

jq
$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});

　.find()

全てのp要素からfindを用いてspan要素を捜し、色を赤くします。これは$(“p span”)と同じ意味である。

<p><span>Hello</span>, how are you?</p>

<p>Me? I'm <span>good</span>.</p>
$("p").find("span").css('color','red');

　.uniqueId()

配列中から重複している値を除去し、ユニークになったものを返します。

　.val()

全ての要素のvalue属性を返す。

　.replace()

　.split()

　.pop()

　.filter()

　.append()

　.hide()

　.show()

　.on() off

on発動　　off解除

$('button').on('click', function() {
  alert('クリックされました');
});

$('button').click(function() {
  alert('クリックされました');
});

$('img').on({
  'mouseenter': function() {
    // マウスオーバー時の処理
  },
  'mouseleave': function() {
    // マウスアウト時の処理
  }
});

記事
http://js.studio-kingdom.com/jquery/events/off

　.parents()

　.each()

　.change()

　.iCheck()

　.css()

　.positon()

　.width()

　.data()

カスタムデータ

値を適切な型にパースしてくれる

参照
JavaScriptで実際に必要な情報を取り出すためにデータをパースするのが難しくなる
https://www.webprofessional.jp/how-why-use-html5-custom-data-attributes/

データ属性得られる

<body>
<p data-name="taro" data-age="30" data-tel="080-1234-5678">私は太郎です</p>
 
<script>
    var result = $('p').data();
 
    console.log( result );
</script>
</body>

結果

{tel: "080-1234-5678", age: 30, name: "taro"}

　.addClass()

　.clear_up_form()

　.not()

　.removeClass()

　.clear_up_form()

　.colorpicker()

　.bootstrapToggle()

　.text()

　.attr()

　.closest()

　.get()

　.prop()

　.modal()

　.sortable()

　.disableSelection()

　e.preventDefault()

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up