一、操作样式类

// 1.给标签添加样式类

$("选择器").addClass("类名")

// 2.移除标签的样式类

$("选择器").removeClass("类名")

// 3.判断标签是否含有某个样式类

$("选择器").hasClass("类名")

// 4.如果标签包含某个样式类，就移除，否则，就添加

$("选择器").toggleClass("类名")
<!DOCTYPE html>

<html>

<head>

    <title>操作样式类</title>

    <style type="text/css">

        .div1{

            width: 100px;

            height: 100px;

        }

        .bacc{

            background-color: red;

        }

        .border{

            border: 1px solid black;

        }

        .black1{

            background-color: black;

        }

    </style>

</head>

<body>

    <div class="div1">

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        // 1. 添加一个样式类

        $(".div1").addClass("bacc border");

        // 2. 删除一个样式类

        $(".div1").removeClass("border");  // 移除一个类

        // 3. 判断是否包含某个样式类

        console.log($(".div1").hasClass("border"));  // false

        console.log($(".div1").hasClass("bacc")); // true

        // 4. 切换CSS类，如果有就移除，没有就添加

        $(".div1").on("click",function() {

            // body...

            $(this).toggleClass("black1");

        })

    </script>

</body>

</html>

操作样式类demo

二、操作CSS属性

// 1.获取标签CSS属性的值

$(".div1").css("backgroundColor")l

// 2.给标签CSS属性赋值

$(".div1").css("backgroundColor","red");

// 3.使用自定义对象 给标签CSS属性赋值

$(".div1").css({"backgroundColor":"green","border":"1px solid red"});

操作CSS属性代码：

<!DOCTYPE html>

<html>

<head>

    <title>操作CSS样式</title>

    <style type="text/css">

        .div1{

            background-color: black;

            width: 200px;

            height: 200px;

        }

    </style>

</head>

<body>

    <div class="div1">

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        // 1.获取标签的属性值

        console.log($(".div1").css("width"));

        // 2.给标签的属性赋值

        $(".div1").css("backgroundColor","red");// 将背景颜色改为红色

        // 3.通过自定义对象同时赋多个值

        $(".div1").css({"backgroundColor":"green","border":"1px solid red"});

    </script>

</body>

</html>

操作CSS属性demo

三、标签定位相关操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置

position()// 获取匹配元素相对父元素的偏移

　　()// 获取匹配元素相对滚动条顶部的偏移

scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

示例：

<!DOCTYPE html>

<html>

<head>

    <title>操作元素的位置</title>

    <style type="text/css">

        body{

            margin: 0;

        }

        .div1{

            background-color: red;

            width: 100px;

            height: 100px;

            position: relative;

            top: 100px;

            left: 100px;

        }

    </style>

</head>

<body>

    <div class="div1">

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        // 1.获取匹配元素    在当前窗口的   相对偏移或设置元素位置

        console.log($("div.div1").offset()); // 相对于当前的窗口，元素的偏移量

        // 2.获取匹配元素相对父元素的偏移

        console.log($("div.div1").position());// 他的父元素就是body

        // 3.获取匹配元素相对滚动条顶部的偏移

        console.log($("div.div1").scrollTop());

        // 4.获取匹配元素相对滚动条左侧的偏移

        console.log($("div.div1").scrollLeft());

    </script>

</body>

</html>

获取标签元素的position

返回顶部代码：

<!DOCTYPE html>

<html>

