[開発] 今更ながらのWebフロント技術の勉強 - jQuery

今更ながらのWebフロント技術の勉強
で、手始めにjQuery

ref.
ドットインストール, jQuery入門 (全20回)
http://dotinstall.com/lessons/basic_jquery_v2
WEB色見本 原色大辞典
https://www.colordic.org/
いま Web サイトを作るときにおさえておきたい10のこと(2015年版)
https://blogs.msdn.microsoft.com/osamum/2015/02/06/web-10201529/
【使い方まで徹底解説】おすすめJavascriptライブラリ厳選10選!
http://www.sejuku.net/blog/4559#Bootstrap

jquerystudy.html // --------------------
<'!DOCTYPE html>
<'html lang="ja">
<'head>
  <'meta charset="utf-8">
  <'title>study<'/title>
  <'style>
    .myStyle {
      border:5px solid green;
      font-size:20px;
    }
  <'/style>
<'/head>
<'body>
  <'p>jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。<'/p>
  <'ul id="main">
    <'li>0<'/li>
    <'li class="item">1<'/li>
    <'li class="item">2<'/li>
    <'li>3
      <'ul id="sub">
        <'li>3-1<'/li>
        <'li class="item">3-2<'/li>
        <'li class="item">3-3<'/li>
        <'li>3-4<'/li>        
      <'/ul>
    <'/li>
  <'/ul>
  
  <'a href="http://google.com" data-sitename="site name is google">google<'/a>
  <'a href="http://yahoo.com">yahoo<'/a>
  <'a href="http://msn.com">msn<'/a>
  
  <'input type="text" value="hello">

  <'div id="box" style="width:100px; height:100px; background: orange;">
  <'/div>
  
  <'div id="box2" style="width:100px; height:100px; background: darkcyan;">
  <'/div>
  
  <'div id="box3" style="width:100px; height:100px; background: darkred;">
  <'/div>
  
  <'input type="text" id="name">
  <'select id="members" name="membersselection">
    <'option>hoge<'/option>
    <'option>piyo<'/option>
    <'option>foo<'/option>
    <'option>boo<'/option>
  <'/select>
  
  <'button>Add!<'/button>
  
  
  <'script
   src="https://code.jquery.com/jquery-3.2.1.js"
   integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
   crossorigin="anonymous"><'/script>
  <'script>
    // $(document).ready(function() {
    $(function() {
      // セレクタ.メソッド
      // セレクタ: 処理対象となるDOM要素を指定する記法
      // メソッド: 処理
      $('p').css('color', 'red');
      // メソッドチェーン
      // $('p').css('color', 'red').hide('slow');
      // --------------------
      // セレクタの指定方法
      // HTML要素 - e.g. p h1 ul
      // CSS>id - e.g. #main
      // CSS>class - e.g. .item
      $("#sub").css('color', 'green');
      $(".item").css('color', 'blue');
      // > (不等号) = 直下の要素(子要素にのみ反映させる場合)
      $("#main > .item").css('color', 'orange');
      // (空白) = それ以下の要素(孫要素も反映させる場合)
      $("#main .item").css('color', 'brown');
      // , (カンマ) = 複数の要素
      $("p, .item").css('color', 'purple');
      // + (プラス) = 隣接する要素 - e.g. item要素の横にあるitem要素
      $(".item + .item").css('color', 'skyblue');
      // --------------------
      // フィルタ - :フィルタ名
      // :eq(), :gt() = greater than, :lt() = less than, :even = 偶数, :odd = 奇数, :contains(), :first, :last
      // :eq() - e.g. sub配下のliの2番目の要素(要素は0始まり)
      $("#sub > li:eq(2)").css('color', 'yellowgreen');
      // :gt() - e.g. 要素が2より大きい (3番目以降の項目)
      $("#sub > li:gt(2)").css('color', 'indigo');
      // :odd - e.g. 奇数番目の要素
      $("#sub > li:odd").css('color', 'violet');
      // :contains() - e.g. 値に'4'を含む項目
      $("#sub > li:contains('4')").css('color', 'deepskyblue');
      // --------------------
      // メソッドでdom要素指定
      // parent(), children(), siblings()
      $("#sub").parent().css('color', 'chocolate');//★TBC
      // next(), prev()
      $("#sub > li:eq(2)").next().css('color', 'orchid');
      // --------------------
      // 属性セレクタ
      // = 等しい、 != 等しくない、 *= 含む、 ^= で始まる、 $= で終わる
      $('a[href="http://google.com"]').css('background', 'silver');
      $('a[href!="http://google.com"]').css('background', 'gray');
      $('a[href*="msn"]').css('background', 'royalblue');
      // --------------------
      // css method
      // 値の取得 - e.g. 現在設定されている色を取得し、コンソールに表示させる
      console.log($('p').css('color'));
      // addClass/removeClass
      $('p').addClass('myStyle');
      // --------------------
      // attr
      console.log($('a').attr('href'));
      $('a').attr('href', 'http://google.co.jp');
      console.log($('a').attr('href'));
      // data (カスタム属性)
      console.log($('a').data('sitename'));
      // text, html, val, remove, empty
      $('p').text('just changed');
      $('p').html('<'a href="">click me!<'/a>');
      console.log('input.val is ' + $('input').val());
      $('input').val('hello, again!')
      $('p').empty();
      $('p').remove();
      // --------------------
      // 要素追加
      // before, after, insertBefore, insertAfter
      var li = $('<'li>').text('just added');
      $('ul > li:eq(1)').before(li)
      var li2 = $('<'li>').text('just added part2');
      li2.insertBefore($('ul > li:eq(2)'));
      // prepend, append. prepentTo, appendTo - 子要素の先頭/末尾に追加する
      // e.g. ulの子要素の先頭に追加する
      var li3 = $('<'li>').text('3rd just added');
      $('ul').prepend(li3);
      var li4 = $('<'li>').text('4th just added');
      li4.appendTo($('ul'));
      // --------------------
      // エフェクト
      // hide, show, fadeOut, fadeIn
      // toggle - 今消えていれば表示、表示されていれば消す
      // 8msecでhideする
      $('#box').hide(800);
      $('#box').fadeIn(800);
      $('#box').toggle('slow');
      // callback関数
      $('#box').show(800, function(){
        alert("done!")
      });
      // --------------------
      // event - click, mouseover, mouseout, mousemove
      $('#box2').click(function(){
        alert("hello!")
      });
      $('#box3')
        .mouseover(function() {//★TBC
          $(this).css('backgroud', 'darkgreen');
        })//セミコロンの有無に注意
        .mouseout(function() {//★TBC
          $(this).css('backgroud', 'olive');
        })//セミコロンの有無に注意
        .mousemove(function(e) {//event object
          $(this).text(e.pageX);
        });//セミコロンの有無に注意
      // --------------------
      // focus <'-> blur, change
      $('#name')
        .focus(function() {//★TBC//シャープを忘れずに
          $(this).css('backgroud', 'salmon');
        })
        .blur(function() {//★TBC
          $(this).css('backgroud', 'white');
        });
      $('#membersselection').change(function(){//★TBC
        alert('changed!');
      });
      // --------------------
      // ボタンを押す度にボタンの上に p を入れる
      $('button').click(function() {
        var p = $('<'p>').text('vanish!').addClass('vanish!');
        $(this).before(p);
      });
      /* vanishを消したい時、以下のやり方ではNG。
      pageがロードされた時にfunctionも読まれるが、その時点はvanishは存在しないから
      $('.vanish').click(function() {
        $(this).remove();
      });
      --> そこで ON を使う
      */
      $('body').on('click', '.vanish', function() {//★TBC
        $(this).remove();
      });
      // --------------------
      // Ajax = Asynchronous JavaScript + XML
      // サーバーと非同期通信 + ページの一部を書き換え
    });
  <'/script>
<'/body>
<'/html>
-------------------- // jquerystudy.html

tag : jQuery HTML CSS

2017-09-08 12:55 : 開発 : コメント : 0 : トラックバック : 0 :
コメントの投稿
非公開コメント

« next  ホーム  prev »

search

ad



counter


tag cloud

category cloud