jq学习笔记

来源:http://www.smjxgs.com 作者:4887王中王鉄算盘奖结果 人气:119 发布时间:2019-08-08
摘要:jq学习笔记(二),jq学习笔记 jq笔记-dom篇-慕课网学习笔记   1.jQuery节点创建与质量的管理 创建成分节点: 1.$("div/div") 创立为本节点: 1.$("div笔者是文件节点/div") 成立为属性节点:

jq学习笔记(二),jq学习笔记

jq笔记-dom篇-慕课网学习笔记

 

1.jQuery节点创建与质量的管理

创建成分节点:
  1.$("<div></div>")
创立为本节点:
  1.$("<div>笔者是文件节点</div>")
成立为属性节点:
  1.$("<div id='test' class='aaron'>我是文本节点</div>")
  2.$("<div class='right'><div class='aaron'>动态成立DIV成分节点</div></div>")

2.DOM里面插入append()与appendTo()

  ①append() 向每种相配的因素内部追加内容
  ②appendTo() 把具备相配的要素追加到另一个

  轻易的下结论就是:

  .append()和.appendTo()三种办法效果雷同,首要的两样是语法——内容和对象的岗位不相同

    —— append()前面是被插入的对象,前边是要在对象内插入的要素内容
    —— appendTo()前边是要插入的要素内容,而背后是被插入的靶子

 

3.DOM外表插入after()与before()

  ①after() 在相称成分几何中的每种成分后边插入参数所钦定的内容,作为其兄弟节点
  ②before() 据参数设定,在相配成分的先头插入内容

  注意:
    ①after向成分的末尾增加html代码,假如元素前面有元素了,那将前面包车型客车成分后移,然后将html代码插入
    ②before向成分的后边加多html代码,尽管成分前边有成分了,那将如今的要素前移,然后将html代码插

4.DOM内部插入prepend()与prependTo()

  ①prepend() 向每一个相配的要素内部前置内容
  ②prependTop() 把装有相称的要素前置到另一个钦赐的成分几何中

  计算dom内部插入的三个方式的区分
    ①append()向种种相称的成分内部追加内容
    ②prepend()向每一种相称的成分内部后置内容
    ③appendTo()把具有相配的成分追加到另多个钦赐成分的汇集中
    ④prependTo()把具备相称的因素前置到另三个钦赐的要素集结中

 

5.DOM表面插入insertAfter()与insertBefore()

  ①insertBefore() 在目的成分后面插入几何中的每三个要素
  ②insertAfter() 在对象成分前边插入几何中的每一个相称的要素

6.DOM节点删除之empty()的着力用法

  empty 看名就能够知道意思,清空方法,可是与删除又有一点点不平等,因为它只移除了 内定成分中的全体子节点。

7.DOM节点删除之remove()的有参用法和无参用法

  remove与empty同样,都以移除成分的方式,不过remove会将成分本人移除,同一时候也会移除成分内部的全数,富含绑定的事件及与该因素相关的jQuery数据。

8.DOM节点删除之empty和remove不同

  ①empty方法
    严刻地讲,empty()方法并非剔除节点,而是清空节点,它能清空成分中的全体后代节点
    empty不可能去除本身笔者这一个节点

  ②remove方法
    该节点与该节点所含有的全数后代节点将同期被删去
    提供传递二个筛选的表达式,删除钦赐合聚集的因素

 

9.DOM节点删除之保留数据的删除操作detach()

10.DOM节点删除之detach()和remove()差距

  remove:移除节点
    ①无参数,移除本身整个节点以及该节点的中间的富有节点,包蕴节点上事件与数量
    ②有参数,移除筛选出的节点以及该节点的里边的装有节点,满含节点上事件与数据

  detach:移除节点
    ①移除的管理与remove一致
    ②与remove()分歧的是,全体绑定的风云、附加的数码等都会保留下来
    ③诸如:$("p").detach()这一句会移除对象,仅仅是显得效果未有了。然而内部存款和储蓄器中依旧存在的。当你append之后,又再一次重返了文书档案流中。就又显得出来了。

11.DOM拷贝clone()

.clone()方法深度 复制全体相称的元素集结,包含具备匹配成分、相称成分的下属成分、文字节点。

clone方法比较轻易正是克隆节点,然而急需专注,如若节点有事件还是数额等等的其它管理,我们供给通过clone(ture)传递叁个布尔值ture用来钦命,那样不光只是克隆单纯的节点结构,还要把附带的风云与数码给一并克隆了说

选取上正是那般回顾,使用克隆的大家须要十分知道的细节:

  ①clone()方法时,在将它插入到文书档案在此以前,大家得以修改克隆后的因素或然成分内容,如左侧代码小编$(this).clone().css('color','red') 扩大了三个颜料
  ②由此传递true,将有所绑定在原始成分上的事件管理函数复制到克隆成分上
  ③clone()方法是jQuery扩大的,只可以管理通过jQuery绑定的风云与数码
  ④成分数据(data)内对象和数组不会被复制,将接二连三被克隆成分和原始成分分享。深复制的有着数据,需求手动复制每三个

