Category Archives: jquery

「jQuery入門」replaceWith()の使い方

Posted by soft on 2018年12月26日コメントを受け付けていません。

サンプルコード1
$(‘li’).replaceWith(function(){
return $(“<div />”).append($(this).contents());});

サンプルコード2
$(‘p’).replaceWith(function(){
return ‘<p>’ + $(‘li’).text() + ‘</p>’;
});

「jQuery入門」テキストアリア、チェックボックスのvalue値を追加するサンプル

Posted by soft on 2018年12月25日コメントを受け付けていません。

①JSPコード
<!–textarea–>
<textarea name=”address”></textarea>

<!–checkbox–>
<input type=”checkbox” name=”userReg” value=”登録”>

②JSコード
// テキストエリアにテキストを追加する
$(‘textarea[name=”address”]’).val(‘大阪’);

// チェックボックスにチェックを入れる
$(‘input[name=”userReg”]’).prop(‘checked’, true);

「jQuery入門」divのpadding/margin/height/widthを取得する方法

Posted by soft on 2018年12月21日コメントを受け付けていません。

サンプルコード

$(function(){
        $("div").width();//div要素のwidth
        $("div").innerWidth();//div要素のpadding+width
        $("div").outerWidth();//div要素のpadding+width+border
        $("div").outerWidth(true);//div要素のpadding+width+border+margin
        
        $("div").height(); //div要素のheight   
        $("div").innerHeight();//div要素のpadding+height
        $("div").outerHeight();//div要素のpadding+height+border
        $("div").outerHeight(true);//div要素のpadding+height+border+margin
})

$(function(){

$("div").width();//div要素のwidth

$("div").innerWidth();//div要素のpadding+width

$("div").outerWidth();//div要素のpadding+width+border

$("div").outerWidth(true);//div要素のpadding+width+border+margin

$("div").height(); //div要素のheight

$("div").innerHeight();//div要素のpadding+height

$("div").outerHeight();//div要素のpadding+height+border

$("div").outerHeight(true);//div要素のpadding+height+border+margin

})

「jQuery開発」Ajaxでpost送信をするサンプル

Posted by soft on 2018年12月17日コメントを受け付けていません。

サンプルコード

  $( '#btnSend' ) .click(
    function() {
        var empApiUrl= 'http://xxx/api/emp/';
        var userNo = 2001;
        var age = 19;
        $.ajax({
            url: empApiUrl,
            type:'POST',
            dataType: 'json',
            data : {cftA : userNo, cftB : age },
            timeout:10000,
        }).done(function(data) {
                          console.log("成功");
        }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
                         console.log("失敗");
        })
    });

$( '#btnSend' ) .click(

function() {

var empApiUrl= 'http://xxx/api/emp/';

var userNo = 2001;

var age = 19;

$.ajax({

url: empApiUrl,

type:'POST',

dataType: 'json',

data : {cftA : userNo, cftB : age },

timeout:10000,

}).done(function(data) {

console.log("成功");

}).fail(function(XMLHttpRequest, textStatus, errorThrown) {

console.log("失敗");

})

});

「jQuery入門」append()でチェックボックス要素を追加するサンプル

Posted by soft on 2018年12月12日コメントを受け付けていません。

1.htmlコード

<div class="gameList">
</div>

<div>スマホゲームを追加してください</div>
<input type="text" id="addgame">
<button type="button" id="phonegame">追加</button>

</div>

<div>スマホゲームを追加してください</div>

2.JSコード

  $('#phonegame').click(function() {
    var phonegame = $('#addgame').val();
    //動的に追加
    $('.gameList').append('<input type="checkbox" name="game[]" value="'+phonegame+'">'+phonegame);
  });

$('#phonegame').click(function() {

var phonegame = $('#addgame').val();

//動的に追加

$('.gameList').append('<input type="checkbox" name="game[]" value="'+phonegame+'">'+phonegame);

});

「JQuery入門」全てにチェックを実装するサンプル

Posted by soft on 2018年12月12日コメントを受け付けていません。

1.htmlコード

