JQuery的一些简单操作01

　一、JQuery的隐藏和显示效果

　　1、hide/show/toggle

　　hide隐藏效果，hide(1000)括号里面跟毫秒，show显示效果同样后面括号可以有数值，toggle开关按钮，交替作用隐藏和显示的效果

　　2、fadeIn/fadeOut/fadeToggle/fadeTo

　　fadeIn和fadeOut作用的是淡入淡出的效果，其实是改变css中display的属性值，fadeToggle开关按钮，交替作用淡入淡出的效果，fadeTo设置的是透明度的效果，fadeTo(1000,0.5),第一个参数是作用时间，第二个值设置透明度，0为看不见

　　3、slideUp/slideDown/slideToggle

　　slideUp显示动画效果，slideDown隐藏动画效果，slideToggle，隐藏显示交替作用效果

 

　二、回调函数

　　以上的每个方法中，都可以在参数中添加一个方法比如说hide，如下

　　$("#btnClick").click(function(){

　　　　$("p").hide(1000,function(){

　　　　　　alert("执行完隐藏后触发的回调函数！")；

　　　　})

　　})

　三、获取元素的值

　　1、html/text

　　html()可以获取元素的子标签及所有内容，而text()只能获取元素里面的文本内容，如果在该方法的后面括号里面添加内容，就给改元素添加内容，html方法可以添加子标签

　　2、val/attr

　　val()获取文本框的值;attr("id"),获取标签的属性值，以上方法同时也可以修改属性值和文本框的value值，如下：

　　$("document").ready(function(){

　　　　$("btnClick").click(function(){

　　　　　　$("#p").text(function(i,o){

　　　　　　　　return "old:"+o+" new:I am new "

　　　　　　})

　　　　})

 

　　})

　四、元素插入内容

　　1、append/prepend

　　append向某元素后添加内容，prepend向某元素前面添加元素

　　2、before/after

　　before向某元素前面添加元素，并且添加换行；after向某元素后面添加元素，区别append的是添加换行

　　

　五、删除元素

　　empty/remove

　　empty()删除元素里面的所有子元素，该元素并没有删除；remove删除该元素及该元素里面的所有子元素

 

　六、css操作和盒子模型

　css样式操作如下：

　　1、单一css样式设置，$("#").css("width","100px");

　　2、多个css样式同时设置，$("#").css({width:"100px",height:"100px",color:"red"})

　　3、通过addClass来加载，$("#s").addClass("style1");

　width/height,innerWidth/innerHeight,outerWidth/outerHeight：

　　1、width/height，表示盒子的真实宽高，如下图：

　　

　　　2、innerWidth/innerHeight，指盒子的宽高加上padding的距离，如下图：

　　

　　　3、outerWidht/outerHeight,指盒子的宽高加上padding，border，margin的距离，所有的总和，如下图：