12.DOM替换replaceWith()和replaceAll()

  ①.replaceWith( newContent ):用提供的剧情替换集结中持有相称的成分并且再次来到被去除成分的集结
  ②.replaceAll( target ) :用集结的相称元素替换各个指标成分

  总结:
    ①replaceAll()和.replaceWith()效率周围,主就算目的和源的岗位分别
    ②.replaceWith()与.replaceAll() 方法会删除与节点相关联的保有数据和事件处理程序
    ③.replaceWith()方法,和大多数别的jQuery方法一致,重返jQuery对象,所以能够和另外艺术链接使用
    ④.replaceWith()方法再次来到的jQuery对象引用的是替换前的节点,并非由此replaceWith/replaceAll方法替换后的节点

    例子:

      ①$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的原委</a>')
      ②$('<a style="color:red">替换第二段的剧情</a>').replaceAll('p:eq(1)')

 

13.DOM包裹wrap()方法

  假若要将成分用任何因素包裹起来,也等于给它增添贰个父成分,针对那样的管理,JQuery提供了贰个wrap方法

  ①.wrap( wrappingElement ):在集聚中相配的每种成分相近包裹七个HTML结构

  例子:
    <p>p元素</p>

    给p成分扩张贰个div包裹

    $('p').wrap('<div></div>')

    最后的组织,p元素扩大了一个父div的布局

    <div>
      <p>p元素</p>
    </div>

  ②.wrap( function ) :二个回调函数,重临用于包裹相配成分的 HTML 内容或 jQuery 对象

  例子:
    $('p').wrap(function() {
      return '<div></div>'; //与第一种恍若,只是写法差异
    })

    使用后的功力与向来传送参数是同样,只不过可以把代码写在函数体内部,写法不一样而已

  注意:
    .wrap()函数还不错其余字符串或对象,能够传递给$()工厂函数来钦点三个DOM结构。这种结构能够嵌套了少数层深,但应当只含有叁个主导的成分。每一种相称的成分都会被这种布局包裹。该格局重返原始的成分集,以便之后采取链式方法。

 

 

14.DOM包裹unwrap()方法

  功效:删除父成分

  jQuery提供了贰个unwarp()方法 ,成效与wrap方法是倒转的。将相配成分集结的父级成分删除,保留本人(和兄弟成分,假设存在)在原位

  例子:
    <div>
      <p>p元素</p>
    </div>

    ——>

    $('p').unwarp();

    ——>

    <p>p元素</p>

15.DOM包裹wrapAll()方法

  ①.wrapAll( wrappingElement ):给集合中拾叁分的成分扩展二个外边包裹HTML结构

  例子一:
    <p>p元素</p>
    <p>p元素</p>

    ——> 给具备p成分扩张贰个div包裹

    $('p').wrapAll('<div></div>')

    ——> 结果 2个P成分都加多了三个父div的构造

    <div>
      <p>p元素</p>
      <p>p元素</p>
    </div>

  ②.wrapAll( function ) :贰个回调函数,重回用于包裹相称成分的 HTML 内容或 jQuery 对象

  通过回调的办法能够独立管理每贰个成分

  例子二:
    $('p').wrapAll(function() {
      return '<div><div/>';
    })

    ——> 以上的写法的结果如下,等同于warp的拍卖了

    <div>
      <p>p元素</p>
    </div>
    <div>
      <p>p元素</p>
    </div>

  注意:
    .wrapAll()函数能够承受任何字符串或对象,能够传递给$()工厂函数来钦赐贰个DOM结构。这种组织得以嵌套多层,可是最内层只可以有三个成分。全体匹配成分将会被看作是八个总体,在那些欧洲经济共同体的表面用内定的 HTML 结构进行李包裹装。

 

16.DOM包裹wrapInner()方法

  ①.wrapInner( wrappingElement ):给集结中相配的因素的内部,扩大包裹的HTML结构

  例子一:
    <div>p元素</div>
    <div>p元素</div>

    ——> 给具备因素扩大二个p包裹

    $('div').wrapInner('<p></p>')

    ——> 结果

    <div>
      <p>p元素</p>
    </div>
    <div>
      <p>p元素</p>
    </div>

  ②.wrapInner( function ) :允许大家用叁个callback函数做参数,每一趟遭逢相配成分时,该函数被施行,重回多个DOM成分,jQuery对象,恐怕HTML片段,用来包住相称成分的剧情

  例子二:

    $('div').wrapInner(function() {
      return '<p></p>';
    })

    ——>

    <div>
      <p>p元素</p>
    </div>
    <div>
      <p>p元素</p>
    </div>

  注意:
    当通过二个精选器字符串传递给.wrapInner() 函数,其参数应该是格式正确的 HTML,並且 HTML 标签应该是被科学关闭的。

17.jQuery遍历之children()方法