<p><input type="checkbox" name="cft" value="cft" id="cft">全てにチェック</p>
<p><input type="checkbox" name="city[]" value="oosaka">大阪</p>
<p><input type="checkbox" name="city[]" value="tokyo">東京</p>
<p><input type="checkbox" name="city[]" value="fukuoka">福岡</p>

<p><input type="checkbox" name="cft" value="cft" id="cft">全てにチェック</p>

2.JSコード

  $('#cft').change(function() {
    if ($(this).prop('checked')) {
      // チェックを入れる
      $('input[name="city[]"]').prop('checked', true);
    } else {
      // チェックを外す
      $('input[name="city[]"]').prop('checked', false);
    }
  });

$('#cft').change(function() {

if ($(this).prop('checked')) {

// チェックを入れる

$('input[name="city[]"]').prop('checked', true);

} else {

// チェックを外す

$('input[name="city[]"]').prop('checked', false);

}

});

「jQuery入門」:contains()で特定要素を指定して処理を行う

Posted by soft on 2018年12月3日コメントを受け付けていません。

htmlコード
<ul>
<li>shinagawa</li>
<li>oosaki</li>
<li>kawasaki</li>
<li>shibuya</li>
</ul>

1.指定した文字列の要素を削除
$(“li:contains(‘shibuya’)”).remove();

2.特定の文字列を指定して色を変更
$(“li:contains(‘oosaki)”).css(“color”,”#00FF00″);

「jQuery入門」属性セレクター [attribute*=’value’]のサンプル

Posted by soft on 2018年10月1日コメントを受け付けていません。

サンプルコード

1.htmlコード
<div>
  <p class="class-AA">test data AA</p>
  <span class="kdf-info">test data BB</span>
  <span class="class-BB">test data CC</span>
</div>

2.JSコード
$(document).ready(function () {
  $("span[class*='kdf']").css("color", "green");
});

1.htmlコード

<div>

</div>

2.JSコード

$(document).ready(function () {

$("span[class*='kdf']").css("color", "green");

});

jQueryの子セレクター(parent > child)を利用するサンプル

Posted by soft on 2018年10月1日コメントを受け付けていません。

サンプルコード

①htmlコード
<div id="parentID_User">
  <p id="kdfInfo">test data AA</p>
  <p class="childID_User">test dtaa BB</p>
  <p class="zenbu">test data CC</p>
</div>


②cssコード
.userInfo{
  border: 5px;
}

③JSコード
$(document).ready(function () {
  $("#parentID_User > .childID_User").addClass("userInfo");
});

①htmlコード

</div>

②cssコード

.userInfo{

border: 5px;

}

③JSコード

$(document).ready(function () {

$("#parentID_User > .childID_User").addClass("userInfo");

});

「jQuery入門」each()でプラグインを作成するサンプル

Posted by soft on 2018年9月4日コメントを受け付けていません。

1.プラグインの定義
$.fn.txtChangePlugin = function(str) {
$(this).each(function() {
$(this).text(str).trigger(“change”);
});
};

2.プラグインの使用
例
if(xxx) {
$(“#infoId”).txtChangePlugin(“12345”)
}
else {
$(“#infoId”).txtChangePlugin(“67890”)
}

1 / 1212 3 4 5...10...»最後 »

最新IT技術情報_arkgame.com

Category Archives: jquery

「jQuery入門」replaceWith()の使い方

「jQuery入門」テキストアリア、チェックボックスのvalue値を追加するサンプル

「jQuery入門」divのpadding/margin/height/widthを取得する方法

「jQuery開発」Ajaxでpost送信をするサンプル

「jQuery入門」append()でチェックボックス要素を追加するサンプル

「JQuery入門」全てにチェックを実装するサンプル

「jQuery入門」:contains()で特定要素を指定して処理を行う

「jQuery入門」属性セレクター [attribute*=’value’]のサンプル

jQueryの子セレクター(parent > child)を利用するサンプル

「jQuery入門」each()でプラグインを作成するサンプル

最近の投稿

アーカイブ

カテゴリー