jQuery 属性与样式

jQuery属性操作

1. 属性

attr(attrName [,attrValue]) 操作所有属性（自定义和内置的,中括号为可选内容）
prop(attrName [,attrValue]) 操作HTML元素内置属性
removeAttr(attrName) 删除属性
removeProp(attrName) 并不能删除HTML元素上的属性

demo

  <img style="width: 200px" src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg"
       alt="MyImg" title="hello" loadimg="100.jpg">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // 获取属性的值
      console.log($("img").attr("src"));
      console.log($("img").prop("src"));
      console.log($("img").attr("loadimg"));
      console.log($("img").prop("loadimg"));

      // 修改属性的值
      $("img").attr("title", "你好");
      $("img").prop("title", "你好");

      // 添加属性
      $("img").attr("loadpic", "0000.png");
      $("img").prop("width", "200px");

      //删除属性
      $("img").removeAttr("loadimg");
      $("img").removeProp("width");

      //注意点
      // 如果img标签存在多个，那它返回的是集合中的第一个img标签
      // prop添加的属性虽然界面上看不见，但是它会给$("img")上添加属性
      $("img").prop("tag", "10001");
      console.log($("img").prop("tag"));
      $("img").removeProp("tag");
      console.log($("img").prop("tag"));
    })
  </script>

2.css类

addClass() 添加一个class值
removeClass() 删除一个class值
toggleClass() 切换一个class值
hasClass() 判断是否有某个class值返回true/false

demo
选中头像

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery CSS类的操作</title>
  <style>
    .img-list img{
      width: 200px;
      height: 200px;
      border: 5px solid #ccc;
      border-radius: 50%;
    }
    .img-list img.current{
      border: 5px solid red;
    }
  </style>
</head>
<body>
  <h1>CSS类操作</h1>
  <hr>
  <div class="img-list">
    <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg">
    <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" class="current">
    <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg">
    <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg">
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $(".img-list img").click(function () {
        // $(this)表示 当前点击的元素
        // 判断该元素 中有没有 current class
        var $this = $(this);
        if($this.hasClass("current")){
          // 删除 class值
          $this.removeClass("current");
        } else {
          // 添加上 class值
          $this.addClass("current");
        }
      })
      // // 第二种方法
      // $(".img-list img").click(function () {
      //   $(this).toggleClass("current");
      // })
    });
  </script>
</body>
</html>

3. HTML代码/ 文本/ 值

html([html]) 设置或获取元素里面的html代码类似于 innerHTML
text([text]) 设置或获取元素里面的文本内容类似于 innerText
val([value]) 设置或获取表单控件里面的值

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 文本 代码值</title>
  <style>
    #box{
      width: 800px;
      padding: 20px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>CSS类操作</h1>
  <hr>
  <div id="box">
    <h1>jQuery 文本代码值</h1>
    <p>a b c d e f g h i j k l n m o p q r s t u v w x y z a b c d e f g h i j k l n m o p q r s t u v w x y z </p>
    <p>a b c d e f g h i j k l n m o p q r s t u v w x y z a b c d e f g h i j k l n m o p q r s t u v w x y z </p>
  </div>
  <hr>
  <input type="text" id="nameInput">
  <br>
  <textarea name="content" cols="30" rows="10"></textarea>
  <button id="btn">获取</button>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      console.log($("#box").html());
      console.log($("#box").text());

      // 区别html可以包含标签
      $("#box").html("<h1>hello world<h1>");
      $("#box").text("<h1>hello world<h1>");

      $("#btn").click(function () {
        // console.log($("#nameInput").prop("value"));
        console.log($("#nameInput").val());
        console.log($("textarea[name='content']").val());
      })

      $("#nameInput").val("请输入内容");
    });
  </script>
</body>
</html>

jQuery 样式操作

1. css操作

css(attr[,value]) 获取或设置css属性参数可以是对象

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS操作</title>
  <style>
    #box{
      border:1px solid red;
    }
  </style>
</head>
<body>
  <h1>CSS操作</h1>
  <hr>
  <div id="box"></div>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // 获取 元素的 css属性值(计算css属性)
      console.log($("#box").css("border"));
      console.log($("#box").css("height"));

      // 设置css属性的值
      $("#box").css("width", "500px").css("height", "200px")
              .css("background-color", "#ccc")
              .css("padding", "20px").html("a b c d e f g");

      $("#box").css({
        "width":"400px",
        "background-color":"#f5f5f5",
        "color":"green"
      });
    });
  </script>

</body>
</html>

2. 位置

offset() 元素在页面中的坐标返回对象（属性 left top）
position() 元素在第一个定位的祖先元素内的坐标只读

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery位置操作</title>
  <style>
    .wrapper{
      margin: 100px auto;
      width: 600px;
      padding: 20px;
      border: 2px solid red;
    }
    .box{
      width: 400px;
      height: 300px;
      border:2px dotted orange;
    }
    .box1{
      width: 600px;
      height: 400px;
      overflow: auto;
      border: 2px dashed orange;
    }
  </style>
</head>
<body>
  <h1>jQuery位置操作</h1>
  <hr>
  <div class="wrapper">
    <div class="box"></div>
  </div>
  <div class="box1">
    <p style="width: 2000px;">a b c d e f g</p>
    <p style="width: 100px;height: 1000px;background-color: purple;">a b c d e f g</p>
  </div>
  <button id="leftBtn">left</button>
  <button id="topBtn">top</button>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // 获取位置
      console.log($(".box").offset());
      console.log($(".box").offset().left);
      console.log($(".box").offset().top);

      console.log($(".box").position().left);
      console.log($(".box").position().top);

      // 改变位置
      $(".box").offset({left:100,top:100});

      // 向右滚动
      $("#leftBtn").click(function () {
        $(".box1").scrollLeft(
                $(".box1").scrollLeft()+100);
      });
      // 向下滚动
      $("#topBtn").click(function () {
        $(".box1").scrollTop(
                $(".box1").scrollTop()+100);
      });
    });
  </script>

</body>
</html>

3. 尺寸

width() / height() 内容尺寸
innerWidth() / innerHeight() 内容尺寸+padding
outerWidth() / outerHeight() 盒子的尺寸

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery尺寸操作</title>
  <style>
    #box{
      padding: 20px;
      width: 300px;
      height: 200px;
      border: 5px solid orange;
    }
  </style>
</head>
<body>
  <h1>jQuery尺寸操作</h1>
  <hr>
  <div id="box"></div>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // 元素内容的尺寸
      console.log($("#box").width(), $("#box").height());
      // 内容尺寸+padding
      console.log($("#box").innerWidth(), $("#box").innerHeight());
      // 盒子的尺寸
      console.log($("#box").outerWidth(), $("#box").outerHeight());

      // 设置
      $("#box").width(200).height(200);

      $("#box").innerWidth(300);
      // 这个才是真正的盒子大小
      $("#box").outerWidth(500).outerHeight(400);
    });
  </script>

</body>
</html>

痴心的萝卜

发布了56 篇原创文章 · 获赞 20 · 访问量 7383

私信关注

jQuery属性操作

1. 属性

2.css类

3. HTML代码/ 文本/ 值

jQuery 样式操作

1. css操作

2. 位置

3. 尺寸

猜你喜欢