Javascript jQuery 補遺

2024-12-062024
93.1% (340.8/366)
December
18.8% (5.8/31)
Week 49
69.2% (4.8/7)
Day 06 Fri
84.8% (20.3/24)

訪問者

total: 8874
today: 1
yesterday: 1
now: 1

↑

更新

MenuBar

コンボボックス・ラジオボタン・チェックボックス
JSFとの共存
$.remove()、$.empty() で DOM 要素を削除

コンボボックス・ラジオボタン・チェックボックス †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Select Exam</title>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
function $id(id) {
  return $(document.getElementById(id));
}

$(document).ready(function(){
  $('button').on('click',function(){
    var $this = $(this);

    switch($this.data('type')){
    case 'btnFuel' :
      alert($('#fuel :selected').eq(0).val());
      break;

    case 'btnCar' :
      $.each($('input[name="type"]:checked'), function(idx,chkbox){
        var $chkbox = $(chkbox);
        alert($chkbox.val());
      });
      break;

    case 'btnPrice' :
      alert($('input[name="price"]:checked').eq(0).val());
      break;

    case 'btnMaker' :
      $.each($('#manufacturere :selected'), function(idx,cmbbox){
        var $cmbbox = $(cmbbox);
        alert($cmbbox.val());
      });
      break;

    case 'btnPost' :
      alert($('form').serialize());
      break;
    }
  })
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <form>
    <p>
      fuel type :
      <select id="fuel" name="fuel">
        <option value="DIE">diesel</option>
        <option value="GAS">gasoline</option>
        <option value="HYB">hybrid</option>
        <option value="EV">electric</option>
      </select>
    </p>
    <p>
      car type :
      <label>
        <input type="checkbox" name="type" value="FM"/> family
      </label>
      <label>
        <input type="checkbox" name="type" value="SP"/> sports
      </label>
      <label>
        <input type="checkbox" name="type" value="TR"/> truck
      </label>
    </p>
    <p>
      price :
      <label>
        <input type="radio" name="price" value="LOW" checked/> - $9,999
      </label>
      <label>
        <input type="radio" name="price" value="MID"/> $10,000 - $29,999
      </label>
      <label>
        <input type="radio" name="price" value="HIGH"/> $30,000 -
      </label>
    </p>
    manufacturer :
    <p>
      <select id="manufacturere" name="manufacturer" multiple>
        <option value="VM">Volks Wargen</option>
        <option value="TY">Toyota</option>
        <option value="GM">General Motors</option>
        <option value="NR">Nissan Renault</option>
        <option value="HY">Hyundai</option>
        <option value="FD">Ford</option>
        <option value="PM">PSA Mitsubishi</option>
        <option value="HN">Honda</option>
      </select>
    </p>
  </form>
  <button data-type="btnFuel">Fuel</button>
  <button data-type="btnCar">Car Type</button>
  <button data-type="btnPrice">Price</button>
  <button data-type="btnMaker">Manufacturer</button>
  <button data-type="btnPost">Serialize</button>
</body>
</html>

$('#fuel :selected') などのように、属性のセレクタを使って指定する
- $('#fuel').children(':selected') も OK
- $('#fuel').children('[selected="true"]') もいいけどブラウザ依存で何か起きそうなので、そこんとこは jQuery の :selected に任せた方がよさそう
属性セレクタを書くときに癖があるみたい
- id指定(#id) からの絞り込みのときスペースを空けて "#id△:selected"
- 属性指定(input[name="type"])からの絞り込みのときスペースを空けない "input[name="type"]:checked"
Serialize はちゃんと動くみたい。そのまま GET するだけなら、$('form').serialize() でOK

↑

JSFとの共存 †

JSF では、入力コンポーネントの id が、XxxForm?:name などとなってしまう。
jQuery では、":???" は、jQuery独自のセレクタを意味する。
- たとえば $('input[type=radio]:checked') は、選択されているラジオボタンセレクタになる
- ":name" が未定義のセレクタであるとしてエラーになる

解決法 function $id(id) を作る

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>JSF & jQuery</title>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
function $id(id) {
  return $(document.getElementById(id));
}

$(document).ready(function(){
  $('button').on('click',function(){
    //alert('hello ' + $id('XxxForm:name').val());
    console.log($('input[type=radio]:checked').val());
  })
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <input type="text" id="XxxForm:name" value="AHO"/>
  <button>Hello</button>
</body>
</html>

↑

$.remove()、$.empty() で DOM 要素を削除 †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Remove Example</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
.tblArea {
	background-color: pink;
	width: 200px;
	height: 100px;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  resetTable();
  $('button').on('click',function(){
    var $this = $(this);
    switch($this.data('type')){
    case 'btnRemove' :
      $('#tbl').remove();
      break;
    case 'btnEmpty' :
      $('#tbl').empty();
      break;
    case 'btnReset' :
      resetTable();
      break;
    }
  });
});

function resetTable() {
  var $tblPlace = $('#tbl');
  if ($tblPlace.size() == 0) {
	  $('body').prepend('<div id=\"tbl\" class=\"tblArea\"></div>');
	  $tblPlace = $('#tbl');
  }
  var contents = '';
  contents = contents + '<table border=\"1\">'
  contents = contents + '<tr><td>Hyper Card</td><td><button data-item="001">Buy It</button</button></td></tr>';
  contents = contents + '<tr><td>Super Eraser</td><td><button data-item="002">Buy It</button</button></td></tr>';
  contents = contents + '<tr><td>Magic Pencil</td><td><button data-item="003">Buy It</button</button></td></tr>';
  contents = contents + '</table>'
  $tblPlace.html(contents);
  
  $('#tbl').find('button').on('click', function(){
    var $this = $(this);
    alert("add item-" + $this.data('item') + " to your shopping cart.");
  });
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <div id="tbl" class="tblArea"></div>
  <button data-type="btnRemove">Remove</button>
  <button data-type="btnEmpty">Empty</button>
  <button data-type="btnReset">Reset</button>  
</body>
</html>

$('#tbl').remove(); で、 <div id="tbl"></div> を含めて削除
$('#tbl').empty(); で、 <div id="tbl"></div> 以下を削除を削除 (<div id="tbl"></div> を空にする)
どちらも DOM 要素に貼り付けてあるイベントハンドラも消してくれる
- → オブジェクトへの参照が循環していると、メモリが解放されない場合がある。Javascript メモリリークを参照

HTML

Javascript jQuery 補遺

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

コンボボックス・ラジオボタン・チェックボックス †

JSFとの共存 †

$.remove()、$.empty() で DOM 要素を削除 †