jQuery学习笔记：DOM操作（二）——属性、类、HTML、CSS

时间：2021-02-16 11:22:49

属性操作

获取属性和设置属性

attr（）

  • 如果要获取属性，那么给attr（）方法传递一个参数，即属性名称。
$("img").attr("src");
  • 如果要设置属性，那么就传递两个参数，即属性名和对应的属性值。
$("img").attr({ src: "test.jpg", alt: "Test Image" });

prop（）

首先要看一下特性（attribute）和属性（prop）的区别：

当编写 HTML 源码时，你能在 HTML 元素里定义 attributes。然后，一旦浏览器解析你的代码，该 HTML 元素相应的 DOM节点就会被创建。该节点是一个对象，因此它就拥有 properties。
因此，我们知道：attributes 是 HTML元素（标签）的属性，而 properties 是 DOM 对象的属性。

<input type="text" value="Name:">

这个元素拥有两个attributes，可以用getAttribute（）方法获取。
而这个元素被解析为DOM对象后，拥有了一系列对象属性，其中一些属性与元素的attribute会相互对应：

input.type;
input.value;

但一些自定义的特性或没有对应属性的特性就不会成为属性，如data-XX这种。

搞清楚属性（properties）和特性（attribute）后，再来看对应的prop（）和attr（）方法。
prop（）和attr（）的区别：

  • prop（）prop()针对的是DOM元素的property，而不是元素节点的attribute。
    可以看出源码中使用的是elem[name]的形式，即对DOM对象属性的获取和设置方式。

  • attr（）设置的是HTML元素的特性，，源码中使用的也是setAttribute（）和getAttribute（），即用于操作特性的方法。

在 jQuery 1.6 版本之后，.prop() 方法提供了一种明确检索 property 值的方式，而 .attr 只会检索 attributes。

因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。

删除属性

removeAttr（）

从每一个匹配的元素中删除一个属性。

$("img").removeAttr("src");

removeProp（）

用来删除由.prop()方法设置的属性集。

类操作

addClass（）

一般用于追加样式，即为每个匹配的元素添加指定的类名。

$("p").addClass("selected");
$("p").addClass("selected1 selected2");

removeClass（）

从所有匹配的元素中删除全部或者指定的类。

$("p").removeClass("selected");

不带参数时，就是删除匹配元素的所有类：

$("p").removeClass();

toggleClass（）

如果类名存在则删除它；如果类名不存在则添加它。

$("p").toggleClass("selected");

hasClass（）

检查当前的元素是否含有某个特定的类，如果有，则返回true。

if ( $(this).hasClass("protected") ){
    ……
}

HTML代码/文本/值

html（）

类似于js的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。

//获取p元素内部内容
$('p').html();
//设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");

这个函数不能用于XML文档。但可以用于XHTML文档。

text（）

类似于js中的innerText属性，可以用来读取或者设置某个元素中的文本内容。

<p><strong>hi</strong></p>
$("p").text();  //hi

设置文本内容：

$("p").text("Hello world!");

val（）

类似于js的value属性，可以用来设置和获取元素的值。
无论元素是文本框、下拉列表还是单选框，它都返回元素的值。如果元素为多选，就返回一个包含所有选择的值的数组。
同时也可以使select、checkbox和radio相应的选项被选中，在表单操作中经常被用到。

$("input").val("hello world!");
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);

遍历节点

children（）

用于取得匹配元素的子元素集合。

与js中的childNodes属性相对应。

注意：children()只考虑子元素而不考虑所有后代元素。

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("div").children()
<span>Hello Again</span>

next（）

用于取得匹配元素后面紧邻的同辈元素。

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。

nextAll（）

查找当前元素之后所有的同辈元素。

prev（）

用于取得匹配元素前面紧邻的同辈元素。

prevAll（）

查找当前元素之前所有的同辈元素。

siblings（）

用于取得匹配元素前后所有的同辈元素。

closest（）

该方法用于取得最近的匹配元素。

  • 首先检查当前元素是否匹配，如果匹配则直接返回元素本身。
  • 如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。
  • 如果什么都没找到则返回一个空的jQuery对象。

从 jQuery 1.7 开始，不再建议使用该方法

parent（）

取得集合中每个匹配元素的父级节点。
会从指定元素的直接父节点开始查找。

<div><p>Hello</p><p>Hello</p></div>
$("p").parent()
<div><p>Hello</p><p>Hello</p></div>

parents（）

取得集合中每个匹配元素的祖先元素。
与parent（）不同的是，当它找到第一个父节点时并没有停止查找，而是继续向上查找，最后返回多个父节点。

closest和parents的主要区别是：

  • 前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
  • 前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
  • 前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

find（）

搜索所有与指定表达式匹配的后代元素。
这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

<p><span>Hello</span>, how are you?</p>
$("p").find("span")

filter（）

筛选出与指定表达式匹配的元素集合。
与find（）不用的是，是对自身集合元素的筛选。

<p>
<span class="selected">Hello<span>
</p>
<p>Hello Again</p>
<p class="selected">And Again</p>
$("p").filter(".selected")

结果:

<p class="selected">And Again</p>

使用find的话，结果就会是：<span class="selected">Hello<span>

CSS操作

CSS操作简单来说就是读取和设置style对象的各种属性。
style属性很有用，但是最大的不足是无法通过它来提取外部CSS设置的样式信息，但是jQuery却可以做到。

css（）

访问匹配元素的样式属性。

$("p").css("color");

无论color属性是外部导入、还是内联，css（）方法都可以获取。

也可以直接利用css（）方法设置某个元素的样式：

$("p").css("color","red");
$("p").css({ "color": "#ff0011", "background": "blue" });

注意， 如果属性中带有-符号，例如font-size或background-color，如果在设置值的时候不带引号，那么就要使用驼峰式写法：
$("p").css("backgroundColor","red");
如果带引号，那么就可以写成“font-color”

height（）

取得匹配元素当前计算的高度值（px）。

$("p").height();

height（）方法也能用来设置元素的高度。

  • 如果传递一个数字，则默认单位为px
  • 如果要用其他单位，必须传递一个字符串。
$("p").height(20);
$("p").height("20em");

css（）方法获取的高度值与样式的设置有关，可能会得到“auto”，也可能得到“10px”这样的字符串。
但是height（）方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，且不带单位。

width（）

用于取得元素的宽度值（px）。

$("p").width();

同样也能用来设置元素宽度。

$("p").width(20);

定位

关于元素定位有以下几个经常使用的方法：

offset（）

它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left。只对可见元素有效。

var offset = $("p").offset();
var left = offset.left;
var top = offset.top;

position（）

获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移。
与offset（）一样，它返回的对象也包括两个属性，即top和left。

var position = $("p").position();
var left = position.left;
var top = position.top;

scrollTop（）、scrollLeft（）

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。

var scrollTop = $("p").scrollTop();
var scrollLeft = $("p").scrollLeft();

另外，这两个方法可以指定一个参数，控制元素的滚动条滚动到指定位置。

$("div.demo").scrollTop(300);
标签：

相关文章