jQuery css()html（）等方法

最新推荐文章于 2021-07-02 01:55:49 发布

Alex十年

最新推荐文章于 2021-07-02 01:55:49 发布

阅读量240

点赞数

分类专栏： jQuery知识总结

本文链接：https://blog.csdn.net/ilikejj0/article/details/78929372

版权

jQuery知识总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、css操作
1、对于使用css（）方法设置样式时，可以直接写background-color，而不必更改为backgroundColor。也可以写成backgroundColor这个样子，不会出现错误。设置多个样式时，使用json对象，名称和值都要用引号括起来，之间用：，对于不同的样式之间用逗号隔开。
使用css()来获取样式时，只会返回第一个元素对应的值
隐式迭代：1.设置操作时，如果是多个元素，那么给所有的元素设置相同的值。2.获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。
2、注意参数不要带点，
添加样式，使用addClass()方法，
移除样式使用removeClass()方法，
判断是否有样式类，返回值为true或者falsehasClass() $('div').hasClass('one')
切换样式类使用toggleClass()方法
案例：选项卡案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
        <style>
            #div2 div{width: 200px;height: 200px;border: 1px solid #BC8F8F;background-color: #BC8F8F;display: none;}
            #div1 .active{background-color: yellow;}                
        </style>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
        <script>
            $(function(){
                $('#div1>input').click(function(){
                    var idx = $(this).index(); 
                    $(this).addClass('active').siblings().removeClass('active');
                    $('#div2>div').eq(idx).show().siblings().hide();
                });
            });
        </script>
    </head>
    <body>
        <div id='div1'>
            <input type="button" class="active" value="新闻"/>
            <input type="button" value="娱乐"/>
            <input type="button" value="体育"/>
            <input type="button" value="电影"/>
        </div>
        <div id='div2'>
            <div style="display: block;">1111</div>
            <div>2222</div>
            <div>3333</div>
            <div>4444</div>
        </div>
    </body>
</html>

二、尺寸
返回的是一个值，所以在比较时，被比较的数值不必加px。
width();height();获取盒子本身的宽高
innerWidth();innerHeight();获取加入padding 以后的宽高
outerWidth();outerHeight()；获取加入边框以后的宽高，包括其中加入的padding的宽高

h1 = $(window).height();//获得窗口可视区域的高
h2 = $(document).height();//获得文档的总高度
获取滚动的高度`scrollTop()`，不包括当前页面的高度
获取滚动的宽度`scrollLeft()`
<body>
    <img src="images/1.jpg">
    <img src="images/1.jpg">
    <img src="images/1.jpg">
<script>
    $(window).scroll(function () {
        h = $(window).scrollTop();
        //透过title显示高度
        document.title = h;
    });
</script>
</body>

三、位置
position （）；如果上面父元素有定位的话，获得的坐标值是相对于他的父元素的
offset（）；无论有没有父元素，获得的坐标值都是相对于body的。
实现动态显示代码如下
四、html()相当于innerHTMLtext().相当于innerText,区别就是如果括号内写的有标签，前者会识别标签并处理，后者不会。

Alex十年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery css()html（）等方法

一、css操作 1、对于使用css（）方法设置样式时，可以直接写background-color，而不必更改为backgroundColor。也可以写成backgroundColor这个样子，不会出现错误。设置多个样式时，使用json对象，名称和值都要用引号括起来，之间用：，对于不同的样式之间用逗号隔开。使用css()来获取样式时，只会返回第一个元素对应的值隐式迭代：1.设置操作时，如果...
复制链接

扫一扫