.children(selector) 方法是回到相配成分会集中各种成分的具有子成分(仅外孙子辈,这里能够清楚为正是父亲-外孙子的关联)

 

18.jQuery遍历之find()方法

例子:
<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>

代码假设是$("div").find("li"),此时,li与div是祖上关系,通过find方法就足以便捷的搜求到了。

.find()方法要专注的知识点:
  ①find是遍历当前成分集结中各类成分的后人。只要符合,不管是外孙子辈,外甥辈都足以。
  ②与别的的树遍历方法差异,采纳器表达式对于 .find() 是少不了的参数。假诺大家须要贯彻对富有后代成分的取回,能够传递通配选拔器 '*'。
  ③find只在后人中遍历,不包涵本人。
  ④取舍器 context 是由 .find() 方法完成的;由此,$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名称为item-ii的价签下的li标签)。

在意入眼:
  .find()和.children()方法是相似的
    1.children只查找第一流的子节点
    2.find搜寻范围包蕴子节点的富有后代节点

19.jQuery遍历之parent()方法

parent()方法效果:查找父成分

因为是父元素,那些艺术只会发展查找顶级

20.jQuery遍历之parents()方法

职能:parents()方法能够搜寻祖辈成分

例子:
<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>

在li节点上找到祖 辈元素div, 这里能够用$("li").parents()方法

注意:
  1 .parents()和.parent()方法是相似的,但前面一个只是进行了三个单级的DOM树查找
  2 $( "html" ).parent()方法重返三个涵盖document的集结,而$( "html" ).parents()重回一个空集合。

21.jQuery遍历之closest()方法

功用:也是祖上查找器,但更偏向与祖先过滤查找器

closest()方法接受三个相称成分的挑三拣四器字符串

从要素自身伊始,在DOM 树上逐级向上司成分相配,并赶回初叶相配的古人成分

注意事项:在运用的时候供给特别注意下

粗看.parents()和.closest()是有一点点相像的,都以后上遍历祖辈元素,然则两岸如故有分别的,不然就从未有过存在的含义了

  ①初始位置分裂:.closest早先于近来因素 .parents伊始于父成分
  ②遍历的对象分化:.closest要找到钦赐的目的,.parents遍历到文书档案根成分,closest向上查找,直到找到二个相称的就终止查找,parents平昔查找到根成分,并将相配的要素加入集结
  ③结实不相同:.closest重临的是含有零个或一个成分的jquery对象,parents再次回到的是富含零个或叁个或三个要素的jquery对象

22.jQuery遍历之next()方法

效果:查找下一个小伙子元素

例:
  ①$("li.item-1").next().css("border","1px solid red")
  ② $('.item-2').next(':first').css('border', '1px solid blue')

 

23.jQuery遍历之prev()方法

效果与利益:查找周围的前一个弟兄成分

 

24.jQuery遍历之siblings()

siblings()功效:急速寻觅钦点成分几何中每三个要素的同辈成分

25.add方法

  jQuery是贰个合集对象,通过$()方法找到钦点的要素合集后得以拓展一密密麻麻的操作。$()之后就表示那几个合集对象已经是分明的,假设早先时期供给再往那几个合聚焦增多一新的要素要什么处理?jQuery为此提供add方法,用来成立三个新的jQuery对象 ,成分加多到万分的要素会集中

26.jquery历遍之 each()

each()是什么?
  ①each是一个for循环的包装迭代器
  ②each因此回调的秘籍管理,并且会有2个固定的实参,索引与成分
  ③each回调方法中的this指向当前迭代的dom成分

个人以为,each更切合做“斑马线”之类的魔法

 

jq笔记-dom篇-慕课网学习笔记 1.jQuery节点创制与天性的拍卖 创设成分节点: 1.$("div/div") 创设为本节点: 1.$...

10.DOM节点删除之detach()和remove()不一致

9.DOM节点删除之保留数据的去除操作detach()

25.add方法

      ①$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')
      ②$('<a style="color:red">替换第二段的原委</a>').replaceAll('p:eq(1)')

  ①append() 向种种相配的因素内部追加内容
  ②appendTo() 把具备相称的因素追加到另三个

  ①.wrapAll( wrappingElement ):给集结中卓绝的因素扩充四个外界包裹HTML结构

创办成分节点:
  1.$("<div></div>")
创建为本节点:
  1.$("<div>我是文本节点</div>")
创办为属性节点:
  1.$("<div id='test' class='aaron'>小编是文件节点</div>")
  2.$("<div class='right'><div class='aaron'>动态创造DIV成分节点</div></div>")

  总结:
    ①replaceAll()和.replaceWith()功用相近,首假设指标和源的职责分别
    ②.replaceWith()与.replaceAll() 方法会删除与节点相关联的兼具数据和事件管理程序
    ③.replaceWith()方法,和大非常多别样jQuery方法一致,重返jQuery对象,所以可以和别的方法链接使用
    ④.replaceWith()方法重回的jQuery对象援引的是替换前的节点,并不是经过replaceWith/replaceAll方法替换后的节点

