読者です 読者をやめる 読者になる 読者になる

liguofeng29’s blog

個人勉強用ブログだっす。

jQuery - 基本 (jQuery対象生成、セレクタ、フィルターなど)

競合を解消

var j = jQuery.noConflict();
j("#id").html("innerHTML");

jQuery対象生成

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> jQuery対象取得 </title>
</head>

<body>
    <div id="html"></div>
    <script type="text/javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript">
    // jQuery(expression)
    $("div").append("内容追加");
    // jQuery(elements)
    $(document.getElementById("html"))
        .css("background-color", "#aaffaa")
        .css("border", "1px solid black");
    // jQuery(html)
    $("<input type='button' value='ボタン'/>").appendTo(document.body);
    // jQuery(html, props)
    $("<input/>",
        {
            type: "button",
            value: "モミセェマイ",
            click: function() {
                alert("セェマイハアソフ」。");
            }
        })
        .appendTo(document.body);
    </script>
</body>

</html>

jQueryの属性とメソッド

  • length
  • context
  • jquery : jQeuryのバージョン
  • each(fn(index)) : 要素を巡る
  • get() : 全dom要素
  • get(index) : 指定dom要素
  • index(element|selector)
  • toArray()

jQuery(callback), jQuery.holdReady()

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> holdReady() </title>
</head>

<body>
    <script type="text/javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript">
    // ready関数遅延
    $.holdReady(true);
    // ページロード後実行
    $(function()
    {
        alert("ロード完了");
    });
    // 2秒後に解除
    window.setTimeout("$.holdReady(false);", 2000);
    </script>
</body>

</html>

セレクタ

  • CSS1-3のセレクタ (http://wp-e.org/2014/05/20/2420/
  • 限定子

    • :first
    • :last
    • :not(selector)
    • :even
    • :odd
    • :eq(index)
    • :gt(index)
    • :lt(index)
    • :animated
    • :contains(text)
    • :empty
    • :has(selector)
    • :parent
    • :hidden
    • :visible
    • :nth-child(index/even/odd/equation)

      • :nth-child(n)
      • :nth-child(even)
      • :nth-child(odd)
      • :nth-child(xn+m)
    • :first-child
    • :last-child
    • :only-child
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> 限定子 </title>
    <style type="text/css">
    .test {
        font-size: 20pt;
    }
    </style>
</head>

<body>
    <ul>
        <li id="li1">li1</li>
        <li id="li2">li2</li>
        <li id="li3">li3</li>
        <li id="li4">li4</li>
        <li id="li5">li5</li>
        <li><span id="android">li6</span></li>
    </ul>
    <script type="text/javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript">
    $("ul>li:first").append("<b> 最初のli要素</b>");
    $("ul>li:not([id])").append("<b>idのないli要素</b>");
    $("ul>li:even").css("background-color", "#ccffcc");
    $("ul>li:gt(4)").append("<br/><b> indexが4より大きいli要素</b>")
        .css("border", "1px dashed black");
    $("ul>li:has('span')").append(
        "<br/><b> spanを持つli要素</b>");
    $("li>span:visible").append(
            "<b> 見えるspanを持つli要素</b>")
        .css("background-color", "#bbbbbb");
    </script>
</body>

</html>

f:id:liguofeng29:20160228215154p:plain

form関連

  • :input
  • :text
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :button
  • :file
  • :hidden
  • :enabled
  • :disabled
  • :checked
  • :focus
  • :selected
<script type="text/javascript">
$(":input").val("test");
$(":selected").css("border" , "1px dashed black");
$(":checked").prop("checked" , "");
</script>

jQueryのフィルター

  • eq(position)
  • filter(expr)
  • filter(fn(index)) : fn内で、$(this)でdom⇒jQuery対象。true⇒残す、false⇒削除
  • first()
  • last()
  • not(selector|elements|jQuery)
  • not(fn(index))
  • is(expr) : jQuery対象を検査
  • is(fn(index)) : jQuery対象を検査
  • map(callback[index])
  • slice(start, end) : start~endを返す

親子関係

  • 親取得

    • parent([selector])
    • parents([selector])
    • parentsUntil([selector|element][,filter]) :
  • 子取得

    • children([selector])
  • 兄弟取得

    • next([selector])
    • nextAll([selector])
    • nextUntil([seloector])
    • prev([selector])
    • prevAll([selector])
    • prevUntil([selector|element][,filter])
    • siblings([selector]) : 前後のすべて
  • ほか

    • contents() : 内部コンテンツ取得
    • find(selector|element|jQuery) : 検索
    • closest(selecot|element|jQuery) : 一番違いの
<script type="text/javascript">
$("body>div").contents().css("background-color", "#ddd");
$("#id").next().css("border", "2px dotted black");
$("#id").nextUntil("#android").css("font-size", "20pt");
$("#id").prev().css("border", "2px solid black");
$("#id").prevUntil("#id2").height(50);
$("#id").siblings("#jid3")
    .append("<b> あいうえお</b>");
$("div").parent().each(function()
{
    alert($(this).html());
});
</script>

chain方法

  • andSelf() : フィルタ、検索前後合体する
  • end() : フィルタ、検索前の状態に戻す
<script type="text/javascript">
// #node1と次のnodeを返す
$("#node1").next().andSelf().css("border" , "2px solid black");
// node2を返す
$("#node2").next().end().css("background-color" , "#ffaaaa");
</script>