JQuery学习笔记（三）

一、添加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>
		
	
			
		
   
   

    
    你好
   
   
		append
		prepend
		after
		before
		remove
		empty
		addClass
		removeClass
		toggleClass
		显示文档和窗口