13.DOM包裹wrap()方法

    $('p').wrapAll('<div></div>')

jq笔记-dom篇-慕课网学习笔记

  ①empty方法
    严苛地讲,empty()方法实际不是剔除节点,而是清空节点,它能清空成分中的全部后代节点
    empty不可能去除自个儿本人那些节点

因为是父成分,这么些情势只会发展查找一流

    $('div').wrapInner('<p></p>')

 

  ①clone()方法时,在将它插入到文书档案以前,我们能够修改克隆后的成分只怕成分内容,如右侧代码笔者$(this).clone().css('color','red') 扩展了三个颜色
  ②透过传递true,将具有绑定在原始成分上的事件管理函数复制到克隆成分上
  ③clone()方法是jQuery扩张的,只好管理通过jQuery绑定的事件与数量
  ④成分数据(data)内对象和数组不会被复制,将持续被克隆成分和原始成分分享。深复制的有所数据,要求手动复制每三个

each()是什么?
  ①each是一个for循环的卷入迭代器
  ②each经过回调的情势管理,並且会有2个定位的实参,索引与成分
  ③each回调方法中的this指向当前迭代的dom成分

粗看.parents()和.closest()是有个别相像的,都以后上遍历祖辈成分,不过两岸依然有分其余,不然就平昔一纸空文的意义了

  ①insertBefore() 在目标元素前边插入几何中的每一个因素
  ②insertAfter() 在对象成分后边插入几何中的每种相配的要素

例子:
<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>

9.DOM节点删除之保留数据的去除操作detach()

    ——> 结果 2个P成分都扩张了三个父div的构造

23.jQuery遍历之prev()方法

  jQuery是三个合集对象,通过$()方法找到钦赐的要素合集后方可举行一多级的操作。$()之后就象征这几个合集对象已经是规定的,假使早先时期供给再往那个合聚焦增多一新的成分要哪些管理?jQuery为此提供add方法,用来创设三个新的jQuery对象 ,成分增加到极度的要素集结中

  ①prepend() 向每一种相称的成分内部前置内容
  ②prependTop() 把具备相称的因素前置到另一个钦定的因素几何中

15.DOM包裹wrapAll()方法

 

  empty 循名责实,清空方法,不过与删除又有一点点不雷同,因为它只移除了 钦点成分中的全体子节点。

  ①.wrapInner( wrappingElement ):给集结中相配的因素的里边,扩张包裹的HTML结构

  注意:
    ①after向成分的背后增添html代码,假使成分后边有成分了,那将前面包车型客车成分后移,然后将html代码插入
    ②before向成分的先头增加html代码,假设成分前边有成分了,那将前方的要素前移,然后将html代码插

  例子二:
    $('p').wrapAll(function() {
      return '<div><div/>';
    })

    ——>

4.DOM中间插入prepend()与prependTo()

each()是什么?
  ①each是二个for循环的包装迭代器
  ②each通过回调的主意管理,而且会有2个稳固的实参,索引与成分
  ③each回调方法中的this指向当前迭代的dom成分

closest()方法接受一个相称成分的选用器字符串

 

6.DOM节点删除之empty()的着力用法

19.jQuery遍历之parent()方法

例子:
<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>

  例子:
    <div>
      <p>p元素</p>
    </div>

parent()方法效果:查找父成分

 

  ②.wrapInner( function ) :允许我们用八个callback函数做参数,每一遍际遇相称成分时,该函数被施行,再次回到一个DOM成分,jQuery对象,或然HTML片段,用来包住相称成分的剧情

  例子:
    $('p').wrap(function() {
      return '<div></div>'; //与第一种恍若,只是写法分化样
    })

 

  remove:移除节点
    ①无参数,移除自己整个节点以及该节点的中间的富有节点,包含节点上事件与数量
    ②有参数,移除筛选出的节点以及该节点的里边的装有节点,包括节点上事件与数据

    $('div').wrapInner('<p></p>')

 

  jQuery是三个合集对象,通过$()方法找到钦点的成分合集后方可张开一各样的操作。$()之后就意味着那么些合集对象已经是显然的,若是前期供给再往这一个合聚集加多一新的因素要什么管理?jQuery为此提供add方法,用来创设一个新的jQuery对象 ,成分增加到卓越的成分集结中

  例子二:

21.jQuery遍历之closest()方法

从要素自个儿伊始,在DOM 树上逐级向上司元素相配,并赶回伊始相配的上代成分

在li节点上找到祖 辈成分div, 这里能够用$("li").parents()方法

6.DOM节点删除之empty()的主旨用法

    <p>p元素</p>

    给p成分扩大一个div包裹

    $('p').wrapAll('<div></div>')

  ②.wrap( function ) :贰个回调函数,重临用于包裹匹配成分的 HTML 内容或 jQuery 对象

    $('div').wrapInner(function() {
      return '<p></p>';
    })

  ①.wrapInner( wrappingElement ):给会集中特别的因素的中间,扩张包裹的HTML结构

