「Javascript/jquery」の版間の差分

2017年1月19日 (木) 12:25時点における最新版

ダウンロード

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

講座

http://www.mikage.to/jquery/

jqueryを設置せずにjqueryを使う

googleのapi

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

セレクター選択

|HTML要素|$("body")| |id属性を持つ要素|$("#id1")| |class属性を持つ要素|$(".class1")|

クリックイベント

<script type="text/javascript">
$(document).ready(function(){
       $("#d1").click(function(e){
         alert("test");
       });
});
</script>
<div id="d1">
</div>

自作関数

$(document).ready(function(){
    function test() {
    }
}

Inputの扱い

<input type='text' id='title' name='title'/>
// データ取得
$("#title").val();
// データ更新
$("#title").val('data1');

チートシート

http://phpspot.org/blog/archives/2008/02/javascriptajax_1.html

基本

• 基本

タグ無いの文字取得
$("q").html();
$("q").text();
class指定
$(".class1").html();
id指定
$("#id1").html();

• 書換

$("q").html("書換文字");

• 効果

フェードアウト
$("p").fadeOut("slow");
フェードイン
$("p").fadeIn("slow");
フェードアウトイン
$("p").fadeOut("slow").fadeIn("slow");

• css追加

$("p").css("background-color", "#fff0ff");

• class追加排除

$("p").addClass("class1")；    // 追加
$("p").removeClass("class1")；  // 排除

• 表示非表示("slow", "fast")

$("p").hide();
$("p").show();

ajax

• ファイルロード表示

$("p").load("import.html");
$("p").get("import.php", {name: "test",id: 1});    // getパラメータ
$("p").post("import.php", {name: "test",id: 1});  // postパラメータ
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

ロード後実行

$(function(){
    // HTMLロード後に実行
});

DOM

• タグの数

$("p").size()
var $target = $("#target1");
$("p" $target).size(); ～タグ内のタグの数

クリック開閉

$(function(){
    $(".btn").click(function(){
    $(".window").toggle("slow");
    return false;
    })
});
<a href="" class="btn">test</a>
<div class="window">
test
</div>

タグ属性変更

$('#hoge').attr('href', 'http://www.example.com/');

イベントハンドラ例

$.proxyを使うとコールバックでthisが使える

var Class1 = function(name) {
    this.name = name;
}
Class1.prototype = {
    post1 : function() {
        $.ajax({
            url: "/post.php",
            data: {
                "data1": "hoge1",
                "data2": "hoge2"
            },
            cache: false,
            success: $.proxy(this.postOnSuccess, this)
        });
    },
    postOnSuccess : function(jsonhtml) {
        console.log(this.name);
    }
}
var class1 = new Class1();
class1.post1();

イベント追加

$("#test1").bind("click", click1);
function click1(e) {
    alert("test");
}

クリック時した先のmethodのthisを読めるように

$(function(){
    var Car = function(name) {
        this.name = name;
    }
    Car.prototype.getname = function(e) {
        console.log(this.name);
    }
    var car = new Car("taro");
    $(".btn").click($.proxy(car.getname, car));
});

自分自身オブジェクト

$(this).
$(this).css("display", "none"); // これだと自分自身を非表示とする

イベントの戻り値に同クラスを指定する

bind(this)を使う。

function Favorite(){
}
Favorite.prototype.onclick = function(url) {
  $.get('/regist?url='+url, this.oncomplete_regist.bind(this));
};
Favorite.prototype.oncomplete_regist = function(data){
  this.view_regist(); // bind(this)を使うと内部メソッドを指定できる
};
Favorite.prototype.view_regist = function(){
  console.log("view_regist");
};

TypeError: $.browser is undefinedエラーが出る場合

jQuery1.9系以上で$.browserが廃止されたため以下のように切り替える

$.browser.msie

↓

$.support.msie

imgがロードできなかった時に処理させる

<img src="/assets/img/test.jpg" class="img1" />
<script type="text/javascript">
$("img.img1").error(function(){
  $(this).hide();
  alert("Not Found");
  return true;
});
</script>

参考：http://semooh.jp/jquery/api/events/error/fn/

すべてのクラスを取得

$(".class1").each( function() {
       alert($(this).val());
});