jQueryのあれこれ

 

<button>もっと読む</button>
<div id=”result”></div>
あああああああ

<a href=”http://google.com” data-sitename=”google”>google</a>

<a href=”http://yahoo.co.jp”>yahoo</a>
<div id=”box” style=”width: 100px; height: 100px; background: red;”></div>
<button>Add!</button>

<input id=”name” type=”text” value=”aaaaaaa” />

<select name=”members”><option>aaaa</option></select>
<select name=”members”><option>vvvv</option></select>
<select name=”members”><option>xxxx</option></select>

<input id=”name3″ name=”name” type=”text” />
<input id=”greet” type=”button” value=”Greet!” />
<ul id=”main”>
<li>0</li>
<li class=”item”>1</li>
<li class=”item”>2</li>
<li>3
<ul id=”sub”>
<li>3-0</li>
<li>3-1</li>
<li class=”item”>3-2</li>
<li class=”item”>3-3</li>
<li>3-4</li>
</ul>
</li>
</ul>
<script src=”//code.jquery.com/jquery-1.11.2.min.js”></script>
<script>// <![CDATA[
// ドキュメントを読み込まれたら
//$(document).ready(function() {
$(function() {
// セレクタ:処理対象となるDOM要素を指定するため記述(.より左)
// $(”)
// html要素 p h1 ul
// id #main
// class .item
// メソッド:処理(.より右)
// つなげて書く事をメソッドチェーンという
//$(‘p’).css(‘color’, ‘red’).hide(‘slow’);
// $(‘#sub’).css(‘color’, ‘red’);

// > 直下の小要素
// それ以下の要素
// , 複数の要素
// + 隣接する要素
//$(‘#main .item’).clss(‘color’, ‘red’);
//$(‘.item + item’).css(‘color’, ‘red’);

// フィルタ
// :eq()
// :gt() , :lt()
// :even, :odd 偶数 奇数
// :contains() 中身に何があるか
// :first, :last 一番上 一番下
// $(‘#sub > li.eq(2)’).css(‘color’, ‘red’);
// $(‘#sub > li.gt(2)’).css(‘color’, ‘red’);
// $(‘#sub > li.odd’).css(‘color’, ‘red’);
// $(‘#sub > li.contains(2)’).css(‘color’, ‘red’);

// メソッドを使ったDOM要素の指定
// parent(), children()
// next(), prev()
// siblings() – 兄弟要素
// $(‘#sub’).parent().css(‘color’, ‘red’);
// $(‘#sub’).children().css(‘color’, ‘red’);
// $(‘#sub > li:eq(2)’).children().css(‘color’, ‘red’);
// $(‘#sub > li:eq(2)’).siblings().css(‘color’, ‘red’);

// 属性セレクタ
//$(‘a[href="http://google.com"]‘).css(‘background’, ‘red’);
$(‘a[href!="http://google.com"]‘).css(‘background’, ‘red’);

// メソッド
// .css 設定 と 取得
//$(‘p’).css(‘color’, ‘red’).css(‘background’, ‘blue’);
//console.log($(‘p’).css(‘color’));

//addClass removeClass CSSを適用する。
//$(‘p’).addClass(‘myStyle’)

// attr 取得
//console.log($(‘a’).attr(‘href’));
//$(‘a’).attr(‘href’, ‘http://google.co.jp’);
// data
//console.log($(‘a’).attr(‘sitename’));

// text
//$(‘p’).text(‘aaaaa’);
// html
//$(‘p’).html(‘<a href=””>xxxxx</a>’)
// val
//console.log($(‘input’).val());
//$(‘input’).val(‘hello’);
// remove , empty
//$(‘p’).empty(); // p要素の中身を消す
//$(‘p’).remove(); // p要素自体を消す

// before, after -> insertBefore, insertAfter
var li = $(‘

<li>’).text(‘jast added’);
$(‘ul > li:eq(1)’).before(li);
li.insertBefore($(‘ul > li:eq(1)’));

// prepend(先頭に追加). append -> prependTo, appendTo
$(‘ul’).prepend(‘li’);
$(‘ul’).append(‘li’);
li.appendTo($(‘ul’));

// hide, show
//$(‘#box’).hide(800);
//$(‘#box’).hide(slow);
//$(‘#box’).show(800);
// fadeOut , fadeIn
//$(‘#box’).fadeOut(800);
//$(‘#box’).fadeIn(800);
// toggle 消えてたら現れる。あったら消える
//$(‘#box’).toggle(800);
//$(‘#box’).toggle(800);
//$(‘#box’).toggle(800);
//$(‘#box’).toggle(800);
// 消えた後にfunctionが実行される(altert)
//$(‘#box’).fadeOut(800, function() {
//alert(‘aaaaaa’);
//});

// イベント
// click
//$(‘#box’).click(function(){
//alert(‘hi’);
//});

// mouseover, mouseout, mousermove
$(‘#box’)
.mouseover(function(){
$(this).css(‘background’, ‘green’);
})
.mouseout(function(){
$(this).css(‘background’, ‘red’);
})
.mousemove(function(e){
$(this).text(e.pageX);
});

// focus, blur
// change
$(‘#name’)
.focus(function() {
$(this).css(‘background’, ‘red’);
})
.blur(function() {
$(this).css(‘background’, ‘white’);
});
$(‘#members’).change(function() {
alert((’111′));
});

// p要素のvanishていうclassを追加し、textにvanish!と表示する
$(‘button’).click(function() {
var p = $(‘

‘).text(‘vanish!’).addClass(‘vanish’);
$(this).before(p);
});
/*
$(‘button’).click(function() {
$(this).remove();
});
*/

// on イベント、クリック対象(動的に操作する場合に使う)
//$(‘body’).on(‘click’, ‘.vanish’, (function() {
//$(this).remove();
//});

// Ajax
// Asynchronous(非同期) JavaScript + XML
// サーバーと通信 + ページの書き換え
// 非同期:処理が終わる前に次の処理に移る

// .load() サーバ側の情報を読み込む
// functionはコールバック関数という
/*
$(‘button’).click(function(){
$(‘#result’).load(‘more.html’, function() {
$(‘#message’).css(‘color’, ‘red’);
});
});
*/

// .post
// .get
$(‘#greet’).click(function() {
$.get(‘greet.php’, {
name: $(‘#name3′).val()
}, function(data) {
$(‘#result’).html(data.message + “(” + data.length + “)”);
//$(‘#result’).html(data);
});
});

});

// ]]></script>

&nbsp;

jQueryMobileのあれこれ

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Insert title here</title>

<meta name=”viewport” content=”width=device-width”, initital-scale=1″>

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
</head>
<body>

<div data-role=”page” id=”home” data-add-back-btn=”true”>
<div data-role=”header” data-position=”fixed”>
<div data-role=”navbar”>
<ul>
<li><a href=”#menu”>メニュー1</a></li>
<li><a href=”#menu” class=”ui-btn-active”>メニュー2</a></li>
<li><a href=”#menu”>メニュー3</a></li>
</ul>
</div>
<!–
<a href=”#menu” data-icon=”gear” class=”ui-btn-right”>左</a>
–>
<h1>ホーム</h1>
<a href=”#menu” data-role=”button” >右</a> <!– data-theme=”b” –>
</div>
<div data-role=”content”>
<p>こんにちわ!</p>
<p>こんにちわ!</p>

<form action=”mail.php” method=”post”>
<div data-role=”fieldcontain”>
<label for=”name”>お名前</label>
<input type=”text” name=”name” id=”name” value=””/>
</div>

<div data-role=”fieldcontain”>
<label for=”keywords”>検索</label>
<input type=”seach” name=”keywords” id=”keywords” value=””/>
</div>

<!– スライダー –>
<div data-role=”fieldcontain”>
<label for=”amount”>検索</label>
<input type=”range” name=”amount” min=”0″ max=”100″ id=”amount” value=”20″/>
</div>

<!– チェックボクス –>
<div data-role=”fieldcontain”>
<fieldset data-role=”controlgroup” data-type=”horizontal”>
<legend>色1</legend>
<input type=”checkbox” name=”color_1″ id=”color_1″>
<label for=”color_1″>赤</label>
<input type=”checkbox” name=”color_2″ id=”color_2″>
<label for=”color_2″>青</label>
<input type=”checkbox” name=”color_3″ id=”color_3″>
<label for=”color_3″>黄</label>
</fieldset>
</div>

<!– ラジオボタン –>
<div data-role=”fieldcontain”>
<fieldset data-role=”controlgroup” data-type=”horizontal”>
<legend>色2</legend>
<input type=”radio” name=”color” value=”1″ id=”color_1″>
<label for=”color_1″>赤</label>
<input type=”radio” name=”color” value=”2″ id=”color_2″>
<label for=”color_2″>青</label>
<input type=”radio” name=”color” value=”3″ id=”color_3″>
<label for=”color_3″>黄</label>
</fieldset>
</div>

<!– りすと –>
<ul data-role=”listview” data-filter=”true”>
<li data-role=”list-divider”>日本語</li>
<li><a href=”#menu”>赤いぺーじ</a><span class=”ui-li-count”>10</span></li>
<li><a href=”#menu”>青いぺーじ</a></li>
<li><a href=”#menu”>赤いぺーじ</a></li>
<li data-role=”list-divider”>日本語</li>
<li><a href=”#menu”>赤いぺーじ</a><span class=”ui-li-count”>10</span></li>
<li><a href=”#menu”>青いぺーじ</a></li>
<li><a href=”#menu”>赤いぺーじ</a></li>
</ul>

<div data-role=”fieldcontain”>
<label for =”color”>色3</label>
<select name=”color” id=”color” data-native-menu=”false” multiple>
<option value=”1″>赤</option>
<option value=”2″>青</option>
<option value=”3″>気</option>
</select>
</div>

<input type=”submit” value=”送信!”/>
</form>
<p><a href=”#home”>ホーム</a></p>
<p><a href=”#menu” data-role=”button” data-icon=”gear” data-inline=”true”>メニュー</a></p>

<div data-role=”controlgroup” > <!– data-type=”horizontal” –>
<a href=”#menu” data-role=”button” data-icon=”gear” data-theme=”b”>メニュー1</a>
<a href=”#menu” data-role=”button” data-icon=”gear” >メニュー2</a>
<a href=”#menu” data-role=”button” data-icon=”gear” >メニュー3</a>
</div>
<p><a href=”http://google.com” rel=”external”>google</a></p>
<p><a href=”a.html”>a</a></p>
<p><a href=”a.html” data-ajax=”false”>a(ajax-false)</a></p>

</div>
<div data-role=”footer” data-position=”fixed”>
<div data-role=”navbar”>
<ul>
<li><a href=”#menu”>メニュー1</a></li>
<li><a href=”#menu” class=”ui-btn-active”>メニュー2</a></li>
<li><a href=”#menu”>メニュー3</a></li>
</ul>
</div>

<!–
<div data-role=”controlgroup” data-type=”horizontal”>
<a href=”#menu” data-icon=”plus”>追加</a>
<a href=”#menu” data-icon=”delete”>追加</a>
</div>
–>
</div>
</div>
<div data-role=”page” id = “menu”>
<div data-role=”header”>
<h1>メニュー</h1>
</div>
<div data-role=”content”>
<p>こんにちわ!</p>
<p><a href=”#home”>ホーム</a></p>
<p><a href=”#menu”>メニュー</a></p>
</div>
<div data-role=”footer”>
<h4>Copyright 2012</h4>
</div>
</div>

</body>
</html>