22.jQuery遍历之next()方法

    ——>

  例子一:
    <p>p元素</p>
    <p>p元素</p>

 

效益:查找下几个弟兄元素

10.DOM节点删除之detach()和remove()差距

  ②.wrap( function ) :三个回调函数,重临用于包裹匹配成分的 HTML 内容或 jQuery 对象

注意事项:在利用的时候必要特别注意下

 

 

  ①起头地点不一致:.closest开头于当下成分 .parents开端于父成分
  ②遍历的靶子差别:.closest要找到钦定的对象,.parents遍历到文书档案根成分,closest向上查找,直到找到三个一双两好的就止住查找,parents一贯查找到根元素,并将十三分的成分加入集结
  ③结果分化:.closest重返的是带有零个或三个要素的jquery对象,parents重临的是含有零个或二个或多少个因素的jquery对象

  例子:
    <p>p元素</p>

  remove:移除节点
    ①无参数,移除自个儿整个节点以及该节点的中间的有着节点,包含节点上事件与数码
    ②有参数,移除筛选出的节点以及该节点的里边的全部节点,包含节点上事件与数量

  remove与empty一样,都以移除成分的不二等秘书诀,但是remove会将成分本身移除,同不常间也会移除成分内部的万事,包括绑定的风云及与该因素相关的jQuery数据。

26.jquery历遍之 each()

  ①insertBefore() 在对象成分前边插入几何中的每叁个成分
  ②insertAfter() 在指标成分后边插入几何中的各样相配的因素

3.DOM外界插入after()与before()

 

 

    $('div').wrapInner(function() {
      return '<p></p>';
    })

16.DOM包裹wrapInner()方法

    ——> 结果

  empty 看名就会知道意思,清空方法,可是与删除又有一点不一致等,因为它只移除了 钦赐成分中的全体子节点。

20.jQuery遍历之parents()方法

 

  假诺要将成分用别样因素包裹起来,也便是给它扩大三个父成分,针对如此的管理,JQuery提供了贰个wrap方法

 

    <div>
      <p>p元素</p>
      <p>p元素</p>
    </div>

    给p成分扩充三个div包裹

功效:查找左近的前一个弟兄元素

    使用后的职能与平素传送参数是一致,只但是能够把代码写在函数体内部,写法不一致而已

clone方法比较轻易便是克隆节点,不过供给注意,倘使节点有事件照旧数额等等的其余管理,我们供给通过clone(ture)传递二个布尔值ture用来钦命,那样不但只是克隆单纯的节点结构,还要把附带的风云与数码给一并克隆了说

  注意:
    当通过多少个取舍器字符串传递给.wrapInner() 函数,其参数应该是格式正确的 HTML,并且 HTML 标签应该是被科学关闭的。

21.jQuery遍历之closest()方法

17.jQuery遍历之children()方法

    ——> 以上的写法的结果如下,等同于warp的管理了

意义:查找左近的前三个小朋友成分

  轻便的计算正是:

粗看.parents()和.closest()是稍微相似的,皆现在上遍历祖辈元素,不过相互依旧有分别的,不然就从海市蜃楼的含义了

留心爱护:
  .find()和.children()方法是形似的
    1.children只查找第一流的子节点
    2.find物色范围包涵子节点的具有后代节点

 

  ①初叶地方不一样:.closest开始于当下成分 .parents初叶于父成分
  ②遍历的目的分歧:.closest要找到钦点的靶子,.parents遍历到文书档案根成分,closest向上查找,直到找到八个协作的就止住查找,parents一向查找到根成分,并将同盟的成分插足会集
  ③结出分裂:.closest再次回到的是满含零个或一个因素的jquery对象,parents重临的是富含零个或三个或两个成分的jquery对象

7.DOM节点删除之remove()的有参用法和无参用法

  .append()和.appendTo()二种形式效果雷同,重要的不及是语法——内容和目的的地方差异

  ①after() 在相配成分几何中的每一种成分后边插入参数所钦定的从头到尾的经过,作为其兄弟节点
  ②before() 据参数设定,在相称成分的先头插入内容

  例子二:
    $('p').wrapAll(function() {
      return '<div><div/>';
    })

clone方法比较轻松便是克隆节点,可是需求小心,假如节点有事件依然数额等等的别样管理,大家需求通过clone(ture)传递一个布尔值ture用来内定,那样不光只是克隆单纯的节点结构,还要把附带的事件与数量给一并克隆了说

1.jQuery节点成立与本性的拍卖

注意事项:在使用的时候须求非常注意下

13.DOM包裹wrap()方法

    ——> 给具备因素扩充二个p包裹

12.DOM替换replaceWith()和replaceAll()

 

jq笔记-dom篇-慕课网学习笔记

    ——>

