Webデザインのこと、いろいろ

Webデザインにまつわることを自分用にメモしています。

jQuery:基本3

21 [attribute!='value']
特定の属性が、特定の値を持たない要素を選択できるセレクターです。
jQueryの練習 - p44~属性セレクタ:完成版にリンク

<script>
$(document).ready(function(){
	$("li[title!='first']").css('color','coral');
});
</script>
</head>

<body>
<ul>
<li title="first">どんどこどんどこどんどこどんどこ</li>
<li title="second">どんどこどんどこどんどこどんどこ</li>
<li title="third">どんどこどんどこどんどこどんどこ</li>
<li title="fourth">どんどこどんどこどんどこどんどこ</li>
</ul>
</body>

22 [attribute^='value']
特定の属性の値が、特定の文字列で始まっている要素を選択できます。
jQueryの練習 - p44~属性セレクタ:完成版にリンク

<script>
$(document).ready(function(){
	$("[title^='f']").css('color','coral');
	//first と fourth が選択されている。
});
</script>
</head>

<body>
<ul>
<li title="first">どんどこどんどこどんどこどんどこ</li>
<li title="second">どんどこどんどこどんどこどんどこ</li>
<li title="third">どんどこどんどこどんどこどんどこ</li>
<li title="fourth">どんどこどんどこどんどこどんどこ</li>
</ul>
</body>

23 [attribute$='value']
特定の属性の値が、特定の文字列で終わっている要素を選択できます。

http://sanko333.webcrow.jp/0315_jQuery_basic//0315_jQuery_basic/23_attribute$_value.html:完成版にリンク

<script>
$(document).ready(function(){
	$("[title$='d']").css('color','aqua');
	//second と third が選択されている。
});
</script>
</head>

<body>
<ul>
<li title="first">どんどこどんどこどんどこどんどこ</li>
<li title="second">どんどこどんどこどんどこどんどこ</li>
<li title="third">どんどこどんどこどんどこどんどこ</li>
<li title="fourth">どんどこどんどこどんどこどんどこ</li>
</ul>
</body>

24 [attribute*='value']
特定の属性が、特定の文字列を含んでいる要素を指定できます。
jQueryの練習 - p44~属性セレクタ:完成版にリンク

<script>
$(document).ready(function(){
	$("[title*='ir']").css('color','aqua');
	//first と third が選択されている。
});
</script>
</head>

<body>
<ul>
<li title="first">どんどこどんどこどんどこどんどこ</li>
<li title="second">どんどこどんどこどんどこどんどこ</li>
<li title="third">どんどこどんどこどんどこどんどこ</li>
<li title="fourth">どんどこどんどこどんどこどんどこ</li>
</ul>
</body>

25 [attributeFilter1][attributeFilter2]
複数の属性セレクターを同時に指定することもできます。
jQueryの練習 - p48~属性セレクタ:完成版にリンク

<script>
$(document).ready(function(){
	$("[title^='f'][title*='th']").css('color','red');
	//fourth が選択されている。
});
</script>
</head>

<body>
<ul>
<li title="first">どんどこどんどこどんどこどんどこ</li>
<li title="second">どんどこどんどこどんどこどんどこ</li>
<li title="third">どんどこどんどこどんどこどんどこ</li>
<li title="fourth">どんどこどんどこどんどこどんどこ</li>
</ul>
</body>

26 jQueryの独自セレクタ
firstセレクター lastセレクタ
jQueryの練習 - p48~属性セレクタ:完成版にリンク

<script>
$(document).ready(function(){
	$('li:first').css('color','red');
	$('li:last').css('color','blue');
});
</script>
</head>

<body>
<ul>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
</ul>
</body>

27 even(偶数)セレクター odd(奇数)セレクタ
jQueryの独自セレクター even(偶数)セレクター odd(奇数)セレクタ
JavaScriptは0から数えるので、最初の要素は0(偶数)になる。
jQueryの練習 - p48~属性セレクタ:完成版にリンク

<script>
$(document).ready(function(){
	$('li:even').css('color','red');  //偶数 0を含む
	$('li:odd').css('color','blue');
});
</script>
</head>

<body>
<ul>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
</ul>
</body>

28 jQueryの独自セレクタ
eq(equal)セレクター 特定の順番の要素
lt(less than)セレクター 特定の要素より前の要素
gt(greater than)セレクター 特定の要素より後の要素
jQueryの練習 - p50~属性セレクタ:完成版にリンク

<script>
$(document).ready(function(){
	$('li:lt(2)').css('color','red'); //0と1の要素が赤に
	$('li:eq(2)').css('color','violet'); //012 で、3番目の要素
	$('li:gt(4)').css('color','aqua');  //01234  以降の要素に
});
</script>
</head>

<body>
<ul>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
<li>どんどこどんどこどんどこどんどこ</li>
</ul>
</body>

29 jQueryの独自セレクタ
headerセレクタ
h1~h6までのheading要素をまとめて選択できるセレクタ
jQueryの練習 - p50~属性セレクタ:完成版にリンク

<script>
$(document).ready(function(){
	$(':header').css('color','red'); //0と1の要素が赤に
});
</script>
</head>

<body>
<h1>犬かな?</h1>
<p>そうです。</p>
<h2>犬かな?</h2>
<p>そうです。</p>
<h3>犬かな?</h3>
<p>そうです。</p>
<h4>犬かな?</h4>
<p>そうです。</p>
<h5>犬かな?</h5>
<p>そうです。</p>
<h6>犬かな?</h6>
<p>そうです。</p>
</body>

30 jQueryの独自セレクタ
containsセレクター 特定の文字列が含まれている要素
hasセレクター 特定の要素が含まれている要素
jQueryの練習 - p50~属性セレクタ:完成版にリンク

<script>
$(document).ready(function(){
	$("li:contains('雨が')").css('color','red');
	$('li:has(strong)').css('color','blue');
});
</script>
</head>

<body>
<ul>
<li><strong>雨が</strong>ふってきた</li>
<li>雨がふってきた</li>
<li>風がふいてきた</li>
<li>風がふいてきた</li>
<li>雨がふってきた</li>
</ul>
</body>

31 parentセレクタ
empty擬似クラスの逆
中身のあるものに指定できる
http://sanko333.webcrow.jp/0315_jQuery_basic//0315_jQuery_basic/31_parent.html:完成版にリンク

<script>
$(document).ready(function(){
	$('li:parent').css('color','aqua');
});
</script>
</head>

<body>
<ul>
<li><strong>雨が</strong>ふってきた</li>
<li>雨がふってきた</li>
<li></li>
<li>風がふいてきた</li>
<li></li>
</ul>
</body>
広告を非表示にする