内容简介:前端最基础的就是上一节我们讲了选择器在初级的时候就讲过了。上节也简单的列了一下。这节就
前端最基础的就是 HTML+CSS+Javascript
。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂( HTML/CSS/JS
),本着提升技术水平,打牢基础知识的中心思想,我们开课啦( 每周四 )。
上一节我们讲了 jQuery
的基本使用。这节我们讲元素节点相关的内容。
内容目录
- 选择器
- 文档处理
- 筛选
选择器
选择器在初级的时候就讲过了。上节也简单的列了一下。这节就 找一点骚东西 说一说吧。
Sizzle 选择器引擎
先问问DOM的API查找性能,有不知道的吗? 由快到慢 ID > Class > Name > Tag。
CSS 选择器匹配的顺序,有不知道的吗? 从左往右
jQuery的选择器匹配的顺序,有没有不知道的?Sizzle 选择器引擎 从左往右 ,当然,既然人家优秀肯定有道理。如果支持更快 querySelector
会选择更快的方法。如果有id选择器,他会先进行id选择,缩小范围。感兴趣可以去看看 Sizzle选择器引擎介绍 ,有能力读源码当然更好了。
举个栗子
- 查询语句:
$('div span')
-
代码结构:
div div div span div span
- 先查
div
的话,我们需要遍历多少次?两次可以吗?但是如果先查span
,那我们parent
去找直到找到头就完事了。 - 再说另一个,子节点只有一个父节点。但是父节点会有很多子节点。
文档处理
append
、 appendTo
和 prepend
、 prependTo
操作的是父子节点,效果也等同于原生的api。已存在节点是移动,新节点是新增。
-
parent.append(child)
是将child
添加到parent
的最 后 面。链式操作对象为parent
。对应原生appendChild
-
child.appendTo(parent)
是将child
添加到parent
的最 后 面。链式操作对象为child
。 -
parent.prepend(child)
是将child
添加到parent
的最 前 面。链式操作对象为parent
。 -
child.prependTo(parent)
是将child
添加到parent
的最 前 面。链式操作对象为child
。
insertAfter
、 after
和 insertBefore
、 before
操作的是兄弟节点,效果同上。
-
A.after(B)
是在 A 后面增加 B 。链式操作对象为 A -
B.insertAfter(A)
是把 B 增加到 A 后面。链式操作对象为 B -
A.before(B)
是在 A 前面增加 B 。链式操作对象为 A -
B.insertBefore(A)
是把 B 增加到 A 前面。链式操作对象为 B
wrap
、 unwrap
、 wrapall
、 wrapInner
、 replaceWith
、 replaceAll
说实话这几个我用都没用过。
-
$("a").wrap("<div class='wrap'></div>")
是指,将所有a标签,用后面的节点包起来。 -
$('li').unwrap()
将他们的父节点移除。也就是说所有子节点占据了原来父级的位置。 -
$("a").wrapAll("<div class='wrap'></div>")
是指,将所有到标签都合并到第一个位置,并且包裹起来。 -
$("a").wrapInner("<b></b>")
是指,讲 a标签 的内容,用 b标签 包裹起来。 -
$("a").replaceWith('<a href="//www.lilnong.top">lilnong.top</a>')
将所有的a标签,用新标签替换。那么链式操作对象是谁? -
$('<a href="//www.lilnong.top">lilnong.top</a>').replaceAll("a")
用新标签替换,把所有的a标签替换。那么链式操作对象是谁?
empty
、 remove
、 detach
-
$("a").empty()
删除匹配的元素集合中所有的 子节点 。 -
$("a").remove()
从DOM中删除所有 匹配的元素 。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。 -
$("a").detach()
从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。 与remove()
不同的是,所有绑定的事件、附加的数据等都会保留下来。
clone([Event[,deepEven]])
克隆一个副本出来。我们知道,如果这个 元素是文档内的 ,那么上面的方法会变成 移动 。当我们 不想移动的时候 ,就需要clone。
- event: 一个布尔值(true 或者 false)指示事件处理函数是否会被复制。V1.5以上版本默认值是:false
- deepEven: 一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。
筛选
-
hasClass(class)
判断当前元素有没有对应class
。比如我们在模拟 复选框 ,我们需要判断当前的状态。$(this).hasClass('checked')
-
filter(class)
比如我们现有一个所有复选框的合集,我们要过滤出所有选中状态的。 -
next()
获取下一个元素 -
nextAll()
获取后面所有元素 -
nextUntil()
获取后面所有元素,可以设置终止条件。 -
parent()
、prev()
基本有next()
相识的方法 -
siblings()
获取所有兄弟元素 -
end()
我觉得这个方法就很厉害 ,把当前的链式操作对象移交给上次。
$("p").find("span").end()
目前操作对象是$("p")
- 等等…… 我就列举这些常用的吧。
微信公众号:前端linong
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- JavaWeb_Vue_Pro v1.7.0 旗舰版发布,解决前端权限节点权限控制
- xml创建节点(根节点、子节点)
- Vultr VPS 节点选择方法 | 各节点延迟一览
- 1.19 JQuery2:节点插入与节点选取
- POC分布式节点算法机制下的超级节点计划
- tikv节点下线缩容后改造成tidb节点记录
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。