3.DOM外部插入after()与before()

  注意:
    ①after向成分的背后增多html代码,假诺成分后边有成分了,那将前面包车型客车要素后移,然后将html代码插入
    ②before向成分的前面加多html代码,要是成分前边有成分了,那将前方的因素前移,然后将html代码插

  ①after() 在相配成分几何中的各类成分前面插入参数所钦命的剧情,作为其兄弟节点
  ②before() 据参数设定,在相称成分的前方插入内容

    ——>

  通过回调的艺术得以独立管理每三个因素

15.DOM包裹wrapAll()方法

  例子一:
    <div>p元素</div>
    <div>p元素</div>

 

  ①prepend() 向各类匹配的成分内部前置内容
  ②prependTop() 把具备相配的因素前置到另一个点名的因素几何中

19.jQuery遍历之parent()方法

  detach:移除节点
    ①移除的拍卖与remove一致
    ②与remove()差别的是,全部绑定的平地风波、附加的多少等都会保留下来
    ③诸如:$("p").detach()这一句会移除对象,仅仅是呈现效果未有了。不过内部存款和储蓄器中照旧存在的。当你append之后,又再次赶回了文书档案流中。就又显得出来了。

例:
  ①$("li.item-1").next().css("border","1px solid red")
  ② $('.item-2').next(':first').css('border', '1px solid blue')

个人以为,each更切合做“斑马线”之类的效果

    <div>
      <p>p元素</p>
      <p>p元素</p>
    </div>

closest()方法接受贰个相称元素的挑选器字符串

    <div>
      <p>p元素</p>
    </div>
    <div>
      <p>p元素</p>
    </div>

14.DOM包裹unwrap()方法

  通过回调的艺术能够独立管理每三个因素

  注意:
    当通过多个采用器字符串传递给.wrapInner() 函数,其参数应该是格式准确的 HTML,何况 HTML 标签应该是被精确关闭的。

个人认为,each更切合做“斑马线”之类的效劳

    —— append()前面是被插入的对象,后边是要在对象内插入的要素内容
    —— appendTo()前面是要插入的成分内容,而后边是被插入的对象

  ①.wrapAll( wrappingElement ):给集结中相配的因素扩充多个外面包裹HTML结构

例子:
<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>

  注意:
    .wrapAll()函数还行别的字符串或对象,能够传递给$()工厂函数来钦点三个DOM结构。这种布局能够嵌套多层,可是最内层只好有八个因素。全数相称元素将会被用作是贰个完整,在这几个欧洲经济共同体的外界用钦定的 HTML 结构举办李包裹装。

 

 

注意:
  1 .parents()和.parent()方法是形似的,但前面一个只是实行了贰个单级的DOM树查找
  2 $( "html" ).parent()方法重回贰个满含document的联谊,而$( "html" ).parents()重回贰个空集结。

效用:parents()方法能够搜索祖辈成分

效果与利益:也是祖先查找器,但更偏侧与祖先过滤查找器

  简单的下结论便是:

职能:查找下八个弟兄成分

  作用:删除父元素

4.DOM里边插入prepend()与prependTo()

1.jQuery节点创立与天性的拍卖

.children(selector) 方法是回到相配成分集合中各种成分的有所子成分(仅外甥辈,这里能够明白为正是阿爹-外甥的关联)

例子:
<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>

  ②remove方法
    该节点与该节点所包括的保有后代节点将同期被去除
    提供传递一个筛选的表明式,删除钦定合聚集的成分

 

parent()方法效果:查找父成分

    ——>

在li节点上找到祖 辈成分div, 这里能够用$("li").parents()方法

  例子二:

  jQuery提供了二个unwarp()方法 ,功能与wrap方法是相反的。将相配成分集结的父级元素删除,保留自身(和兄弟成分,固然存在)在原来的岗位

siblings()效率:快捷寻找钦定成分几何中每三个要素的同辈元素

11.DOM拷贝clone()

  detach:移除节点
    ①移除的拍卖与remove一致
    ②与remove()不一样的是,全部绑定的事件、附加的数额等都会保留下来
    ③诸如:$("p").detach()这一句会移除对象,仅仅是呈现效果未有了。可是内部存款和储蓄器中依然存在的。当您append之后,又重新归来了文书档案流中。就又呈现出来了。

  注意:
    .wrapAll()函数还行别的字符串或对象,能够传递给$()工厂函数来钦命一个DOM结构。这种协会可以嵌套多层,不过最内层只可以有三个成分。全体相称成分将会被看作是二个整机,在那几个欧洲经济共同体的外表用钦定的 HTML 结构进行李包裹装。

  ②.wrapAll( function ) :二个回调函数,重回用于包裹相配成分的 HTML 内容或 jQuery 对象

 

14.DOM包裹unwrap()方法

    $('p').wrap('<div></div>')

    ——> 给具有p成分扩大一个div包裹

24.jQuery遍历之siblings()

  ①.wrap( wrappingElement ):在集聚中极其的每一种成分周边包裹二个HTML结构

26.jquery历遍之 each()

  注意:
    .wrap()函数能够承受任何字符串或对象,可以传递给$()工厂函数来钦赐三个DOM结构。这种结构得以嵌套了好几层深,但相应只满含八个着力的要素。每一种相称的成分都会被这种布局包裹。该方式重临原始的成分集,以便之后选用链式方法。

