您的位置：首页 > Web前端 > JQuery

《锋利的jQuery》读书笔记第三章(DOM操作)

2017-12-11 17:48 141 查看

jQuery中的DOM操作

查找节点

1.查找元素节点

获取元素点并打印出它的文本内容。

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom</title>
</head>
<body>
<p title="选择喜欢的。">你最喜欢的水果是？</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>


var $li = $("ul li:eq(1)");
var li_txt = $li.text();
console.log(li_txt);


2.查找属性节点

利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性值，attr()方法的参数可以是一个，也可以是两个，当参数是一个时，则时要查询的属性的名字

var $para = $("p");
var p_txt = $para.attr("title");
console.log(p_txt);


创建节点

创建元素节点

var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");
$("ul").append($li_1);
$("ul").append($li_2);


创建文本节点

var $li_1 = $("<li>香蕉</li>");
var $li_2 = $("<li>雪梨</li>");
$("ul").append($li_1);
$("ul").append($li_2);


创建属性节点

var $li_1 = $("<li title='香蕉'>香蕉</li>");
var $li_2 = $("<li title='雪梨'>雪梨</li>");
$("ul").append($li_1);
$("ul").append($li_2);


插入节点

动态创建HTML元素并没有实际用处，还需要将新创建的元素插入文档中，将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点，前面使用了一个插入节点的方法append()，它会在元素内部追加新创建的内容。






删除节点

如果文档中某一个元素多余，那么应当将其删除。jQuery提供了两种删除节点的方法，remove()和empty()。


$("ul li:eq(1)").remove();


当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

empty()方法

严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中所有的后代节点。


复制节点

复制节点也是常用的DOM操作之一，例如某个购物网站的效果，用户不仅可以通过单击商品下方的"选择"按钮购买相应的产品，也可以通过鼠标拖动商品并将其放到购物车中。这个商品拖放功能就是用的复制节点。将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到一下购物车效果。


clone()方法，在clone()方法中传递了一个参数true，它的含义是复制元素的同时复制元素所绑定的事件。因此该元素的副本也同样具有复制功能。

替换节点

如果要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll()。

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。

$("p").repalceWith("<strong>你最不喜欢的事？</strong>");


也可以使用jQuery中另一个方法replaceAll()来实现，该方法与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作。

$("<strong>你最不喜欢的事是？</strong>").replaceAll("p");


包裹节点

如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()。该方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。

$("strong").wrap("<b></b>");


得到的结果如下:

<b><strong title="选择你最喜欢的水果."></strong></b>


包裹节点操作还有其他两个方法，即wrapAll()和wrapInner()。

1.wrapAll方法

该方法会将所有匹配的元素用一个元素来包裹。它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。

<strong title="选择你最喜欢的水果."></strong>
<strong title="选择你最喜欢的水果."></strong>


$("strong").wrapAll("<b></b>");


效果

<b>
<strong title="选择你最喜欢的水果."></strong>
<strong title="选择你最喜欢的水果."></strong>
</b>


2.wrapInner()方法

该方法将每一个匹配的元素的子内容用其他结构化的标记包裹起来。例如可以使用它来包裹标签的子内容。

$("strong").wrapInner("<b></b>");


效果

<strong title="选择你最喜欢的水果."><b>你最喜欢的水果是？</b></strong>


属性操作

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

1.获取属性和设置属性

var $para = $("p");
var p_txt = $para.attr("title");  //获取<p>元素节点属性title


$("p").attr("title","your title");  //设置单个的属性值


如果要一次性设置多个属性

$("p").attr({"title":"your title","name":"test"}); //将一个"名/值"形式的对象设置为匹配元素的属性


jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的，例如上面的attr()方法，既能设置元素属性的值，也能获取元素属性的值，类似的还有html()、text()、height()、width()、val()和css()方法。

2.删除属性

在某些情况下，需要删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成该任务。

<p title="选择你最喜欢的水果.">你最喜欢的水果是？</p>


$("p").removeAttr("title");


效果

<p>你最喜欢的水果是？</p>


样式操作

1.获取样式和设置样式

HTML代码如下：

<p class="myClass" title="选择你最喜欢的水果.">你做喜欢的水果是？</p>


在上面的代码中，class也是p元素的属性，因此获取class和设置class都可以使用attr()来完成。

例如使用attr()方法来获取p元素的class，jQuery代码如下：

var p_class = $("p").attr("class");


也可以使用attr()方法来设置p元素的class，jQuery代码如下：

$("p").attr("class","high");


在大多数情况下，它是将原来的class替换为新的class，而不是在原来的基础上追加新的class。

运行代码后，上面的HTML代码将变为如下结构:

<p class="high" title="选择你最喜欢的水果.">你最喜欢的水果是？</p>


2.追加样式

jQuery提供了专门的addClass()方式来追加样式。为了使例子更容易理解，首先在style标签里添加另一组样式。

<style>
.high {
font-weight:bold;
color:red;
}
.another {
font-style:italic;
color:blue;
}
</style>


然后在网页中添加一个“追加class类”的按钮，按钮的事件如下：

$("input:eq(2)").click(function() {
$("p").addClass("another");
});




3.移除样式

要删除class的某个值，那么可以使用与addClass()方法相反removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class。

另外，还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带
a7c5
参数时，会将class的值全部删除。

4.切换样式

在之前的案例研究中介绍了一个方法，即toggle(),jQuery代码如下：

$toggleBtn.toggle(function() {
//显示元素       代码3
},function() {
//隐藏元素       代码4
});


toggle()方法此处的作用是交替执行代码3和代码4两个函数，如果元素原来是显示的，则隐藏它；如果元素原来是隐藏的，则显示它。此时，toggle()方法主要是控制行为上的重复切换。

另外jQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。

5.判断是否含有某个样式

hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。

设置和获取HTML、文本和值

1.html()方法

此方法类似于JavaScript中的innerHTML属性，可以用来读取或这设置某个元素中的HTML内容。

html()方法可以用于XHTML文档，但不能用于XML文档

2.text()方法

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

1.JavaScript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有的浏览器。

2.text()方法对HTML文档和XML文档都有效

3.val()方法

此方法类似于JavaScript中的value属性，可以用来设置和获取元素的值。无论元素是文本框、还是下拉列表还是单选框。它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。

val()方法还有另外一个用处，就是它能使select（下拉列表框）、checkbox(多选框)和radio(单选框)相应的选项被选中，在表单操作中会经常用到。

遍历节点

1.children()方法

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

children()方法只考虑子元素而不考虑任何后代元素

2.next()

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

3.prev()

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

4.siblings()方法

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

5.closest()

它用来取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素，如果什么都没找到则返回一个空的jQuery对象。

CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。style属性很有用，但最大不足使无法通过它来提取到通过外部CSS设置的样式信息，然而在jQuery中，这些都是非常简单的。
可以直接利用css()方法获取元素的样式属性
在jQuery中还有另外一种方法也可以获取元素的高度，即height()。它的作用是取得匹配元素当前计算的高度值(px)。


1.在jQuery1.2版本以后的height()方法可以用来获取window和document的高度。

2.两者的区别是：css()方法获取的高度值与样式的设置有关，可能会得到”auto”,也可能得到”10px”之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，并且不带单位。

与height()方法对应的还有一个width()方法，它可以取得匹配元素的宽度值。

1.offset方法

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

2.position方法

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

####3.scrollTop()方法和scrollLeft()方法

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左端的距离。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航