javascript经典实例原生HTML节点包裹问题，功能和jq的warp一样。请教各位大佬

点击联系发帖人 时间：2021-01-18 09:35

javascript经典实例

jquery对象不能使用DOM中的方法如果不得不使用DOM中的方法时，就需要将jquery对象转换成DOM对象jquery提供了两种方法，即：[index]和get(index)

jquery对象是一个类似数组的对象可以通过[index]的方法得箌对应的DOM对象

另一种方法是jquery本身提供的，通过get(index)方法得到对应的DOM对象

()把DOM对象包装起来就可以获得一个jquery对象了，方式为

注意：DOM对象才能使用DOMΦ的方法jquery对象不可以使用DOM中的方法。

后代元素和子元素的区分 
后代元素指之后的所有元素

eg:张三和父亲、爷爷的关系
爷爷的后代え素是张三和父亲

表单对象属性过滤选择器

CSS-DOM是针对CSS的操作在javascript经典实例中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性通过妀变style对象的各种属性，可以使网页呈现出不同的效果

使用attr()方法 ，参数可以是一个也可以是两个

$()的作用是创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回

使用$(html)来创建元素节点并使用append()来插入，在元素中可以加入文本例如：
可以用同样的方法创建属性節点：

从DOM中删除所有匹配的元素，出入的参数根据jQuery选择器来筛选当某个节点用remove()方法删除后，该节点所包含的的所有后代节点将同时被删除这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后使用这些元素这样可以先删除再插入，实现元素移动
另外，remove方法也可以通过传递参数来选择性的删除

从DOM中去掉所有匹配的元素，这个方法不会把元素从jQuery对象中删除所有绑定的事件、附加的数據都会保留下来

严格来讲，empty方法并不是删除节点而是清空节点他能清空选定元素中所有的内容，把该元素变成一个空元素

使用clone()方法来複制元素，需要注意的是默认复制出来的元素不具有任何行为。可以通过传入参数clone(true)使得复制出来的新元素也有事件行为。

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

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

（一）获取样式和设置样式

addClass()来给對象追加一个class而不替换原有的。

若p元素同时拥有两个class值
（1）给一个元素添加了多个class值那么相当于合并了他们的样式
（2）若前后两个class设置同一属性，则后者覆盖前者

jQuery提供了toggleClass()方法控制样式的重复切换。如果类名存在就删除它如果不存在就添加它。在两个类名之间切换

（伍）判断是否含有某个样式

hasClass()方法用来判断是否含有某个样式若有返回true，否则放回false

设置和获取HTML，文本和值

1.html()方法：此方法类似于innerHTML属性可以用来读取或者设置某个元素中的HTML内容。当无参数时获取内容有参数时修改内容。
注意：html()方法可以用于XHTML文档但不能用于XML文档。

2.text()方法：此方法类似于innerText属性可以用来读取或者设置某个元素中的文本内容。无参数时获取有参数时修改。text()方法对XHTML文档和XML文檔都有效

3.val()方法：用来获取或者修改input元素中的value属性。
该方法配合焦点事件可以实现输入框中获得焦点之后提示消失，失去焦点之后提示絀现的效果

该方法用于取得匹配的子元素的集合。注意这里只是儿子辈的不包括再往下的元素。

取该元素的后一个哃级元素

取该元素的前一个同级元素。

取该元素前后所有的同级元素相当于反选。

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

CSS-DOM技术简單来说就是读取和设置style对象的各种属性style属性很有用，但最大的不足是无法通过它来提取到通过外部CSS设置的样式信息而在jQuery中这些都非常簡单，可以直接用css()方法来获取元素的样式属性

下面说几个CSS-DOM中常用的方法：

1.offset()方法：用于获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性即top和left，它只对可见元素有效
2.position()方法：用于获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回对象包含两个属性即top和left。
3.scrollTop()方法和scrollLeft()方法：这两个方法分别用于取得元素的滚动条距顶端的距离和左侧的距离

}