jQuery的getter和setter

jQuery的getter和setter

jQuery对象上最简单、最常见的操作是获取（get）或设置（set）HTML属性、CSS样式、元素内容和位置高宽的值。jQuery使用同一个方法既当getter用又做setter用，而不是定义一对方法。如果传入一个新值给该方法，则它设置此值；如果没指定值，则它返回当前值。

1. 常用的getter / setter

• 1.attr()方法是jQuery中用于HTML属性的getter/setter。一个相关函数是removeAttr()。

var form = $("form");
      // 1. attr(): html属性进行操作
      // attr(name):　 getter
      // attr(name, value):　setter
      cl(form.attr("action"));
      form.attr("action", "admin/check.php");
      cl(form.attr("action"));
      form.attr({
        action: "selec.php?id=4",
        method: "post",
      });

• 2.css()方法和attr()方法很类似，只是css()方法作用于元素的css样式，而不是元素的HTML属性。

// 不仅可以获取到style属性的值,还可以获取到该元素所有样式
      cl(window.getComputedStyle(document.querySelector("form")).width);
      cl(form.css("width"));
      cl(form.css("border"));
      form.css("border", "3px solid green");
      form.css({
        backgroundColor: "wheat",
        border: "5px dashed blue",
      });
      form.css("background-color", function () {
        // 这是一有四个颜色值的数组, 目标是从这个数组中随机返回一个值
        var bgcolor = ["plum", "lightblue", "tan", "lime"];
        // 返回哪个值, 由一个随机索引决定, 索引必须在0 -3 之间
        var randomIndex = Math.floor(Math.random() * bgcolor.length);
        return bgcolor[randomIndex];
      });

• 3.addClass()和removeClass()用来从选中元素中添加和删除类。toggleClass()的用途是：当元素还没有某些类时，给元素添加这些类；反之，则删除。

• 4.hasClass()用来判断某类是否存在。

• 5.val()方法用来设置和获取HTML表单元素的value属性，还可用于获取和设置复选框、单选按钮以及<select>元素的选中状态。

// 5. val():表单元素的值
      cl($("#email").val());
      $("#email").val("zhulaoshi@php.cn");
      cl($("#email").val());
      // 获取选中按钮的值
      cl($("input:radio[name=save]:checked").val());
      // 回调
      $("#email").val(function () {
        return this.defaultValue;
      });

• 6.text()和html()方法用来获取和设置元素的纯文本或HTML内容。

// 6. html()/text(): 元素内容操作
      // innerText ===> text();
      document.querySelector("h2").innerText = "请登录";
      $("h2").text("赶紧登录");
      // innerHTML ===>　html()
      document.querySelector("h2").innerHTML =
        '<span style="color:blue">请登录</span>';
      $("h2").html('<span style="color:green">请登录</span>');
      $("h2").html("请登录");

• 7.offset()方法可以获取或设置元素的位置。position()方法很像offset()方法，但它只能用作getter，它返回的元素位置是相对于其偏移父元素的，而不是相对于文档的。width()和height()方法返回基本的宽度和高度，不包含内边距、边框和外边距。innerWidth()和innerHeight()返回元素的宽度和高度，包含内边距的宽度和高度。outerWidth()和outerHeight()通常返回的是包含元素外边距的尺寸。

var cl = console.log.bind(console);
  var form = document.forms.item(0);
  var domRect = form.getBoundingClientRect();
  //   cl(domRect);
  cl(domRect.top, domRect.left);
  // jquery来完成
  var position = $(form).offset();
  cl(position);
  cl(position.top);
  cl(position.left);
  position.top += 50;
  cl(position);

• 8.data()可用来设置或获取与文档元素、document或window对象关联的数据。

// 获取滚动条的位置
  //   document.documentElement.style.width = "2000px";
  //   $(document).on("scroll", function () {
  //     cl($(document).scrollLeft());
  //   });
  // 自定义数据属性
  $(form).data("desc", "login-form");
  cl($(form).data("desc"));
  $(form).removeData("desc");
  cl($(form).data("desc"));

2. 总结

用做setter时，这些方法会给jQuery对象中的每一个元素设置值，然后返回该jQuery对象以方便链式调用。用做getter时，这些方法只会查询元素集中的第一个元素，返回单个值。（如果要遍历所有元素，请使用map()。）getter不会返回调用自身的jQuery对象，因此它只能出现在链式调用的末尾。