jQuery 属性和CSS

HTML代码：

<div id="div1">div1<p>1</p><p>2</p><p>3</p>
</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

attr()

设置节点的属性

$("#div1").attr("class","cls");

取到节点的属性

console.log($("#div1").attr("id"));

传入对象，以键值对的形式同时设置多对属性

$("#div1").attr({//"class":"cls1",
"class":$("#div1").attr("class","cls1"),"name":"name1","style":"font-size:24px;color:blue;"
});

删除节点属性

$("#div1").removeAttr("class");

【prop和attr一样，都可以对节点属性进行读取和设置】

二者的不同：

1.在读取属性名="属性值" 的属性值时，attr将返回属性值和undefined；

而prop返回true或false 也就是说，attr要取的属性，必须是在标签上已经写明的属性，否则无法取到

console.log($("input:eq(0)").attr("checked"));
console.log($("input:eq(0)")).prop("type");

在原有class的基础上，新增class名

$("#div1").addClass("cls2");

删除指定的class名称，其余未删除的class名，依然保留

$("#div1").removeClass("cls2");

切换class，如果有指定class就删除，没有就新增

$("button:eq(0)").click(function(){$("#div1").toggleClass("div1");
});

html() 取到或设置节点中的html代码；

console.log($("#div1").html("<p>111</p>").html());

text() 取到或设置节点中的文本；

console.log($("#div1").text("<p>111</p>").text());

.val() 取到或设置表单元素的value值。

console.log($("input").val("<p>111</p>").val());

.css() 给节点添加css样式，属于行级样式表权限。

$("#div1").css("color","green");

同时给一个节点添加多对css样式。

$("#div1").css({"color":"green","font-size":"14px"
});

通过回调函数返回值，修改css的样式。

$("button:eq(0)").click(function(){var id = setInterval(function(){$("#div1").css({"width":function(index,value){var v = parseFloat(value) + 1;if(v>600){clearInterval(id);}return v+"px";}});},10);
});

取到或者设置节点的宽高。只包含width/height

console.log($("#div1").height(400));
console.log($("#div1").width("400px"));

取到节点的宽度+padding。不包含border和margin

console.log($("#div1").innerHeight());
console.log($("#div1").innerWidth());

不传参数，表示宽高+padding+border

传入true，表示宽高+padding+border+margin

console.log($("#div1").outerHeight());
console.log($("#div1").outerWidth(true));

返回一个节点，相对于浏览器左上角的偏移量。

返回一个对象{top:20,left20}

此方法，测量时，会将margin算作偏移量的距离。

console.log($("#div1").offset());

返回一个节点，相对于父容器的偏移量。

注意： ① 使用此方法，要求父元素必须是定位元素。如果父元素不是定位元素，则依然是相对于浏览器左上角进行测量。

② 次方法，测量偏移时，将不考虑margin。而会将margin视为当前容器的一部分。

console.log($("#div1").position());

scrollTop：设置或取到指定节点的滚动条的位置。

console.log($("#div1").scrollTop(100));

转载于:https://www.cnblogs.com/1960366876tZ/p/8999426.html

jQuery 属性和CSS相关推荐

jQuery 属性，css，文档操作
dom对象与jQuery对象的区别 $(function() {// dom 与 jQuery对象间的转换var $txt = $(":input");// jQuery -> ...
jQuery 从零开始学习 (三) 属性与css样式
一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将 ...
jquery如何去掉css,jQuery教程之jQuery去掉一个CSS属性
本篇文章探讨了jQuery教程之jQuery去掉一个CSS属性,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 1.什么事JQ? 一个优秀的js库,大型开发必备 2.J ...
JQuery中的CSS属性及操作
目录 1.JQuery中的css()方法 1) 返回 CSS 属性 2) 设置 CSS 属性 3) 设置多个 CSS 属性 2.JQuery的CSS操作 3.JQuery的class操作 1.JQue ...
JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 <strong>//1.获取和设置样式</strong> $("#tow").attr("class&q ...
JQuery属性、事件相关操作
JQuery属性相关操作文章目录 JQuery属性相关操作一.尺寸相关.滚动事件 1.获取和设置元素的尺寸 2.获取元素相对页面的绝对位置 3.获取浏览器可视区宽度高度 4.获取页面文档的宽度高度 ...
jQuery的操作css的几种方法和位置，尺寸以及scrolltop方法
jQuery操作css jQuery可以通过css方法直接给指定元素查看,更改,添加css样式 <script>$(function () {//jQuery可以通过css方法直接给指定元 ...
jQuery基础 - 改变CSS样式
本文转自:http://www.cnblogs.com/Capricornus/archive/2010/02/10/1667095.html,所有权利归原作者所有. jQuery提供css()的方法 ...
jQuery—常用API（jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作）
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...

jQuery 属性和CSS

jQuery 属性和CSS相关推荐

最新文章

热门文章