Web Design Leaves

$("<p>Hello</p>")

<div id="sample">
  <h4>Some Title</h4>
</div>

$("<p>Hello</p>").appendTo('#sample');

<div id="sample">
  <h4>Some Title</h4>
  <p>Hello</p>
</div>

$('<a>',  //基本となる <a> 要素の作成
  {
    href: 'http://www.google.com',  //href属性の指定
    target: '_blank',  //target属性の指定
    click: function(){  //クリックハンドラの設定
      alert($(this).attr('href'));  //href属性の値をアラートで表示
    }
  })
  .text('アラートボックス')  //テキストを設定
  .css({  //リンクのスタイル設定
    border: '1px solid #999',
    padding: '2px 10px',
    backgroundColor: '#EEE'
  }).appendTo('#appendMe');  //作成した要素を文書に追加

<div>
  <p id="appendMe">Some Text: </p>
</div>

<div>
  <p id="appendMe">Some Text: 
  <a href="http://www.google.com" target="_blank" style="border: 1px solid rgb(153, 153, 153); padding: 2px 10px; background-color: rgb(238, 238, 238);">アラートボックス</a>
  </p>
</div>

#appendMe a {
  border: 1px solid #99CCF5;
  padding: 2px 10px;
  background-color: #D1E9F8;
}

$("<a href='http://www.google.com' target='_blank'>アラートボックス</a>")
  .click(function(){
    alert($(this).attr('href'));
}).appendTo('#appendMe2');

$("li").text("Changed!");

<ul>
<li class="odd">list item 1</li>
<li id="item2">list item 2</li>
<li class="odd">list item 3</li>
<li>list item 4</li>
</ul>

var someText = $('p#text1').text();  
//id が text1 の p 要素のテキストを変数「someText」に取得
alert(someText);  //アラートで表示

//以下のように変数に格納せずに直接アラートで表示することもできます。
alert($('p#text1').text());

<p id="text1">Paragraph 1 </p>
<p id="text2">Paragraph 2</p>
<p id="text3">Paragraph 3</p>

var text1 = $('p#text1').text();  //p#text1のテキストを取得
var text2 = $('p#text2').text();  //p#text2のテキストを取得
var newText = text1 + '文字列の結合' + text2;  
//文字列を結合して新しい文字列を生成し、変数（newText）に代入
$('p#text3').text(newText);  //p#text3のテキストを新しい文字列に変更

$("p#text1").html("<strong>変更後</strong>");

<p id="text1">Paragraph 1 </p>
<p id="text2">Paragraph 2</p>

$("p#text2").html($("p#text1").html());

<p id="text1"><a href="index.html"><strong>index.html</strong></a></p>
<p id="text2">text</p>

var text1_html = $("p#text1").html();  //HTMLを取得し変数に代入
$("p#text2").html(text1_html);  //HTML を変更

<p><span>Lorem ipsum</span> dolor <em>sit</em> amet. </p>
<p>Dolorum, praesentium, reprehenderit.</p>
<p>Quasi, natus, <strong>iusto</strong>, eveniet.</p>

<p id="text1"><strong>Lorem ipsum</strong> dolor <em>sit</em> amet. </p>
<p id="text2">Dolorum, praesentium, reprehenderit.</p>
<p id="text3">Quasi, natus, iusto, eveniet.</p>

$("p#text1").prepend("<strong>text1の先頭に挿入します</strong>"); 

<div id="prpnd">
  <p id="text1">Lorem ipsum dolor sit amet. </p>
  <p id="text2">Dolorum, praesentium, reprehenderit.</p>
  <p id="text3">Quasi, natus, iusto, eveniet.</p>
</div>

<div id="prpnd">
  <p>prpndの先頭に挿入します</p>
  <p id="text1"><strong>text1の先頭に挿入します</strong>Lorem ipsum dolor sit amet.</p>
  <p id="text2">Dolorum, praesentium, reprehenderit.</p>
  <p id="text3">Quasi, natus, iusto, eveniet.</p>
</div>

$("#prpnd").prepend($("#text3")); 

