Category Archives: jquery

「jQuery入門」not()でclass属性を指定するサンプル

1.htmlコード
<p>test data11</p>
<p class=”cft”>test data22</p>
<p>test data33</p>
<p>test data44</p>

2.JSコード
var r = $(‘p’).not(‘.cft’);
//すべてのp要素を出力する
r.each(function(value, element) {
console.log(element)
})

結果
<p>test data11</p>
<p>test data22</p>
<p>test data44</p>

「jQuery入門」hiddenのフォームの内容を取得するコード

htmlコード
<input name=”username” type=”hidden” value=”yamada” />
JSコード
var val = $(‘:hidden[name=”username”]’).val();

「jQuery入門」prependTo()と.attr()の使い方

1.ラジオボタンの値を選択
$(“userId”).attr(“checked”, “checked”);

2.チェックボックスの値を選択
$(“addressId”).attr(“checked”, “checked”);

3.prependTo()
指定された要素に追加
<button id=”testBtn”>prependTo</button>
<ul id=”addressLst”>
<li>データ1</li>
<li>データ2</li>
<li>データ3</li>
</ul>

$(“#testBtn”).click(function(){
$(“<li>データ4</li>”).prependTo(“#addressLst”);
});

「jQuery入門」:not( セレクタ)で指定した属性以外の要素を取得

①htmlコード
<ul>
<li class=”changfa1″>dddd。</li>
<li class=”hao2″>4444。</li>
<li class=”sample”>44444。</li>
<li class=”dedao”>44444。</li>
</ul>

②JSコード
var hh = $(‘li:not(.changfa1)’).text();
console.log(“出力:”+hh);

「jQuery入門」 $(“input”).blur()、$(“input”).focus()で要素を処理する

1.JSコード
<script type=”text/javascript” src=”/common/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“input”).focus(function(){
$(“input”).css(“background-color”,”#FFFFCC”);
});
$(“input”).blur(function(){
$(“input”).css(“background-color”,”#D6D6FF”);
});
});
</script>
</head>

2.htmlコード
名前を入力してください:
<input type=”text” id=”username” name=”username” />

「jQuery入門」remove()で要素を削除するサンプル

JSコード
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).remove(“.cft”);
});
});
</script>
</head>
<body>

htmlコード
<p>test data11</p>
<p class=”cft”><i>test data12</i></p>
<p class=”cft”><i>test data12</i></p>
<button>test3</button>

「jquery入門」$(“p”).css(“background-color”)のサンプル

①JSコード
<script>
$(document).ready(function(){
$(“button”).click(function(){
alert(“背景色: ” + $(“p”).css(“background-color”));
});
});
</script>

②htmlコード
<body>
<h2>test title</h2>
<p style=”background-color:#ff0000″>data11</p>
<p style=”background-color:#00ff00″>data12</p>
<p style=”background-color:#0000ff”>data13</p>
<button>検証ボタン</button>
</body>

「jQuery入門」$(“#id”).load()のサンプル

1.JSコード

<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#cftone”).$(“#cftone”).load((“/sikao/ajax/info.txt”);
});
});
</script>
2.htmlコード
<body>
<div id=”cftone”><h2>data</h2></div>
<button>getdata</button>
</body>

「jquery入門」on()メソッドで複数のイベントを定義するサンプル

1.htmlコード
<input type=”text” id=”txtAddress” value=”tokyo”>
<div id=”addrDetailShow”> </div>

2.JSコード
$(function(){
$(‘#txtAddress’).on({
keydown: function(){
$(‘#addrDetailShow’).text(‘address-data-11’);
},
keyup: function(){
$(‘#addrDetailShow’).text(‘address-data-12’);
},
blur: function(){
$(‘#addrDetailShow’).text(‘address-data-14’);
},
focus: function(){
$(‘#addrDetailShow’).text(‘address-data-13’);
}
});
});

「jQuery入門」 $.each()でオブジェクトループ処理をするサンプル

JSコード
$(function() {
var cft = {key1:’testAA’, key2:’testBB’, key3:’testCC’};
$.each(cft, function(key, val) {
console.log(key+’:’+val);

});
});

9 / 10« 先頭...678910