jQuery笔记 03：jQuery对象（属性操作和 CSS 操作）

最新推荐文章于 2022-09-06 21:48:27 发布

Alice_LMY

最新推荐文章于 2022-09-06 21:48:27 发布

阅读量189

点赞数

分类专栏：前端文章标签： jquery css javascript

本文链接：https://blog.csdn.net/Alice_Lee_Lee/article/details/121161622

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

属性操作

什么是属性节点？

<!-- 在编写html代码时，在标签中添加的属性就是属性节点 -->
<!-- 在浏览器中找到 span 这个 dom 元素之后看到的 attributes 属性中保存的所有内容，都是属性节点 -->
<span name="dudu"></span>

如何操作属性节点？

$(function () {
  var span = document.getElementsByTagName("span")[0];
  // 设置属性：第一个参数是属性名，第二个参数是属性值
  span.setAttribute("name", "guo");
  // 获取属性：参数是属性名
  console.log(span.getAttribute("name"));
});

属性和属性节点有什么区别？

任何对象都有属性，但是只有DOM对象才有属性节点

`attr()` 和 `removeAttr()`

<span class="span1" name='it666'></span>
<span class="span2" name='dudu'></span>

<script>
$(function () {
  // 获取或者设置属性节点的值
  // 如果传递一个参数，代表获取属性节点的值
  // 如果传递两个参数，代表设置属性节点的值
  // 注意：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值，如果没有找到返回undefined
  console.log($("span").attr("class")); // span1
  // 注意：找到多少元素就会设置多少元素
  $("span").attr("name", "fei");
  // 注意：如果要设置的属性节点不存在，系统会自动增加该属性节点并赋值
  $("span").attr("abc", "123");
});
</script>

<span class="span1" name='it666'></span>
<span class="span2" name='dudu'></span>

<script>
$(function () {
  // 删除属性节点
  // 注意：会删除所有找到元素指定的属性节点
  $("span").removeAttr("class");
  // 删除多个属性节点
  $("span").removeAttr("class name");
});
</script>

`prop()` 和 `removeProp()`

<span class="span1" name='it666'></span>
<span class="span2" name='dudu'></span>
<input type="checkbox" checked>

<script>
$(function () {
  // 用法与attr()和removeAttr()方法相似
  $("span").eq(1).prop("demo", "it666");
  console.log($("span").prop("demo")); // undefined
  $("span").removeProp("demo");
  // prop()不仅能够操作属性，还可以操作属性节点
  // 在操作属性节点时，具有 true 和 false 两个属性的属性节点(checked，selected，disabled)使用prop()，其他的使用attr()
  console.log($("input").prop("checked")); // true / false
  console.log($("input").attr("checked")); // checked / undefined
});
</script>

操作类相关的方法

.class1 {
  width: 100px;
  height: 100px;
  background-color: aqua;
}

.class2 {
  border: 10px solid #000;
}

<button>添加类</button>
<button>删除类</button>
<button>切换类</button>

<div></div>

<script>
$(function () {
  var btns = document.getElementsByTagName("button");
  btns[0].onclick = function () {
    // 添加类：多个类用空格隔开
    $("div").addClass("class1 class2");
  };
  btns[1].onclick = function () {
    // 删除类：多个类用空格隔开
    $("div").removeClass("class2");
  };
  btns[2].onclick = function () {
    // 切换类：有就删除，没有就添加，多个类用空格隔开
    $("div").toggleClass("class1");
  };
});
</script>

文本值相关的方法

div {
  width: 100px;
  height: 100px;
  border: 3px solid black;
}

<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
    
<div></div>
<input type="text">

<script>
$(function () {
  var btns = document.getElementsByTagName("button");
  // 设置HTML
  btns[0].onclick = function () {
    // 和原生js中的innerHTML相同
    $("div").html("<p>我是p<span>我是span</span></p>");
  };
  // 获取HTML
  btns[1].onclick = function () {
    // 输出：<p>我是p<span>我是span</span></p>
    console.log($("div").html());
  };
  // 设置text
  btns[2].onclick = function () {
    // 和原生js中的innerText相同
    $("div").text("<p>我是p<span>我是span</span></p>");
  };
  // 获取text
  btns[3].onclick = function () {
    // 输出：<p>我是p<span>我是span</span></p>
    console.log($("div").text());
  };
  // 设置value
  btns[4].onclick = function () {
    $("input").val("请输入内容");
  };
  // 获取value
  btns[5].onclick = function () {
    console.log($("input").val());
  };
});
</script>

CSS 操作

获取和设置样式

逐个设置样式

<div></div>

<script>
$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "rosybrown");
</script>

链式设置样式（链式操作如果大于3步，建议分开）

<div></div>

<script>
$('div').css('width', '200px').css('height', '200px').css('background', 'red');
</script>

批量设置样式（推荐）

<div></div>

<script>
$("div").css({
  width: "100px",
  height: "100px",
  background: "pink",
});
</script>

获取css样式的值

<div></div>

<script>
// 使用上面的设置
console.log($('div').css('width')); // 100px
console.log($('div').css('background')); // rgb(255, 192, 203) none repeat scroll 0% 0% / auto padding-box border-box
</script>

操作元素位置和尺寸

.father {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 50px solid black;
  margin-left: 50px;
  position: relative;
}
.son {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  left: 50px;
  top: 50px;
}

<div class="father">
    <div class="son"></div>
</div>

<button>获取</button>
<button>设置</button>

<script>
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
  // 获取元素的宽度
  console.log($(".father").width()); // 200
  // 获取元素距离窗口的偏移量
  console.log($(".son").offset().left); // 150
  console.log($(".son").offset().top); // 100
  // 获取元素距离定位元素的偏移量
  console.log($(".son").position().left); // 50
  console.log($(".son").position().top); // 50
};
btns[1].onclick = function () {
  // 设置元素的宽度
  $(".father").width("500px");
  // 设置元素距离窗口的偏移量
  $(".son").offset({
    left: 10,
    top: 20,
  });
  // 不能通过position设置元素距离定位元素的偏移量
};
</script>

div {
  width: 100px;
  height: 150px;
  background-color: tomato;
  padding: 10px;
  border: 10px black solid;
  margin: 10px;
}

<div></div>
<script>
    var $div = $('div');
    // 内容尺寸：width和height 
    console.log($div.width(), $div.height()); // 100 150
    // 内部尺寸：width和height加上padding 
    console.log($div.innerWidth(), $div.innerHeight()); // 120 170
    // 外部尺寸：width和height加上padding和border 如果是true，则加上margin
    console.log($div.outerWidth(), $div.outerHeight()); // 140 190
    console.log($div.outerWidth(true), $div.outerHeight(true)); // 160 210
</script>

获取设置滚动条位置

.scroll {
  width: 100px;
  height: 200px;
  border: 1px solid black;
  overflow: auto;
}

<div class="scroll">
    我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div
</div>

<button>获取</button>
<button>设置</button>
<br><br> <!-- 此处省略其余的br，br的作用是用来使页面出现滚动条 -->

<script>
$(function () {
  var btns = document.getElementsByTagName("button");
  btns[0].onclick = function () {
    // 获取滚动的偏移量
    console.log($(".scroll").scrollTop());
    // 获取网页滚动的偏移量（兼容写法）
    console.log($("html").scrollTop() + $("body").scrollTop());
  };
  btns[1].onclick = function () {
    // 设置滚动的偏移量
    $(".scroll").scrollTop(60);
    // 设置网页的滚动偏移量（兼容写法）
    $("html, body").scrollTop(80);
  };
});
</script>