<div id="prpnd2">
  <p id="text1">Lorem ipsum dolor sit amet. </p>
  <p id="text2">Dolorum, praesentium, reprehenderit.</p>
  <p id="text3">Quasi, natus, iusto, eveniet.</p>
</div>

$("p").prepend($("#text3 span")); 

<div id="prpnd3">
  <p id="text1">Lorem ipsum dolor sit amet.</p>
  <p id="text2">Dolorum, praesentium, reprehenderit.</p>
  <p id="text3">Quasi, natus, iusto,<span>*** eveniet ***</span>.</p>
</div>

<div id="prpnd3">
  <p id="text1"><span>*** eveniet ***</span>Lorem ipsum dolor sit amet.</p>
  <p id="text2"><span>*** eveniet ***</span>Dolorum, praesentium, reprehenderit.</p>
  <p id="text3"><span>*** eveniet ***</span>Quasi, natus, iusto,.</p>
</div>

$("p#text1").append("<strong>text1の最後(末尾）に挿入します</strong>");

<div id="apnd">
  <p id="text1">Lorem ipsum dolor sit amet.</p>
  <p id="text2">Dolorum, praesentium, reprehenderit.</p>
</div>

<div id="apnd">
  <p id="text1">Lorem ipsum dolor sit amet.<strong>text1の最後(末尾）に挿入します</strong></p>
  <p id="text2">Dolorum, praesentium, reprehenderit.</p>
  <p>apndの最後(末尾）に挿入します</p>
</div>

$("p#text1").before("<h3>text1の前に挿入</h3>");

<div id="bfr">
  <p id="text1">Lorem ipsum dolor sit amet.</p>
  <p id="text2">Dolorum, praesentium, reprehenderit.</p>
</div>

<h3>bfr の前に挿入</h3>
<div id="bfr">
  <h3>text1 の前に挿入</h3>
  <p id="text1">Lorem ipsum dolor sit amet.</p>
  <p id="text2">Dolorum, praesentium, reprehenderit.</p>
</div>

$("p#text1").after("<h3>text1 の後ろに挿入</h3>");

<div id="aft">
  <p id="text1">Lorem ipsum dolor sit amet.</p>
  <p id="text2">Dolorum, praesentium, reprehenderit.</p>
</div>

<div id="aft">
  <p id="text1">Lorem ipsum dolor sit amet.</p>
  <h3>text1 の後ろに挿入</h3>   
  <p id="text2">Dolorum, praesentium, reprehenderit.</p>
</div>
<h3>aft の後ろに挿入</h3>

$("p.content").prependTo("div.target");

<div class="target">
    <p>既存の子要素</p>
</div>
<p class="content">移動する要素</p>

<div class="target">
    <p class="content">移動する要素</p>
    <p>既存の子要素</p>
</div>

$(Target).prepend($(Content));  //prepend()
$(Content).prependTo(Target);   //prependTo()

$("<strong>追加挿入</strong>").prependTo("p");

<p>Lorem ipsum dolor sit amet.</p>

<p><strong>追加挿入</strong>Lorem ipsum dolor sit amet.</p>

$("p.content").appendTo("div.target");

<div class="target">
    <p>既存の子要素</p>
</div>
<p class="content">移動する要素</p>
<p><strong> Strong </strong> p 要素の移動しない部分</p> 

//$("p.content").appendTo("div.target");
<div class="target">
    <p>既存の子要素</p>
    <p class="content">移動する要素</p>
</div>
<p><strong> Strong </strong> p 要素の移動しない部分</p> 

//$("strong").appendTo("p");
<div class="target">
    <p>既存の子要素<strong> Strong </strong></p>
</div>
<p class="content">移動する要素<strong> Strong </strong></p>
<p> p 要素の移動しない部分<strong> Strong </strong></p> 

$("p.content").insertBefore("div.target");

<div class="target">
    <p>既存の子要素</p>
</div>
<p class="content">移動する要素</p>

<p class="content">移動する要素</p>
<div class="target">
    <p>既存の子要素</p>
</div>

$("p.content").insertAfter("div.target");

<p class="content">移動する要素</p>
<div class="target">
    <p>既存の子要素</p>
</div>

//$("p.content").insertAfter("div.target");
<div class="target">
    <p>既存の子要素</p>
</div>
<p class="content">移動する要素</p>

//$("p").insertAfter("div.target");
<div class="target"></div>
<p class="content">移動する要素</p>
<p>既存の子要素</p>

$('.target p').wrap($('<div class="blue"></div>'));

<div class="target">
  <p>jQuery</p>
  <p>PHP</p>
  <p>WordPress</p>
</div>

.blue {
  padding: 20px; 
  margin: 20px; 
  border: 1px solid #E7E3E3; 
  background-color: #E5F6F9;
}

<div class="target">
  <div class="blue"><p>jQuery</p></div>
  <div class="blue"><p>PHP</p></div>
  <div class="blue"><p>WordPress</p></div>
</div>

<div class="target">
  <p>jQuery</p>
  <p>PHP</p>
  <p>WordPress</p>
</div>
<div class="blue"></div>

<div class="target">
  <div class="blue"><p>jQuery</p></div>
  <div class="blue"><p>PHP</p></div>
  <div class="blue"><p>WordPress</p></div>
  <div class="blue"></div>
</div>

$( "selector" ).wrap(function(index) {
  任意の処理（index を利用可能）
　return ラップする要素;
});

<div>
  <p>apple</p>
  <p>orange</p>
  <p>grape</p>
  <button>Unwrap</button>
</div>

.test0 {
  color: blue;
}
.test1 {
  color: red;
}
.test2 {
  color: green;
}
.apple {
  background: #F6AEAF;
}
.orange {
  background: #F4A46B;
}
.grape {
  background:#D78CF0;
}

$( "p" ).wrap(function(index) {
  return "<div class='test" + index + "'></div>";
});

$( "p" ).wrap(function(index) {
  return "<div class='" + $(this).text() + "'></div>";
});

$('.target p').wrapAll($('<div class="blue"></div>'));

<div class="target">
  <p>jQuery</p>
  <p>PHP</p>
  <p>WordPress</p>
</div>

<div class="target">
  <div class="blue">
    <p>jQuery</p>
    <p>PHP</p>
    <p>WordPress</p>
  </div>
</div>

<div class="target">
  <p>jQuery</p>
  テキスト
  <p>PHP</p>
  <a href="#">リンク</a>
  <p>WordPress</p>
</div>

<div class="target">
  <div class="blue">
    <p>jQuery</p>    
    <p>PHP</p>    
    <p>WordPress</p>
  </div>
  テキスト
  <a href="#">リンク</a>
</div>

$('.target p').wrapInner($('<strong></strong>'));

<div class="target">
  <p>jQuery</p>
  <p>PHP</p>
  <p>WordPress</p>
</div>

<div class="target">
  <p><strong>jQuery</strong></p>
  <p><strong>PHP</strong></p>
  <p><strong>WordPress</strong></p>
</div>

$('.target p').unwrap();

<div class="target blue">
  <p>jQuery</p>
  <p>PHP</p>
  <p>WordPress</p>
</div>

  <p>jQuery</p>
  <p>PHP</p>
  <p>WordPress</p>

$("p").replaceWith("<h3>置き換える要素</h3>");

<div class="target">
  <p>jQuery</p>
  <p>PHP</p>
  <p>WordPress</p>
</div>
</div>

<div class="target">
  <h3>置き換える要素</h3>
  <h3>置き換える要素</h3>
  <h3>置き換える要素</h3>
</div>
</div>

$(".target p").replaceWith(function(){
  return "<h3>" + $(this).text() + "</h3>";
});

<div class="target">
  <h3>jQuery</h3>
  <h3>PHP</h3>
  <h3>WordPress</h3>
</div>
</div>

$(".target p a").remove();

<div class="target">
  <p>jQuery <a href="http://api.jquery.com/">Link</a></p>
  <p  class="php">PHP <a href="http://php.net/">Link</a></p>
  <p>WordPress <a href="http://codex.wordpress.org/">Link</a></p>
</div>

<div class="target">
  <p>jQuery </p>
  <p  class="php">PHP </p>
  <p>WordPress </p>
</div>

$(".target p").remove(".php");

<div class="target">
  <p>jQuery <a href="http://api.jquery.com/">Link</a></p>
  <p class="php">PHP <a href="http://php.net/">Link</a></p>
  <p>WordPress <a href="http://codex.wordpress.org/">Link</a></p>
</div>

$("#button1").click(function() {
  alert("クリックされました"); 
});
$("#button2").click(function() {
    detached_obj = $("#button1").detach();
});
$("#button3").click(function() {
    $("div#foo").prepend(detached_obj);
});

<div class="foo">
  <button id="button1">click</button>
  <button id="button2">detach button</button>
  <button id="button3">restore button</button>
</div>

<div id="foo">
  <p>abcdefg</p>
  <p>あいうえお</p>
</div>
<p><button>empty</button></p>

 $("button").click(function() {
      $("div#foo").empty(); 
  });

$("button").click(function() {
    $("ul.clone").clone().appendTo("div.foo"); 
});

<div class="foo">
  <a href="#" class="alert_link"> [alert link] </a>
</div>
<button">clone link</button>

$(".alert_link").on("click",function(){
  alert("alert link");   //アラートイベント
})

$("#button1").click(function() {
    $(".alert_link").clone(true).appendTo(".foo"); 
});

$("#button2").click(function() {
    $(".alert_link:last-child").remove(); 
});

$("selector").clone(true, false).appendTo('.somewhere');
  //子要素のイベントリスナーは複製しない場合

$("a").attr("href","http://google.com/");

$("a").attr({href:'http://sample.com', title:'sample link'});

$('.lbox').attr('data-target', '#bs-lbox-dialog').attr('data-toggle', 'modal');

<p><a class="sample1" href="#" title="link">Link 1</a></p>
<p><a class="sample2" href="#">Link 2</a></p>
<p><a class="sample3" href="#">Link 3</a></p>

<p><a class="sample1" href="http://google.com/" title="link">Link 1</a></p>
<p><a class="sample2" href="http://google.com/" target="_blank">Link 2</a></p>
<p><a class="sample3" href="#" title="sample link">Link 3</a></p>

$("a").text($("a").attr("href"));
//a 要素の href 属性を取得し、
//取得した値を text() で a 要素内のテキストとして書き込む

var href = $("a").attr("href");
$("a").text(href); 

<p><a href="http://jquery.com/" target="_blank">jQuery</a></p>

<p><a href="http://jquery.com/" target="_blank">http://jquery.com/</a></p>

$("a").removeAttr("target");

<p><a href="http://jquery.com/" target="_blank">jQuery</a></p>

<p><a href="http://jquery.com/">jQuery</a></p>

Name <input id="name" type="text" value="">
Option <input id="option" type="text" value="" disabled>
<input type="checkbox" name="drink" id="wine" value="wine" checked> Wine 
<input type="checkbox" name="drink" id="beer" value="beer"> Beer
<p class="result">Result: <span></span></p>     

$("p").addClass("orange_box bold");

<p>jQuery</p>
<p>PHP</p>
<p>WordPress</p> 

.orange_box {
  padding: 5px 10px;
  border: 1px solid #A66906;
  background-color: #ED8611;
  color: #fff;
}

.bold {
  font-weight: bold;
}

<p class="orange_box bold">jQuery</p>
<p class="orange_box bold">PHP</p>
<p class="orange_box bold">WordPress</p>

$("p").removeClass("orange_box bold");

<p class="orange_box bold">jQuery</p>
<p class="orange_box bold">PHP</p>
<p class="orange_box bold">WordPress</p>

<p>jQuery</p>
<p>PHP</p>
<p>WordPress</p> 

$("p").toggleClass("orange_box bold");

<p>jQuery</p>
<p class="orange_box bold">PHP</p>
<p>WordPress</p> 

<p class="orange_box bold">jQuery</p>
<p>PHP</p>
<p class="orange_box bold">WordPress</p>

if($("p").hasClass("orange_box")) {
  $("p").text("Orange Box");
}

<p class="orange_box bold">PHP</p>

$("p").css("color", "red");
//p 要素の color プロパティの値が red に変更される

<div id="sample"></div>

$("p").text($("p").css("color"));
//p 要素の color プロパティの値を取得し、
//取得した値を text() で p 要素内にテキストとして書き込む

<p>Lorem ipsum dolor sit amet. </p>

<p style="color: red;">jQuery</p>
<p style="color: green;">PHP</p>
<p style="color: blue;">WordPress</p>

$("p").each(function(){
    $(this).text($(this).css("color"));
});

data(name, value)

data(name)

removeData(name)

<p>Sample paragraph</p>   

<p>Sample paragraph<span></span></p>

var $div = $("<div />");  //div 要素を生成
$div.data("clickCount", 2);  //data clickCountを設定（2）
console.log("clickCount: " + $div.data("clickCount")); //clickCount: 2
$div.data("click-count", 3);  //data click-count を更新（3）
console.log("clickCount: " + $div.data("clickCount")); //clickCount: 3
console.log("click-count: " + $div.data("click-count")); //click-count: 3
  
$div.data("new-count", 7); 
console.log("newCount: " + $div.data("newCount"));  //newCount: 7
console.log("new-count: " + $div.data("new-count"));  //new-count: 7

<p data-name="foo">Sample paragraph</p>

 <div id="jqs-data4" class="jqs_div">
　　<p class="foo">Sample</p>
</div>

$("#jqs-data4 .foo").data("test", "テスト");
console.log($("#jqs-data4 .foo").data("test")); // →テスト

<div id="jqs-data5" class="jqs_div">
  <p class="foo" data-test="テスト">Sample</p>
</div>

console.log($("#jqs-data5 .foo").data("test"));  //→テスト
$("#jqs-data5 .foo").data("test", "変更");
console.log($("#jqs-data5 .foo").data("test"));  //→変更
console.log($("#jqs-data5 .foo").attr("data-test"));  //→テスト

<div id="jqs-data6" class="jqs_div">
  <p class="foo" data-test="テスト">Sample</p>
</div>

console.log($("#jqs-data6 .foo").data("test"));  //→テスト
console.log($("#jqs-data6 .foo").attr("data-test"));  //→テスト
$("#jqs-data6 .foo").attr("data-test", "変更");
console.log($("#jqs-data6 .foo").data("test"));  //→テスト
console.log($("#jqs-data6 .foo").attr("data-test"));  //→変更

<div id="sample">
  <p id="target">Target</p>
</div>

console.log($("#target").css("top")); //出力 16.65px
console.log($("#target").css("left")); //出力 68.5333px

#sample {
  position: relative; /* 必要 */
  width: 300px;
  height: 100px;
  border: 1px solid #ddd;
}
#target {
  position: relative; /* 必要 */
  top: 17%;
  left: 23%;
}

