【jQuery入門】-ドットインストールを参考に−（第６回ー第９回）
【今回の紹介】
前々から気になっていたJqueryの学習を始めました。
・作ってすぐ動く
・DOM操作が簡単にできる
getElementById
getElementById
とか書かなくてよい
とても楽しい
インプットにしたのは有名な以下のサイト
まとまっていたのですごくわかやすかったので、
手を動かしつつ整理しながら学習しましたー
※前提知識としてhtml,css,javascriptの知識とDOMの知識がないとわからないという感じでした
（自分もまだまだですが）要素とか要素の属性とか、DOMノードがツリー構造になっていることとか
の知識は必要という印象でした。
【内容】
６回から１０回の内容をまとめたものです。
第６回 メソッドを使用して要素を指定
■記述方法
parent()→親を指定
children()→子を指定
next()→次の要素指定
prev()→前の要素指定
siblings()→同列の要素指定（自分は含まない）
■具体例
<ul id='main'> <li>1</li> <li class='item'>2</li> <li>3</li> <li>4 <ul id='sub'> <li>4-1</li> <li>4-2</li> <li class='item'>4-3</li> <li>4-5</li> </ul> </li> </ul>
$('#sub').parent().css('color','pink'); $('#sub').children().css('color','pink'); $('#sub>li:eq(2)').next().css('color','pink'); $('#sub>li:eq(2)').prev().css('color','pink'); $('#sub>li:eq(2)').siblings().css('color','pink');
第７回 属性セレクタ
属性セレクタ；セレクタの属性のこと。俗にいうプロパティとか
■記述方法
・セレクタを指定した後、属性を[]で囲む
= →と等しい
!=→以外
*=含む
■具体例
<p><a href='http://www.yahoo.co.jp'>yahoo</a></p> <p><a href='http://www.google.co.jp'>google</a></p> <p><a href='http://dotinstall.com'>.inst</a></p>
$('a[href="http://www.google.co.jp"]').css('color','pink'); $('a[href*="co.jp"]').css('color','pink'); $('a[href$=".com"]').css('color','pink');
■第８回 メソッドの使用
■.cssメソッドについて
.cssメソッドチェーンで並べることが可能
色の取得も可能
■具体例
$('a[href$=".com"]').css('color','pink'); //色の設定
console.log($('a:eq(2)').css('color')); //色の取得
■.addclass
・スタイルシートにあらかじめあるCSSの設定を設定する
可読性上がる
<style> .myclass{ border: 5px solid green; font-size: 20px; } </style>
<p class='myclass'><a href='http://www.yahoo.co.jp'>yahoo</a></p> $('p').addclass('myclass');
■第９回 プロパティの取得と設定
■記述方法
取得→attr（プロパティ（属性）
設定→attr（プロパティ（属性）,値）
■具体例
console.log($('a:eq(2)').attr('href'));
$('#item1').attr('href','http://jquery.com/');
■おまけ
カスタム属性；date
<p class='myclass'><a href='http://www.yahoo.co.jp'>yahoo</a></p> <p><a href='http://www.google.co.jp'>google</a></p> <p><a href='http://dotinstall.com'>.inst</a></p> <p ><a id='item1' href="">test</a></p> <p date-name='hoge'>カスタム属性</a></p>
console.log($('a:eq(2)').attr('href')); $('#item1').attr('href','http://jquery.com/'); console.log($('p:eq(4)').data('name'));
■第１０回 タグの中身を変更・取得する
■タグ内のテキストを取得・変更
.text()
.text(変更する値)
■タグ内にhtml要素を加える
.html('要素')
■タグ内のvalueを取得・変更する
.val()
.val('valueの値')
■削除する
・タグ内を削除
.empyt()
・要素を削除
.remove()
<p date-name='hoge'>test</p> <input type='text' value="hoge"></input>
$('p').text('textchange'); $('p').html('<a href="">クリック</a>'); console.log($('input').val()); $('input').val('hoooo'); $('p').empty(); $('input').remove();
【参考】
<html> <title>Jquery</title> <head> <meta charset='utf-8'> </head> <body> <script src = "http://code.jquery.com/jquery-1.11.0.min.js" ></script> <script> $(function(){ //ここにjQueryを記述 }); </script> </body> </html>