<head>

    <title>返回顶部</title>

    <style type="text/css">

        .div1{

            margin: 0 auto;

            width: 1000px;

            height: 300px;

        }

        .backtop{

            width: 80px;

            height: 80px;

            text-align: center;

            line-height: 50px;

            font-size: 10px;

            position: fixed;

            bottom: 10px;

            right: 10px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <button class="backtop hide">返回顶部</button>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(window).scroll(function () {

            // body...

            if ($(window).scrollTop()>100){

                $(".backtop").removeClass("hide");

            }else{

                $(".backtop").addClass("hide");

            }

        })

        $(".backtop").on("click",function () {

            // body...

            $(window).scrollTop(0);

        })

    </script>

</body>

</html>

返回顶部示例

四、标签尺寸相关操作

height()  // 获取内容的宽度

width()   // 获取内同的高度

innerHeight()

innerWidth()

outerHeight()  // 内容+ 两边的边框

outerWidth()
<!DOCTYPE html>

<html>

<head>

    <title>操作尺寸</title>

    <style type="text/css">

        .div1{

            width: 100px;

            height: 100px;

            border: 1px solid red;

        }

    </style>

</head>

<body>

        <div class="div1">

        </div>

        <script src="jquery-3.3.1.js"></script>

        <script type="text/javascript">

            console.log($(".div1").height());

            console.log($(".div1").width());

            console.log($(".div1").innerHeight());

            console.log($(".div1").innerWidth());

            console.log($(".div1").outerHeight());  // 内容高度 + 两边边框

            console.log($(".div1").outerWidth());  // 内容宽度  + 两边的边框

        </script>

</body>

</html>

标签尺寸相关操作

jQuery-对标签的样式操作的更多相关文章

  1. jquery系列教程2-style样式操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  2. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  3. jQuery基础-选择器，样式操作

    入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置 ...

  4. jQuery入门教程-CSS样式操作大全

    1.获取样式 2.设置样式 3.追加样式 4.移除样式 5.重复切换anotherClass样式 6.判断是否含有某项样式 7.设置 CSS 属性 参数 描述 name 必需.规定 CSS 属性的名称 ...

  5. jquery系列教程4-事件操作全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  6. JQuery第三天——CSS操作与JQuery事件

    JQuery的CSS_DOM与样式操作 样式: 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成 ...

  7. jQuery对标签、类样式、值、文档、DOM对象的操作

    jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...

  8. jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  9. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

随机推荐

  1. 【线段树合并】【P2824】 [HEOI2016/TJOI2016]排序

    Description 给定一个长度为 \(n\) 的排列,有 \(m\) 次操作,每次选取一段局部进行升序或降序排序,问你一波操作后某个位置上的数字是几 Hint \(1~\leq~n,~m~\le ...

  2. js正则取出一个字符串小括号中的内容

    var aa="ldfjsldfj(dsfasjfj3124123)"; var result = aa.match(/\(([^)]*)\)/); // 此时result＝[&q ...

  3. C#线程篇---Windows调度线程准则（3）

    Windows本身就是一个抢占式操作系统,它的实现,必定有某种算法在里面,比如什么时候调度哪些线程,需要花费多长时间等问题. 我们时时在用Windows,作为程序员,我们有必要知道其中最贴近我们的算法 ...

  4. pg中删除的页是否仍被访问

    昨天看到微信群中,有人提问:pg对于标记为删除的页,是否会扫描到? 今天做了一下测试,发现如果删除的是表的最后连续的几个页(根据ctid来确定数据插入先后,只讨论有insert的情况)中的数据,最后几 ...

  5. Chapter 8(查找)

    1.二分查找和插值查找 //************************Search.h*********************************** #ifndef SEARCH_H # ...

  6. Eloquent 条件查询——tucker-eric/eloquentfilter 笔记

    请阅读 https://github.com/Tucker-Eric/EloquentFilter , 里面有很全的文档和注释,以下仅列出关键部分. 1. 安装 composer require tu ...

  7. Xpath语法与lxml库的用法

    BeautifulSoup 已经是非常强大的库了,不过还有一些比较流行的解析库,例如 lxml,使用的是 Xpath 语法,同样是效率比较高的解析方法. 1.安装 pip install lxml 2 ...

  8. Centos6.6系统root用户密码恢复案例

    1.重新启动主机后,在出现Grub菜单时按上下键取消倒计时 2.进入到内核引导界面按e键如下所示: 3.将鼠标定位到Kernel这一行按e键 4.在行尾输入”single”也可以换成字母”s”或者数字 ...

  9. 项目经验总结-first

    1. org.apache.commons.lang中StringUtils判空使用经验之谈 StringUtils.isEmpty(String str) 判断字符串str是否为空串且是否长度为0, ...

  10. MongoDB 数据迁移和同步

    MongoDB 数据迁移和同步 MongoDB的数据同步 复制 mongodb的复制至少需要两个实例.其中一个是主节点master,负责处理客户端请求,其余的都是slave,负责从master上复制数 ...