var target_top = parseFloat($("#target").css("top"));
var target_left = parseFloat($("#target").css("left"));
  
$("#target").css("top", (target_top + 100) + "px");
$("#target").css("left", (target_left + 100) + "px");

$("#target").css("top", function(index, current){
  return (parseInt(current) + 100); 
}); 
$("#target").css("left", function(index, current){
  return (parseInt(current) + 100); 
});

var offset = $("#sample").offset();
console.log(offset);  //出力：Object { top: 458, left: 157 }
console.log(offset.top);  //出力：458
console.log(offset.left);  //出力： 157

console.log($("#offset").offset().top);  //出力：458
console.log($("#offset").offset().left);  //出力： 157

<div id="offset_sample" class="wh"><p>div element</p></div>

var offset_pos = $("#offset_sample").offset();
alert("top: " + offset_pos.top + "\n" + "left: " + offset_pos.left);

$('#sample').offset({ top: 30, left: 30 });

$('#sample').offset({ top: 30 });

var myOffset = new Object();
myOffset.left = 50;
myOffset.top = 100;
$("#sample").offset(myOffset);

var myOffset = {top:100, left:50 }
$("#sample").offset(myOffset);

var os =  $('#sample').offset();
$('#sample').offset({ top: os.top + 50, left: os.left + 300 }); 

 $('#sample').offset({ top: $('#sample').offset().top + 50, left: $('#sample').offset().left + 300 }); 

$(セレクタ).offset(function(インデックス番号, 現在の位置座標) {
    return {top: 上からの位置, left: 左からの位置} ;
});

$("#sample").offset(function(index, coords) {
    return {top: coords.top + 100, left: coords.left + 200};
} );

var pos_top = $("div#pos_sample").position().top;
var pos_left = $("div#pos_sample").position().left;
alert("top: " + pos_top + "\n" + "left: " + pos_left);

<div id="jqs-70">
  <div id="pos_sample" class="wh"><p>div element</p></div>
</div>

#jqs-70 {
  position: relative;
}
div.wh {
  width: 100px;
  height: 100px;
  border: 1px solid #CB6062;
  background-color: #FBDEDE;
  margin: 20px auto;
  padding: 5px;
  color: #D18586;  
}

$(selector).scrollTop();	
//マッチした最初の要素の縦スクロールオフセットを返す。
$(selector).scrollTop(value) 	
//マッチした全要素の縦スクロールオフセットを設定する。
$(selector).scrollLeft() 	
//マッチした最初の要素の横スクロールオフセットを返す。
$(selector).scrollLeft(value) 	
//マッチした全要素の横スクロールオフセットを設定する。

<div id="jqs-71">
  <p>jQuery</p>
  <p>PHP</p>
  <p>WordPress</p>
