jquer的动画、节点操作、元素大小操作

基本动画

显示

元素.show(); // 让元素从隐藏状态变为显示状态（从display:none;变为 display:block;）
可选参数1：时间，毫秒数 == 让元素在规定的时间内显示（操作的属性有很多）
可选参数2：速度方式，匀速或加速或减速 速度方式:linear swing

可选参数3：动画结束后执行的回调函数

元素.slideDown() // 让元素向下拉动显示 //可选参数和show一样

隐藏

元素.hide()； // 让元素从显示状态切换到隐藏状态
可选参数和show一样

元素.slideUp() // 让元素向上拉动隐藏 //可选参数和show一样

显示和隐藏可切换

元素.toggle(); // 让元素在隐藏和显示状态切换
可选参数和show一样

元素.slideToggle() // 让元素切换上下拉动显示隐藏 //可选参数和show一样

 

slideDown()
    $('div').slideDown(2000,'swing',function(){
         $('div').css('background-color','#0f0')
    })

 

元素透明度显示隐藏：

元素.fadeIn() // 让元素从透明度0变为1的显示
元素.fadeOut() // 让元素从透明度1变为0的隐藏
元素.slideToggle() // 让元素切换透明度显示隐藏
参数和show一样

让元素切换到指定的透明度：

元素.fadeTo(毫秒数,透明度,速度方式,结束的回调函数) // 让元素在指定的时间内切换到指定的透明度

$('div').fadeTo(2000,0.6,'linear',function(){
        alert('动画结束了');
    })

自定义动画

开启动画：

元素.animate({ //操作的是css
css属性名:属性值,
css属性名:属性值,
。。。
}[,毫秒数][,速度方式][,执行结束的回调函数]);

$('div').animate({
        left:500
    },2000,'linear',function(){
        $('div').animate({
            top:200
        },3000)
}）

jquery把所有的动画效果都做了一个处理，可以进行链式操作

 $('div').animate({
        left:500
    },3000).animate({
        top:200
    },1000).animate({
        left:0
    },3000)

停止动画：

元素.stop(); // 将动画停止在当前状态
元素.finish(); // 将动画停止在结束状态 - 将动画停止在最后一个动画的结束位置

 

stop有两个参数，值都是布尔值：

 

参数1表示是否执行后续的动画，true表示不执行，false表示执行，默认是false

 

参数2表示是否停止在当前位置，true表示停止的当前动画的结束位置，false表示停止在当前位置，默认为false

 

 元素节点操作

创建元素：

$("标签和内容") // 创建一个标签并给里面放内容

var box = $("<div class='box'>div盒子</box>");
console.log(box);

添加元素：

给父元素追加子元素：

父元素.append(子元素)

$('body').append($div)

给父元素最前面添加子元素：

父元素.prepend(子元素); //将子节点放到父节点的最前面:prepend

给节点后面添加一个兄弟节点：after

$i = $('<i>倾斜文字</i>')
$b.after($i)

给节点前面添加一个兄弟节点：before

$p = $('<p>段落</p>')
$b.before($p)

替换节点 - 某个元素.replaceWith(新元素) === 新元素.replaceAll(某个元素)

$s = $('<s>删除线</s>')
replaceWith
$('p').replaceWith($s)

replaceAll
$s.replaceAll($('p'))

删除节点

元素.empty();//删除元素内部所有标签和内容，让自己变成一个空标签

元素.remove() // 删除自己和自己内部所有内容

注意：jquery中的return false号称阻止一切，默认行为

复制元素:

元素.clone([是否复制自身的事件][,是否复制子元素的事件])

克隆节点:clone - 肯定会将里面的内容也克隆出来

参数1：表示是否复制父标签的事件，默认是false

参数2：表示是否复制子节点的事件，默认跟随第一个参数

$newDiv = $('div').clone(false,true) // 如果不复制父节点的事件，子节点的事件也不能被复制 ：注意

 

节点操作总结：

创建

$(完整的标签字符串)

插入

append - 给父追加一个子

prepend - 将子添加到父的最前面

after - 给元素后面添加一个兄弟节点

before - 给元素前面添加一个兄弟节点

替换

replaceWith - 使用新节点替换旧节点

replaceAll - 新节点替换掉所有指定的旧节点

删除

empty - 清空自己内部

remove - 将自己删除

复制

clone

 

元素尺寸

元素内容区域尺寸操作：

 

元素.height(); // 获取元素内容区域高度
元素.height(高度); // 设置元素内容区域高度
元素.width(); // 获取元素内容区域宽度
元素.width(宽度); // 设置元素内容区域宽度

获取元素内部区域尺寸：

元素.innerHeight(); // 获取元素内部的高度，包含padding，但不包含border
元素.innerWidth(); // 获取元素内部的宽度，包含padding，但不包含border

获取元素占据页面的尺寸：

元素.outHeight(); // 获取元素占据的高度，包含padding和border，不包含margin
元素.outHeight(true); // 获取元素占据的高度，包含padding和border，包含margin
元素.outWidth(); // 获取元素占据的宽度，包含padding和border，不包含margin
元素.outWidth(true); // 获取元素占据的宽度，包含padding和border，包含margin

 

元素位置

元素相对页面的位置操作：

元素.offset(); // 获取到元素在页面中的位置，包含left值和top值，返回一个对象
元素.offset({left:值,top:值}); // 将元素设定到指定的位置，使用relative 

元素相对父元素的值：

元素.position(); // 获取元素相对于定位的父元素的偏移值，不管设置的是什么，获取到的永远是left和top

获取元素滚动过的距离：

$(window).scrollTop(); // 获取元素滚动过的高度
$(window).scrollLeft(); // 获取元素滚动过的宽度
$(window).scrollTop(值); // 设置元素滚动过的高度
$(window).scrollLeft(值); // 设置元素滚动过的宽度