jQuery の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• jQuery へ行く。
• jQuery の差分を削除

#author("2022-06-08T05:37:16+00:00","default:src128","src128")
&tag(jQuery);
*目次 [#e840b8da]
#contents
*参考情報 [#w6217b0a]
-[[jQuery:http://jquery.com/]]

*インストール [#j825d585]
-http://code.jquery.com/jquery-1.9.1.min.js をダウンロード。


*Tips [#ob2a5daf]
**テキストを選択する [#u7299ab2]
-[[select - JQuery: Selecting Text in an Element (akin to highlighting with your mouse) - Stack Overflow:http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse]]
-[[JavaScript初級者から中級者になろう：八章第一回　Rangeとは:http://uhyohyohyo.sakura.ne.jp/javascript/8_1.html]]
-ノード単位の選択はできるけど、中途半端な選択はできない。

**DOM操作後のHTMLを確認する [#zce3b4ac]
-Chromeならば、デベロッパーツールでDOM要素を表示すれば見られる。
*指定要素にスクロールさせる [#cde4cfd5]
-ScrollTo('keyword')のように指定する(id=keyword)。
#pre{{
    function ScrollTo(element) {
        var text = document.getElementById(element);
        var p = $(text).offset().top;
        $('html,body').animate({ scrollTop: p });
  }
}}
-html,bodyを指定しているのは、クロスブラウザ対応のためだけど、副作用があるみたいなので注意。
[[jQueryで画面をスクロールさせる時の注意点:http://less.carbonfairy.org/post/941824993]]

**リストをdata属性で操作する [#f7a36803]
-[[jquery sort list based on data attribute value - Stack Overflow:https://stackoverflow.com/questions/21600802/jquery-sort-list-based-on-data-attribute-value]]
-以下を実行するとリストがdata-positionでソートされて表示される。
#pre{{
$(function() {
  $(".listitems li").sort(sort_li).appendTo('.listitems');
  function sort_li(a, b) {
    return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="listitems">
  <li data-position="3">Item 3</li>
  <li data-position="2">Item 2</li>
  <li data-position="1">Item 1</li>
  <li data-position="4">Item 4</li>
</ul>

}}
-appendToはでは、選択した要素を他の要素に挿入した場合、移動することに注意(cloneではない)。[[javascript - Using jQuery appendTo() while sorting html elements - Stack Overflow:https://stackoverflow.com/questions/21410053/using-jquery-appendto-while-sorting-html-elements]]
 $( "h2" ).appendTo( $( ".container" ) );


*トラブルシューティング [#l1c56633]
**なぜか読み込まれない [#se778fb5]
-jQueryに限ったことではないが、空タグっぽい書き方だとだめ。"</script>"が必要。
-[[scriptタグは空要素っぽく閉じると，FirefoxやIEで読んでもらえない ::ハブろぐ:http://havelog.ayumusato.com/develop/html/e216-script_tag_should_not_self-close.html]]