jQuery DOM操作
jqueryで何番目の行をクリックしているか調べる
jQueryで特定の要素にcssやcssプロパティを追加/変更/削除する記述方法
jQueryで指定するセレクタに変数を利用するコード例|プログラミング
element.classNameは、「element」に指定した要素のclass属性の値を取得、もしくは、設定するプロパティ。 http://alphasis.info/2013/08/javascript-dom-elementobject-classname/
jquery5
<html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <style> table{ margin: 15px auto 10px auto; } th{ padding:5px; background:#266; border:1px solid #777; color: #fff; } td{ border:solid 1px #777; background:#eee; padding:5px; } table tr.odd td { background: #ccc; } </style> </head> <body> <table id="testTable" border="1"> <tbody><tr> <th>関東</th> <td>東京</td> </tr> <tr> <th>関東</th> <td>千葉</td> </tr> <tr> <th>関東</th> <td>神奈川</td> </tr> <tr> <th>近畿</th> <td>大阪</td> </tr> <tr> <th>近畿</th> <td>兵庫</td> </tr> <tr> <th>近畿</th> <td>京都</td> </tr> </tbody></table> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).ready(function(){ $('#testTable').each(function () { var pre_element = null; var col_num = 0; $(this).find('tr').each(function () { var now_th = $(this).find('th').eq( col_num ); if (pre_element == null) { pre_element = now_th; console.log(now_th.text()); } else if (now_th.text() == pre_element.text()) { console.log(now_th.text()); now_th.remove(); if (pre_element.attr('rowspan') == null) pre_element.attr('rowspan', 1); pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1); } else { console.log(now_th.text()); pre_element = now_th; } }); }); }); </script> </body> </html>
jquery4
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <style> /* 内容 */ .tooltip-content { position: relative; left: -3px; top: -3px; background-color: #ffffe1; border: 1px black solid; padding: 3px; } /* 影 */ .tooltip-shadow { position: absolute; /*background-image: url('images/shadow.png');*/ } </style> </head> <body> <p onmouseover="tooltip.Schedule( this, event );" tooltip="ツールチップ">テキスト</p> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> Tooltip.DELAY = 300; // 表示するまでの遅延時間 Tooltip.OFFSET = 5; // マウスポインタからのオフセット // ツールチップ function Tooltip() { // 内容 this.content = document.createElement( 'div' ); this.content.className = 'tooltip-content'; // 影 this.shadow = document.createElement( 'div' ); this.shadow.className = 'tooltip-shadow'; this.shadow.appendChild( this.content ); } // ツールチップを表示する Tooltip.prototype.Show = function( text, x, y ) { // 内容 while( this.content.hasChildNodes() ) { this.content.removeChild( this.content.lastChild ); } this.content.appendChild( document.createTextNode( text ) ); // 影 this.shadow.style.left = x + 'px'; this.shadow.style.top = y + 'px'; this.shadow.style.visibility = 'visible'; if( this.shadow.parentNode != document.body ) { // ドキュメントのbody要素に追加する document.body.appendChild( this.shadow ); } } // ツールチップを隠す Tooltip.prototype.Hide = function() { this.shadow.style.visibility = 'hidden'; } // ツールチップの表示を予定する Tooltip.prototype.Schedule = function( targetElement, event ) { var e = event || window.event; var x = e.clientX; var y = e.clientY; // マウスポインタの位置をドュメント座標に正する x += window.pageXOffset || document.documentElement.scrollLeft; y += window.pageYOffset || document.documentElement.scrollTop; // イベントハンドラ内で処理できthisンす var _this = this; // タイムアウト処理を設定する var timerID = window.setTimeout( function() { var text = targetElement.getAttribute( 'tooltip' ); // ツールチップを示す _this.Show( text, x + Tooltip.OFFSET, y + Tooltip.OFFSET ); }, Tooltip.DELAY ); function MouseOut() { // ツールチップを隠す _this.Hide(); // 未処理のタイムアウト処理を取消す window.clearTimeout( timerID ); // イベントハンドラを削除する if( targetElement.removeEventListener ) { targetElement.removeEventListener( 'mouseout', MouseOut, false ); } else { // IE用の処理 targetElement.detachEvent( 'onmouseout', MouseOut ); } } // イベントハンドラを登録する if( targetElement.addEventListener ) { targetElement.addEventListener( 'mouseout', MouseOut, false ); } else { // IE用の処理 targetElement.attachEvent( 'onmouseout', MouseOut ); } } </script> <script type="text/javascript"> // ツールチップを生成する var tooltip = new Tooltip(); </script> </body> </html>
jquery3
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <style> /* 表示文字の装飾 */ div.tooltip1{ color: #555; display: inline-block; /* インライン要素化 */ border-bottom:dashed 1px #555; /* 下線を引く */ } /* ツールチップ部分を隠す */ div.tooltip1 span { display: none; } /* マウスオーバー */ div.tooltip1:hover { position: relative; color: #333; } /* マウスオーバー時にツールチップを表示 */ div.tooltip1:hover span { display: block; /* ボックス要素にする */ position: absolute; /* relativeからの絶対位置 */ top: 25px; font-size: 90%; color: #fff; background-color: #51A2C1; width: 800px; padding: 5px; border-radius:3px; z-index:100; } /* フキダシ部分を作成 */ div.tooltip1 span:before{ content:''; display:block; position:absolute; /* relativeからの絶対位置 */ height:0; width:0; top:-13px; left:15px; border:13px transparent solid; border-right-width:0; border-left-color:#51A2C1; transform:rotate(270deg); /* 傾きをつける */ -webkit-transform:rotate(270deg); -o-transform:rotate(270deg); z-index:100; } </style> </head> <body> <p id="target">ターゲットだゆん</p> <ul></ul> <div id='aaa'> </div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).ready(function(){ // $('#target').append('<span>要素内の最後に挿入</span>'); // $('ul').append('<li>追加されました</li>'); $('#aaa').append('<span>サンプル<br />フキダシのようなツールチップ</span>'); }); </script> </body> </html>
jquery2
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <style> p{font-size:12px; line-height:16px;} a{color:red ;} #tip_body { /*ツールチップのデザイン*/ display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: #333; color:#fff; border: 1px solid red; opacity: 0.9 ; filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=90) ; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999; } </style> </head> <body> <p> <a href="" class="tooltip" title="Minimal</br>aaaaa</br>">Shotoku</a></br> <a href="" class="tooltip" title="<table><tr><td>maaaa1111111111111111111111111111111</td></tr><tr><td>111111111111111111111111111111111111111111111111</td></tr><tr><td>111111111111111111111111111111111111111111111111</td></tr></table>">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> </p> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> this.t_tip = function() { //ツールチップの出る場所 this.xOffset = -10; this.yOffset = 20; //マウスホバーイベント $("a").unbind().hover( function(e) { //要素のtitle属性を取得してspanの中に含める this.t = this.title; this.title = ''; this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $('body').append( '<span id="tip_body">' + this.t + '</span>' ); $('#tip_body').css("top", this.top+"px").css("left", this.left+"px").fadeIn("farst"); }, function() { this.title = this.t; $("#tip_body").remove(); } //マウスの動きに合わせる ).mousemove( function(e) { this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $("#tip_body").css("top", this.top+"px").css("left", this.left+"px"); } ); }; $(function(){ var hoge = $('a').html(); console.log($('a').length); console.log(hoge); console.log(hoge.length); $('.tooltip').each(function(i) { console.log(i + ': ' + $(this).text()); }); t_tip(); }); </script> </body> </html>
jquery1
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <style> table{ margin: 15px auto 10px auto; } th{ padding:5px; background:#266; border:1px solid #777; color: #fff; } td{ border:solid 1px #777; background:#eee; padding:5px; } table tr.odd td { background: #ccc; } p{font-size:12px; line-height:16px;} a{color:red ;} #tip_body { /*ツールチップのデザイン*/ display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: white; color:black; border: 1px solid black; opacity: 0.9 ; filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=90) ; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999; } </style> </head> <body> <p>jQueryの練習</p> <div id="box" style="width:100px;height:100px;background:red;"></div> <div id="box2" style="width:100px;height:100px;background:blue;"></div> <h2 id="elem">ID名elemの要素</h2> <button>click</button> <button id="btn2">click2</button> <p id="p2">表示されてるメッセージ</p> <p>処理が実行された回数: <span id="result">0</span></p> <p> <a href="" class="tooltip" title="Minimal</br>aaaaa</br>">Shotoku</a> </p> <table id="table1"> <tr class='trx'><th class='tooltip' title="Minimal</br>aaaaa</br>">12345</th><td>aaaa</td></tr> <tr class='trx'><th class='tooltip' title="Minimal</br>aaaaa</br>">12345</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> </table> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> this.t_tip = function() { //ツールチップの出る場所 this.xOffset = -10; this.yOffset = 20; //マウスホバーイベント $(".tooltip").unbind().hover( function(e) { //要素のtitle属性を取得してspanの中に含める this.t = this.title; this.title = ''; this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $('body').append( '<span id="tip_body">' + this.t + '</span>' ); $('#tip_body').css("top", this.top+"px").css("left", this.left+"px").fadeIn("farst"); }, function() { this.title = this.t; $("#tip_body").remove(); } //マウスの動きに合わせる ).mousemove( function(e) { this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $("#tip_body").css("top", this.top+"px").css("left", this.left+"px"); } ); }; $(function() { // hide, show // fadeOut, fadeIn // toggle //$('#box').hide(800); //$('#box').fadeOut(800); //$('#box').toggle(800); $('#box').fadeOut(800, function() { // alert("gone!"); }); $('#box').fadeIn(800, function() { }); // テーブルをストライプ表示に $(function() { $('tr:nth-child(odd)').addClass('odd'); }); var pre_element = null; var col_num = 0; $(".trx").each(function(i, elem) { console.log(i + ': ' + $(elem).find('th').text()); var now_th = $(this).find('th'); if (pre_element == null) { pre_element = now_th; console.log(now_th.text()); } else if (now_th.text() == pre_element.text()) { now_th.remove(); if (pre_element.attr('rowspan') == null) pre_element.attr('rowspan', 1); pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1); } else { pre_element = now_th; } console.log(now_th.text()); }); $('.trx').each(function () { var pre_element = null; var col_num = 0; $(this).find('tr').each(function () { var now_th = $(this).find('th').eq( col_num ); if (pre_element == null) { pre_element = now_th; } else if (now_th.text() == pre_element.text()) { now_th.remove(); if (pre_element.attr('rowspan') == null) pre_element.attr('rowspan', 1); pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1); } else { pre_element = now_th; } }); }); $(document).ready(function(){ $("#elem").mouseover(function(){ // 実行回数のカウント $("#result").html( parseInt( $("#result").html() ) + 1 ); }); $('#box').on('click',function(){ $('#box').fadeOut(800, function() { $('#box').fadeIn(800); }); }); $('p').on('click',function(){ // alert("hogehoge"); }); $('#box2').on('click',function(){ $('#box2').toggle(800); $('#box2').toggle(800); }); $('button').click(function(){ $('#p2').hide(); $("#btn2").prop("disabled", false); }); $('#btn2').click(function(){ $('#p2').show(); $("#btn2").prop("disabled", true); }); }); }); $(function(){ // var hoge = $('a').html(); // console.log($('a').length); // console.log(hoge); // console.log(hoge.length); // $('.tooltip').each(function(i) { // console.log(i + ': ' + $(this).text()); // }); t_tip(); }); </script> </body> </html>
JSFのサンプル
index.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <title>Sample02</title> </h:head> <h:body> <h2>名簿データの作成</h2> <h:form> 番号:<h:inputText value="#{meiboBean.number}" /><br/> 氏名:<h:inputText value="#{meiboBean.name}" /><br/> <h:commandButton value="送信" action="#{meiboBean.next()}"/> </h:form> </h:body> </html>
Output.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <title>Sample02</title> </h:head> <h:body> <h2>名簿データの確認</h2> <h:form> 番号:<h:outputText value="#{meiboBean.number}"/><br/> 氏名:<h:outputText value="#{meiboBean.name}"/><br/> <h:link outcome="index">[戻る]</h:link> </h:form> </h:body> </html>
MeiboBean.java
package beans; import javax.enterprise.context.RequestScoped; import javax.inject.Named; @Named @RequestScoped public class MeiboBean { private Integer number; private String name; public String next() { System.out.println("★number=" + this.number + "/ name=" + this.name); return "output.xhtml"; // 次に表示するウェブページ } public String getName() { return name; } public void setName(String name) { this.name = name; } public Integer getNumber() { return number; } public void setNumber(Integer number) { this.number = number; } }