jquery 样式操作

最新推荐文章于 2022-12-29 11:24:18 发布
最新推荐文章于 2022-12-29 11:24:18 发布
阅读量104 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18932003/article/details/119703387
版权 
t195
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //样式操作，设置一个属性
            //$().css("属性","取值");
           $("#btn1").click(function () {
               $("li:nth-child(odd)").css("color","blue")
                   .css("font-weight","bold");
           });
        });

        /*
        在jQuery中，设置一个元素的css属性值，有两种方式
        一种是设置一个属性，另一种是设置多个属性
        语法
        $().css("属性","取值");

        $().css({"属性1":"取值1","属性2":"取值2",......});
         */
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input type="button" id="btn1" value="设置">
</body>
</html>

t196
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //样式操作，设置多个属性
            //$().css({"属性1":"取值1","属性2":"取值2",......});
            $("#btn1").click(function () {
                //属性名方式一，使用css属性名，引号中为css属性名书写
                $("li:nth-child(even)").css({
                    "color":"blue",
                     "background-color":"silver",
                    "font-weight":"bold"
                });
                //属性名方式二，使用JavaScript属性名，没有引号，去除连接短横杠，单词首字母大写
                $("li:nth-child(odd)").css({
                    color:"white",
                    backgroundColor:"gray",
                    fontWeight:"bold"
                });
            });
        });

        /*
        在jQuery中，设置一个元素的css属性值，有两种方式
        一种是设置一个属性，另一种是设置多个属性
        语法
        $().css("属性","取值");

        $().css({"属性1":"取值1","属性2":"取值2",......});
         */
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input type="button" id="btn1" value="设置">
</body>
</html>

t197 样式操作，添加class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .select{
            color: blue;
            background-color: #F1F1F1;
            font-weight: bold;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //样式操作，添加class
            //$().addClass("类名");
           $("#btn1").click(function () {
               $("li:nth-child(odd)").addClass("select");
           });
        });
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input type="button" id="btn1" value="添加">
</body>
</html>

t198 删除class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .select{
            color: blue;
            background-color: silver;
            font-weight: bold;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //样式操作，删除class
            //$().removeClass("类名");
            $("#btn1").click(function () {
                $("li:nth-child(even)").addClass("select");
            });

            $("#btn2").click(function () {
                $("li:nth-child(even)").removeClass("select");
            });
        });
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input type="button" id="btn1" value="添加">
    <input type="button" id="btn2" value="删除">
</body>
</html>

t199 切换class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .select{
            color: blue;
            background-color: #F1F1F1;
            font-weight: bold;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //样式操作，切换class
            //$().toggleClass("类名");
            $("#btn1").click(function () {
                $("li:nth-child(odd)").toggleClass("select");
            });
        });
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input type="button" id="btn1" value="切换">
</body>
</html>

t200 元素的宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1,#box2{
            display: inline-block;
            width: 100px;
            height: 60px;
            border: 1px solid gray;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //样式操作
            //元素的宽度和高度
           $("#btn_get").click(function () {
               var width1 = $("#box1").width();
               alert("width=" + width1);
           });

           $("#btn_set").click(function () {
               $("#box2").width(200); //不需要加单位，error 200px
           });
        });

        /*
        在jQuery中，获取和设置一个元素的宽度和高度，可以使用css（）方法
        实现。但是jQuery提供了更为灵活和强大的方法，方法有3组，
        分别是
        .width()和.height()
        .innerWidth()和.innerHeight()
        .outerWidth()和.outerHeight()

        .width()，表示width；
        .innerWidth()，表示width + padding;
        .outerWidth()，表示width + padding + border;

        .height()，表示height;
        .innerHeight(),表示height + padding;
        .outerHeight()，表示height + padding + border;

        上述3组方法是根据css盒模型来划分的，但是一般情况下，常用的
        只有width()和height()。
         */
</script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <br>
    获取第1个div的宽度：<input type="button" id="btn_get" value="获取">
    <br>
    设置第2个div的宽度：<input type="button" id="btn_set" value="设置">
</body>
</html>

t201
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            text-align: center;
        }
        #box1,#box2{
            display: inline-block;
            height: 100px;
            width: 100px;
        }
        #box1{
            background-color: red;
        }
        #box2{
            background-color: orange;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //样式操作
            //元素的位置，offset()方法
           var top = $("#box2").offset().top;
           var left = $("#box2").offset().left;
           var result = "box2距离顶部：" + top + "px\n"
            + "box2距离左部：" + left + "px";
           console.log(result);
        });

        /*
        在jQuery中，获取元素位置有两种方式，
        一种是offset（），
        另一种是position（）。

        offset()方法返回的是一个坐标对象，该对象有两个属性，
        这两个属性返回的都是一个不带单位的数字。

         */
</script>
</head>
<body>
    <div id="box1"></div><br>
    <div id="box2"></div><br>
</body>
</html>

