jquery-李炎恢学习视频学习笔记。自己手写。
简单的选择器
css 写 法: #box{ color:#f00;} //id选择器
jquery获取:$('#box').css('color','#f00');//获取DOM对象,并添加行为,id是唯一的,返回单个元素生效
css 写 法: .box{ color:#f00;} //class选择器
jquery获取:$('.box').css('color','#f00');//获取DOM对象,并添加行为,返回多个元素生效
css 写 法: div{ color:#f00;} //标签选择器
jquery获取:$('div').css('color','#f00');//获取DOM对象,并添加行为,返回多个元素生效
$(function(){
$('#box').css('color','blue');//添加行为(行为中包括样式)
$('div').css('color','#f00');
$('.box').css('color','#f00');
//alert($('#box').size());
//alert($('.pox').size());
alert($('div').size()); //用get 0 1 2获取对应的第几个
//很多情况下有动态DOM生成的问题,会导致执行不存在的id选择器
if($('#pox').size()>0){
$('#pox').css('color','red');
}
$('div').get(1).css('color','#000');//用get(1)获取第二个div,改变字体颜色为#000。-get原生
$('div').get(1).css('color','#000');//用eq(1)获取第二个div,改变字体颜色为#000。-
alert($('div').length); //属性不用加()
$('#box > p ').css('color','blue');//jquery兼容ie6
$('#pox').css('color','blue');
})
$(function(){
//原生js:
if(document.getElementById('pox')){ //判断是否存在--防止动态DOM生成问题导的ID不存在问题
document.getElementById('pox').style.color='blue';//
}
//jquery:--解决了容错的问题
$('#box').css('color','blue');
})
if($('#pox').get(0)){
}
if(('#pox')[0]){
}
常规选择器:
$(function(){
//群组选择去==》相同的样式进行合并
span,.pox,#box{color:red;}//--->css代码
span,p,#box{color:blue;}//--->css代码
$('#div,p,span').css('color','blue');
$('#box,.pox,span').css('color','red');
//后代选择器
ul li a{color:red;}//css代码
$('ul li a').css('color','red');
//通配符选择器
*{color:#ccc;}
$('*').css('color','#ccc');
/*注意:在全局范围使用*(通配符),会极大地消耗资源,不建议在全局使用*/
<li>11111</li>
<li>22222</li>
<li><em>123333</em></li>
$('ul li a,ul li em').css('color','blue');
$('ul li *').css('color','blue');
alert($('ul li *').size());//通配符选择器一般用在局的环境内
//在id和class中指定元素前缀
$('div.box'); //限定是.box元素获取的必须是是div
$('p#box div.side'); //同上
//class有一个特殊的模式,就是同一个dom节点可以声明多个class类,对于这种格式,有多个class选择器可以使用,但要注意和class群组选择器的区别。、
.box,.pox{color:red;}//群组选择器
.box.pox{color:red;}//双class选择器,ie6会出异常
$('.box.pox').css('color','red');
$('div#box p ul li a#link');//写法无错,选择器越复杂,那么字符串解析就越慢-->jquery的选择器从右边往左一层层的解析
$('#link');//单个id,不需要字符型的解析就可以获取到。--》id一个页面只有一个。这个速度是最快的。
})
/*注意:构造选择器时,有一个通用的优化原则:只追求必要的确定性,选择器筛选越复杂,jquery内部的选择器引擎处理字符串的时间就越长*/