<div>
<span>hgoe</span>
<span>fuga</span>
</div>
<div>
<span>あいうえお</span>
<span>かきくけこ</span>
<span>さしすせそ</span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("span:first-of-type").css({
color: 'red'
});
</script>
(function ($) {
$('input:required').each(function() {
var $this = $(this);
// 初期表示時の色設定
changeColor($this);
// チェンジイベントをトリガーとする色設定
$this.change(function() {
changeColor($this);
});
function changeColor(element) {
var backgroundColor;
if (element.val()) {
// 値がある場合は背景色を白に
backgroundColor = 'white';
} else {
// 値がない場合は背景色をピンクに
backgroundColor = 'pink';
}
element.css({backgroundColor: backgroundColor});
}
});
})(jQuery);
(function ($) {
$.showMessage = function(msg) {
alert(msg);
};
console.log($.showMessage("メッセージ"));
})(jQuery);
grep(array,callback,invert) array -> grepをかけたい配列オブジェクト callback -> フィルタ条件をもつ関数オブジェクト。戻り値でbooleanを返したげる。 invert -> これをtrueにしてあげると、callback関数の条件を逆にできる。(falseのものだけをフィルタする場合は、trueにするイメージ)
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
(function ($) {
// 5以下の要素のみを抽出
var filter = $.grep(arr, function (value) {
return value <= 5;
});
// 3つめのパラメータがtrueなので、6以上の要素のみが抽出される。
var filter = $.grep(arr, function (value) {
return value <= 5;
}, true);
// 以下のように正規表現も使えます。
var ret = $.grep(["100", "200", "300"], function (value) {
return value.match(/[12]00/);
});
})(jQuery);
エラーの内容
速度を指定する。数値(ミリ秒)を指定した場合は、そのスピードで表示、非表示になります。 文字列を指定した場合は、以下のどうさになります。ざっくり指定するにはこれですね。 slow:ゆっくりと normal:普通 fast:早く *この値を省略した場合は、「normal」な動作となります。
表示、非表示が完了したタイミングでコールバックされる関数。任意指定だから特に指定しなくても大丈夫。
<script type="text/javascript">
$(function () {
var button$ = $('input[type=button]');
button$.toggle(
function () {
$('div#hoge').fadeOut("slow", function() {
button$.val("表示");
});
},
function() {
$('div#hoge').fadeIn("slow", function() {
button$.val("閉じる");
});
}
)
})
</script>
<input type="button" value="表示・非表示切り替え" id="btn"> <div id="view"> この部分の表示、非表示を切り替えます。 </div>
$(function () {
$('input#btn').click(function () {
$('div#view').toggle();
});
})
$(function () {
$('input#btn').click(function () {
$('div#view').slideToggle();
});
})
$(function () {
$('input#btn').click(function () {
$('div#view').slideToggle(2000);
});
})
$(function () {
$('input#btn').click(function () {
$('div#view').toggle('fast');
});
})
$(function () {
$('input').addClass('className');
});
$(function () {
$('input').removeClass('className');
});
$(function () {
$('input:text').focusin(changeTextColor).focusout(changeTextColor);
});
function changeTextColor() {
$(this).toggleClass('active');
}
$(function () {
$('input').hasClass('className');
});
$(function() {
// trの中で奇数番目のものを対象にする
$('tr:odd').css({
backgroundColor:'#aaaaaa'
});
// trの中で偶数番目のものを対象にする
$('tr:even').css({
backgroundColor:'#ffffff'
});
});
