jQuery01-基础

/*
#box{
color:red;
}


div{
color:orange;
}


.pox{
color:red;
}
//>表示子节点  不同于#box p
#box >p{
color:orange;
}


.div{
color:red;
}
.p{
color:red;
}
.strong{
color:red;
}


div,p,strong{
color:red;
}
*/



-------------------------------------------------------------------------------

/*
jQuery核心


$(function(){
$('#box').css('color','red');
});


$(function(){
//alert($);
//alert($());
//alert($('#box'));
$('#box').css('color','red').css('font-size','20px');
})


$(document).ready(function(){
alert(1);
});
$(document).ready(function(){
alert(2);
});//注意和window.onload对比


//对象互换
$(function(){
alert($('#box'));
alert($('#box').get(0));//返回document原生对象
alert($(document.getElementById('box')).css('color','red'));
})


//多库的冲突问题
jQurey.noConflict();
var $$=jQuery;




$(function(){
//$('#box').css('color','blue');//#id选择器
//$('div').css('color','grey');//标签选择器
//$('.pox').css('color','green');//class选择器
//$('div').eq(1).css('color','green');
//$('#box >p').css('color','red');//IE6不支持
//alert($('#box').size());
//alert($('#box')[0]);
})


*/


//群组选择器
/*
$(function(){
$('div,p,strong').css('color','red');
});


$(function(){
$('#box,.pox,strong').css('color','red');
});
*/

//后代选择器
/*
$(function(){
$('ul li a').css('color','orange')
});
//通配符选择器
$(function(){
$('*').css('color','green');
});
*/


//高级选择器
$(function(){
$('#box p').css('color','red');

});


/*
//高级选择器
$(function(){
//$('#box p').css('color','red');
$('#box').find('p').css('color','blue');
});

p

p

p

div

p

p

p

strong
strong
strong

p2

strong
strong
strong

div

strong
strong
strong

p1

strong
strong
strong




$(function(){
$('#box').next('p').css('color','red');//下一个节点
});
$(function(){//~ div标签下所有和p同级的标签都变红色
$('#box ~ p').css('color','red');
});


$(function(){
$('#box').nextAll().css('color','red');
});
$(function(){
$('#box').prev('p').css('color','red');
});//上一个节点


$(function(){
$('#box').prevAll().css('color','red');
});


$(function(){
$('#box').siblings('p').css('color','red');
});//同级上下所有元素


//nextUntil
$(function(){
$('#box').nextUntil('p').css('color','red');//从box的div开始向下选择直到p结束
});


$(function(){
$('#box').prevUntil('p').css('color','red');//从box的div开始向下选择直到p结束
});
*/