</div>

#jqs-71 {
  height: 100px;
  overflow: scroll;
}
#jqs-71 p {
  line-height: 40px;
}

.pop_up {
  width: 200px;
  height: 100px;
  background-color: #DDF5F8;
  border: 1px solid #A4CBD1;
  z-index: 10;  //前面に表示
  position: fixed;  //固定表示
  top: 100px;
  left: 200px;
  border-radius: 10px;
  opacity: .9;
}
.pop_up p {
  text-align: center;
  line-height: 100px;
  font-size: 15px;
  font-weight: bold;
  color: #4B7390;
}

$("#scroll_disp").click(function(){
    $('<div class="pop_up"><p>Scroll !</p></div>').appendTo('body');
    $(window).scroll(function() {
      $("div.pop_up p").text("scrollTop: " + $(this).scrollTop());
      //$(this) は $(window) を指します。
    });
    return false;
});

$("#scroll_disp").click(function(){
  if($("div.pop_up").length === 0) {
    $('<div class="pop_up"><p>Scroll !</p></div>').appendTo('body').css('cursor', 'pointer').click(function(){
      $(this).remove();
    });
    $(window).scroll(function() {
      $("div.pop_up p").text("scrollTop: " + $(this).scrollTop());
    });
  }else{
    $(".pop_up").remove();
  }   
  return false;
});

