1. 查找节点
在JQuery里面, 要查找一个节点,就是利用选择器找到该节点即可。
2. 创建节点
① 创建元素节点
② 创建文本节点
创建文本节点就是在上面的基础上添加上文本即可
③ 创建属性节点
直接在新节点里面书写属性即可,但是,需要注意在书写属性的时候,属性值使用单引号,因为外层已经使用了双引号了。
3. 插入节点
方法 |
描述 |
Append |
在内容后面插入新的节点 |
AppendTo |
功能和上面一样,只是顺序上的不同 |
Prepend |
在内容前面插入新的节点 |
PrependTo |
功能和上面一样,只是顺序上的不同 |
After |
在标签后面插入新的节点 |
InsertAfter |
功能和上面一样,只是顺序上的不同 |
Before |
在标签前面插入新的节点 |
InsertBefore |
功能和上面一样,只是顺序上的不同 |
Append():在内容后面插入新的节点
效果:
AppendTo():事实上和上面的方法效果一模一样,只是顺序的不同而已
效果:
Prepend():该方法是在内容的前面进行插入
效果:
PrependTo()方法也是和prepend方法一模一样,只是顺序上的区别
效果:
After:在标签的后面添加新的节点
效果:
InsertAfter功能和after是一样的,也就是顺序上的区别
Before:在标签的前面添加新的节点
效果:
4. 删除节点
在JQuery里面,删除节点大致有3种方法,remove(),detach(),empty()
Remove():从DOM中删除节点
效果:点击删除按钮后,苹果这个节点被删除掉
detach():也是从DOM中删除节点,区别在于删除节点后再添加上,事件保留。而remove删除节点的话,是彻彻底底的删除,如果在重新添加该节点,事件不会回来。
效果:通过对比我们可以看出detach不会删除事件,而remove会将节点的事件给删除掉。
empty():这里就是置空某一个节点
效果:可以看到,节点的内容被删除掉了
5. 复制节点
复制节点在JQuery中提供了clone()方法来复制一个节点,该方法是可以传入一个参数的,传入一个true,代表复制一个节点的时候,将上面的事件一起进行复制
效果:因为clone方法里面传入了参数true,所以事件也一并被拷贝了
6. 替换节点
替换节点对应的方法有两个:replaceWith()和replaceAll()
replaceWith():旧节点replaceWith(新节点)
效果:点击替换按钮后第一个li标签被替换成p标签
replaceAll()
功能和上面一模一样,只是顺序上的不同
语法:新节点replaceAll(旧节点)
7. 包裹节点
所谓包裹节点,就是用某个节点将其他元素包裹起来。大致有3种方法:wrap(),wrapAll(),wrapInner()
wrap():用后面的元素去包裹前面的元素,如果前面的元素有多个,那么就包裹多次。
效果:
wrapAll():也是用后面的元素去包裹前面的元素,但是如果有多个,就合并到一起进行包裹
效果:
wrapInner()
同样是用后面的元素去包裹前面的元素,但是是包裹内容
效果:
8. 属性操作
在JQuery里面,属性的获取和设置通过attr()方法,删除属性通过removeAttr()
① 获取元素的属性
② 设置元素的属性
同样是使用attr()方法,语法:attr(属性名,属性值)
效果:duanluo被修改为article
这里有一个问题,如果要设置多个属性值应该怎么办?
Attr({属性名:属性值,属性名:属性值,属性名:属性值})
删除属性:通过removeAttr()进行删除
9. 样式操作
① 获取和设置样式
获取和设置样式同样是通过attr来获取并进行样式的设置
② 追加样式
AddClass()用于追加新的样式
效果:点击按钮后添加相应的样式
④ 移除样式 removeClass()
效果:点击按钮移除相应的样式
通过添加样式和移除样式,我们就可以做出一个动态的效果
效果:点击添加样式按钮,字体变大,点击删除样式,字体变小。
⑤ 切换样式 toggleClass()
控制一个样式的反复添加和删除
效果:通过一个按钮就实现了上面两个按钮才能实现的功能,点击按钮一下,字体方法,再点击按钮一下,移除da这个样式,字体变小
⑥ 判断某元素是否含有某个样式
hasClass(),如果含有则返回true,如果没有则返回false
10. 设置与获取HTML和文本值
① Html()
Html()方法类似于JavaScript里面的innerHTML属性,可以获取到元素之间的内容
② Text()
Text()方法类似于JavaScript里面的innerText属性,只能获取到元素之间的文本内容
③ Val()
类似于JavaScript里面的value属性,一般用于获取表单里面控件的值
Val()除了获取表单的值以外,还有一个妙用,设置表单控件的默认值
11. 遍历节点
① Children()方法
获取某个节点所有子节点的集合
通过children()方法只能获取子节点的集合,并不能获取后代元素的集合
② Next()方法和prev()方法
获取的是同辈的下一个节点或者上一个节点
③ Siblings()方法
获取匹配元素前后所有的同辈元素。
④ Parent()和parents()
Parent():获取匹配的父辈元素
Parent():获取匹配的所有父代元素
12. CSS DOM操作
在JQuery里面,操作样式专门提供了一个css()
① 获取css样式
② 设置css样式
和attr()类似,设置css样式还是通过css()方法
语法:css(属性名,属性值)
设置多个css样式
Css({属性名:属性值,属性名:属性值})
③ 关于宽高
JQuery里面针对宽高专门提供了width()和height()函数
Width()和height()方法除了获取,也可以设置
长度单位默认是px,如果要设置为其他单位,需要双引号引起来即可
④ Position()方法
获取距离匹配元素最近的,定了位的元素的距离
Position()方法返回的是一组值,可以通过top和left分别取到相应的值
⑤ Offset()
获取匹配元素相对于当前窗口的偏移值,同样也是获取的是一组值。