7.DOM节点删除之remove()的有参用法和无参用法

  ②remove方法
    该节点与该节点所蕴藏的持有后代节点将同一时间被删除
    提供传递三个筛选的表明式,删除内定合集中的成分

  功能:删除父成分

.find()方法要留神的知识点:
  ①find是遍历当前成分会集中种种成分的儿孙。只要符合,不管是孙子辈,外甥辈都足以。
  ②与任何的树遍历方法不一致,选用器表明式对于 .find() 是必需的参数。若是我们要求实现对具备后代成分的取回,能够传递通配选用器 '*'。
  ③find只在后人中遍历,不包含自身。
  ④增选器 context 是由 .find() 方法完成的;由此,$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名叫item-ii的价签下的li标签)。

  注意:
    .wrap()函数能够承受任何字符串或对象,能够传递给$()工厂函数来内定一个DOM结构。这种布局得以嵌套了好几层深,但应当只含有多个主导的要素。各类相称的要素都会被这种布局包裹。该情势重回原始的元素集,以便之后接纳链式方法。

    ——> 结果 2个P成分都加多了一个父div的构造

siblings()功用:快捷搜索钦命成分几何中每三个因素的同辈成分

    最终的布局,p元素扩充了二个父div的结构

22.jQuery遍历之next()方法

代码借使是$("div").find("li"),此时,li与div是古代人关系,通过find方法就足以急速的搜寻到了。

25.add方法

  ①.replaceWith( newContent ):用提供的内容替换会集中装有相配的要素并且再次来到被去除成分的聚合
  ②.replaceAll( target ) :用集合的相配成分替换各个指标成分

    例子:

5.DOM外表插入insertAfter()与insertBefore()

.find()方法要专注的知识点:
  ①find是遍历当前因素集结中各样成分的后代。只要顺应,不管是孙子辈,孙子辈都能够。
  ②与其他的树遍历方法分歧,选拔器表达式对于 .find() 是必备的参数。假如我们要求完毕对具备后代成分的取回,能够传递通配采纳器 '*'。
  ③find只在后人中遍历,不包涵团结。
  ④增选器 context 是由 .find() 方法完结的;由此,$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名叫item-ii的价签下的li标签)。

  remove与empty同样,都以移除成分的办法,不过remove会将成分本人移除,相同的时候也会移除成分内部的成套,满含绑定的平地风波及与该因素相关的jQuery数据。

16.DOM包裹wrapInner()方法

  .append()和.appendTo()二种方式效果雷同,主要的不及是语法——内容和目的的地方不相同

    ——> 给持有p成分增加三个div包裹

    <div>
      <p>p元素</p>
    </div>
    <div>
      <p>p元素</p>
    </div>

17.jQuery遍历之children()方法

  jQuery提供了四个unwarp()方法 ,功用与wrap方法是倒转的。将相配成分集结的父级成分删除,保留自身(和兄弟成分,假若存在)在原先的职责

  总计dom内部插入的多个方法的分别
    ①append()向各类相称的因素内部追加内容
    ②prepend()向每一种相称的因素内部前置内容
    ③appendTo()把持有相称的因素追加到另一个钦赐元素的集合中
    ④prependTo()把具备相配的要素前置到另一个钦命的元素会集中

.children(selector) 方法是再次回到相称成分集结中种种元素的保有子成分(仅外孙子辈,这里可以知道为就是老爸-孙子的关系)

  ①.wrap( wrappingElement ):在聚积中相配的各类成分周围包裹贰个HTML结构

  例子:
    <div>
      <p>p元素</p>
    </div>

    <div>
      <p>p元素</p>
    </div>
    <div>
      <p>p元素</p>
    </div>

11.DOM拷贝clone()

例:
  ①$("li.item-1").next().css("border","1px solid red")
  ② $('.item-2').next(':first').css('border', '1px solid blue')

      ①$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')
      ②$('<a style="color:red">替换第二段的原委</a>').replaceAll('p:eq(1)')

应用上正是这么总结,使用克隆的大家须要卓殊知道的细节:

12.DOM替换replaceWith()和replaceAll()

  ②.wrapInner( function ) :允许大家用二个callback函数做参数,每一趟遭逢相称成分时,该函数被实践,重返一个DOM成分,jQuery对象,大概HTML片段,用来包住相称成分的开始和结果

  例子一:
    <div>p元素</div>
    <div>p元素</div>

2.DOM中间插入append()与appendTo()

选择上正是那般概括,使用克隆的大家须要特别知道的底细:

18.jQuery遍历之find()方法

18.jQuery遍历之find()方法

.clone()方法深度 复制全体相称的要素集合,包含全体相称成分、相称成分的手下人成分、文字节点。

