ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.xdomainajax.js"></script>
<script>
function test(){
// 外部ページのURL
url = ' http://www.yahoo.co.jp/';
// jquery.xdomainajax.jsによるクロスドメイン（スクレイピング）
$.get(url, function(data){
// 外部ページのHTMLテキスト（ソース）を取得する
var html_text = data.responseText;
// HTMLテキストをjQueryオブジェクトにパースする。$.parseHTMLはパースするとき外部ページのJavaScriptを実行しない。
var jobj = $.parseHTML(html_text);
// 外部ページから一部の要素だけ抜き出し、表示する。
var content = $(jobj).find('.topicsindex').html();
$("#res").html(content);
});
}
</script>
</head>
<body>
<input type="button" value="Test" onclick="test()" /><br>
<br>
<p>出力</p>
<div id="res"></div>
</body>
</html>
リンク
HTML
<link href="jquery-ui.min.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery-ui.min.js"></script>
～省略～
<div class="sec4">
<input type="button" value="戻りスライド" onclick="slidePrev('#s1','#s2')" />
<input type="button" value="次へスライド" onclick="slideNext('#s1','#s2')" />
</div>
<div id="s1" >
<h3>ページA</h3>
いろはにほへとちりぬる<br>
をわかよたれそつねならむ<br>
</div>
<div id="s2" style='display:none'>
<h3>ページB</h3>
うゐのおくやまけふこえてあさきゆめみしゑひもせす<br>
</div>
JavaScript
function slidePrev(elm1,elm2, delay,callback) {
$(elm2).hide("slide", {direction: 'right'}, delay, function(){
$(elm1).show("slide", {direction: 'left'}, delay, function(){
if(callback != undefined){
callback();
}
});
});
}
function slideNext(elm1,elm2, delay,callback) {
$(elm1).hide("slide", {direction: 'left'}, delay, function(){
$(elm2).show("slide", {direction: 'right'}, delay, function(){
if(callback != undefined){
callback();
}
});
});
}
if($('#neko')[0]){
alert('neko要素は存在します');
}else{
alert('neko要素は存在しません');
}
追加
$('#sample1').after('<div>123</div>');
取得
var elm = $('#sample1').next();
alert(elm.html());
追加
$('#sample2').before('<div>123</div>');
取得
var elm = $('#sample2').prev();
alert(elm.html());
<div> <div>ネコ</div> <label>ヤギ</label> <div id="test1">ヤモリ</div> <div>サメ</div> <div><span class="text-success">奈良</span>シカ</div> <span>たぬき</span> </div>
var elms = $('#test1').siblings();
elms.each(function(){
var str = $(this).html() + '<br>';
$('#res').append(str);
});
ネコ
ヤギ
サメ
奈良シカ
たぬき
var elms = $('#test1').siblings('div');
elms.each(function(){
var str = $(this).html() + '<br>';
$('#res2').append(str);
});
ネコ
サメ
奈良シカ
function test3(){
var elms = $('#test1').nextAll();
elms.each(function(){
var str = $(this).html() + '<br>';
$('#res3').append(str);
});
}
サメ
奈良シカ
たぬき
function test4(){
var elms = $('#test1').parent().children();
elms.each(function(){
var str = $(this).html() + '<br>';
$('#res4').append(str);
});
}
ネコ
ヤギ
ヤモリ
サメ
奈良シカ
たぬき
HTML
<table id="sample_tbl1" >
<thead>
<tr><th>ID</th><th>天然記念物名</th><th>ボタン</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>ムラサキオカヤドカリ</td><td><input type="button" onclick="edit(this)" value="edit" /></td></tr>
<tr><td>2</td><td>オカヤドカリ</td><td><input type="button" onclick="edit(this)" value="edit" /></td></tr>
<tr><td>3</td><td>ナキオカヤドカリ</td><td><input type="button" onclick="edit(this)" value="edit" /></td></tr>
<tr><td>4</td><td>サキシマオカヤドカリ</td><td><input type="button" onclick="edit(this)" value="edit" /></td></tr>
<tr><td>5</td><td>オオナキオカヤドカリ</td><td><input type="button" onclick="edit(this)" value="edit" /></td></tr>
<tr><td>6</td><td>コムラサキオカヤドカリ</td><td><input type="button" onclick="edit(this)" value="edit" /></td></tr>
<tr><td>7</td><td>ヤンバルクイナ</td><td><span style="color:red"><input type="button" onclick="edit(this)" value="edit" /></span></td></tr>
</tbody>
</table>
HTML
function edit(elm){
// 先祖をさかのぼりtr要素を取得する
var tr=$(elm).parents('tr');
// 行番（インデックス）を取得する
var index = tr.index();
alert('行番:' + index);
}
$("input[name='tokage']")
<script>
function test1(){
var test = $("input[name='tokage']").val();
alert(test);
}
</script>
<input type="button" value="test" onclick="test1()" /><br>
<input type="text" name="tokage" value="トカゲ" />
<div id="neko">ベンガル
<span style="color:blue">シャムネコ</span>
<strong>スフィンクス
<span style="color:red">三毛猫</span>
</strong>タヌキ
</div>
var v = $('#neko').text();
ベンガルシャムネコスフィンクス三毛猫タヌキ
var v = $('#neko :first').text();
シャムネコ
/**
* 対象文字列をID属性とセレクタに分類する
* @param slt 対象文字列
* @returns res
* - xid ID属性
* - slt セレクタ
*/
function classifySlt(slt){
var xid='';
var slt2 = '';
var s1 = slt.charAt(0);
if(s1=='#'){
xid = slt.replace('#','');
slt2 = slt;
}else{
xid = slt;
slt2 = '#' + slt;
}
var res = {
'xid':xid,
'slt':slt2
}
return res;
};
ソースコード
<script>
$(function(){
var tr = $('#sample_tbl tbody tr').eq(-1);
console.log(tr.html());
});
</script>
<table id="sample_tbl">
<thead>
<tr><th>id</th><th>コード</th><th>名前</th><th>備考</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>neko</td><td>猫</td></tr>
<tr><td>2</td><td>yagi</td><td>山羊</td><td>草食</td></tr>
<tr><td>3</td><td>same</td><td>鮫</td></tr>
<tr><td>4</td><td>wasi</td><td>鷲</td></tr>
<tr><td>5</td><td>goki</td><td>御器</td></tr>
</tbody>
</table>
出力
<td>5</td><td>goki</td><td>御器</td>