jQuery

jQueryオブジェクト⇒DOMオブジェクト

１．DOMオブジェクト ＝ jQueryオブジェクト[index]

例：

var $v = $("#v"); //jQueryオブジェクト

var v = $v[0]; //DOMオブジェクト

２．DOMオブジェクト ＝ jQueryオブジェクト.get(index)

例：

var $v = $("#v"); //jQueryオブジェクト

var v = $v.get(0); //DOMオブジェクト

var buttons = $('#xxx');

for(var i = 0; i < buttons.length; i++) {

console.log(buttons[i]);

}

if (buttons.length) {

...

}

★Selectタグについて

イベントを追加

$("#id").change(function(){...});

値を取得

var selectedText = $("#id").find("option:selected").text();

var selectedValue = $("#id").val();

var selectedIndex = $("#id ").get(0).selectedIndex;

var maxIndex = $("#id option:last").attr("index");

値を設定

$("#id ").get(0).selectedIndex = 1;

$("#id ").val(2);

$("#id option[text='xxx']").attr("selected", true);

$("a#user").attr({

alt: "search engine",

href: "http://www.google.com/"

});

要素を追加・削除

$("#id").append("<option value='Value'>Text</option>");

$("#id").prepend("<option value='0'>選択してください</option>");

$("#id option:last").remove();

$("#id option[index='0']").remove();

$("#id option[value='3']").remove();

$("#id option[text='xxx']").remove();

★Checkboxの全選択・解除

<script type="text/javascript">

$(function(){

// 全選択・解除

$("#checkAll").click(function(){

$('input[name=items]:checkbox').attr("checked", this.checked );

});

$('input[name=items]:checkbox').click(function(){

var $tmp = $('input[name=items]:checkbox');

$("#checkAll").attr('checked',

$tmp.length == $tmp.filter(':checked').length);

});

// 選択済

$("#send").click(function(){

var str="";

$('input[name=items]:checkbox:checked').each(function(){

str += $(this).val() + "\r\n";

});

alert(str);

// 選択したかどうか

if (!$('input[name=items]:checkbox').is(':checked')) {

alert("選択してください。");

}

});

});

</script>

<form method="post" action="">

<input type="checkbox" id="checkAll"/>全選択<br/>

<input type="checkbox" name="items" value="01"/>項目１

<input type="checkbox" name="items" value="02"/>項目２

<input type="checkbox" name="items" value="03"/>項目３<br/>

<input type="button" id="send" value="申請"/>

</form>

★アニメーションについて

//TOPへ移動

$("a[href='#top']").click(function() {

$("html, body").animate({ scrollTop: 0 }, "slow");

return false;

});

$('p').animate({

left: '+=90px',

top: '+=150px',

opacity: 0.25

}, 900, 'linear', function() {

...

});

★フォームクリア

function clearForm(form) {

$(':input', form).each(function() {

var type = this.type;

var tag = this.tagName.toLowerCase();

if (type == 'text' || type == 'password' || tag == 'textarea') {

this.value = "";

}

else if (type == 'checkbox' || type == 'radio') {

this.checked = false;

}

else if (tag == 'select') {

this.selectedIndex = -1;

}

});

};

★selectの内容を動的に変わる

$("select#job").change(function(){

$.getJSON("xxx.php", {id: $(this).val(), ajax: 'true'}, function(j){

var options = '';

for (var i = 0; i < j.length; i++) {

options +=

'<option value="'

+ j[i].optionValue + '">'

+ j[i].optionDisplay + '</option>';

}

$("select#person").html(options);

});

});

★スクリーンの真ん中に表示

jQuery.fn.center = function () {

return this.each(function(){

$(this).css({

position:'absolute',

top, ( $(window).height() - this.height() ) / 2

+ $(window).scrollTop() + 'px',

left, ( $(window).width() - this.width() ) / 2

+ $(window).scrollLeft() + 'px'

});

});

}

$(element).center();

★外部リンクの内容をロード

$("#content").load("xxx.html", function(response, status, xhr) {

if(status == "error") {

$("#content").html("Error occured: " + xhr.status + " " + xhr.statusText);

}

});

★JavaのString.formatメソッドをまねる

var format = function(){

if(arguments.length == 0){ return ""; }

var fmt = arguments[0];

for (var i = 1; i < arguments.length; i++) {

var reg = new RegExp("\\{" + (i - 1) + "\\}", "g");

fmt = fmt.replace(reg, arguments[i]);

}

return fmt;

};