前端-part8-jQurey操作样式一：获取标签属性+修改标签属性

2022-06-01 10:49:29 浏览数 (2)

1.操作字体

代码语言：javascript复制
$(".c").css("color"); // 获取字体颜色的属性
$(".c").css("font-size"); // 获取字体大小的属性
$(".c").css("color","red"); // 操作字体使其变成红色 
$(".c").css({"color":"red","font-size":"24px"}); // 括号里面接收一个字典，同时修改颜色和字体

2.获取标签的位置

代码语言：javascript复制
$(".c").offset(); // 获取相对于浏览器的绝对位置
$(".c").position(); // 获取相对于父标签的相对位置

3.获取盒子模型的大小信息

代码语言：javascript复制
$(".c").height(); // content 高度
$(".c").innerHeight(); // content   padding 高度
$(".c").innerWidth(); // content   padding 宽度
$(".c").outerHeight(); // content   padding   border 高度
$(".c").outerWidth(); // content   padding   border 宽度

4.标签的操作

代码语言：javascript复制
$(".c").hhml(); // 获取标签以及内部的所有内容
$(".c").html("<div>heheda</div>"); // 设置标签，整体替换

5.获取输入框的属性值 input / select / textarea

代码语言：javascript复制
$(".c").val(); // 获取输入框的 value 值
$(".c").val(3); // 将输入框的值变换成 3

6.获取、操作、替换标签的属性值

代码语言：javascript复制
$(".c").attr("id"); // 获取 id 的属性值 
$(".c").attr("s14"); // 获取 s14 的属性值 
$(".c").attr("s14","哈哈"); // 将 s14 的属性值变换成 哈哈 
$(".c").removeAttr("s14"); // 将 s14 这个属性移除掉

7.通过获取 布尔值 来确认标签是否被占用

代码语言：javascript复制
$("c").prop("checked") // 通过获取到的 布尔值 确认我这个多选是不是被选了

8.一键返回顶部

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>位置相关示例之返回顶部</title>
  <style>
    .c1 {
      width: 100px;
      height: 200px;
      background-color: red;
    }

    .c2 {
      height: 50px;
      width: 50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c3 {
      height: 100px;
    }
  </style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
  $("#b1").on("click", function () {
    $(".c1").offset({left: 200, top:200});
  }); // 这是一个小例子，绑定事件的，别跟下面的合起来记
  

  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });


  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>
</body>
</html>

9.菜单栏练习

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        .left-layout {
            width: 150px;
            float: left;
        }

        .right-layout {
            width: 70%;
            float: left;
        }

        ul li {
            list-style: none;
            cursor: pointer;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        .first-menu-grp {
            background-color: #696868;
            font-size: 25px;
            line-height: 40px;
        }

        .sub-menu-grp {
            background-color: #838282;
            font-size: 22px;
            line-height: 35px;
            text-align: center;
        }

        .min-menu-grp {
            background-color: #a1a1a1;
            font-size: 19px;
            line-height: 31px;
            text-align: right;
            padding-right: 10px;
        }
        .first-menu-grp .sub-menu-grp, .first-menu-grp .min-menu-grp {
            display: none;
        }
        .menu-active {
            background-color: cyan;
        }
    </style>
</head>
<body>

<div class="body">
    <div class="left-layout">
        <ul id="main-menu">
            <li class="first-menu-grp">一级菜单-1
                <ul>
                    <li class="sub-menu-grp">二级菜单-1</li>
                    <li class="sub-menu-grp">二级菜单-2
                        <ul>
                            <li class="min-menu-grp">三级菜单-1</li>
                            <li class="min-menu-grp">三级菜单-2</li>
                            <li class="min-menu-grp">三级菜单-3</li>
                        </ul>
                    </li>
                    <li class="sub-menu-grp">二级菜单-3</li>
                    <li class="sub-menu-grp">二级菜单-4
                        <ul>
                            <li class="min-menu-grp">三级菜单-1</li>
                            <li class="min-menu-grp">三级菜单-2</li>
                            <li class="min-menu-grp">三级菜单-3</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="first-menu-grp">一级菜单-2
                <ul>
                    <li class="sub-menu-grp">二级菜单-1</li>
                    <li class="sub-menu-grp">二级菜单-2
                        <ul>
                            <li class="min-menu-grp">三级菜单-1</li>
                            <li class="min-menu-grp">三级菜单-2</li>
                            <li class="min-menu-grp">三级菜单-3</li>
                        </ul>
                    </li>
                    <li class="sub-menu-grp">二级菜单-3</li>
                    <li class="sub-menu-grp">二级菜单-4
                        <ul>
                            <li class="min-menu-grp">三级菜单-1</li>
                            <li class="min-menu-grp">三级菜单-2</li>
                            <li class="min-menu-grp">三级菜单-3</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
    <div class="right-layout">
        右侧
    </div>
</div>
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>

<script>
    // 阻止冒泡   样式
    $(".first-menu-grp li").each(function () {
        $(this).click(function (event) {
            $(".first-menu-grp li").each(function (){
                $(this).removeClass("menu-active")
            })
            $(this).addClass("menu-active")
            event.stopPropagation()
        })
    })

    // 一级菜单点击
    $(".first-menu-grp").each(function () {
        $(this).click(function () {
            $(this).find(".min-menu-grp").hide("fast")
            $(this).find(".sub-menu-grp").toggle("fast")
            $(this).siblings().find("li").hide("fast")
        })
    })
    // 二级菜单点击
    $(".sub-menu-grp").each(function () {
        $(this).click(function () {
            $(this).find(".min-menu-grp").toggle("fast")
            $(this).siblings().find(".min-menu-grp").hide("fast")
        })
    })
</script>
</body>
</html>
input select textarea

0 人点赞