jQuery基础教程学习笔记(一)DOM操作(1)

写代码,没案例,简直就是耍流氓,为了方便大家学习交流,每个知识点都会配上对应的案例!文章最下边有福利哟....

jQuery节点创建与属性的处理

创建节点:$("

")

创建为本节点:$("

我是文本节点

")

创建为属性节点:$("

我是文本节点

")

例子:var div = $("

动态创建DIV元素节点

")

$body.append(div)

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

append(content)向每个匹配的元素内部追加内容,这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似。

appendTo(content)把所有匹配的元素追加到另一个、指定的元素集合中,实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

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

.after(content) 在匹配元素集合中的每个元素后面插入指定内容,作为兄弟节点

.before(content) 在匹配的元素前面插入内容

1、before与after都是用来对相对选中元素外部增加相邻的兄弟节点

2、2个方法都是都可以接收HTML字符串,DOM 元素,元素数组,或者jQuery对象,用来插入到集合中每

个匹配元素的前面或者后面

3、2个方法都支持多个参数传递after(div1,div2,....)

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

.prepend() 向每个匹配元素的内部前置内容 和append()类型

.prependTo() 把所有匹配的元素前置到另一个指定的元素集合中

四个区别:

append()向每个匹配的元素内部追加内容

prepend()向每个匹配的元素内部前置内容

appendTo()把所有匹配的元素追加到另一个指定元素的集合中

prependTo()把所有匹配的元素前置到另一个指定的元素集合中

DOM外部插入insertAfter()与insertBefore()

insertBefore() 在目标元素前面插入集合中每个匹配的元素(不支持多参数)

insertAfter() 在目标元素后面插入集合中每个匹配的元素(不支持多参数)

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于

before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将

被放在参数里元素的前面

例:$(".test1").before('

before,在匹配元素之前增加

')

$('

测试insertBefore方法增加

').insertBefore($(".test1"))

DOM节点删除之empty()

empty()这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本

例:$('.hello').empty() //删除.hello里边的所有内容

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

remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。

例:$('.hello').remove()

$("p").remove(":contains('3')")//找到包含3文本的节点删除

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

detach()让一个web元素托管。即从当前页面中移除该元素,但保留这个元素的内存模型对象。

例: $("p:first").detach()

DOM拷贝clone()

.clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。

.clone(ture) 表示不仅仅克隆节点,还把附带的数据和事件一并克隆了!

1、clone()方法时,在将它插入到文档之前,我们可以修改克隆后的元素或者元素内容,

$(this).clone().css('color','red') 表示增加了一个颜色

2、通过传递true,将所有绑定在原始元素上的事件处理函数复制到克隆元素上

3、clone()方法是jQuery扩展的,只能处理通过jQuery绑定的事件与数据

4、元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享。深复制的所有数据,需要手动复制每一个

例: $(".aaron1").on('click', function() {

$(".left").append( $(this).clone().css('color','red') )

})//只克隆节点不克隆事件

DOM替换replaceWith()和replaceAll()

.replaceWith( newContent ):用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

例:$("p:eq(1)").replaceWith('替换第二段的内容')

.replaceAll( target ) :用集合的匹配元素替换每个目标元素 目标和源和replaceWith相反

例:$('替换第二段的内容').replaceAll('p:eq(1)')

DOM包裹wrap()方法

.wrap( wrappingElement ):在集合中匹配的每个元素周围包裹一个HTML结构,即增加父元素

p元素

增加:$('p').wrap('

') 变成了

p元素

.wrap( function ) :一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

例:$('p').wrap(function() {

return '

'; //与第一种类似,只是写法不一样

})

DOM包裹unwrap()方法

unwarp()方法 ,作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。

例:$('p').unwarp(); //删除p的父节点

DOM包裹wrapAll()方法

.wrapAll( wrappingElement ):给集合中匹配的元素增加一个外面包裹HTML结构

.wrapAll( function ) :一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象通过回调的方式可以单独处理每一个元素

例:$('p').wrapAll('

') 结果:

p元素

p元素

//给所有的p增加父元素,增加一个,不是每个单独增加父元素

$('p').wrapAll(function() {

return '

';

})该方法返回结果是:

p元素

p元素

什么情况? 两个例子中的结果为什么不一样呢?小伙伴们自己查查咋回事呢?

注意:.wrapAll()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种

结构可以嵌套多层,但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体,在这个整体的外部用指定的 HTML 结构进行包裹。

DOM包裹wrapInner()方法

.wrapInner( wrappingElement ):给集合中匹配的元素的内部,增加包裹的HTML结构

例:

p元素

p元素

执行:$('div').wrapInner('')变成了:

p元素

p元素

.wrapInner( function ) :允许我们用一个callback函数做参数,每次遇到匹配元素时,该函数被执行,返回一个DOM元素,jQuery对象,或者HTML片段,用来包住匹配元素的内容

例:$('div').wrapInner(function() {

return '';

})

学累了吧,来点实惠的?

下面推荐一下我学习前端编程的技术交流群,大家如果不知道怎么学习HTML5的可以来我的前端群250777811,源码已上传群文件,不管你是小白还是大牛,小编都欢迎,群不定期分享干货,欢迎初学和进阶中的小伙伴

1+1=?

不要往下看了,下面真的没内容了

.......

.......

哈哈 ,适可而止吧

前端javascript学习群4994115298

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • 写代码,没案例,简直就是耍流氓,为了方便大家学习交流,每个知识点都会配上对应的案例!文章最下边有福利哟.... j...
    DarkSpy13阅读 145评论 0 0
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,352评论 0 44
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 800评论 0 8
  • 1:jQuery节点创建与属性的处理 创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构...
    码农小杨阅读 594评论 0 1
  • 忘了是什么时候知道七堇年是一个黄昏收集者了,好似是在她的公众号里。忘了,罢了,总之我是因为她开始记录黄昏。 我...
    阿央_阅读 1,028评论 0 0