十三、jQuery的CSS、DOM、事件、动画

2016-05-14 本文已影响38人 XZ阳光小熊

一、CSS

css（‘color’）获取样式值
css('font-size','3em') 设置样式值
.css({
'text-align': 'center',
'line-height': '200px'
}) 设置样式值
offset() 获取相对于窗口的top和left值
position() 获取相对于父级的top和left值
scrollTop() 获取滚动的值
scrollTop(300) 设置滚动的值
scrollLeft() 获取滚动的值
scrollLeft(500) 设置滚动的值
width() 获取宽度
height() 获取高度

    // 获取样式值，获取的是rgb颜色值
    $('#div1').css('color')
    // 设置样式值
    $('#div1').css('font-size','3em')
    // 设置多个样式值
    $('#div1').css({
        'text-align': 'center',
        'line-height': '200px'
    })

    // 获取相对于窗口的top和left值
    $('#div1').offset()
    var x = $('#div1').offset().left
    var y = $('#div1').offset().top

    // 获取相对于父级的top和left值
    $('#div1').position()
    var t = $('#div1').position().left
    var l = $('#div1').position().top

    // 获取滚动的值
    $('.wrap').scroll(function(){

        $('.wrap').scrollTop()
        $('.wrap').scrollLeft()

    })

    // 设置滚动的值
    $('.wrap').scrollTop(300)
    $('.wrap').scrollLeft(500)

    // 获取宽高
    $('.wrap').width()
    $('.wrap').height()

html代码

二、DOM

append(elem) 将标签插入到指定标签内
appendTo(elem) 将标签插入到指定标签内
注意：这两种方法在方向上的区别

    // 把标签插入指定标签内
    $('.wrap').append('<a href="">我是一个链接</a>')
    // 把标签插入指定标签内
    $('<p>我是一段文字</p>').appendTo('.wrap')

prepend() 把标签插入到指定标签的子标签的最前面
prependTo() 把标签插入到指定标签的子标签的最前面
注意：这两种方法在方向上的区别

    // 把标签插入到指定标签的子标签的最前面
    $('.wrap').prepend('<p>生死契阔，与子成说；执子之手，与子偕老</p>')
    // 把标签插入到指定标签的子标签的最前面
    $('<p>山无棱，天地合，乃敢与君绝</p>').prependTo('.wrap')

a.after(b) 把a插入到b的前面
a.before(b) 把a插入到b的后面
a.insertAfter(b)把b插入到a的前面
a.insertBefore(b)把b插入到a的后面
注意：这几种方法在方向上的区别

    // a.after(b) 把a插入到b的前面
    $('#txt').after($('h1'))
    // a.before(b) 把a插入到b的后面
    $('#txt').before($('h1'))
    // a.insertAfter(b)把b插入到a的前面
    $('h1').insertAfter($('#txt'))
    // a.insertBefore(b)把b插入到a的后面
    $('h1').insertBefore($('#txt'))

a.replaceWith(b) 用b替换a元素

    // a.replaceWith(b) 用b替换a元素
    $('em').replaceWith($('b'))

三、事件

1、加载完毕,类似于js中的window.onload = function () {},效果如下。
onload是所有的标签flash等媒体文件加载完成之后执行；下面两种方法是只要页面结构加载完成就执行。

$(document).ready(function() {
});
$(function (){
});

// window.onload = function () {
//     alert('欢迎使用jq')
// }
// $(document).ready(function(){
//     alert('欢迎使用jq')
// });
$(function(){
    alert('欢迎使用jq')
})

屏幕快照 2016-05-05 下午2.13.18.png

html代码

        <style media="screen">
            .box {
                width: 200px;
                height: 200px;
                background-color: #55d123;
            }
        </style>
    </head>
    <body>
        <div class="box">1</div>
    </body>

2、绑定点击事件：$('#div1').on('click',function(){
});
3、删除事件：$('#div1').off();

// 鼠标点击选装30度
$('.box').on('click',function () {
    $('.box').css({
        transform: 'skewX(-30deg)',
    })
})

// 移除点击事件
$('.box').off('click')

旋转效果

4、鼠标掠过事件：$('#div1').hover(function (){
},function (){
});

// 鼠标划入旋转360度，鼠标移出转回0度
$('.box').hover(function () {
    $('.box').css({
        'transform':'rotateZ(360deg)',
        'transition-duration':'2s'
    })
},function () {
    $('.box').css('transform','rotateZ(0deg)')
})

5、绑定单击事件：$('#div1').click(function(){
});
6、绑定鼠标移动事件：$('#div1').mousemove(function(){
};

//点击改变背景和字体颜色
$('.box').click(function () {
    $('.box').css({
        'background-color': 'rgb(245, 32, 81)',
        'color': '#fff'
    })
})

// 鼠标移动字体放大
$('.box').mousemove(function(){
    $('.box').css('font-size','5em')
})

鼠标移动并点点击后的效果

四、效果

show() 显示；
hide() 隐藏；

// 隐藏
$('.box').hide()

// 点击显示
$(document).click(function () {
    $('.box').show()
})

toggle() 显示或隐藏；

// 点击显示，再次点击隐藏
$(document).click(function () {
    $('.box').toggle()
})

slideDown() 向下展开；
slideUp() 向上收起；

// 鼠标划入收起
$('.box').hover(function () {
    $('.box').slideUp()
})

// 点击展开
$(document).click(function () {
    $('.box').slideDown()
})

slideToggle() 展开或收起；

// 点击收起，再次点击展开
$(document).click(function () {
    $('.box').slideToggle()
})

fadeIn() 淡入；
fadeOut() 淡出；

// 点击淡入
$(document).click(function () {
    $('.box').fadeIn()
})

// 鼠标划入淡出
$('.box').hover(function () {
    $('.box').fadeOut()
})

fadeTo(speed,opacity,callback) 把被选元素逐渐改变至给定的不透明度；

// fadeTo()把被选元素逐渐改变至给定的不透明度
$(document).click(function () {
    // speed表示过渡时间单位为毫秒，可以选值有"slow","normal","fast"，此处也可自定义一个时间如：2000
    // opacity必选规定淡入或淡出时的透明度
    // callback可选。fadeTo 函数执行完之后，要执行的函数。
    $('.box').fadeTo(2000，0.2)
})

// 鼠标划入淡出
$('.box').hover(function () {
    $('.box').fadeOut()

})

*注意此函数的三个参数的用法：

1、speed表示过渡时间单位为毫秒，可以选值有"slow","normal","fast"，此处也可自定义一个时间如：2000。
2、opacity必选规定淡入或淡出时的透明度。
3、callback可选。fadeTo 函数执行完之后，要执行的函数。

fadeToggle() 淡入或淡出；

// 点击鼠标淡出，再次点击淡入
$(document).click(function () {
    $('.box').fadeToggle()
})

animate({
left: '50px',
top: '50px'
})任意属性做动画

    $(document).click(function () {
        $('.box').animate({
            left: '-300px',
            top: '500px',
        },2000)
    })

参考网站

http://jquery.cuishifeng.cn/

以上内容纯属个人理解，由于水平有限，若有错漏之处敬请指出斧正，小弟不胜感激。