jQuery中的视图样式和动画效果

最新推荐文章于 2020-12-11 15:44:54 发布

心。晴

最新推荐文章于 2020-12-11 15:44:54 发布

阅读量185

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/jingjing217/article/details/108028095

版权

视图样式

height() / width()： 获取匹配元素的当前计算高 / 宽度值。

.css(‘height’) 和 .height()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的高度需要数学计算的时候推荐使用.height()方法。

innerHeight() / innerwidth()： 获取匹配元素的当前计算的内部高 / 宽度值，包括padding，但不包括 border。
outerHeight() / outerWidth() ： 获取匹配元素的当前计算高 / 宽度值，包括padding，border和选择性的margin。
offset() ： 获取匹配元素当前相对于文档的坐标，返回一个包含top和left属性的对象。
position() ： 获取得元素相对于父元素的偏移位置，返回一个包含top和left属性的对象。
scrollLeft() / scrollTop() ： 获取匹配元素的当前水平 / 垂直滚动条的位置。
offsetParent() ： 获取离指定元素最近的含有定位信息的祖先元素。（含有定位信息的元素指的是，CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视图</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 20px;
            border: 10px solid red;
        }
    </style>
    <script>
        $(function(){
            var width =  $('div').width()
            var height =  $('div').height()
            var innerHeight =  $('div').innerHeight()
            var outerHeight =  $('div').outerHeight()
            console.log(height,'height')	 // 200 "height"
            console.log(innerHeight,'innerHeight')	// 240 "innerHeight"
            console.log(outerHeight,'outerHeight')	// 260 "outerHeight"
            console.log($( window ).height())	// 722
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

基本动画效果

hide() ： 隐藏
show()： 显示
toggle()： 隐藏与显示
fadeIn()： 淡入
fadeOut()： 淡出
fadeToggle()： 淡入淡出
slideUp()： 滑上
slideDown()： 滑下
slideToggle()： 滑上滑下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
    <script>
        $(function(){
            $('button:contains("显示")').click(function(){
                $('div').show()
            })
            $('button:contains("隐藏")').click(function(){
                $('div').hide()
            })
            $('button:contains("切换")').click(function(){
                $('div').toggle()
            })
        })
    </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
</body>
</html>