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;

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>