前端开发系列067-JQuery篇之框架操作CSS

一、jQuery框架的CSS方法

jQuery框架提供了css方法，我们通过调用该方法传递对应的参数，可以方便的来批量设置标签的CSS样式。

使用JavaScript设置标签的样式相对来说比较麻烦，而如果需要批量的设置多个标签的样式那需要写很多代码，使用jQuery可以为我们简化该过程。

使用原生的方式来设置标签的样式

<body>

<div>我是div标签</div>

<button id="btnID">按钮</button>

<script>

    window.onload = function () {

        var oBtn = document.getElementById("btnID");

        oBtn.onclick = function () {

            var oDiv = document.getElementsByTagName("div")[0];

            oDiv.style.height = "50px";

            oDiv.style.width = "200px";

            oDiv.style.background = "red";

        }

    }

</script>

</body>

使用jQuery中的css方法来设置标签的样式

<body>

<div>我是div标签</div>

<button id="btnID">按钮</button>

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

<script>

    $(function () {

        $("#btnID").click(function () {

            $("div").css("height","50px").css("width","200px").css("background","red");

        })

    })

</script>

</body>

CSS方法的语法：

① $("selector").css(name,value);

② $("selector").css(name1,value).css(name2,value)...;

③ $("selector").css( { name1 : value , name2 : value})

代码示例

<script>

    $(function () {

        $("#btnID").click(function () {

            //01 CSS方法的第一种使用方式

            //$("div").css("height","50px");

            //$("div").css("width","200px");

            //$("div").css("background","red");

            //02 CSS方法的第二种使用方式:链式编程

            //$("div").css("height","50px").css("width","200px").css("background","red");

            //03 CSS方法的第三种使用方式:传递样式键值对的对象作为参数

            $("div").css({

                "height":"100px",

                "width":"200px",

                "background":"red"

            })

        })

    })

</script>

二、jQuery框架操作Class

jQuery框架中操作class的主要方法

>addClass : 为选中的所有标签批量的添加Class

>hasClass：检查选定的标签中是否存在指定的Class

>removeClass：把选定标签中指定的Class删除

>toggleClass： 切换Class

addClass：为选中的所有标签批量的添加Class，语法

① $("selector")addClass("class1");

② $("selector")addClass("class1 class2");

③ $("selector")addClass("class1").addClass("class2");

hasClass：检查选定的标签中是否存在指定的Class,只要选中的所有标签中有一个标签存在该Class，那么就把返回true,如果选中的所有标签中都没有找到该class ，那么就返回false。语法为：

$("selector")hasClass("class1");

removeClass：把所有选定标签中指定的Class删除，遍历jQuery实例对象中所有的标签，如果当前标签中存在该指定的class，那么就删除，如果不存在，则不作处理。语法

① $("selector")removeClass("class1");

② $("selector")removeClass("class1 class2");

③ $("selector")removeClass("class1").removeClass("class2");

toggleClass：切换所有选中标签的Class，如果当前标签中存在指定的Class，那么就删除，如果不存在，那么就添加。语法

① $("selector")toggleClass("class1");

② $("selector")toggleClass("class1 class2");

③ $("selector")toggleClass("class1").toggleClass("class2");

代码示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="JS/jquery-3.2.1.js"></script>

    <style>

        .class1{

            width: 400px;

            height: 50px;

            background: red;

        }

        .class2{

            width: 600px;

            background: green;

            border: 1px solid #000000;

        }

    </style>

</head>

<body>

<script>

    $(function () {

        //....

        //jQuery对Class的操作:

        //添加class addClass

        //删除class removeClass

        //检查class hasClass

        //切换class toggleClass

        //01 添加class

        $("button").eq(0).click(function () {

            //console.log("点击");

            //获取指定的标签,并且设置class

            //添加class:

            //(1) jQ对象.addClass("类")

            //(2) jQ对象.addClass("类1")..addClass("类2")

            //(3) jQ对象.addClass("类1 类2")

            //$("div").addClass("class1")

            //$("div").addClass("class1").addClass("class2")

            $("div").addClass("class1 class2")

        })

        //02 检查class

        $("button").eq(1).click(function () {

            //console.log("点击");

            //获取指定的标签,并且设置class

            //检查class:检查div标签中是否存在class1,如果存在那么就返回true,否则返回false

            console.log($("div").hasClass("class1"));

            console.log($("p").hasClass("demo1"));

        })

        //03 删除class

        $("button").eq(2).click(function () {

            //console.log("点击");

            //获取指定的标签,并且设置class

            //删除class:

            //(1) jQ对象.removeClass("类")

            //(2) jQ对象.removeClass("类1")..removeClass("类2")

            //(3) jQ对象.removeClass("类1 类2")

            //$("div").removeClass("class2")

            //$("div").removeClass("class1").removeClass("class2")

            $("div").removeClass("class1 class2")

        })

        //04 切换class

        $("button").eq(3).click(function () {

            //console.log("点击");

            //获取指定的标签,并且设置class

            //切换class:如果指定的class存在那么就删除,否则就添加

            //(1) jQ对象.toggleClass("类")

            //(2) jQ对象.toggleClass("类1 类2")

            //$("div").toggleClass("class2")

            $("div").toggleClass("class1 class2")

        })

    })

</script>

<div>我是div</div>

<p class="demo1"></p>

<p class="demo2"></p>

<button>添加</button>

<button>检查</button>

<button>删除</button>

<button>切换</button>

</body>

</html>

三、jQuery框架操作位置的方法介绍

① width和height方法

$("selector").width()和$("selector").height()方法的作用：获取|设置宽度和高度。

如果不传递参数则表示获取指定标签的宽度|高度，如果传递参数则表示要设置标签的宽度|高度。`

② offset和position方法

offset表示获取当前标签距离浏览器窗口的位置，而position获取当前标签距离父标签的位置

代码示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="JS/jquery-3.2.1.js"></script>

    <style>

       .class1{

           width: 200px;

           height: 200px;

           background: rebeccapurple;

           position: relative;

       }

        .class2{

            width: 50px;

            height: 50px;

            background: #2aa198;

            left: 10px;

            top:20px;

            position: absolute;

        }

    </style>

</head>

<body>

<script>

    $(function () {

        //....

        //01 width和height:

        //console.log($(".class2").get(0));

        //获取宽度和高度:不传递参数

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

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

        //设置宽度和高度:传递参数

        $(".class2").width(100);

        $(".class2").height(100);

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

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

        //02 位置:获取当前标签距离窗口的位置 offset

        console.log($(".class2").offset().left);

        console.log($(".class2").offset().top);

        //03 位置:获取当前标签距离父标签的位置 position

        console.log($(".class2").position().left);

        console.log($(".class2").position().top);

    })

</script>

<div class="class1">

    <div class="class2"></div>

</div>

</body>

</html>