jQuery(function($){
  var isHtmlScrollable = (function(){  //ブラウザの機能判定
    var html = $('html'), top = html.scrollTop();
    var el = $('<section/>').height(10000).prependTo('body');
    html.scrollTop(10000);
    var rs = !!html.scrollTop();
    html.scrollTop(top);
    el.remove();
    return rs;
  })();
  
  $('.next, .prev').click(function() {
    var pos;
    if ($(this).hasClass('next')) {
      pos = $(window).scrollTop() + $(window).height();
    }
    if ($(this).hasClass('prev')) {
      pos = $(window).scrollTop() - $(window).height();
    }
    $(isHtmlScrollable ? 'html' : 'body').animate({
      scrollTop: pos
    }, 600, "easeInExpo");
    return false;
  });
});

$('.next, .prev').click(function() {
  var pos;
  if ( $(this).hasClass('next') ) {
    if($(this).closest("header").hasClass("img1")) {
      pos = $(this).closest("header").offset().top + $(window).height();
    }else{
      pos = $(this).closest("section").offset().top + $(window).height();
    }
  }
  if ( $(this).hasClass('prev') ) {
    pos = $(this).closest("section").offset().top - $(window).height();
  }
  $(isHtmlScrollable ? 'html' : 'body').animate({
    scrollTop: pos
  }, 600, "easeInExpo");
  return false;
});