window.onload = function(){ //原生js设置背景属性
var oBox = document.getElementById('box');
oBox.onclick = function(){
this.style.background = 'yellow';
}
}
$(function(){ //jquery写法
$('#box').click(function(){
$(this).css('background','yellow')
})
})
$(function(){ //混合写法,get()!
$('#box').click(function(){
$(this).get(0).style.background = 'yellow'
})
})
若有li弹出它的长度,方法如下:
alert($('li').size())
alert($('li').length)
设置最后一个元素的背景:
$('li').eq($('li').size()-1).css('background','yellow')
$('li').eq(-1).css('background','yellow')
弹出DIV的宽:
alert($('#box').css('width')) //conetnt
alert($('#box').outerWidth()) //padding + content
alert($('#box').outerWidth(true)) //padding + margin + content
高:
alert($('#box').css('width')) //conetnt
alert($('#box').outerheight()) //padding + content
alert($('#box').outerheight(true)) //padding + margin + content
Text 和 HTML 的区别:
Hello ! star I'm sky
alert($('#txt').text()); //弹出Hello ! star I'm sky
alert($('#txt').html()); //弹出Hello ! star I'm sky
$('p').text('Tomorrow'); //添加标签i后Tomorrow
$('p').html('Tomorrow'); //Tomorrow
移除再拉回:
var box = $('#box'); //方法1
$('#box').remove(); //remove可以用detach代替
$('body').append(box);
var box = $('#box').detach(); //方法2 同上
$('body').append(box);
detach 会有一个返回值$('#box'),直接存在变量里
parent的注意事项:
$('#son').parent().css('backgroundColor','green');//获取父级标签
$('#son').parents().css('backgroundColor','green');//父及 及以上同时可传选择器
$('#son').parents('.lala').css('background','black')//父元素中有lala标签的
//最贴近自己的父及,且必须传参,仅能找到最近的父级标签
$('#son').closest('lala').css('background','black')
兄弟节点siblings:
//不传参就是不包括自身,传参就是过滤后找到那个参数
$('.two').siblings().css('background','pink')
$('.two').siblings('.one').css('background','pink')
//next仅能返回一个对象,可以写多个next
$('.two').next().next().next().css('background','pink')
//返回一组对象可以传参,不传参就是下面的全都被选中
$('.two').nextAll('.one').css('background','pink')
//从two到four之间的对象都被选中,不传参下面的都被选中同nextAll不传参一样
$('.two').nextUntil('four').css('background','pink')
//过滤,除了dd其他都改变,not则相反
$('li').css('background','pink').filter('.dd').css('background','yellow')
$('li').css('background','pink').not('.dd').css('background','yellow')
wrap:(只能打包同一种标签)
$('span').wrap('
$('span').wrapAll('
$('span,p').wrapAll('
$('span').unwrap().unwrap()//拆包