.clone()方法深度 复制全体匹配的因素集合,包罗富有相配成分、相配成分的部属成分、文字节点。

 

    $('p').wrap('<div></div>')

  ①.replaceWith( newContent ):用提供的从头到尾的经过替换集合中有着相称的因素何况重返被删除成分的聚焦
  ②.replaceAll( target ) :用集结的匹配成分替换每种目的元素

    $('p').unwarp();

因为是父元素,这一个艺术只会提升查找一流

24.jQuery遍历之siblings()

 

    <div>
      <p>p元素</p>
    </div>

代码假若是$("div").find("li"),此时,li与div是祖上关系,通过find方法就能够高速的查究到了。

功用:也是祖先查找器,但更偏侧与祖先过滤查找器

23.jQuery遍历之prev()方法

  例子:
    $('p').wrap(function() {
      return '<div></div>'; //与第一连串似,只是写法分歧等
    })

    <div>
      <p>p元素</p>
    </div>

    例子:

意义:parents()方法能够查找祖辈成分

8.DOM节点删除之empty和remove差异

  ①append() 向各样相配的因素内部追加内容
  ②appendTo() 把具备相称的因素追加到另几个

  总括dom内部插入的七个措施的界别
    ①append()向各类相称的因素内部追加内容
    ②prepend()向各类相称的因素内部前置内容
    ③appendTo()把具有相称的因素追加到另二个点名成分的集合中
    ④prependTo()把全体相配的要素前置到另二个点名的要素会集中

成立成分节点:
  1.$("<div></div>")
始建为本节点:
  1.$("<div>作者是文本节点</div>")
制造为属性节点:
  1.$("<div id='test' class='aaron'>小编是文本节点</div>")
  2.$("<div class='right'><div class='aaron'>动态成立DIV成分节点</div></div>")

    —— append()前边是被插入的靶子,前面是要在对象内插入的因素内容
    —— appendTo()前边是要插入的因素内容,而前边是被插入的指标

    最终的构造,p成分增添了三个父div的协会

  假诺要将成分用别的因素包裹起来,也正是给它扩展叁个父成分,针对如此的管理,JQuery提供了三个wrap方法

    <p>p元素</p>

  ①clone()方法时,在将它插入到文书档案从前,我们得以修改克隆后的因素恐怕成分内容,如左边代码小编$(this).clone().css('color','red') 增添了八个颜料
  ②透过传递true,将全数绑定在原始成分上的事件管理函数复制到克隆元素上
  ③clone()方法是jQuery扩张的,只能管理通过jQuery绑定的风云与数据
  ④成分数据(data)内对象和数组不会被复制,将继续被克隆成分和原始成分分享。深复制的保有数据,供给手动复制每贰个

  ②.wrapAll( function ) :三个回调函数,再次回到用于包裹相配成分的 HTML 内容或 jQuery 对象

  例子:
    <p>p元素</p>

    使用后的功能与平昔传送参数是完全一样,只可是能够把代码写在函数体内部,写法差别而已

瞩目重点:
  .find()和.children()方法是形似的
    1.children只查找第一级的子节点
    2.find搜索范围富含子节点的有着后代节点

  例子一:
    <p>p元素</p>
    <p>p元素</p>

  总结:
    ①replaceAll()和.replaceWith()成效周围,主假使目的和源的地点分别
    ②.replaceWith()与.replaceAll() 方法会删除与节点相关联的享有数据和事件管理程序
    ③.replaceWith()方法,和大比很多其余jQuery方法一致,重临jQuery对象,所以能够和别的格局链接使用
    ④.replaceWith()方法再次来到的jQuery对象引用的是替换前的节点,而不是透过replaceWith/replaceAll方法替换后的节点

 

从要素自个儿早先,在DOM 树上逐级向上司成分相称,并赶回发轫相称的古时候的人成分

    ——> 给全部因素扩张一个p包裹

2.DOM内部插入append()与appendTo()

 

    <div>
      <p>p元素</p>
    </div>
    <div>
      <p>p元素</p>
    </div>

    $('p').unwarp();

  ①empty方法
    严苛地讲,empty()方法并非去除节点,而是清空节点,它能清空元素中的全数后代节点
    empty无法去除本身作者这么些节点

    <div>
      <p>p元素</p>
    </div>
    <div>
      <p>p元素</p>
    </div>

注意:
  1 .parents()和.parent()方法是相似的,但前者只是实行了一个单级的DOM树查找
  2 $( "html" ).parent()方法重临二个满含document的集纳,而$( "html" ).parents()重回三个空集合。

8.DOM节点删除之empty和remove分裂

    ——> 结果

5.DOM表面插入insertAfter()与insertBefore()

20.jQuery遍历之parents()方法

    ——>

    ——> 以上的写法的结果如下,等同于warp的拍卖了

    <div>
      <p>p元素</p>
    </div>
    <div>
      <p>p元素</p>
    </div>

本文由4887王中王鉄算盘奖结果发布于4887王中王鉄算盘奖结果,转载请注明出处:jq学习笔记

关键词:

上一篇:HTML5和以前HTML4的区别整理

下一篇:没有了

频道精选

最火资讯