一、添加HTML内容
append()==》被选元素内容后面添加
prepend()==》被选元素内容前面添加
after()==》被选元素后添加
before()==》被选元素前面添加
二、删除元素
remove()==>删除被选元素及其子元素
empty()==>删除子元素
三、类切换
addClass()==>被选元素添加一个或多个类
removeClass()==>被选元素删除一个或多个类
toggleClass()==>对被选元素进行添加/删除一个或多个类的切换操作
四、尺寸
width()==>返回元素的宽度(不包括内边距、边框或外边距)。
height()==> 返回元素的高度(不包括内边距、边框或外边距)。
innerWidth()==> 返回元素的宽度(包括内边距)。
innerHeight()==>返回元素的高度(包括内边距)。
outerWidth()==>返回元素的宽度(包括内边距和边框)。
outerHeight()==>返回元素的高度(包括内边距和边框)。
outerWidth(true)==> 返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true)==> 返回元素的高度(包括内边距、边框和外边距)。
代码:
<script src="../js/jquery-1.9.0.js"></script>
<script type="text/javascript">
$(function(){
$('.but1').click(function(){
$('.panel').append('hello meinv');
});
$('.but2').click(function(){
$('.panel').prepend('hello shuaige');
});
$('.but3').click(function(){
$('.panel').before('在 前面');
});
$('.but4').click(function(){
$('.panel').after('在 后面');
});
$('.but5').click(function(){
//清空被选元素及子元素
$('.panel').remove();
});
$('.but6').click(function(){
//清空子元素
$('.panel').empty();
});
$('.but7').click(function(){
//添加多个类
$('.panel').addClass('blue important');
});
$('.but8').click(function(){
//删除多个类
$('.panel').removeClass("blue important");
});
$('.but9').click(function(){
//添加/删除多个类
$('.panel').toggleClass('blue important');
});
$('.but10').click(function(){
var txt="";
txt+='文档width='+$(document).width()+' height=' +$(document).height();
txt+='浏览器width='+$(window).width()+' height=' +$(window).height();
alert(txt);
});
});
</script>
你好