zoukankan      html  css  js  c++  java
  • jq

    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()

    获取匹配元素相对于当前窗口的偏移值,同样也是获取的是一组值。

  • 相关阅读:
    sh_04_第1个函数改造
    sh_03_第1个函数
    sh_02_快速体验
    sh_01_九九乘法表
    11_测试模块
    sh_12_转义字符
    sh_11_九九乘法表
    sh_10_嵌套打印小星星
    Mariadb/Redis数据库
    部署django项目
  • 原文地址:https://www.cnblogs.com/zx997/p/6625567.html
Copyright © 2011-2022 走看看