t202
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #father{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        #son{
            position: absolute;
            top: 20px;
            left: 50px;
            width: 50px;
            height: 50px;
            background-color: red;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //样式操作
            //position（）方法
           var top = $("#son").position().top;
           var left = $("#son").position().left;
           var result = "子元素相对父元素顶部的距离是：" + top + "px\n"
            + "子元素相对父元素左部的距离是：" + left + "px";
           alert(result);
        });

        /*
        在jQuery中，我们可以使用position（）方法获取或设置当前
        元素相对于最近被定位的祖先元素的偏移位置。

        position（）方法返回一个坐标对象，该对象有两个属性，
        这两个属性返回不带单位的数字。
        top属性，标识获取元素相对于最近被定位的祖先元素顶部的距离。
        left属性，标识获取元素相对于最近被定位的祖先元素左部的距离。
         */
</script>
</head>
<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>
</html>

t203滚动条的距离
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            height: 1800px;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //样式操作
            //滚动条的距离，scrollTop()
           $(window).scroll(function () {
               var top = $(this).scrollTop();
               var $div = $("<div></div>");
               var str = "";
               if((top % 10) == 0)
               {
                   str = "滚动距离：" + top + "px <br>";
               }
               $div.html(str);
               $("body").append($div);
           });
        });

        /*
        在jQuery中，可以通过scrollTop（）方法获取或设置元素
        相对于滚动条顶边的距离，也可以使用scrollLeft（）方法
        来获取或设置相对于滚动条左边的距离。
        获取的是一个整数n，不带单位，表示n像素
        实际开发中，一般极少用到scrollLeft方法，了解即可。

         */
</script>
</head>
<body>

</body>
</html>

t204
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //内容操作
            //.html() 获取内容
           $("#btn1").click(function () {
               var result = $("div").html();
               alert(result);
           });
        });
        /*
        在jQuery中，对内容操作有以下3种方法
        .html()
        .text()
        .val()
        其中，html（）和text（）这两个方法用于操作一般元素，
        而val方法用于操作表单元素。

        $().html() ，表示获取html内容
        $().html("html内容") ，表示设置html内容

        html()方法和innerHTML方法的效果是一样的，
        html()是jQuery的实现方式，
        innerHTML是JavaScript的实现方式

         */
</script>
</head>
<body>
    <div>虾米大王<strong>教程</strong></div>
    <input type="button" id="btn1" value="获取">
</body>
</html>

qq_18932003
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery样式操作
03-29
jquery样式操作jquery样式操作jquery样式操作
Input标签的样式设置
qq_44709970的博客
09-23 2517
在input插入iconfont,在input中使用精灵图,input复选框设置边框颜色
DOM
Major_S的博客
11-27 196
ActiveMQ入门
jQuery 样式操作 与 效果
凉茶铺的博客
12-29 2787
介绍了JQuery如何操作css和动画效果的操作
JQuery系列之样式操作
老__L的博客
08-30 361
访问匹配元素的样式属性。jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如在Chrome/Safari浏览器中我们将设置为，Firefox会使用，IE10将使用。为每个匹配的元素添加指定的类名。从所有匹配的元素中删除全部或者指定的类。如果存在（不存在）就删除（添加）一个类。...
jQuery 样式操作
qq_41421033的博客
11-25 415
jQuery 样式操作 ​ jQuery中常用的样式操作有两种：css() 和 设置类样式方法 方法1: 操作 css 方法 ​ jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。 ​ 常用以下三种形式 : // 1.参数只写属性名，则是返回属性值 var strColor = $(this).css('color'); // 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 $(this).css(''color
Web前端开发技术-Jquery样式操作.pptx
07-07
Jquery样式操作; 修改样式;jQuery样式操作;jQuery样式操作;jQuery样式操作; 类操作;jQuery样式操作;jQuery样式操作;jQuery样式操作;jQuery样式操作; Tab栏切换;jQuery样式操作;jQuery样式操作;jQuery样式操作;jQuery...
jQuery第2天知识点：jQuery 样式操作、jQuery 属性操作.zip
07-18
jQuery第2天知识点：jQuery 样式操作、jQuery 属性操作.zip
jQuery操作css样式
10-19
本篇文章主要介绍了jQuery操作css样式的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧
jQuery操作属性和样式详解
10-22
下面小编就为大家带来一篇jQuery操作属性和样式详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery操作样式及属性样式
qq_40890544的博客
10-19 4484
jQuery操作样式（css操作、class操作） jQuery属性样式（attr属性、prop属性）
【jQuery】jQuery的属性和样式
空空
10-24 359
.attr 1.attr(传入属性名) 获取属性的值 2.attr(属性名, 属性值) 设置属性的值 3.attr(属性名,函数值) 设置属性的函数值 4.attr(attributes) 给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … } .removeAttr() .removeAttr( attributeName ) : 为匹配的元...
jQuery操作样式的方式
Richard_666的博客
05-03 300
jQuery案例之tab栏切换
宅羽的博客
12-09 724
◆ 示例内容： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
jquery操作样式方法（三种方法）
qq_49438920的博客
03-13 508
jquery操作样式方法（三种方法） 方法1: <script> $(function(){ $("div").css("width","100px"); $("div").css("height","100px"); $("div").css("background","red"); </script> 方法2: <script> $("div").css("width","1
jQuery样式操作
qq_46112274的博客
01-07 343
1、操作css方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
jQuery操作样式
一个水瓶座程序猿的博客
07-15 186
jQuery操作样式
jquery样式 漂亮 案例
最新发布
01-12
<title>jQuery样式漂亮案例 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> .btn { padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s; } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值