FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

 【jQuery入門】-ドットインストールを参考に−(第6回ー第9回)

【今回の紹介】
前々から気になっていたJqueryの学習を始めました。

・作ってすぐ動く
・DOM操作が簡単にできる
  getElementById
  getElementById
  
 とか書かなくてよい

とても楽しい

インプットにしたのは有名な以下のサイト
まとまっていたのですごくわかやすかったので、
手を動かしつつ整理しながら学習しましたー

.インストール Jquery

※前提知識としてhtml,css,javascriptの知識とDOMの知識がないとわからないという感じでした
 (自分もまだまだですが)要素とか要素の属性とか、DOMノードがツリー構造になっていることとか
 の知識は必要という印象でした。

【内容】

6回から10回の内容をまとめたものです。


第6回 メソッドを使用して要素を指定

 ■記述方法
 
  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');

第7回 属性セレクタ

 
 属性セレクタセレクタの属性のこと。俗にいうプロパティとか

 ■記述方法
 ・セレクタを指定した後、属性を[]で囲む

  = →と等しい
 !=→以外
 *=含む

 ■具体例

<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');

■第8回 メソッドの使用

 ■.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');

■第9回 プロパティの取得と設定

 
 ■記述方法
 取得→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'));

■第10回 タグの中身を変更・取得する

■タグ内のテキストを取得・変更
.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>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }