jQueryの階層セレクタ(四、二):子孫要素、サブ要素、隣接要素、兄弟要素
4922 ワード
/* ：
DOM ，
， ， 。
1. ：
div span( )
#div2 span、#div2 .span1、#div2 #span2
2. ：
div 。->
#div2 > span、#div2 > .span1
3. ：
。->
#div2 + 、#div2 + div
4. ：
。->
*/
$(document).ready(function() {
/* <input type="button" id="btn1" value=" id div2 span "> */
//
$("#btn1").click(function() {
/*
$("#div2 ")： ， ；
、 id class
。
： 。
*/
// $("#div2 ").addClass("cBlack");
// $("#div2 #span1").addClass("cBlack");
// $("#div2 .subDivCls").addClass("cBlack");
$("#div2 span").addClass("cBlack");
});
/* <input type="button" id="btn2" value=" id div2 span "> */
//
$("#btn2").click(function() {
$("#div2 > span").addClass("cBlack");
});
/* <input type="button" id="btn3" value=" id div2 div "> */
/*
，
*/
$("#btn3").click(function() {
// $("#div2 + div").addClass("cBlack");
/* ，
div， next ，
， 。*/
// ： next：+； $("#div2 -").addClass("cBlack"); ！ :(
$("#div2 +").addClass("cBlack");
// #div2 + div ， next div ， ！
});
/* <input type="button" id="btn4" value=" id div2 div "> */
// ， ， 。
$("#btn4").click(function() {
/*
div2 ( ！)
， ， 。
， div2 div
*/
// $("#div2 ~").addClass("cBlack");
$("#div2 ~ div").addClass("cBlack");
});
/* <input type="button" id="btn5" value=" id div2 div "> */
/*
， ，
，
。
sbilings()：
*/
$("#btn5").click(function() {
//
// $("#div2").siblings().addClass("cBlack");
// div
$("#div2").siblings("div").addClass("cBlack");
});
});
id div1 div
class subDivCls div
id div2 div
div2 span,id span1
class subDivCls div
subDivCls
span2
id div3 div，title itcast，
div3 span
id div4 div
subDivCls
span4
title itcast
class subDivCls div